UXデザイナーが創り出して活用する10の成果物

UXデザイナーはさまざまなシーンでその活躍が期待されています。たとえば最小限のドキュメントを用いて作業を進めるチーム、リーンスタートアップやアジャイル開発を求められる環境、外部企業とコンサルティング契約を結ぶ場合、または厳しいドキュメント要件を持つ大企業や政府機関のコンサルティング業務など、さまざまな環境が挙げられます。

関わり方や環境の性質（およびそれをすべて結び付けるもの）に関係なく、UXの専門家はデザインに関するアイデア、研究結果、プロジェクトのコンテキストを効果的にさまざまなユーザーに伝える必要があります。

UXデザインのプロセスにおいて、デザイナーはUXデザイン方法論の過程における多種多様な「遺物」とプロジェクトの成果物をつくり上げます。これには多くの形式が取り込まれることになるでしょう。

UXデザイナーの成果物は、UXデザイナーがさまざまなステークホルダーやチームとコミュニケーションをとり、ドキュメント上の作業、会議やアイデアセッションにも役立ちます。これは「正解にたどり着くための唯一のリソース」とも言えるでしょう。実装のためのガイドでもあり、仕様書とも言えるのです。

ここでは、UXデザイナーが仕事で過程でつくり出す、10の代表的な成果物をご紹介しましょう。

１. ビジネスゴールと技術的な仕様書

基本的なステップと言えるものです。UXのプロにとってすべてのことは、プロダクトのビジョン、つまりビジネスの観点からプロダクトが存在する理由を理解することより始まります。

わかりやすい文面で書かれたステートメントに、対応が求められる点をすでに認識済みであること、すでに提案されている解決策、およびターゲットとしている市場に関する一般的な説明を含める必要があります。また、使用されるプラットフォームについて説明し、プロダクトが人々の手に渡るまでの技術的な部分についても軽く触れておく必要があるでしょう。

１ページ程度で充分ですが、なにが（What）、なぜ（Why）、どのように（How）の中心になる部分は説明する必要があります。たとえば次のようなものです。

The Fantastic App Co.は、ミレニアル世代のマーケット（iOSおよびAndroid）のモバイルプラットフォームで、ギフトを贈るためのアプリケーションにギャップがあることを確認しました。多くのミレニアル世代は、特別な日を記憶し、最高のギフトを決め、そしてそれに当てはまるものを見つけて購入することにトラブルを抱えています。当社のソリューションによって、そのストレスを軽減することができます。予測的なデザインと最新のAIテクノロジーを採用することで、このアプリはこの上なく便利な、魔法のようなUXを提供します。

２. 競合分析レポート

新しいプロダクトのデザインを始めるにあたって、市場に適しているかどうかの確認はとても重要です。大事なのは、UX戦略の一環として、プロダクトが競争力のある魅力的な優位性と、市場の他のどのプロダクトよりも優れたUXを備えているかどうかです。

競合分析とは、以下を意味します。

競合他社を特定してその戦略を評価し、自社のプロダクトまたはサービスの強みと弱みを比較すること。

UXデザイナーがまずすべきことの一つは、対象となるユーザーが現在抱えている問題を解決するためにどのようなプロダクト、またはサービスを使っているかを調査することです。

同等のプロダクトまたはサービスはあるでしょうか？　人々が使用している代替ソリューションはありますが、それが完ぺきではなく不十分だということはないですか？　痛みに効果がある鎮痛薬ではなく、その場しのぎの絆創膏やビタミンサプリの役割に終わっていませんか？　よりよいUXによってどのような変化をもたらすことができるでしょうか？

UXリサーチの一部である競合分析レポートは、上位５社の競合他社を特定し、彼らのなにが優れていて、またなにが間違っているかを調べるものです。このステップでは焦点を当てる詳細な要素が浮き彫りになり、明確なゴールが打ち出されることで、デザインの方向性を決定するのに役立ちます。

競合他社リストと競合他社分析チャート（出典：Chandan Mishra氏）

３. ペルソナとUXリサーチレポート

UXデザイナーは、ステークホルダーに向けてプロダクトに対するユーザーニーズを確実に理解させる必要があります。ユーザーの行動パターンをまとめて伝達するペルソナを作成してユーザーリサーチを行う作業は、すでに実証済みの方法です。ペルソナは、プロダクトの典型的なユーザーの代表と言えます。彼らの目標、ニーズ、関心を組み込むことで、プロジェクトに取り組んでいるチームメンバーがユーザーに対する共感を得ることを手助けするものです。

