プロトタイプの基本 Part 2: 操作可能なワイヤーフレームと高精度プロトタイプ（UXデザイン入門シリーズ）| アドビUX道場 #UXDojo

連載

エクスペリエンスデザインの基礎知識

パート1では、プロトタイプの最初のステップとしてペーパープロトタイプを紹介しました。パート2では、次の段階に進み、操作可能なワイヤーフレーム、そして、高精度なハイファイ・プロトタイプを取り上げます。

操作可能なワイヤフレーム

ペーパープロトタイプを使って大まかな構想が描けたら、ワイヤーフレームを使って、もう少し忠実度が高い（本物に近い）レベルで作業する時間です。この段階では、プロトタイプを紙面から画面に移動して、徐々に忠実度を上げていきます。

ワイヤフレームは、本質的には、デザインの骨格を表現したものと言えます。デザイン成果物としては忠実度が低く、ルック&フィールではなくて構造に注目したドキュメントであるワイヤーフレームは、詳細に気を取られずに機能に集中して設計するのに役立ちます。ワイヤフレームは、インターフェイスを単色の簡易な形状に抽出することで、全体的な構造を伝えやすくします。

ワイヤフレームには、数多くのメリットがあります。

• 「視覚的な文法」すなわちルック&フィールが関わらないため、機能性に集中でき、素早く作成することができる
• 忠実度が低いため修正が容易。ユーザーテストを実施しながらその場で更新することも可能
• デザインが簡素化されているため、ユーザーや関係者に与える印象が軽くなる。完成したデザインとして批評される恐れが低く、設計の方向性について自由に論議できる
• 制作の手間が余りかからないことで、愛着が邪魔をするような状況は起きにくく、その場でフィードバックを受け入れやすい
• 未完成の外観が余計な期待を持たせないため、ワイヤフレームからすぐに納品できる状態になるとは、誰も期待しない

Adobe XDには構築済みのUIキットが数多く提供されています。そのため、一般的に使用されるUI要素を、改めて書き直す手間なく作業できます。それらのUIキットに含まれる要素は、以下の例をはじめとして、様々なものがあります。

• サインアップフォーム
• アクティビティ通知
• チェックアウト
• ニュースフィード
• 記事や投稿

Adobe XDとUIキットを使用すれば、ペーパープロトタイプを素早く操作可能なワイヤーフレームに変換できます。これは時間を大きく節約できるプロトタイプ作成手法で、なお良いことに、Adobe XDもUIキットも無料で使用できます。

Adobe XDのUIキットは、ワイヤフレームを構築する第一歩として最適。広範なUI要素が用意されていて、ペーパープロトタイプからデジタルプロトタイプへの架け橋として役立つ

ワイヤフレームは情報アーキテクチャに焦点を絞っているため、コンテンツを辿るユーザーのフローの確認が可能です。また、プロジェクトのスコープを確定する目的にも役立ちます。ワイヤフレームがあれば、デザインする必要のあるすべての画面を特定することができるでしょう。

ワイヤフレームを操作可能にして、低忠実度のプロトタイプを作成するのはとても有効な手法です。ユーザーや他の関係者に、操作可能なプロトタイプを使い、一連の画面をクリックして進むという体験を提供できます。低忠実度の操作可能なワイヤーフレームは、デザインに関する対話を促すきっかけとなり、議論を通してデザインを少しずつ前進させるのに適しています。

高忠実度のプロトタイプ（ハイファイ・プロトタイプ）

低忠実度プロトタイプ、すなわち操作可能なワイヤーフレームを使って、問題が無い状態になったら、次は、高忠実度プロトタイプ（ハイファイ・プロトタイプ）を構築して、より現実に近い体験を提供する段階です。

Adobe XDのようなツールは、ワイヤフレームを操作可能なプロトタイプへ、そして、より忠実度の高いプロトタイプへと、アイデアを練り上げていくUXデザイナーのための便利な道具です。個々の画面をデザインして互いにリンクすれば、本物のように操作可能なモックアップを構築できます。

こうした高精度のビジュアルモックアップをWebに公開することで、次のようなメリットを得られます。

• プロトタイプを確認し、コメントを入力できるURLを通知することで、プロジェクトに関与するすべての人からフィードバックを収集できる
• 任意の場所で表示できるため、相手が同じ部屋にいる必要がない。プロトタイプを介してクライアントと対話することができる
• 開発者と共有して技術的な視点からのフィードバックを得たり、色、タイポグラフィのスタイル、レイアウト仕様などを伝えることができる

プロトタイプ内でフィードバックを収集することができれば、関係者全員のコメントを残せるようになります。つまり、フィードバックを得るだけではなく、デザインプロセスを記録したドキュメントとしても利用ができるということです。

Adobe XDのようなツールを使えば、高忠実度のプロトタイプを簡単に構築できる。操作可能な「ホットスポット」 を描き、それをを他ページにリンクすることで、本物のように操作できるプロトタイプを簡単に作成できる

ハイファイ・プロトタイプは、デザインに命を吹き込みます。ビジュアルデザインとインタラクションデザインの両方を、すべての人に実感してもらえます。プロトタイプに実際のコンテンツを配置すれば、ユーザーがWebサイトやアプリケーションの機能やフローを体験できるため、有用なフィードバックを得られるようになります。

高忠実度のプロトタイプは、最終的に開発するものと比べれば、大抵は非常に素早く構築できるものです。そして、以下の点で役に立ちます。

• 案のテストに使用し、仮説を検証する
• 頭の中の考えを伝え、フィードバックを得る
• 新機能を提案する場合などにアイデアを提示する

まとめ

プロトタイプを容易に作成できるAdobe XDのようなツールは、今やUXデザイナーの主要な道具のひとつです。ペーパープロトタイプとして形にしたアイデアと完成した製品とをつなぐプロトタイプは、UXデザイナーの働き方を変えています。

デザインプロセスに沿って作業を進める上で、その時点の作業に適したツールを選ぶことは大切です。それぞれのツールにはそれぞれの強味があります。そして、異なるタスクで能力を発揮するものです。

デザインプロセスの初期にアイデアを描き出すなら、最適なツールは紙です。安価で効率的でもあります。紙は、共同作業に適しているため、複数のデザイナーが共同でプロトタイプを作成できます。

ワイヤフレームは、機能性に注目している場合に最適で、全体的な構造を確認するために使えます。ワイヤフレームをつないで、操作可能なプロトタイプにすれば、詳細に気を取られたりせずに、ユーザーフローを確認することができます。

最後に、より詳細なモックアップを使用して作成されたハイファイ・プロトタイプは、関係者に、デザインの実際のルックアンドフィールを感じさせます。この時点では細部が重要です。カラーパレット、タイポグラフィーの選択、インタラクションやアニメーションといった側面にも配慮します。

最終的に作られるものがサイトであれアプリであれ、反復プロセスの中で熟考されたプロトタイプを活用すれば、確実にユーザーのニーズに応え、求められるデザインをつくり出せるでしょう。その場の作業に適したプロトタイプツールを選びさえすれば、それだけで準備が整ったも同然です。

この記事はThe Fundamentals of Wireframing and Prototyping（著者: Christopher Murphy）の抄訳です