
## UI Lab とは

UI Lab は、デザインとエンジニアリングのワークにフォーカスし、UI を通じて設計手法やデザイン・フロントエンドエンジニアリングに関するスキルや考え方を学ぶ、主に関西で活動する有志のコミュニティです。先日、[フジタジュンコさんによる第1回目のイベント](http://uilab201610.peatix.com/)が終了し、[次回は長谷川 恭久さんによる第2回目](http://uilab201611.peatix.com/)の募集を開始したところです。

UI Lab では設計・デザインに必要な概念やプロセスを学びながら、実践を目的としたワークショップを行います。UI を考える・つくることで、UX デザインはもちろん、現場で実践するための周辺の諸概念やプロセスを習得することがネライです。

## なぜ UX ではなく UI のコミュニティなのか

関西地方ではデザインやエンジニアリングのコミュニティは増えたものの、それでもツール系を除く UX や UI の勉強会は、関東に比べて非常に少ないです。もちろん市場の大きさや企業数により、UI デザイナーという専門職が少ないのは事実ですが、関西をはじめ地方で活躍している UI デザインに関わる方は、web デザイナーやエンジニアがその役割を兼務していることが多いようです。そして UI を学ぶとすれば、やはりネットの情報や読本といった独学によるものが中心です。

以前、UX OSAKA という UX のコミュニティを立ち上げましたが、UX も各地方コミュニティとして確立してきたこともあり発展的に解消。それらの経験を踏まえ、まずは UX の概念や手法より、UI にフォーカスして設計手法や気づきを得ることの方が、ユーザーへの理解の手助けになったり、周辺の知識や概念の理解も深まるのではないかと思い立ちました。UI は取り上げると誰もが使いやすい・分かりやすいと気付くことのできる要素のひとつです。ただし、ユーザビリティをはじめ、ライティングや情報設計、認知心理学、インタラクションなどの知見も必要ですし、ユーザー体験を構成する一部の媒体でもあります。

<div class="image">
<img alt="ユーザー体験の図解" src="/images/20161102-1.png"/>
<div class="title">第1回講師 フジタジュンコさんのブログより引用</div>
</div>

UI といっても Sketch のおすすめプラグインやコンポーネントの作り方といった Tips ではありませんし、ペルソナ、ユーザーインタビューが大事、ということではなく、人と人をつなぐ「インタフェース」を起点とし周辺の知識を深めていくことを UI Lab ではやっていきたいと思います。

## 講師はなるべく現場の方

UI Lab では皆さんと課題を「対話」しながら一緒に考えられるよう、クライアントワークなど現場で活動されている方が講師であることも特徴です。関西は懇親会からが本番！とも言われるくらい懇親会の参加率が高いのですが、懇親会ではなくイベント中にもビアバッシュなどで講師と対話しやすい場を設けています。限られた時間で行うワークショップで、もう少し聞きたかったことや実際はどうなのかを知るための工夫のひとつです。

<div class="image">
<img alt="ディスカッションとグループごとのレビューの様子" src="/images/20161102-2.jpg"/>
<div class="title">ディスカッションでは各グループの考えや気づきを共有</div>
</div>

## UI Lab で会いましょう

UI Lab は、これから UI デザイナーとしても活躍の場を広めたい、エンジニアやディレクターで UI や設計の知識を深めたい、UI をなんとかしたいサービスをお持ちの経営層など、いろんな方にぜひ参加していただきたいです。始まったばかりですが、UI を越えてユーザーのことを一緒に考えていける良いコミュニティになればと願っています。

次回 UI Lab vol.2 は 2016年11月26日(土) 13:30〜サイボウズ大阪オフィス セミナールーム 梅田阪急ビルオフィスタワー 35階にて、[イベントの申し込みはこちらから](http://uilab201611.peatix.com/)（11/6 までの早割チケットあり）

関西で活動するデザインのコミュニティ「UI Lab」を立ち上げたきっかけや背景について。

UI 設計や考え方を学ぶ UI Lab


[WCAN mini 2015 Vol.1 「UXデザインプロセスを活用したコンテンツの評価方法」（講師: 長谷川 恭久さん）](http://wcan.jp/news/report-mini2015_1.html)

このセミナーでは web サイトにおけるコンテンツの実状と把握、その評価やより良いコンテンツを提案するための UX デザインの手法として、レクチャーとワークショップを交えて学びます。

良いコンテンツを設計し提供するためには、ユーザーを理解すること、そして既存のコンテンツを評価すること。これらは制作プロセスでは当たり前なことでも「できていない現実」に改めて気付かされます。いくつか自分なりの解釈も含めて、特に印象的だった内容をハイライトとしてレポートします。

## 良いコンテンツとは？

「良い」は誰が決めるのでしょうか。利用者、ユーザーです。コンテンツ提供者は、ユーザーになり代わって良いコンテンツを考えなければなりません。エクササイズとして、とある web サイトをチェックしましたが、大手ですら利用者が求めているコンテンツを適切に提供できていないケースがありました。コンテンツは十分な量があるのに、重複したり表記が分かりにくく、どこに行っても辿り着くことができなかったり。ユーザーが求めているものと、提供者が提供したいものは本当に一致しているのかを疑い、その事実をまず認知することから始まります。

## 「良い」を決めるためにすべきこと

ユーザーは膨大な情報の中、わずかな時間で良いコンテンツを得ることを望んでいます。ユーザーには抱えている課題があり、web サイトを訪れます。それが何かを見極め、適切なタイミングでコンテンツを理解してもらい、課題を達成させることが web サイトの存在意義です。コンテンツを設計する時、次のようなシチュエーションになっていないでしょうか。

- 好みやトレンド「最近は青より赤を使うサービスが増えているので」
- 偉い人の意向「オーナーはフラットデザインが良いと言っているので」
- デザイナーの個人プレー「デザイン経験者である彼女に任せているので」

これではいつまでも「良い」コンテンツから遠いままです。

## UX デザイン手法でコンテンツを考える

### ペルソナ

私たちがユーザーに成り代わるために、その人物像を具現化し、設定するのが「ペルソナ」です。これも恰好のターゲットに仕立て、想像だけで都合良く設定していないでしょうか。そのために Google Analytics などで利用者のデータを整理し、なぜこのペルソナを設定したのか「理由」を説明できることが重要です。データが手元になければ、まずそれを測定するべきです。

<div class="image">
<img alt="ペルソナ" src="/images/20150203-1.png"/>
<div class="title">ペルソナの例</div>
</div>

### ジャーニーマップ

Web マーケティングに携わる方なら一度は聞いたことがあるかと思います。ジャーニーマップには次の要素が含まれます。

- サービスの利用前/利用中/後の「時系列」で書かれている
- ○○した、というペルソナの行動に基づいた記述がある
- サービスに接触した記述がある
- 行動と接触がそのペルソナにどう影響したか、またその時の感情を評価する（※サービスはモノの場合もあります）

ジャーニーマップは検索するとたくさんのパターンが見つかります。[Google による検索結果](https://www.google.co.jp/search?q=journeymap&biw=1685&bih=955&source=lnms&tbm=isch&sa=X&ei=0XHQVN3SFePPmwX6n4GAAw&ved=0CAgQ_AUoAw)をご覧のとおり、壮大なマップほど魅力的に見えますが、凝って作るほど「仕上げた」達成感があるため、そこで思考停止してしまう場合があります。あくまでもユーザーを理解するツールであることを忘れてはなりません。

<div class="image">
<img alt="ジャーニーマップ" src="/images/20150203-2.png"/>
<div class="title">ジャーニーマップの例</div>
</div>

## 改善のためのコンテンツ評価

ペルソナとジャーニーマップによる「ユーザーの理解」が把握・共有できれば、次にやることは現存のコンテンツの棚卸しです。サイトクローラーのようなツールを使用することで、サイトのページ一覧をレポーティングできるものがあります。レポートはスプレッドシートにまとめ、Google Analytics によるページビューや滞在時間などのデータを付加することで定量的な評価ができます。一方でジャーニーマップをもとに、コンテンツの理解のしやすさ、見つけられやすさといった定性的な要素でも評価し、改善策を考えます。ここでは定量的・定性的の両方の評価がポイントとなります。さらに web サイトの運営をどうするかで実現性を考慮した改善策にしていきます。

<div class="image">
<img alt="改善のフレームワーク" src="/images/20150203-3.png"/>
<div class="title">ジャーニーマップと優先度で分類された改善案のフレームワーク</div>
</div>

## 「理解」と「改善」のための UX デザイン

様々な web サイトを見ても、コンテンツはそこに確かに存在しています。制作して時間が経過していれば、それは多すぎるくらいかもしれません。現在の制作環境は、Google Analytics やツールも充実し、競合の多くの情報がインターネット上にあり、周囲との比較もしやすい状況です。だからこそ、まずすべきことは利用者・ユーザーを理解すること、そして量と質による適切な評価で地道にコンテンツを考えることです。UX デザインの手法はそれに役立ちます。セミナー終盤での長谷川さんの言葉が印象的です。

> 「今までは制作に多くの時間を費やしてきました。でも今は技術やツールの進化により制作時間を短縮できるようになりつつあります。つまり、利用者や配信者の理解と制作後の改善に多くの時間を割り当てられるようになったということです」

そのプロセスこそが UX デザインなのではないかと思います。

## ワークショップのススメ

このような UX デザインの手法を取り入れたワークショップは、手と頭を両方使う絶好の機会です。会議や PC の前に座ってデザインしているだけでは、ユーザー像や良いコンテンツもなかなか見えてきませんし、ネットに散在する「手法」を見よう見真似で試すだけでは、フレームワークに沿って正しく考えられているかどうか不安です。実際、UX デザインの手法やツールはクライアントに見合うよう、アレンジが必要なケースが多いです。柔軟な思考を身につけるためにも、ワークショップに参加し慣れてみるのが一番だと思っています。デザイナーやディレクターに限らず、できればクライアントと一緒になって、ワークショップに参加されてもよいかと思います。

長谷川 恭久さんのワークショップは、レクチャーの分かりやすさも好評で、手法の形にこだわらず、参加者のレベルに合わせた成果物のアドバイスもして下さるので、初めての方にもおすすめです。機会があればぜひ参加してみてください。

WCAN mini 2015「UX デザインプロセスを活用したコンテンツの評価方法」と題されたイベントの参加レポート。講師は長谷川 恭久さん。ペルソナ、ジャーニーマップの UX デザインの基本的な手法からコンテンツ評価・改善に至るまでの内容です。

WCAN「UX デザインで考えるコンテンツ設計」


[リクリセミナー第11回「ユーザーのコンテクストから考える ウェブサイトの情報設計」](http://recreators.doorkeeper.jp/events/2829)

イベント講師は大手通信会社にて情報設計を業務としてされている、藤田 淳子さん。1時間の講義と5時間弱の実践ワークショップという大変充実した内容でした。

## 情報設計 IA について

講義対象は web サイトの設計ということで「IA（インフォメーションアーキテクチャ）」のもと、情報設計の概念や、その手法を交えた内容がメインでした。web 系のセミナーはよく開催されますが IA に関する内容のセミナーは実に少ないです。私も同様、講師の藤田さんも「インフォメーションアーキテクト」という肩書きでいらっしゃいますが、IA を職としている方も少ないように思います。web やアプリだけでなく「伝えるメディア」には  IA は必須だと考えています。

## なぜ「IA」が必須なのか

この先も情報過多は避けられません。私が初めて IA に触れたのは1997年、インターネット黎明期でした。でもその頃から、IA 界隈では今の情報過多を予測しており、今後は IA の概念は必須になる論文が多くありました。情報過多のままでは、情報の誤認や迷いが生じ、IT にも不慣れのままになってしまいがち。IAによって「探しやすく」「接しやすく」し、情報が示す目的にユーザーを導くことが必要です。ただし、これはあくまでも情報を「構造化」しただけに留まります。

## モノからコトへ

家電メーカーに勤めていた私は実感していますが、昔は出せば売れる「モノ」の時代でした。ニーズに合ったモノがそもそも無かったからです。でも今はモノで溢れ返っています。そうなれば人はモノでは満足できなくなり、興味や関心は「モノ」から得られる体験「コト」に向くようになります。この体験が充実しているかどうかで、人はそのモノを取り巻く時間に満足するかしないかが決まる、今はそんな時代になりました。UX（ユーザーエクスペリエンス）と言われるようになったのもこういう背景があるのでしょう。

## Web サイトは通過点

デバイスの多様化により、人が情報を得られる手段が増え続けています。PC だけだったのが、携帯電話、スマートフォン、タブレット、Google GLASS のようなデバイスまでもが登場する。そうなれば web サイトはこれらの通過点にすぎず、デバイスに合わせて情報を構造化するだけでは人を容易に「体験」へ導けなくなってしまいます。では何を考えて設計していかなければならないのか？ということです。

## コンテクストとは

日本語では文脈と訳されますが、この言葉と意味はとても難しいです。講義の中では「ユーザーの属性・状態・状況で、どのようにしてユーザーが情報に接するか」ということでした。今回の講義の最重要テーマ「コンテクスト」です。私がコンテクストを説明するときはこういう例え話をしています。

人が何か飲みたいと思ってドリンクを買う時、真夏にスポーツで楽しんだ後であれば乾いた喉を潤し水分を補給する、真冬であれば体を温めるためにホットドリンクを飲む。同じ「飲む」という体験であっても、その場に置かれた人の状況、時期や時間が違えば何を飲むか、そして飲んだときの体験や反応も変わるということです。

これはごく当然のことなのですが、ドリンクを買う行為を web サイトを閲覧すると置き換えるとどうでしょうか。ユーザーがアクセスする時間や時期に変わらず、web サイトは変わらずずっとそこにあります。特定の情報を掲載している web サイトであれば、この情報を欲するユーザーのコンテクストまでを考えて、コンテンツを練り、情報を設計する必要があります。

## コンテクストを考える上で重要な「時間軸・そのときの感情」

講義では、ホスティングサービスの web サイトコンテンツの設計が例にありました。コンテクストを考える時、中心になるのは「時間軸」です。まずホスティングサービスについて関心のあるユーザーの時間軸を定義します。そしてホスティングを必要とする「課題」が起点に始まり、サービスの他社比較をし契約、サービス開始後の運用、というのが時間軸です。

次に考えるのはそのときの感情はどうか？ユーザーはどういう状態にいるのか？という点です。色々な他社のサービスとを並べて比較をしたいのに、ホスティングサービスの概要が何ページにも渡っていれば、そのサービスを諦めてしまうかもしれません。ユーザーがゴールまで至らないということは、この時間軸と感情に沿っていないコンテンツがある、もしくはコンテンツが無く、そこで落ちている可能性が高いといえます。

## 実際のワークフロー

最後にこれらを踏まえた web サイトのコンテンツを考えるワークフローです。

1. 課題は何なのか
2. ターゲットは誰なのか
3. それに必要なコンテンツは何か
4. それらをカテゴライズする

ここまでが構造化です。このひとつひとつに何のために？誰がどういう感情か？そして次に何をするのか？を考えることが重要です。そして、いわゆる画面の設計は次から登場します。

5. ワイヤー・画面設計
6. 評価
7. ビジュアルデザイン

講義中でも言われてましたが、企画中に「ちょっとワイヤー起こしてくれない？」といきなりオーダーされても「できません」というのが自然な答えになるでしょう。

## まとめ

この後はグループごとにワークショップとなりました。ごく一部のステップでしたが、web サイトの企画・初回ディレクション、こういうフェーズについては「IA」はやはり基礎工事であり、画面の前にしっかり設計すべきものがまだまだ多くあることを再認識できます。

社内サイトの構築が例にありましたが、会社では色々な部門があり、それぞれの立場によって意見もあると思います。クライアントワークでも色々な要望が上がると思います。でもそれだけを web ページに詰め込んだり、考えずにワイヤーフレームを起こすのは、もうこれからの web サイト制作としてはほぼ意味を持たない、ユーザーに価値をもたらさないものを作ることにもなりかねません。

1997年、学生時代に「IA」をかじったものの、しばらく見なく聞かなくなった分野だなと感じていましたが、UX という概念をはじめ、IA が進化した姿になり、本当に必要な時代がようやくやってきたのだと思えるようになった、そんなセミナーでした。

リクリセミナー第11回「ユーザーのコンテクストから考えるウェブサイトの情報設計」の参加レポートです。講師は藤田 淳子さん。情報アーキテクチャとコンテクストの視点からウェブサイトの設計を考えます。

リクリ「ユーザーのコンテクストから考えるウェブサイトの情報設計」


## 「俺聞け」とは

先日、[msng](https://twitter.com/msng) 氏主催のイベントで、人前で初めて UX のことを話しました。

「俺聞け」とは、ウェブまわりでいま気になっていることを発表する会「俺の話を聞け！（通称「俺聞け」）というもので、今回で4回目です。

[頭ん中【2月16日(土) 大阪開催】ウェブまわりでいま気になっていることを発表する会『俺聞け4』を開催します](http://www.msng.info/archives/2012/12/orekike4.php)

自分は会社員なので、あまり外の人との交流がなかったのですが、前回の「俺聞け」に参加したのをきっかけに、多くの人と知り合うことができました。仕事を変えようかなと思った時期とちょうど重なったこともあり、その後の生活がガラガラっと一変したのもこのイベントがきっかけだったのかもしれません。

## 話したこと

これから UX と UI というキーワードで仕事をしていくにあたり、この言葉の整理もしたかった「はじめての UX と UI」というテーマを話すことにしました。スライドのダイジェスト版を文末に貼ってます。

3回目に引き続き、今回もプレゼンターの皆さんがとてもユニーク。シェル画面でプレゼンしたり、フリーランスの自称美人女子プログラマーの貯金が尽きた話や、データロストに備えた防災訓練の話、日本酒や FF の魔法メテオの作り方も。

そんな中、UX と UI について大真面目に話してしまいましたが、プレゼン中もツイートしてくれる聴衆の皆さんに励まされ、なんだかとっても温かいイベントだなと思いました。

何よりもエンターテイメント感が満載の「俺聞け」で話すことができてよかったです。今後また話せる機会があったら、もっと気楽に話してみたいと思います。

## 「俺聞け」は「聞くより話す」がオススメ

「俺聞け」の参加者は web エンジニアの方が多いですが「SNS を使った ◯◯」といったマーケター視点の方も参加されています。とにかく web にかんすることであれば、エンジニアやデザイナーでなくても誰でも気軽に、そしてたくさんの話が聞けるのがこのイベントの面白さです。もちろんその後の懇親会もお楽しみのひとつ。

勉強会でもそうですが、私はいつも聞く「インプット」の量にたいして、話す「アウトプット」は自分の考えを整理できるとても大事なことだと思っています。

前で話すとなると「何か知識やテーマを持ってないといけないんじゃないか？」と思いがちですが「俺、今こんなこと思ってるんだけどどうかな？」みたいに気軽に話せるイベントは「俺聞け」が一番だと思います。

あまり前で話す機会がない方は、ぜひ話す側で参加することをオススメします。「俺の話を聞け！」の名のとおり、俺が中心でいい。

主催の msng 氏はこう言います。

「自分が当たり前に思ってることは、他人にとって驚きだったりする」

「俺聞け」で会いましょう。

<iframe src="//www.slideshare.net/slideshow/embed_code/key/y1x4OqBMyQ8csS" width="595" height="485" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/ykazuki/uxui-16578959" title="はじめてのUXとUIの話" target="_blank">はじめてのUXとUIの話</a> </strong> from <strong><a href="https://www.slideshare.net/ykazuki" target="_blank">Kazuki Yamashita</a></strong> </div>


はじめて人前で話した「UX と UI の話」。会社員から独立直後にプレゼンをした原点とも言える機会でした。

イベント

UI 設計や考え方を学ぶ UI Lab

WCAN「UX デザインで考えるコンテンツ設計」

リクリ「ユーザーのコンテクストから考えるウェブサイトの情報設計」

「俺聞け」で話した UX のこと