ユーザーリサーチもまた、UXデザインのプロセスに不可欠な要素と言えます。これには行動パターンの抽出、コンテキストの追加、およびデザインのプロセスへの洞察を提供するために使用されるさまざまな手法が含まれます。ユーザーリサーチのためのツールとテクニックにはさまざまなものがあります。そのため、適切な状況に見合った適切な「レンズ」を選択する必要があります。

ユーザーリサーチを始める前に、リサーチプランを練ることが重要です。これは、研究の目的と方法を伝えたり、ステークホルダーから賛同を得たりするのに役立つドキュメントとなります。また、研究プロジェクトを進行中に、そこに関わる全てメンバー間で目的を共有するための優れたツールともなるのです。

ユーザーリサーチの結果をまとめる段階で、実際に導入が可能な項目が浮き彫りになります。UXチームは、これらの項目をもとに、プロダクトのデザインを決定するのです。

ペルソナの例（出典：Miklos Philips氏）

４. サイトマップと情報アーキテクチャ

サイトマップは、デジタルプロダクトに含まれるすべてのコンポーネントと情報を整理して可視化するためのものであり、アプリまたはサイトのコンテンツの全体を表すものです。ワイヤーフレームに加えて、UXデザインの成果物のもっとも基本的な要素の一つであり、UXデザインにおいて、このプロセスを省くことはほとんどないと言ってよいでしょう。

サイトマップは、ナビゲーション、見つけやすさ、ユーザビリティをサポートするための情報設計に役立ちます。また、分類法とUIの定義にも役立つでしょう。

サイトマップは、手軽なリソースとして手元に置くことで、反復的なプロトタイピングとユーザーテストにもとづくプロダクトの進化に合わせて調整するための便利な参照元となります。デザインのワークフローではほとんどの場合、プロダクトのコンテンツについて話し合う際に、番号付けのシステムを利用することで、チームメンバーに進捗状況を共有する方法が多く採用されています。

情報アーキテクチャを表すサイトマップ

５. 体験マップ、ユーザージャーニー、ユーザーフロー

体験マップは、プロダクトまたはサービス内のユーザーのフロー（目標、ニーズ、費やした時間、思考、感情、反応、不安、期待など）を視覚的に表現したものです。たとえば、プロダクトとのインタラクション全般に関する、全体的なUXといったものです。通常、ユーザーとプロダクトの間のタッチポイントを示す線形タイムライン上に配置されます。

ユーザージャーニーとユーザーフローは、ユーザーが実行する一連の手順に関するものであり、プロダクトとユーザーの間のインタラクション、またはその可能性がある箇所を示しています。ユーザーが実行する可能性のある動作、機能、および主要なタスクを示します。ユーザーが実行する可能性のあるさまざまなタスクの「流れ」を調べて理解することで、UIに含めるコンテンツや機能の種類、およびユーザーがそれらを達成するために必要なUIの種類についての取り組みを始めることができるのです。

UXは、ユーザーが抱える問題を解決するためのものだと言えます。ユーザージャーニーを作成する際、デザイナーはペルソナ、ユーザーの目標、動機、現在のペインポイント、達成したい主なタスクを理解する必要があります。

では、ユーザージャーニーとユーザーフローの違いは何でしょうか？　ユーザーフローは、プロダクトやサービスを介して１つのタスクや目標に取り組んでいるユーザーだと考えてください。たとえば、Lyftのアプリでタクシーを予約することなどです。ユーザージャーニーは、もっと大きな全体像を示しています。ユーザージャーニーは、タスクの枠を超えて、特定の顧客とのインタラクトがより大きなコンテキストにどのように適合するかを示すものです。

体験マップは、UXデザインのプロセスの一部として作成されます（出典：Miklos Philips氏）

６. UXのワイヤーフレーム

UXデザインに関する手法の定番とも言えるワイヤーフレームは、デザインのフレームワークとインターフェイスの要素を説明した「青写真」であり、なにがどこに配置されるかを示します。主にレイアウトツールが使用され、情報設計、コンテンツの間隔、機能、インタラクションデザイン、ユーザーの意志による行動を定義するのに役立つでしょう。

ワイヤーフレームは、UXデザイナーがよく使うもので、プロジェクトでもっとも一般的な成果物の一つです。「あなたが作成したワイヤーフレームを見せてください」という質問は、UXデザイナーの採用面接で、もっともよく聞かれるものでもあります。

