Web サイトデザインに役立つプロトタイプの使い方とは？ | アドビ UX 道場 #UXDojo

Simona Toader によるイラストレーション

プロトタイピングは、デザインチームがアイデアを出し、それを試して、コンセプトを現実的なものに近づけるプロセスです。デザイン思考プロセスでは、ユーザビリティテストの前の 4 番目のステップに位置づけられています。

作成するものはさまざまで、紙にスケッチを描くこともあれば、デジタルデザインを作成することもあります。基本的に、プロトタイプとは、最終的な成果物が完成する前に、ユーザーが見たり操作したりできるデザインサンプルです。

一般的なプロトタイプはコードを記述することなく作成されます。デザイナーがアートボードをつなぎ合わせて、インタラクティブでクリック可能な体験を実現できるプロトタイプ作成ツールはいくつも存在します。つまり開発者に依頼することなく、操作が可能なプロトタイプを作成できるのです。言い換えるなら、実際に予算、時間、人員を開発に投資する前に、ユーザーやステークホルダーにプロトタイプを試してもらい、可能な限り問題点を洗い出しておくのは賢い考えです。

プロトタイプがデザインプロセスの様々な段階で利用できるというのは重要な点です。デザインの初期段階でも、ある程度まで進行した後でも、アイデアの検証には有効なツールです。

Web デザインのプロトタイプをつくる理由

プロトタイプは、サイトを公開する前にコンセプトをテストすることを目的に作成されるインタラクティブな体験です。プロトタイプを利用することにより、デザインと開発のライフサイクル全体を通して、多くの時間、費用、労力を節約できます。

プロトタイプを作成する主な理由には、以下のようなものがあります。

• 新しいアイデアの探求：プロトタイプにより、デザイナーはさまざまなアイデアや解決案を試すことが可能になります。複数の潜在的なシナリオを自由にテストできるため、最終的なサイトの機能や操作性を最適化する手段にもなります。
• 問題のある個所の発見：プロトタイプは、ユーザーが直面している問題をより深く理解できる方法です。実際にユーザーに操作してもらい、何がうまくいって何がうまくいかないのかを観察することで、デザイナーはサイトやシステムに対する理解を深められます。
• ユーザビリティの検証：ユーザーが操作できるプロトタイプを作成すると、サイトのユーザビリティに関連する課題の特定に役立ちます。そのため、開発に移行する前に、デザイナーが必要な変更を行うことが可能になります。
• ステークホルダーへの訴求：プロトタイプがあれば、ステークホルダーやエンドユーザーがデザインと関わる場をつくり、彼らもプロジェクトに参加しているのだと感じられる機会を提供できます。これは、関係者の関心を高め、より早くプロジェクトを進めるための役に立ちます。
• 新規コンセプトの売り込み：プロトタイプは、社内外のステークホルダーにインスピレーションを与え、最終的にデザイン案を売り込むための素晴らしい方法です。また、革命的なアイデアやプロセスに、コストをかけずに市場からの注目を集める方法としても優れています。

プロトタイプの種類

プロトタイプは、低忠実度、中忠実度、高忠実度と呼ばれる手法や技法に分類できます。忠実度とはプロトタイプの詳細度や機能性のことで、一般的に、忠実度が高いほど作成の労力とコストが高くなります。プロトタイプを使用するシナリオ次第で、必要な忠実度は異なります。そして、忠実度ごとに長所と短所があります。それぞれの忠実度を、いつどのように使うかを知ることは重要です。

低忠実度プロトタイプ

低忠実度プロトタイプは、最も迅速に作成でき、最も労力のかからないプロトタイプで、ペーパープロトタイプを指すことが一般的です。このプロトタイプは、不完全なデザインを簡易的に表現し、デザインに多くの時間とエネルギーを費やす前に、概要レベルでコンセプトをテストするのに向いています。また、低忠実度プロトタイプは、デザインプロセスの初期にコンセプトをテストし、フィードバックを収集するために利用できます。手描きで作成できるため、デザイナーはさまざまなコンセプトを簡単にテストできます。

長所

• 迅速：特にペーパープロトタイプは容易に素早く作成できます。ブレインストーミングにおいて、さまざまなアイデアやコンセプトを展開し、その場で変更や更新を行うことも可能です。
• 安価：短時間で作成できるため、人件費を抑えられます。また、ペンと紙さえあれば作成可能なため材料費がかかりません。
• 共感：低忠実度プロトタイプの作成は、チームづくりに最適の活動です。チームとしてのやる気や責任感の向上、さらにはユーザーやサイトへの共感を生み出す効果があります。
• 率直なフィードバック：ユーザーは、より忠実度の低いプロトタイプに対してよりオープンなフィードバックをする傾向があります。あまり手間がかかっていないと思うと、より正直に答えやすいからです。

短所

• 不十分：低忠実度プロトタイプは実際のデジタル体験の代用としては不十分です。リアルさの欠如は、誤った評価の原因になります。
• 不正確：体験にリアルさがないと、ユーザーからのフィードバックが不正確になります。ユーザーは欠けている部分を想像で埋めなければなりません。それは、デザイナーが想定しているものとは異なる可能性があります。

