トップデザイナーが使用する10のUX成果物

この記事の音声バージョンを聞く

UXデザイナーの仕事は、チームがほとんどドキュメントを処理しないリーンスタートアップやアジャイル環境から、サードパーティ、または厳格なドキュメント要件を持つ大企業や政府機関のコンサルティングエンゲージメントまで、さまざまな環境で発生します。 エンゲージメントや環境の性質（およびそれをすべて結び付けるもの）に関係なく、UXプロフェッショナルは、デザインのアイデア、調査結果、プロジェクトのコンテキストをさまざまな対象者に効果的に伝える必要があります。

UXデザインプロセス中に、デザイナーはUXデザイン方法論の一部としてさまざまな「アーティファクト」とプロジェクト成果物を作成します。 これらはさまざまな形をとることがあります。成果物は、UXデザイナーがさまざまな利害関係者やチームと通信し、作業を文書化し、会議やアイデアセッションに成果物を提供するのに役立ちます。 また、「信頼できる唯一の情報源」（実装と参照のためのガイドと仕様）の作成にも役立ちます。

UXデザイナーがエンゲージメント中に通常作成する10のUX成果物は次のとおりです。 （このリストは決して包括的なものではなく、エンゲージメントの性質によってはさらに長くなる可能性があります。）

1.ビジネス目標と技術仕様

これは基本的なステップです。 UXプロフェッショナルにとって、それはすべて、製品のビジョン、つまりビジネスの観点から製品が存在する理由を理解することから始まります。 簡単に言えば、ステートメントには、対処されている問題、提案された解決策、およびターゲット市場の一般的な説明を含める必要があります。 また、配信プラットフォームについて説明し、製品を配信するための技術的手段についても軽く触れておく必要があります。

1ページより長くする必要はありませんが、What、Why、Howのコアを説明する必要があります。 次に例を示します。「FantasticAppCo.は、ミレニアル世代市場（iOSおよびAndroid）向けのモバイルプラットフォームでのギフト提供アプリケーションのギャップを特定しました。 多くのミレニアル世代は、特別な日付を思い出し、最高の贈り物を特定し、それらの贈り物を見つけて購入するのに苦労しています。 私たちのソリューションは、そのストレスを軽減するように設計されています。 予測的なデザインと最新のAIテクノロジーを採用することで、このアプリは便利でほとんど魔法のようなユーザーエクスペリエンスを提供します。」

2.競争力のある分析レポート

新製品の設計を開始する人にとっては、それが市場に適合していることを確認することが重要です。 重要なのは、UX戦略の一環として、製品には魅力的な競争上の優位性と、市場の他の製品よりも優れたUXが必要です。

競合分析とは、「競合他社を特定し、自社の製品またはサービスと比較した場合の長所と短所を判断するための戦略を評価すること」を意味します。

UXデザイナーの最初のタスクの1つは、ターゲット顧客が問題を解決するために現在使用している製品またはサービスを調査することです。 同等の製品やサービスはありますか？ 人々が使用している、十分ではあるが完璧ではない代替ソリューションはありますか？ バンドエイド—ビタミンですが鎮痛剤ではありませんか？ より良いUXはどのように違いを生むことができますか？

ユーザーエクスペリエンス調査の構成要素である競合分析レポートは、上位5社の競合他社を特定し、彼らが正しいことをしていることと、彼らが間違っていることを調べます。 このステップは、明確な目標が定義され、焦点を当てるべき要素が明確に示される設計の方向性を設定するのに役立ちます。

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

UXデザイナーは、利害関係者が製品の顧客のニーズを理解していることを確認する必要があります。 ユーザーの行動パターンをカプセル化して伝達するためのペルソナを作成し、ユーザー調査を実施することは、それを行うための実証済みの方法です。 ペルソナは、製品の典型的なユーザーを代表するものです。ペルソナは、目標、ニーズ、関心を組み込むことで、プロジェクトに取り組んでいるチームがユーザーに共感を示すのに役立ちます。

ユーザーリサーチもUXデザインプロセスの不可欠な要素です。 これには、行動パターンを抽出し、コンテキストを追加し、設計プロセスへの洞察を与えるために使用されるさまざまな手法が含まれます。 利用可能なユーザー調査ツールと手法には多くの種類があります。それはすべて、適切な状況に適した「レンズ」を選択することです。

ユーザー調査に着手する前に、時間をかけて調査計画を立てることが重要です。 これは、研究の目的と方法を伝え、利害関係者から賛同を得るために役立つ文書です。 また、研究プロジェクト中に全員を軌道に乗せるために使用できる優れたツールでもあります。

ユーザー調査フェーズの終わりに、調査結果を実用的な項目に変換するレポートが生成されます。 次に、UXチームは、これらのアイテムを中心に製品を設計するように設定されます。

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

サイトマップは、デジタル製品に含まれるすべてのコンポーネントと情報を視覚的に整理したモデルです。 これは、アプリまたはサイトのコンテンツの構成を表します。 ワイヤーフレームと並んで、それらはUX成果物の最も基本的なものの1つであり、UXデザインプロセスでスキップされることはめったにありません。

サイトマップは、情報アーキテクチャ（製品のコンポーネントを整理およびラベル付けする芸術と科学）をレイアウトして、ナビゲーション、検索可能性、および使いやすさをサポートするのに役立ちます。 また、分類法とユーザーインターフェイスを定義するのにも役立ちます。

サイトマップは、リソースとして使用し、反復的なプロトタイピングとユーザーテストに基づいて製品が進化するにつれて調整するための便利なリファレンスです。 設計ワークフローでは、製品のコンテンツについて話し合うときに全員が同じページにいるように番号付けシステムがよく使用されます。

5.エクスペリエンスマップ、ユーザージャーニー、ユーザーフロー

エクスペリエンスマップは、製品またはサービス内のユーザーのフロー（目標、ニーズ、費やした時間、思考、感情、反応、不安、期待）、つまり製品との対話全体の全体的なエクスペリエンスを視覚的に表したものです。 これは通常、ユーザーと製品の間のタッチポイントを示す線形のタイムライン上に配置されます。

ユーザージャーニーとユーザーフローは、ユーザーが実行する一連のステップに関するものであり、ユーザーが現在対話する方法、または製品と対話する可能性のある方法を示しています。 これらは、動作、機能、およびユーザーが実行する可能性のある主要なタスクを示しています。 ユーザーが実行する可能性のあるさまざまなタスクの「フロー」を調べて理解することで、ユーザーインターフェイスに含めるコンテンツと機能の種類、およびユーザーがそれらを実行するために必要なUIの種類について考えることができます。

UXの多くは、ユーザーの問題を解決することです。 ユーザージャーニーを作成する場合、デザイナーは、ペルソナ、ユーザーの目標、動機、現在の問題点、および達成したい主なタスクを理解する必要があります。

ユーザージャーニーとユーザーフローの違いは何ですか？ ユーザーフローは、Lyftで車を予約するなど、製品またはサービスを介して1つのタスクまたは目標に取り組んでいるユーザーと考えてください。 ユーザージャーニーは全体像を示しています。 ユーザージャーニーはタスクを超えて拡大し、特定の顧客とのやり取りがより大きなコンテキストにどのように適合するかを調べます。

6.UXワイヤーフレーム

UXデザイン手法の定番であるワイヤーフレームは、デザインフレームワークとインターフェイス要素の2次元の「青写真」の図であり、何がどこに行くのかを示しています。 主にレイアウトツールであり、情報アーキテクチャ、コンテンツの間隔、機能、 インタラクションデザイン、および意図されたユーザーの動作を定義するのに役立ちます。

ワイヤーフレームは、UXデザイナーにとって非常に重要であり、プロジェクトで最も一般的な成果物の1つです。 「ワイヤーフレームを見せて」は、UXデザイナーのインタビューで何よりも頻繁に聞かれます。

UXデザインプロセスの主要なフェーズであるワイヤーフレーミングは、アイデアを探索し、顧客の目標に対応する革新的なコンセプトを生成するための費用効果の高い方法です。 これらはスケッチを超えてすばやくアイデアを出すための優れたツールであり、忠実度の低いもの（スタイリングなし、白黒のボックス、ギリシャ語のテキスト）から忠実度の高いもの（完全なスタイル、色、非常に詳細）まで、さまざまなフレーバーがあります。

職場の略記で「ワイヤー」と呼ばれることもあるワイヤーフレームは、非常に柔軟で迅速に製造できるため、時間と費用を大幅に節約できます。 それらは、設計の方向性を理解しながら、利害関係者やチームメンバーと会話するための中心的な役割を果たします。

ワイヤーフレームは基本的なものであり、そのため、設計を構造的に定義するのに役立ち、さまざまなユースケースシナリオでユーザーフローがアプリまたはサイトをどのように機能するかを示します。 Toptal Design Blogの前の記事で説明した「wireframemaps」や「wireflows：NNGroupのワークフローとアプリのUX成果物」など、ワイヤーフレームには興味深い工夫がいくつかあります。

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

ユーザー中心の設計プロセスにおけるもう1つの主要な成果物であるインタラクティブなプロトタイプは、製品に命を吹き込みます。 初歩的なプロトタイプは、時間とお金を大幅に節約します。実際のユースケースシナリオで物事がどのように機能するかを示し、迅速な設計の反復とユーザーテストを可能にします。 また、UXデザインプロセスのさまざまな段階で、デザイナーがデザインを効果的に伝達するのにも役立ちます。

プロトタイピングは、発見から反復までの過程のどの時点でも発生する可能性があります。 ペーパープロトタイプから高度に洗練されたデザインまで、製品プロトタイプの内部レビューにより、チームの全員が実際のユーザーがそれを操作したときにどのように機能するかを確認できます。

静的なスケッチやワイヤーフレームは、インタラクティブなプロトタイプのように製品に命を吹き込むことはありません。 ほとんど魔法のように、製品がどのように動作するか、つまりすべてがどのように接続されるかが見られ、感じられます。 さまざまなデザインと機能を検討できます。 新しいアイデアが生まれるかもしれません。 問題のある場所を見つけて、厄介な相互作用を明らかにすることができます。