UXのデザインプロセスのうち、主要な段階であるワイヤーフレームは、アイデアを探求し、顧客の目標に対応する革新的な概念を生成するための費用対効果の高い方法です。スケッチ以外の素早いアイデアを生み出す優れたツールであり、ローファイ（スタイリングなし、白黒のボックス、ダミーテキスト）なものからハイファイ（完全なスタイル、色、非常に詳細）なものまで、さまざまな特徴があります。

業界では、「ワイヤー」と呼ばれることもあるワイヤーフレームは、非常に柔軟で生産性が高いため、時間と費用を大幅に節約することができます。デザインの方向性を把握しながら、ステークホルダーやチームメンバーとのやりとりにおいて、中心的な役割を果たすと言えるでしょう。

ワイヤーフレームはすべての基本となるため、デザインを構造的に定義し、さまざまなユースケースのシナリオでアプリまたはサイトを介してユーザーフローがどのように機能するかを定義するのに役立ちます。Toptal Designブログの過去の記事の「ワイヤーフレームマップ」や、NNGroupのワークフローとアプリ用のUX成果物であるwireflowsなど、ワイヤーフレームには興味深い工夫がいくつかあります。

注釈付きワイヤフレームは、もっとも一般的なUXデザインの成果物の一つです。

７. インタラクティブプロトタイプ

ユーザー中心のデザインプロセスにおけるもう一つの主要な成果物といえる、インタラクティブプロトタイプは、プロダクトに命を吹き込むものです。基本的なプロトタイプにより、時間と費用を大幅に節約することができます。実際のユースケースシナリオで物事がどのように機能するかを実証し、迅速なデザインの反復とユーザーテストを可能にします。また、UXデザインプロセスのさまざまな段階で、デザイナーがデザインをより効果的に伝えることにも役立つでしょう。

プロトタイピングは、デザインプロセスにおける「発見」の段階から「反復」まで、あらゆる段階で行われます。紙のプロトタイプから高度に洗練されたデザインまで、プロダクトのプロトタイプの内部レビューにより、チームメンバー全員で実際のユーザーがそれを操作したときの動作を確認することができます。

静的なスケッチとワイヤーフレームでは、インタラクティブなプロトタイプのように、プロダクトに命を吹き込むことはできません。魔法とも言えるほどの、プロダクトがどのように動作するかを実際に見て感じること、つまりすべてがどのようにつながっているのかを知ることが大事なのです。ここではさまざまなデザインと機能を探ることができるでしょう。その中で新しいアイデアが生まれるかもしれません。問題点を特定し、インタラクトにおいてトラブルとなっている部分を見つけ出すことにもつながるでしょう。

インタラクティブなプロトタイプは、ユーザーテストに非常に役立ちます。見込みユーザーは、静的なドキュメント上の過程ではなく、100％リアルなプロダクトをテストし、アイデアや貴重なフィードバックを提供できます。

最近では、デザイナー向けのプロトタイプツールはあらゆる形式とサイズで提供されています。UXデザインのためのインタラクティブなプロトタイピングツール21選を参考にしてください。

UXデザインの調査とユーザビリティテストのためのインタラクティブプロトタイプ（出典：Miklos Philips氏）

８. ビジュアルデザイン

ビジュアルデザインは、プロダクトの「最終的なコーティング」と言えます。ただし、それだけにとどまりません。ビジュアルデザインはプロダクトのUXに大きな影響を与えることができるため、慎重なアプローチが必要です。

UXデザインのプロセスに先立つ、それ以前の段階で、多くのインタラクションデザインと、ユーザビリティヒューリスティックがお互いにうまく作用することで、デザイナーがビジュアル面に集中することができるでしょう。これはプロダクトを次のレベルに引き上げるための、もっとも重要なチャンスと言えます。

ビジュアルデザインは、開発者に引き渡す前の最後のステップであり、スタイルガイドと最終的な仕様書がつくられる段階でもあります。「見栄えをよくする」だけではなく、ブランドのカラースキームを定義または実装し、レイアウト、コントラスト、視覚的な階層と共にユーザビリティに影響を与える機会なのです。

スケッチ、ワイヤーフレーム、インタラクションデザイン、プロトタイプのあとの、最終的なUXデザインプロセスのステップとしてのビジュアルデザイン（出典：Miklos Philips氏）

９. 開発者向けのスタイルガイドと仕様書

UXデザインのワークフローの過程で最後のステップは、開発者向けの仕様書とスタイルガイドをまとめることです。プロダクトのデザインを長期的な観点で成功に導くために、スタイルガイドは必須となるものです。