中忠実度プロトタイプ

中忠実度プロトタイプは、デジタルで、グレースケールで作成されることが多く、サイト制作ではワイヤーフレームがこのカテゴリに含まれます。通常、ユーザーフローと情報アーキテクチャに重点を置いて作成され、ブランディングは省かれることもあります。

ユーザーフローと情報アーキテクチャを主眼にモノトーンで作成したプロトタイプを使うと、ユーザーは、ブランディングやビジュアルデザインに気を取られることなく、デザインの基本的な構成に集中できます。そのため、サイトの美的な側面に時間を費やす前に、サイトの基本的なユーザビリティを確認することができます。

ワイヤーフレームに関しては、制作に役立つ素晴らしいリソースがオンライン上に数多くあります。ここでは、中忠実度プロトタイプの長所と短所という観点から説明します。

長所

• デジタル感：デジタルの中忠実度プロトタイプは、ペーパープロトタイプよりも最終的なサイトに近くなります。ユーザーにとってはよりリアルな体験になるため、フィードバックの正確性に良い影響を与えます。
• 迅速な修正：中忠実度プロトタイプは、高忠実度プロトタイプよりも調整しやすいため、素早く修正を繰り返したい場面に向いています。
• 細部が不要：中忠実度プロトタイプは、細部の検討に時間やコストを費やす前にテストできます。また、細部にとらわれないようにアイデアをテストするのに向いています。

短所

• 細部の欠如：中忠実度プロトタイプは迅速にデジタル体験を構築できますが、最終的なサイトを正確に表現するものではありません。ユーザーからのフィードバックを収集する際、視覚的要素（画像、テキスト、色など）が欠けていると、全体的な体験に影響を与える可能性があります。

高忠実度プロトタイプ

高忠実度プロトタイプは、ブランディング、画像、コピー、アニメーションなどを取り込んだ最終段階に近い体験を提供します。デザインが完成に近づいたら、開発に実際に着手する前に、高忠実度プロトタイプを使ってユーザーテストを行うことは重要です。

長所

• リアルな体験：最終的なサイトの詳細を模倣した体験からは、より正確で意味のあるフィードバックを得られます。市場のユーザーの反応を予測するのにも、高忠実度プロトタイプは最良の方法です。
• 最終確認：開発段階に入る前にデザインの完成度をチェックするのに適しています。最終的なコンセプトをテストして、役に立つ望ましいサイトであることが確認できれば、自信を持って開発に臨めます。
• 開発への引継ぎ：忠実度の高いインタラクティブなプロトタイプは、開発者との情報共有に効果的です。開発者は、見た目だけでなく、サイトがどのように動作すべきかをより明確に把握することができます。

短所

• 作成コスト：高忠実度のプロトタイプは、作成に多くのリソースを必要とするため、時間も費用もかかります。したがって、新しいコンセプトの検証は、より低い忠実度のプロトタイプから始めるべきです。
• 詳細が必要：高忠実度のプロトタイプは、細かいディテールを含むため、作成にはより多くの準備が必要になります。
• ユーザーの躊躇：ユーザーは、出来上がっているものだと思うと、自分の考えを飲み込んでしまい、自由に発言しなくなることがあります。

Web サイトのプロトタイプ作成の手順

最後に、サイトのデザインプロセスにおける、基本的なプロトタイプの作成手順を確認します。

まず、サイトのプロトタイプに着手する前に、ユーザーを特定し、彼らの問題を定義し、それらを解決するための適切なソリューションを考案する必要があります。これが完了した時点で、プロトタイプ制作を開始することができます。

以下は一般的なサイトのプロトタイプ作成手順です。

1. テストしたい機能を選択します。1 回のセッションでサイトのすべての機能を効果的にテストすることは不可能です。そのため、このセッションでスポットを当てたい機能や操作フローをピンポイントで選びます。
2. 選択した機能やフローを具体化したプロトタイプを作成します。すべての機能を網羅するプロトタイプの作成には膨大な時間がかかりますし、そもそも不要です。代わりに、テストしたい機能に絞ってプロトタイプを作成します。
3. ユーザー、パートナー、ステークホルダーにデザインを見せてテストします。ユーザーがサイトを操作する様子を観察し、記録して、現状のデザインにおけるユーザビリティの問題点があればメモを取ります。
4. テストの後、フィードバックをまとめ、その中から重要度の高い洞察を抽出して方針を決めます。結果に応じてデザインを更新します。
5. 更新したサイトデザインをユーザーに見せてテストします。この改善プロセスを繰り返し、デザインを洗練させます。

おわりに

この記事では、プロトタイプについてサイトデザインの観点から説明しました。ぜひ紹介した情報を使い、サイトのデザインプロセスを向上させる実行可能なプランを作成してみてください。コンセプトのテスト、既存のアイデアの検証、将来のデザインの調査など、サイトのプロトタイプは様々な目的に利用できます。また、プロトタイプは、デザインを改善し、ステークホルダーからの賛同を得るためにも役立ちます。プロトタイプは、開発コストやリソースをかけずにアイデアを具体化できる強力な手法です。

この記事は What Is Prototyping?（著者: Justin Morales）の抄訳です