Webデザインにおけるプロトタイプとは？ワイヤーフレームとの違いや作成方法を紹介 市川莉緒 2021.07.30 2023/1/19 UI/UX UIUXWEBデザインユーザビリティテスト プロトタイプとは、操作性の評価に用いる試作品 プロトタイプ以外で評価を行う方法 プロトタイプの作成方法 プロトタイプとは、操作性の評価に用いる試作品 プロトタイプとは、Webサイトやアプリなどの「試作品」であり、主に操作性を評価する際に用いられます。プロトタイプはコーディングが不要で、紙やツールを使って簡易的に作成できるため、課題発見から修正が容易です。 プロトタイプはユーザビリティテスト*などのユーザーによる評価のほか、作成過程のデザインや動作のすり合わせなど、関係者内での確認作業のためにも用いられます。 *ユーザビリティテストの実施方法をこちらの記事で詳しく解説しています。 また、Webサイトの作成段階に応じてテストする項目や対象が異なるため、作成するプロトタイプの具体性も段階によって変わります（詳しく後述します）。 ワイヤーフレームやモックアップとの違い ワイヤーフレームは「どこに・何を・どう配置する」のかを表現した情報設計で、モックアップは情報設計後のビジュアルデザインを詰めたものです。 対してプロトタイプは完成品を想定して動的要素などを加えた試作品を指します。 ただし、プロトタイプは最初から完璧な試作品を作成することが目的ではありません。情報設計とデザインを具体化させることを目的に、プロトタイプを段階に応じて数回作成し、情報設計の段階から評価と改善を繰り返しおこないます。 ワイヤーフレームの作り方はこちら、モックアップの役割についてはこちらの記事をご覧ください。 なぜプロトタイプがUXDで使われる？ プロトタイプは作成から修正までを容易に行えるため、ユーザーエクスペリエンス・デザイン* (UXD) でよく使われます。 UXDで大切なのは、ユーザー目線の評価とそれに基づく改善を繰り返して完成に近づけることです。最初は手書きでも良いのでプロトタイプを簡単に作成し、徐々に要素を具体化させていくことがポイントです。 *ユーザー体験 (UX) をデザインすることをユーザーエクスペリエンス・デザイン (UXD) と呼ぶ。UXの詳しい解説についてはこちらの記事をご覧ください。 最初から時間をかけて作りこんでしまうと、検証段階で操作性や機能性、デザイン上の不具合が明らかになったとき、修正に大きな手間と時間がかかります。初期段階で基本的な情報設計などの根本的な課題を発見するために、後から変更がしやすく、柔軟性のあるプロトタイプを作成しましょう。 プロトタイプ以外で評価を行う方法 プロトタイプを作成してWebサイト公開前に評価を行う以外に、公開後に実データをもとに評価を行うこともあります。 プロトタイプの作成と評価を繰り返し行うメリットは、公開前にユーザー目線に立てることですが、作成から改善までかなりの時間がかかることがデメリットです。さらに、作成に慣れていない、関係者が少ないなどの条件次第では、プロトタイプを何度も作成し、評価と改善を行うことはコストや時間の面から難しい場合があります。 また、Webサイトを作成する以上購入数やお問合せ数といったコンバージョン (CV) などの定量評価を行うことも大切です。プロトタイプを用いた操作性や使いやすさなどの定性評価のみだと、公開後に最終的な数値に結びついているのかが分からない場合もあります。 動的要素が多いWebサイトの場合はプロトタイプの作成と評価を繰り返すことを推奨しますが、それ以外のWebサイトで特に定量目標がある場合は簡易的なプロトタイプを用いて大まかな動作の検証をした後公開し、実データをもとに評価を行うこともあります。 公開後の主な評価方法は以下の2つです。 ・A/Bテスト ・ヒートマップ プロトタイプを用いて公開前に評価する場合と比較してメリットやデメリットをご紹介します。 プロトタイプを用いた評価 A/Bテスト ヒートマップ 概要 作成したプロトタイプをもとに、使いやすさなど他人に評価してもらう 2パターンのデザインでどちらがCVなどに効果的か検証する 公開後のWebサイトをユーザーがどのように熟読、クリック、読了しているか検証する 使える場面 公開前の段階 公開済みのWebサイト 公開済みのWebサイト テスト対象 外部協力者、知人など 実ユーザー 実ユーザー メリット ・設計の初期段階から完成前まで各段階で評価できる ・テスト対象に直接行動の質問ができ、手元を観察できる ・コーディングは不要なので初心者でも簡単に実装し検証できる ・完成物を全体的に評価できる ・定量データ、定性データの両面を評価できる ・誰でも視覚的に評価できる ・無料からできる デメリット ・公開までに時間と工数がかかる ・知識や経験、慣れが必要 ・定量的な結果は分かるが、原因やプロセスなど定性的な部分が分からない ・複数要素の比較検証は難しい ・公開前の評価はできない ・ユーザーの心理まで読み解くには慣れが必要 無料のヒートマップを使う A/Bテスト A/Bテストは公開後のWebサイトに対して定量的な効果検証を行うためのテストです。たとえば、2つの異なるファーストビューを比較し、どちらがCVに対して効果的かを検証する際に用います。 Google Optimizeなどの外部の無料ツールを使うことで、コーディングせずに誰でも簡単に比較検証が可能です。 ただし、プロトタイプを用いたユーザビリティテストに比べ、ユーザーがWebサイトの中でどのような行動を取っているかなどの定性的なデータを割り出すことはできないため、数値の測定など定量データの検証の際にのみ活用できる手法です。 A/Bテストの実施方法についてはこちらの記事をご覧ください。 ヒートマップ CVなどの定量的なデータと、Webサイト内のユーザー行動などの定性的なデータの両方を評価できるツールがヒートマップです。 ヒートマップとは、無料から使えるユーザー行動の計測ツールで、熟読や離脱、クリック箇所などが主に分かります。 ヒートマップは公開後のページに限定されるものの、定量と定性の両方の面から評価できます。早く公開する必要がある場合や効果検証と改善のサイクルを素早く回したい場合はヒートマップがオススメです。 ヒートマップを使ってユーザー心理を読み解いたことでCVが2倍以上になった実例もあります。UI/UX改善の事例についてはこちらの記事の後半部分をご覧ください。 無料のヒートマップを使う プロトタイプの作成方法 プロトタイプはWebサイト作成の段階に応じて、検証する目的や求められる要素の具体度が異なります。今回は、一般的にプロトタイプがよく使われる情報設計（ワイヤーフレーム）とビジュアル／インタラクションデザイン（モックアップ）の段階に特化して説明します。 情報設計（ワイヤーフレーム）のプロトタイプ 情報設計の段階では、紙に手書きで簡易的にプロトタイプ（ペーパープロトタイプ）を作成することが多くあります。この段階のプロトタイプはデザインの具体性が低い「低忠実度」と呼ばれており、ワイヤーフレームやコンセプトさえ決まっていれば、コーディングやツールの利用経験が無くても作成できます。 ペーパープロトタイプでは、たとえば評価する側がWebサイトのボタンに見立てた箇所をクリックした際に、テスト実施側が遷移先のページを出すように、人力でページ内の動作を表現します。 低忠実度のプロトタイプのメリットは、短時間で作成・変更できることです。ワイヤーフレームで作成した導線やナビゲーションの位置、レイアウトなど、「ユーザーが想定通りにWebサイト内を行動できるか」を素早く評価します。 ビジュアルデザイン（モックアップ）のプロトタイプ ビジュアルデザインの段階では、モックアップで詰めたデザインをもとに見た目や操作性（インタラクティブデザイン）の評価を行います。実際にユーザーや知り合いなどに操作してもらい課題を発見します。 実際に操作してもらうために、プロトタイピング作成ツールを利用します。ツールはいろいろありますが、Adobe XDやFigma、InVisionなど、無料から使えて世界的に広く使われているツールがオススメです。 初心者の方はツールを使いこなすのに苦労するかもしれませんが、慣れると完成品に最も近い状態で評価できます。特にインタラクティブデザインの評価がしやすくなります。 ※サンプルではAdobe XDを使用 作成後は本当の利用文脈（シナリオ）に当てはめて何度かユーザビリティテストを行いデザインや動作を明確化させましょう。 ユーザビリティテストの実施方法や手順についてはこちらの記事で詳しく解説しています。 まとめ プロトタイプは広義で「試作品」の意味であるため、最初から完成品を目指して作りこんでしまうことがよくあります。実際のユーザーにプロトタイプを評価してもらうと、設計面や動作面での課題や改善箇所が高確率で出現するため、力作であるほど作り直す手間や時間、コストと精神的ダメージは大きくなります。 最初は手書きで構わないので簡単にプロトタイプを作成し、検証と改修を積み重ねましょう。結果として少ない工数で、完成度の高いWebサイトを作ることができます。 また、Webサイトを無事公開できれば、実際のユーザーが本当に想定通りWebサイトを利用できているかヒートマップを使って検証できるので、併せて使ってみてください。 無料のヒートマップを使う 編集者情報 市川莉緒 大阪大学卒。新卒でFaber Companyに入社後、 300近くの会社のヒートマップ分析に従事。 現在はミエルカヒートマップのマーケティングを担当。 大学時代1年休学し1人で世界を放浪。 グレートバリアリーフでのダイビングが最高の思い出。 監修者情報 玉飼 真一 この記事をシェアする