インタラクティブなプロトタイプは、ユーザーのテストに非常に役立ちます。 潜在的なユーザーは、静的なページを案内するのではなく、100％リアルに感じられる製品をテストし、アイデアを提供し、貴重なフィードバックを提供できます。

最近では、デザイナー向けのプロトタイピングツールにはさまざまな形とサイズがあります。 UXデザインのための21のインタラクティブなプロトタイピングツールがあります。

8.ビジュアルデザイン

ビジュアルデザインは、製品の「最終的な塗装」です。 ただし、それだけではありません。ビジュアルデザインは、製品のUXに大きな影響を与える可能性があるため、慎重にアプローチする必要があります。 うまくいけば、デザイナーがビジュアルに集中できるように、UXデザインプロセスの前のステップで多くのインタラクションデザインとユーザビリティヒューリスティックが作成されました。 これは、製品を次のレベルに引き上げる最後の機会です。

ビジュアルデザインは、開発者への引き渡し前の最後のステップであり、スタイルガイドと最終仕様が作成されるフェーズです。 それは単に「物事をきれいにする」ことだけではなく、ブランドの配色を定義または実装し、レイアウト、コントラスト、および視覚的な階層でユーザビリティに影響を与える機会です。

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

UXデザインワークフローの最後のステップは、開発者向けの仕様とスタイルガイドをまとめることです。 製品のデザインが長期的に成功するためには、スタイルガイドは必須です。

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

一部のスタイルガイドと仕様は手動でまとめられ、その他は自動的に生成されます。 スタイルガイドを手動で作成するのは面倒なプロセスであり、多くの場合6か月かかることがあるため、自動化ツールはどれも時間の節約になります。

自動化された方法は、使用するツールによって異なります。 これらは、長期間にわたって作成されたスタイルガイドと比較して、デザインを引き継ぐためのより機敏で段階的な方法です。 それらは、チームの全員が参照できる棚の「スタイルの聖書」のように考えることができます。

Sketchで作業する場合は、Zeplinなどの神の送信があります。 Zeplinは、UIデザイナーとフロントエンド開発者向けのコラボレーションツールです。 これは、設計ワークフローを超えて、チームが設計を引き継ぐのに役立ちます。

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

ここに50の素晴らしいスタイルガイドの例があります。 また、1つはBBCから、もう1つはIBMからのもので、どちらもガイドをオンラインでホストしているため、誰でも簡単に見ることができます。

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

UXデザイナーの仕事は決して行われません。 製品のリリース後も、フィードバックを収集し、使用状況に関するデータを収集し、改良し、リリースして、サイクルを最初からやり直す機会があります。

ユーザビリティテストは、ターゲットユーザーが製品を使用できるかどうかを示します。 これは、特定のUIで人々が抱えている問題を特定するのに役立ち、完了が困難なタスクと紛らわしい言語を明らかにします。

ユーザビリティテストレポートは通常、プロトタイピングフェーズで配信されますが、既存の製品をユーザーと一緒にテストして、改善の余地がある場所を確認することも珍しくありません。

ユーザビリティテスト（レポートの収集、並べ替え、生成）中に収集されたデータを理解することは、UX実践者の間でますます一般的なタスクになりつつあり、実際、それは重要なUXスキルになりつつあります。 これがユーザビリティテストレポートテンプレートです。

製品が公開された後、別の一連のデータ収集（定量的方法）により、製品がユーザーに対して大規模にどのように機能するかが設計チームに通知されます。

ユーザーの行動をキャプチャして分析するためのツールと方法は無数にあります。 アイトラッキングからクリックトラッキング、ヒートマップ（クリック、タップ、スクロール動作を表示）、モバイルデバイスやWebデバイス全体のすべてのユーザーのデジタルフットプリントを追跡するUI要素のタグ付けまで。

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

分析会社は通常、カスタマイズされたレポートをオンデマンドで自動的に生成します。 これらのレポートは非​​常に有用であり、製品の使用法に関する驚くべき洞察を提供できます。 すべての顧客に勝つと思っていたその驚くべき機能は、ほとんど使用されていないことが判明する可能性があります。 逆に、UIの小さくて重要でない関数が多く使用されていることがわかり、その特定の機能の拡張に集中するときが来たと判断する場合があります。

UXデザイナーの使命は、人間の行動、目標、動機を深く理解した上で、企業が製品やサービスを作成できるようにすることです。 上記の10のUX成果物は、「デザイン思考」とユーザー中心の設計プロセスの一環としてユーザーに優れたエクスペリエンスを提供するため、UXデザイナーによって作成される最も一般的なものの一部です。

•••

Toptal Designブログでさらに読む：

• eコマースUX–ベストプラクティスの概要（インフォグラフィック付き）
• 製品設計における人間中心の設計の重要性
• 最高のUXデザイナーポートフォリオ–刺激的なケーススタディと例
• モバイルインターフェースのヒューリスティック原則
• 予測的デザイン：魔法のユーザーエクスペリエンスを作成する方法