designer?を翻訳・再構成したものです。配信元または著者の許可を得て配信しています。約10分5秒1001UXデザイナーって実際、何を作るの?と言うあなた。UX成果物とは何かについて考えてみましょう。UX成果物とは、UXデザインのプロセスにおけるさまざまな場面でできたアウトプットの事を指します。デザインチーム内のUXデザイナーの役割によって、UX成果物の仕上がりはいろいろです。その役割に応じて使えるメソッドやツールにも左右されます。ここで、一般的なUX成果物の概要をご紹介します。UXデザインのプロセスは通常、デザイン思考を構成する5つの基本フェーズに似た流れになります。・ユーザーとの共感(オーディエンスを知る)・課題を明確にする(ユーザーのニーズを把握する)・アイデアを出す(デザイン案の創出)・プロトタイプを作る(アイデアを形にしてみる)・テストする(デザインの評価)「ユーザーとの共感」と「課題を明確にする」の最初の2つのフェーズは「ユーザーリサーチ」として、ひとまとめにされることが多いでしょう。言い換えれば、ユーザーの欲求とその満たし方の両方を把握する、ということです。各フェーズごとに、いくつものツールやメソッドが存在します。アウトプットの形(UX成果物)はさまざまですが、いくつかの典型例に注目しましょう。UXデザイナーとしてあなたが作ろうとする物の概要を掴むためです。ユーザーリサーチ成果物ペルソナペルソナは虚構のキャラクターです。ユーザーに見立てて、デザイナーが作り出した個性です。それは典型的なユーザーのように、自らの目標、動機、満たされない欲求や能力を備えます。人口統計や学歴といったその他の情報が加えられれば、ペルソナの完成です。企画の範囲に応じて、デザイナーはパターンの異なるペルソナをいくつも創り出します。オーディエンスのサンプルをなるべく広い範囲で捉えるためです。ペルソナの創出は、デザイナーがユーザーに共感するために役立ち、ユーザーの人格や手に入れたがっている物を理解するための裏付けになります。グラフや文章で表されます。絵コンテ絵コンテは、映画業界から借りてきたアイデアです。漫画で描かれるのが普通で、ユーザーが実際に取る行動や状況に基づいて、その概要を示します。絵コンテの凄いところは、ただユーザーの行動を再現するだけでなく、その環境をも明らかにするという点です。これにより、ユーザーがどのように行動するか、あるいはなぜそうするのかに説得力が生まれるのです。2.0絵コンテは、ユーザーの取る行動のみならず、その時の状況をも可視化する助けになります。「ユーザーとの共感」のフェーズで使われますが、「アイデアを出す」のフェーズでもデザイン選択などの説明を補うために使用されます。カスタマージャーニーマップカスタマージャーニーマップ(エクスペリエンスマップとも)は、ユーザーが特定の目標に到達するまでにたどる順序(すなわち、プロセス)を表す図表です。時系列に沿ってプロセスを並べることで、デザイナーは動機、課題、欲求といった流れに沿って状況の変化を理解できます。ユーザーを邪魔している主だった障害を把握することで、デザイナーは課題への取り組みを改善でき、製品やサービスがユーザーに役立つまでの道筋が見えてきます。3.0カスタマージャーニーマップの例。個人がレイル・ヨーロッパのチケットの購入を決めるまでのプロセス。デザイナーは各プロセスごとにUXを設計しています。手順を進めて行くユーザーの行動、思考、感情に至るまで考慮に入れているのです。最終的には、現在のUXを改善する場合のことにも触れています。成果物のアイデアを出すブレインストーミングブレインストーミングのプロセスでは、ユーザーリサーチのフェーズで見つけた課題や機会への取り組み方について、デザイナーチームがアイデアを出します。ここでは、いかに多くのアイデア(荒削りでOK)を出すかが勝負になります。後で、デザイナーがこれらを選り分けて最高のアイデアにまとめていけるようにしましょう。大事なのは、チームメンバーがあらゆる角度、領域にとらわれず探究ができること。実際、最適な解決策がいかにも馬鹿馬鹿しく思えるような考えから芽生えるという事は、起こります。2.0ブレインストーミングはよく、付箋をたくさん使って行われます。デザイナーのアイデアを全て付箋に書き留めておくためです。付箋にすることでアイデアは議論され、序列をつけられ、テーマごとに分類されて整理できる状態になります。これが、デザインの課題解決にベストなアイデアを見つけるためのビジュアルマップの役目を果たします。ユーザーフローユーザーフローチャート(流れ線図)は、ユーザーがサービスや製品を扱う上で踏むべき手順を単純な概略図にしたものを指します。カスタマージャーニーマップと違って、ユーザーフローチャートは製品上で起こることだけを考慮します。その他のことは無視しましょう。これらのチャートは、デザイナーが目標までの工程の流れを簡単に評価するために役立ちます。ブレインストーミングを通して「どのくらい」素晴らしいアイデアが選定されたか(すなわち、出来栄えが)判明するわけです。3.0ユーザーフローチャートの例。あるアプリケーションでのユーザーの行動を示しています。成果物を試作するサイトマップサイトマップはウェブサイトの階層や【ナビゲーション構成】を示します。このようなマップは、モバイルアプリの場合にもよく作成されます。あるコテンツがどうやって「スクリーン」上に設定されているか、あるいはセクション分けされているかは、サイトマップを見ればわかります。サービス内のあるセクションから別のセクションへ、ユーザーがどのように移動するかもわかります。3.0サイトマップの例。サイト上のコンテンツがどう編成され、ユーザーがどのようにサイト内を移動するかわかる。2.0は「親」セクション、2.1は副セクション)階層を示しています。ローファイ・プロトタイプサイトマップが完成したら、コンテンツ毎にどんな配置で画面表示されるかという概略が書けるようになります。ローファイ・プロトタイプでは見た目のデザイン詳細は省略します。デザイナーがコンテンツをどのように配置すべきか判断するために、雰囲気を掴める程度の、ざっくりしたガイドになれば充分です。手書きのスケッチ(速くて安いので気が変われば惜しみなく捨てられるのが利点)から始めましよう。後で、コンピューターソフトを使って枠を清書しましょう。すれば、画面上での情報の見え方を確認しやすくなります。ここでも、細部のデザインにはタッチしません。2.0ローファイ・プロトタイプの例。手書きのもの(左)とコンピューターで描いたもの(右)。ハイファイ・プロトタイプハイファイ・プロトタイプはローファイ・プロトタイプの次の段階です。実際の画面に表示させた時の製品全ての外観やフォントのデザイン詳細を表現するため、ピクセルパーフェクト・プロトタイプとも呼ばれます。画面の物理的な条件を考慮して、実際に使われるデバイスのサイズに合わせて作られます。ローファイ・プロトタイプに比べて作成に時間がかかりますが、多くの場合はこれが、顧客や出資者に見せる実例として役立つでしょう。3.0モバイルアプリにおけるハイファイ(ピクセルパーフェクト)・プロトタイプの例。完成品のスクリーンショットのような見た目ですが、これは実際のアプリで、モックアップではありません!残念ながら、多くのクライアントがこの段階で、企画が完成間近に違いないと思いがちです。そこで、忘れずに説明するように心がけましょう。見た目はいかに素晴らしくても、ここには操作するためのコードがいっさい設定されていないことを!インタラクティブ・プロトタイプ先のローファイ・プロトタイプ、ハイファイ・プロトタイプは静止画を集めただけの試作品です。作品をより良くするために、これらが相互作用を実現できるように手を加えましょう。商品化のためには、プロトタイプにどのような操作が必要でしょうか。商用のプロトタイピングソフトを使えば、コードの書き込みを全くしないままに、クリックできる範囲やトランジション、イベントなどを任意に指定できます。これだけで、ユーザーの動きを捉えた相互作用型の動作を実現するインタラクティブ・プロトタイプを作成できます。Keynoteなどのごく単純なツールで事足ります。これらのインタラクティブ・プロトタイプをユーザーテストのなるべく早い段階で使うといいでしょう。コードの挿入前が理想です。すれば、デザインがうまく動作するかの確認を済ませた後に、コストや手間の掛かるコード開発の工程に入ることができます。インタラクティブ・プロトタイプ作成手順の例。Appleのシンプルなプレゼンソフト、Keynoteを使用しています。成果物の評価ユーザビリティレポート実行可能なデザイン(たとえまだインタラクティブ・プロトタイプの段階であっても)が完成したら、実際のユーザーにデザインを評価してもらいましょう。評価はあらゆる形式で行えます。何人かのユーザーにデザインを試してもらい、意見を聞く方法もあります。これは品質評価の一例です)。ユーザーを研究室に呼び、試作品を使って特定の作業を完了してもらう場合。作業中は、エラーの数やクリック数、作業時間といった項目のデータを採ります。研究室で視指標追跡カメラなどの専用装置を使えば、特定のデザインを閲覧中に、ユーザーの注意がどこに向いているか調べることができます。別の実行プロトタイプを使って同じ作業をしてもらえたなら、双方を比べてどちらのデザインが優れているかを知る(A/Bテスト)こともできます。デザインの評価方法はいろいろあります。どの方法を取るにせよ、判定で得られた所見はユーザビリティレポートにまとめておかなくてはなりません。収集データの解析、棒グラフや説明文を含んだ所見の解説、特に参考になりそうなユーザーコメント。レポートを提示する相手によっては、統計分析などの技術的な詳細を加える必要があるでしょう。収集データや分かったことを踏まえて助言すべきことは何か。うまく行ったこと、行かなかったことと、その理由。デザインの改善のための次の課題、あるいはこのプロセスで前に進めるかに言及しましょう。ユーザビリティレポートは、企画に携わるいろいろな役職の方の目に触れるでしょうから、注意が必要です。責任者の方々が必要としている情報は、おそらく2つ。実施要領と、得られた所見がいかに企画全体にとってインパクトがあるかという意見が聞きたいはずです。他のデザイナー達は、判定手順や細かい部分がどうなっているかの方により興味を持つでしょう。開発者達はきっと、あなたの発見やアドバイスを聞くことにしか興味はないでしょう。そのレポートは、受け手にとって順序よく適切な表現で組み立てられているでしょうか。3.0ユーザビリティレポートの例。要約形式にまとめたもの。全レポートの詳細はここでは記載せず、結果に注目しています。これは、経営者や責任者といった、忙しくて詳細確認を目的としていない受け手に見せる場合に最適な形式です。解析レポートデザインした製品が公開され、しばらく運用が続けられたなら、会社としては確認用の運用解析データを作成してあなたと共有したくなるでしょう。このデータを読み取るには、深い洞察力が求められます。ユーザビリティの改善策や、とりわけ製品使用時のユーザーの動きや傾向のデータが含まれているかを見抜く必要があります。あるイーコマースサイトで多くのユーザーが、購入を完了するために必要な登録をしていなかったとしたら。登録方法がややこしかったという事でしょうか?登録が必要だと分かってもらえなかったのでしょうか?解析レポートでは、このデータからの洞察を述べ、デザインが改良されるべき点を強調箇所として示しましょう。Analyticsなどの製品で自動生成された図の配置に気を取られがちですが、UXデザイナーがしなければならないのは、ただ事実を並べるだけでなく、それを読み取って伝える事です。レポートには当然データが必要ですが、加えて説得力ある解説と何をすべきかの提案がなされることも重要なのです。解析レポートは記録としても役立ちます。これによってサイト上のデザイン変更がもたらした影響を知ることができます。その前に問題が見つかった事、見落とした点があった事もわかります。CC0解析レポートは、単なるデータやイメージ画像以上の意味を持ちます。新規ユーザーにありがちな行動についての説明や、デザインの改善点における提案など、あなた自身の説明を加えましょう。まとめ2015年のノーマン・ニールセンのグループに関する記事で、UXスペシャリストのページ・ローベイメルによる解析が載せられました。UXデザイナーが最もよく作成を頼まれるUX成果物の種類を調べてレポートしたのです。ワイヤーフレームとプロトタイプは最も良くある作成物とされ、次いでフローチャート、サイトマップ、そしてユーザビリティレポートもしくは解析レポートと続きました。3.0ノーマン・ニールセンのグループによる最も良くあるUX成果物の解析。これは、UXプロフェッショナルが作成や共有を頼まれた特定の成果物の依頼頻度の高さを示します。作成された中には需要の低い成果物もありますが、それらは他者と共有されないのが普通です。これらは「伝統」とさえ言える定番のUX成果物ですが、忘れてはならないのは、これらが作成されたり他社と共有されたりしている間、違う形の成果物が多く作られながらも決して共有されずにいる(この調査のランキングでは下位になってしまう)という事です。ワイヤーフレームを一つ作るのに、デザイナーはユーザーや彼らのニーズについて全く理解する必要はないのでしょうか?実践ではしばしば、クライアント側の誰もが、自分たちの作業を改善してくれるタイプの成果物にしか興味がないという事があります。こんな時、あなたが作成する成果物は、それを共有するつもりの他のメンバーのために「変更」する必要があるかもしれません。3.0この図は、開発チームの他のメンバーや外部のクライアントと最もよく共有されている成果物の種類を示しています。インタラクティブ・プロトタイプは誰もが見たがっている成果物ですね!UXデザイナーとしてあなたがやるべき事は、成果物の作成です。これは、5つの「UXデザインのプロセス」、つまりデザイン思考のプロセスのどの場面においても一貫して変わることはありません。これをあなた1人が心に留めておくのか、他のメンバーとも共通の認識として理解し合えるのか。それは、UXデザイナーであるあなたの腕に掛かっています。できるかぎり幅広く多彩なツールとメソッドを使いこなし、存在するあらゆる種類のUX成果物に慣れておくよう研鑽が求められます。コードを追加する』で「JP20gd6nv7」を入れてください。※1000円分無料で頼めます。