スタイルガイドは、ブランディング、ビジュアルスタイル、色、フォント、タイポグラフィ全体において、一貫したデザインが実装されたことを確認するものです。また、デザインパターン、言語、ルール（キーボードショートカットやデータ表示ルールなど）、およびUI動作の指定（エラー処理など）にも使われるでしょう。

一部のスタイルガイドと仕様書は手動でまとめられ、その他は自動的に生成されます。スタイルガイドを手作業でまとめることは面倒な作業でもあり、だいたい６か月程度の期間がかかることもあるため、時間の節約という面で自動化ツールは歓迎されています。

自動化の方法は、使用するツールによって異なります。これらは、長い時間をかけてつくられるスタイルガイドに比べてデザインを直接手渡すためのすばやく、漸進的な方法でもあります。それはまるで、いつも本棚にあって誰もが手にできる「スタイルのバイブル」のようなものだと言えるでしょう。

スケッチで作業するなら、Zeplinという神様からの贈り物のようなすばらしいツールがあります。Zeplinは、UIデザイナーとフロントエンド開発者向けのコラボレーションツールです。それはチームがデザインを手渡す際に役立つもので、デザインのワークフローの枠を超越していると言えるでしょう。

さらに、Craftプラグインを使用してスケッチからものの数秒でデザインスタイルガイドを生成することもできます。または、この記事にあるように、Marketchプラグインを利用してHTMLファイルを生成することにより、デザインから測定値とCSSを取得できます。

優れたスタイルガイドの例50選を参考にしてください。また、BBC、IBMも参考にするとよいでしょう。どちらもガイドをオンラインでホストしているため、誰でも簡単に閲覧できるようになっています。

UXデザインのプロセスで最後の段階と言える、開発者向けのスタイルガイドと仕様書

10. ユーザビリティテストと使用状況分析レポート

UXデザイナーの仕事に終わりはありません。プロダクトがリリースされたあとも、フィードバックを収集し、使用状況に関するデータを集め、改良し、またリリースし、それらを繰り返す必要があるのです。

ユーザビリティテストにより、ターゲットユーザーがプロダクトを使用する際に問題がないかを確認することができます。ユーザーが一定のUIで抱えている問題を特定するのに役立ち、その作業を完了することが困難な場合や、紛らわしい言葉などを特定することに役立つのです。

通常、ユーザビリティテストの結果はプロトタイプの段階で配信されますが、改善するべき点を確認するために既存のプロダクトでユーザーテストを行うことも珍しくありません。

ユーザビリティテスト中に収集されたデータ（収集、並べ替え、レポートの生成）を理解することは、UX担当者の間でますます一般的なタスクになりつつあり、実際、重要なUXデザインのスキルにもなっています。こちらのユーザビリティテストのレポートテンプレートも参考にしてください。

プロダクトが世の中にリリースされたあと、次のデータ群を（定量的方法で）集めることにより、デザインチームは大きな規模で、ユーザーに対してプロダクトがどのように機能したかを確認することができます。

ユーザーの行動をキャプチャして分析するには、数えきれないほどのツールと方法があります。アイトラッキングからクリックトラッキングとヒートマップ（クリック、タップ、スクロール動作を表示）、モバイルおよびWebデバイス全体のすべてのユーザーのデジタルフットプリントを追跡するUI要素のタグ付けなどが挙げられるでしょう。

分析レポートは、ユーザーが使用する機能、モバイルアプリまたはサイトで費やす時間、時間の経過による傾向を示し、地域、アカウント、ユーザー、カスタムセグメント全体の集計結果を示すものです。機能がどのように使用され、誰によって使用されているかを完全に可視化します。

分析を担当する企業は通常、カスタマイズされたレポートをオンデマンドで自動的に生成します。これらのレポートは非常に有用であり、プロダクトの使用に関する驚くほどに深い洞察を提供してくれるものです。

あなたが間違いなくユーザーを魅了すると思っていた機能が、実はほとんど使用されていなかったという事実が明らかになるかもしれません。反対に、重要とは思われなかった小さなUI機能が実は多く使用されていることがわかることもあり、その機能を拡張するための時間をつくり出す必要に迫られるかもしれません。

ユーザビリティテストレポート

UXデザイナーの使命は、人々の行動、目標、および動機に関する深い理解に基づいて、企業がプロダクトやサービスを生み出す手助けをすることです。上記の10点のUXの成果物は、UXデザイナーが「デザイン思考」とユーザー中心のデザインプロセスの一環として、ユーザーにすばらしい体験を提供するための、もっとも一般的なものと言えるでしょう。