デザインの画面をつないで、実際に触れる状態にしたものをプロトタイプと呼びます。静止した画面を見るより、遷移や操作の流れを確認できる利点があります。
ただし作り込むほど工数がかかります。全画面の全操作を再現すると、実装に近い手間が発生します。それでいて、実装しないと分からないことは残ります。
この記事では、確認できる範囲、確認できないこと、目的から範囲を決める方法、そして発注側の関わり方を整理します。
この記事でわかること
・確認できるのは遷移と操作の流れ
・実装しないと分からないことは残る
・作る範囲は、確認したいことから決める
・全画面を再現する必要はない
・発注側は主要な導線だけ確認すれば足りる
・確認は実機で行う
確認できるのは遷移と操作の流れ
プロトタイプで判断できるのは、静止画では分からない動きの部分です。
| 確認できること | 静止画では | 有効性 |
|---|---|---|
| 画面の遷移順 | 分からない | 高い |
| 目的までの手数 | 数えにくい | 高い |
| 戻る操作の挙動 | 分からない | 高い |
| 選択肢を選んだ後の変化 | 分からない | 中程度 |
| 開閉する要素の見え方 | 分からない | 中程度 |
最も価値があるのは、目的までの手数を体感できることです。画面ごとに見ると問題なくても、通しで操作すると手数が多いと分かることがあります。
静止画では分からない、遷移と手数を確認できる。
画面ごとでは問題なくても、通すと手数が見える。
実装しないと分からないことは残る
プロトタイプで再現できない要素があります。これらは実装後に確認するしかありません。
| 確認できないこと | 理由 | 対応 |
|---|---|---|
| 実際の表示速度 | 読み込みが発生しない | 実装後に確認 |
| 実データでの見え方 | 想定の文字数で作られている | 長い内容で確認 |
| 入力時の挙動 | 実際の入力ができない | 実装後に確認 |
| 画面幅ごとの変化 | 固定の幅で作られる | 実装後に確認 |
| エラー時の表示 | 再現されないことが多い | 設計として別途確認 |
実データでの見え方は、特に見落とされます。プロトタイプでちょうど良く見えた見出しが、実際の文言で何行にもなることがあります。
表示速度、実データ、入力の挙動は再現できない。
実データでの見え方は特に見落とされる。
作る範囲は確認したいことから決める
何を確認したいかによって、必要な作り込みの度合いが変わります。
| 確認したいこと | 必要な範囲 | 工数 |
|---|---|---|
| 全体の構成 | 主要ページの遷移のみ | 小さい |
| 問い合わせまでの導線 | その経路の画面のみ | 小さい |
| 操作の分かりやすさ | 対象の操作を含む画面 | 中程度 |
| 利用者による検証 | 検証する経路を実際に動く形で | 中程度 |
| 全機能の確認 | 全画面と全操作 | 大きい |
最後の行を選ぶ理由は、ほとんどの場合ありません。実装に近い工数をかけるなら、実装してから確認するほうが確実です。
確認したいことに必要な範囲だけを作る。
全画面を再現するなら、実装したほうが確実。
利用者に触ってもらう場合の作り方
検証に使う場合は、検証する経路だけが動けば足ります。
- 検証したい行動を決める（例：問い合わせまで進む）
- その経路に必要な画面だけを用意する
- 経路上の操作だけをつなぐ
- 経路外を押した場合の挙動を決めておく
- 実機で動くことを確認してから実施する
経路外を押されたときに何も起きないと、参加者が戸惑います。「この先は今回の対象外です」と伝えるか、事前に説明してください。検証の進め方はユーザビリティテストのやり方｜低コストで始める実践手順を参照してください。
検証する経路だけが動けば足りる。
経路外を押されたときの扱いを決めておく。
発注側は主要な導線だけ確認する
発注する立場では、すべての画面を確認する必要はありません。
- 訪問から問い合わせまでの経路
- 料金を確認してから戻る経路
- スマートフォンでの主要な操作
- 自社で更新する予定のページ
確認すべきは、成果に直結する経路です。その経路で手数が多い、迷う箇所があると感じたら、その時点で指摘してください。実装後の修正は費用が大きくなります。
指摘の方法はFigmaを発注側が使えるようになる意味｜確認と指示のために覚える範囲を参照してください。
成果に直結する経路だけを確認すれば足りる。
実装後の修正は費用が大きくなる。
確認は実機で行う
パソコンの画面で見るだけでは、実際の操作感が分かりません。
| 確認方法 | 分かること | 限界 |
|---|---|---|
| パソコンで見る | 遷移の順序 | 指での操作感が分からない |
| スマートフォンで触る | 実際の操作感 | 速度は分からない |
| 複数人で触る | 迷う箇所の傾向 | 手間がかかる |
スマートフォン向けの設計は、必ず実機で触ってください。押しにくさや、指が届かない位置は、画面上では分かりません。操作性はスマホで押しやすいボタンの設計｜大きさより間隔が誤タップを決めるを参照してください。
スマートフォン向けは必ず実機で触る。
押しにくさや到達範囲は、画面上では分からない。
作り込みすぎない判断
動きを細かく作り込むと、本来確認したいことから注意がそれます。
| 状態 | 起きること | 対応 |
|---|---|---|
| 動きが凝っている | 動きの評価に議論が向く | 確認の目的を明示する |
| 全画面が動く | 確認に時間がかかる | 経路を絞る |
| 実装と誤解される | そのまま実装できると思われる | 位置づけを説明する |
| 修正のたびに作り直し | 工数が膨らむ | 確定後に作る |
構成が固まる前に作ると、修正のたびに作り直しになります。ワイヤーフレームの段階で構成を固め、その後に作るほうが無駄がありません。
構成の固め方はワイヤーフレームの作り方｜構成を固めてからデザインに進むを参照してください。
構成が固まる前に作ると、修正のたびに作り直しになる。
動きを凝ると、確認したいことから注意がそれる。
工程全体の中で見る
この工程の前後には、情報の分類と構造の設計があります。全体の流れは情報設計（IA）とは？わかりやすいサイト構成の作り方を参照してください。
よくある失敗
全画面を再現しようとする
実装に近い工数がかかります。確認したいことに必要な範囲だけを作ってください。
構成が固まる前に作る
修正のたびに作り直しになります。ワイヤーフレームで構成を固めてから作ってください。
パソコンの画面だけで確認する
指での操作感が分かりません。スマートフォン向けは実機で触ってください。
プロトタイプで実データを想定しない
実際の文言で見出しが何行にもなることがあります。長い内容でも確認してください。
動きを凝りすぎる
動きの評価に議論が向き、確認したいことから注意がそれます。
よくある質問
必ず作るべきですか
必須ではありません。ページ数が少なく遷移が単純なサイトでは、静止画の確認で足りることもあります。手数が多い、判断が分かれる導線がある場合に価値が出ます。
実装の代わりになりますか
なりません。表示速度、実データでの見え方、入力時の挙動、画面幅ごとの変化は再現できません。これらは実装後に確認する必要があります。
発注側でも作れますか
作ることはできますが、必要性は低いと考えられます。確認と指示に集中するほうが、時間の使い方として効率的です。
プロトタイプの費用は別途かかりますか
制作会社によって、含まれる場合と別途になる場合があります。範囲によって工数が変わるため、どこまで作るかを事前に合意してください。
修正の依頼はどう伝えればよいですか
該当する画面にコメントを付け、目的を書いてください。「手数が多い」という指摘であれば、どの操作を減らしたいかまで伝えると、代替案が出やすくなります。
まとめ
プロトタイプは、デザインの画面をつないで実際に触れる状態にしたものです。静止した画面では分からない遷移の順序、目的までの手数、戻る操作の挙動を確認できます。最も価値があるのは手数を体感できることで、画面ごとに見ると問題なくても通しで操作すると手数が多いと分かることがあります。
ただし作り込むほど工数がかかり、それでいて実装しないと分からないことは残ります。表示速度、実データでの見え方、入力時の挙動、画面幅ごとの変化は再現できません。特に実データでの見え方は見落とされやすく、プロトタイプでちょうど良く見えた見出しが実際の文言で何行にもなることがあります。
したがって作る範囲は、確認したいことから決めてください。全体の構成を見たいなら主要ページの遷移だけ、問い合わせまでの導線を確認したいならその経路だけで足ります。全画面と全操作を再現するなら、実装に近い工数をかけることになり、それなら実装してから確認するほうが確実です。また構成が固まる前に作ると修正のたびに作り直しになるため、ワイヤーフレームで構成を固めてから着手してください。
当社ではホームページ制作において、確認しやすい進め方をご提案しています。デザイン面の検討はデザイン制作とあわせてご相談ください。
