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

by akihiro kamijo

Posted on 09-05-2018

連載

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

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

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

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

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

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

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

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

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

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

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

高忠実度のプロトタイプ(ハイファイ・プロトタイプ)

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

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

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

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

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

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

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

まとめ

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

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

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

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

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

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

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

Topics: クリエイティブ, UI/UX & Web, UI / Web デザイン

Products: