デザイナー 山下一樹（ヤマシタカズキ）がリスナーの皆さんからお寄せ頂いたテーマをもとにお話します。今回のテーマは「UX デザインのこと」後編とし、UX デザイナーへの転身を考えられておられるリスナーさんからのメッセージにお応えします。

UX デザインのこと 後編

UX デザインのこと 前編


この記事は[「#UX Tokyo Advent Calendar 2015」](http://www.adventar.org/calendars/1052)第22日目の記事です。

<iframe src="//www.slideshare.net/slideshow/embed_code/key/dV2yCp9MnRLCCx" 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/20140326-uiux-digest" title="UIデザインとUXの超基礎「UI Design & UX for ENGINEER」" target="_blank">UIデザインとUXの超基礎「UI Design & UX for ENGINEER」</a> </strong> from <strong><a href="https://www.slideshare.net/ykazuki" target="_blank">Kazuki Yamashita</a></strong> </div>

2年前に公開したこのスライドは、とある勉強会のご依頼があり、UI と UX の違いや基礎を理解するためにと作成したものです。公開からだいぶ経っていますが、何かのきっかけでシェアされたのか、今でも多くの方に見ていただき、もう少しちゃんと練って作ればよかったと少し後悔もしています。

## UX と UI をどう見るか

このスライドのどこに支持を得たのか、何人か読んだ方に訪ねてみたところ、次の一枚で説明した UI と UX の違いが分かりやすいとのことでした。UX という言葉が日本で使われるようになる頃から「UI/UX 言うな（併記するな）」という方もいらっしゃいますし、このテーマもそれを受けてのスライドでした。ここ最近では、UX の概念がそもそも広いため、UX という言葉が使われるシーンや話し手によってその解釈は変わってくると言われています。

<div class="image">
<img alt="スライドより UX と UI の違い" src="/images/20151522-1.jpg"/>
</div>

かなり大雑把な説明ですが、このストーリーでは「目に見えて分からない」ことは UI とし「感情的な体験」を UX としています。このスライドでは UI と UX の違いの説明だけで終わっているのですが、最近ではこの続きをお話しています。

## UI の改善は UX 改善につながらない？

アプリや web の世界において UI が与える UX の影響は少なからずありますが「UI を改善すれば UX が改善される」とは決してならないということです。上の例で「買い方を分かりやすく」「いくらで販売しているか」という UI の部分を改良したところで、UX は改善されるのでしょうか。

<div class="image">
<img alt="スライドよりユーザーのコンテキスト" src="/images/20151522-2.jpg"/>
</div>

言うまでもなく、最悪な UX を招いたのは「水がぬるかった」という事実・コトです。その人が結局求めていたものは「冷えた水」でした。UI という側面での改善は、冷えていないことを表示すべきだったかもしれませんし、常に庫内のものが急速に冷えるしくみを取り入れるべきだったかもしれません。このように考える視点を「その人が結局欲しかった事実・コト」にフォーカスすると、改善のアプローチが大きく変わります。

## コンテキストとは

サービスの利用体験を改善する UX デザインには、コンテキストがすべてだと言っても過言ではないと思っています。UX におけるコンテキストとは「そのときの状況・経緯」です。上の例でのユーザーのコンテキストは「暑い日、のどが渇いた」という部分です。UX デザインの起源である「デザイン思考」のプロセスでも、ユーザーの状況や経緯を把握する「ユーザー理解」のために時間を多く使っていることが分かります。

<div class="image">
<img alt="デザイン思考のプロセス" src="/images/20151522-3.png"/>
<div class="title">デザイン思考のプロセスは「ユーザー理解」が起点</div>
</div>

コンテキストを考えるということは、日常のコミュニケーションでも重要な「相手への共感」につながる身近なものです。ランチでカレーを食べた人へ、ディナーにカレーを振る舞うことは通常しないはずです。コンテキストを考えることは難しいことではありません。

## サービスの本質は共感から

自動販売機の例では、水を買いに来たユーザーと冷えた水までの間に様々なサービスがあります。自動販売機を設置する事業者、自動販売機そのもののマシンメーカー、商品を提供する飲料メーカー。身近にある自動販売機にも、これだけの事業者が介在しています。接点は多いほど「その人が結局欲しかった事実・コト」を考えることが難しくなります。販売機の設計者は、正しく商品が管理・販売される内部構造や、マシンをスリムにするための設計に熱心だったのかもしれません。飲料メーカーは、売れるための味やパッケージデザインを追及しているでしょう。自動販売機では人生を揺るがすような利用体験は生まれにくいかもしれませんが、私たちが提供するサービスや商品によって、人々の利用体験を向上させるということは今の時代に合った考え方だと思います。一般的に、提供側は提供する目の前のものを良くしようとします。間違ったことではありませんが、UX という視点で見るときにはユーザーがゴールに向かうまでの流れをすべて把握し、サービスの本質を考えることが重要です。そのための一つの方法が、コンテキストを考える、つまりユーザーに共感することです。

UX に関する関心度の高さは年々増しています。一方で、UX デザインといえばペルソナだったり、ジャーニーマップ、A/Bテスト という「手法」がメインに取り上げられることも多くなりました。すぐに「手法」に取りかかる前に、ユーザーの理解や、共感することから始めてみてはいかがでしょうか。

コンテキストと共感から始める UX デザイン


[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 デザインで考えるコンテンツ設計」


## 「俺聞け」とは

先日、[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 の話」。会社員から独立直後にプレゼンをした原点とも言える機会でした。

UX

UX デザインのこと後編

UX デザインのこと前編

コンテキストと共感から始める UX デザイン

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

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

UX

UX デザインのこと 後編

UX デザインのこと 前編

コンテキストと共感から始める UX デザイン

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

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

UX デザインのこと後編

UX デザインのこと前編