ワイヤーフレームとプロトタイプ：粗く早く作り、試しながら仕上げる｜UI・UXデザイン入門 第5回

忠実度：どこまで作り込むかを決める

プロトタイプには、忠実度（フィデリティ）という考え方があります。完成した画面に、見た目や動きがどれだけ近いかの度合いです。ニールセン・ノーマン・グループ（NN/g）は、忠実度を次の3つの観点で説明しています（参考資料1）。

• 操作性：高い忠実度では、リンクやメニューが実際に動きます。低い忠実度では、ボタンは押しても動かず、テストのときは人が「コンピューター役」になって、次の画面の紙を差し出します。
• 見た目：高い忠実度では、配置、余白、文字の大きさの差、画面サイズまで完成形に近づけます。低い忠実度では、白黒の手描きのスケッチやワイヤーフレームです。
• 中身：高い忠実度では、実際の文章や写真が入っています。低い忠実度では、要約や仮の文字、仮の画像です。

3つの観点は、それぞれ別に決められます。たとえば、「見た目は白黒のワイヤーフレームのままだが、画面同士はクリックでつながっている」というプロトタイプもよく使われます。

低い忠実度と高い忠実度の使い分け

NN/gは、低い忠実度と高い忠実度のプロトタイプに、それぞれ次のような利点があると説明しています（参考資料1）（図3）。

低い忠実度が向いている場面（設計の初期、早く何度も試したいとき）
– 準備に時間がかからないので、テストまでに多くの案を検討できる
– テストの合間や途中でも、すぐに描き直せる
– いかにも未完成に見えるので、参加者が遠慮せずに率直な意見を言いやすい
– 作り手も関係者も思い入れが少なく、変えることに抵抗が少ない

高い忠実度が向いている場面（設計の後半、本物らしさが必要なとき）
– 画面の反応が本物に近いので、参加者の操作が途切れにくい
– 一連の作業の流れや、メニューの開き方などの細かな部品、文字の読みやすさまで確かめられる
– 本物のソフトウェアに見えるので、参加者がより自然にふるまう
– 進行役が観察に集中でき、テスト中の操作ミスも減らせる

また、NN/gは、人が裏側で操作して本物のように見せる「オズの魔法使い」と呼ばれる方法が、AIを使ったシステムを、AIを作る前に試すのに役立つとも紹介しています（参考資料1）。

ワイヤーフレームの描き方

ワイヤーフレームは、絵が得意でなくても描けます。大事なのは、きれいに描くことではなく、この画面で何を伝え、何をしてもらうかを形にすることです。次の手順で描くと、迷いにくくなります（図4）。

1. 画面の目的を1文で書く：「この画面で、利用者が商品の色とサイズを選んでカートに入れる」のように、目的を1つに絞ります。目的が2つ3つあると、どれも中途半端になりがちです。
2. 置くべき要素を書き出す：商品名、価格、画像、色とサイズの選択、カートに入れるボタン、送料、届く日の目安、説明文、レビュー……と、必要なものを箇条書きにします。
3. 優先順位をつける：利用者が目的を果たすために、先に見るべきものから順に番号をつけます。第1回で見たように、「送料が最後まで分からない」は購入をやめる理由になりやすいので、上のほうに置く候補になります。
4. 配置する：優先順位の高いものほど、上に、大きく置きます。スマートフォンでは縦に一列に並ぶことが多いので、まずスマートフォンの縦長の画面で描くと、優先順位がはっきりします。
5. 画面のつながりを描く：ボタンを押したら、どの画面に移るのかを矢印で描きます。複数の画面の流れが見えると、抜け漏れ（「カートに入れたあと、どこへ行くのか」など）に気づけます。

よくある失敗

• 見た目から描き始める：色や写真から考え始めると、配置と優先順位の議論が後回しになります。最初は白黒で描きます。
• 「とりあえず全部載せる」：社内の各部署の要望をすべて載せると、いちばん大事な情報が埋もれます。前回学んだ原則8「美的で最小限のデザイン」を思い出しましょう。
• 1画面だけを描く：画面単体はよくても、前後の画面とのつながりで迷うことがあります。流れで描くことが大切です。

この記事の監修者に相談できます

監修者の田中磨生が代表を務める株式会社Abinで、ご相談をお受けしています。

相談無料ツギノテ編集部に相談する→

Figmaでプロトタイプを作る基本

画面のデザインやプロトタイプを作るツールとして広く使われているものに、Figma（フィグマ）があります。ブラウザで動き、複数の人が同じファイルを同時に編集できるのが特徴です。Figmaのヘルプによると、プロトタイプの機能はすべてのプランで使えます（参考資料2）。ここでは、Figmaのヘルプ（参考資料2）に出てくる基本の言葉を押さえます（図5）。

• フレーム：1枚の画面にあたる枠。キャンバス上に直接置いた一番外側のフレーム（トップレベルのフレーム）が、移動先になれます。
• ホットスポット：操作のきっかけになる部分。ボタン、リンク、アイコン、画像などです。
• コネクション：ホットスポットから行き先のフレームへ伸びる青い矢印。動きの設定はこのコネクションにつけます。
• トリガー：プロトタイプを進める入力のこと。タップ、クリック、ドラッグ、マウスを乗せる（ホバー）などがあります。
• アクション：トリガーで何が起きるか。別のフレームへの移動、外部のURLを開く、などです。
• アニメーション：画面の切り替わり方。種類、方向、時間（1ミリ秒〜10秒）、動きの緩急を設定できます。
• フローと開始点：つながったフレームのまとまりがフローで、それぞれに開始点があります。1つのページに複数のフローを作れます。

作ったプロトタイプは、プレゼンテーション表示で再生でき、全体または特定のフローの開始点のリンクを共有できます。スマートフォンでも見られ、見た人がコメントを残すこともできます（参考資料2）。Shiftキー＋Eで、デザインとプロトタイプの編集画面を切り替えられます（参考資料2）。

小さく始める手順

1. ワイヤーフレームで描いた画面を、Figmaで1画面1フレームとして並べる（白黒の箱のままでよい）。
2. 主な流れ（例：商品を選ぶ→カートに入れる→注文内容を確認する）のボタンにだけ、コネクションをつける。
3. プレゼンテーション表示で自分で操作し、行き止まりや、つなぎ忘れがないかを確かめる。
4. 共有リンクを社内の何人かに送り、「このプロトタイプで、〇〇を注文してください」と頼んで、迷った場所を聞く。

最初からすべてのボタンをつなぐ必要はありません。試したい流れの分だけつなげば十分です。

なお、Figmaのヘルプには、AIを使ってインタラクションを作る機能の説明も掲載されています（参考資料3）。ツールの機能は今後も変わっていきますが（2026年11月時点）、「何を確かめるためのプロトタイプか」を先に決めることの大切さは変わりません。

実務ではこう使う：プロトタイプの「目的」を先に決める

プロトタイプづくりで最も多い失敗は、何を確かめるためのものかを決めずに作り始めることです。目的が決まれば、忠実度もおのずと決まります（図6）。

制作会社に依頼するときも、「いつ、どの忠実度のものを、何を確かめるために見せてもらうか」を最初に決めておくと、手戻りが減ります。たとえば、「デザインに入る前に、主な流れをつないだ白黒のプロトタイプで、社外の5人に試してもらう工程を入れてほしい」と伝えれば、HCDに沿った進め方になります。

この回のまとめ

• ワイヤーフレームは配置と優先順位を示す骨組み、プロトタイプは操作の流れを試せる試作品。境目ははっきりしたものではない。
• 忠実度は、操作性・見た目・中身の3つの観点で、それぞれ別に決められる（NN/g）。
• 初期で早く何度も試したいときは低い忠実度、本物らしさが必要な後半は高い忠実度が向いている。
• ワイヤーフレームは、目的を1文で書く→要素を書き出す→優先順位→配置→つながり、の順で描く。
• Figmaでは、ホットスポットからコネクションを伸ばし、トリガーとアクションで動きを作る。試したい流れの分だけつなげば十分。

確認テスト

次回予告

第6回は「入力とフォームのUX」です。会員登録や申し込み、業務システムの入力画面で、ラベル、入力補助、必須と任意の示し方、エラーメッセージの書き方をどう設計すれば、利用者がつまずかずに入力できるのかを学びます。

参考資料

1. Kara Pernice「UX Prototypes: Low Fidelity vs. High Fidelity」Nielsen Norman Group（2016年12月18日） https://www.nngroup.com/articles/ux-prototype-hi-lo-fidelity/ （確認日：2026年11月12日）
2. Figma ヘルプセンター「Guide to prototyping in Figma」 https://help.figma.com/hc/en-us/articles/360040314193-Guide-to-prototyping-in-Figma （確認日：2026年11月12日）
3. Figma ヘルプセンター「Make interactions with AI」 https://help.figma.com/hc/en-us/articles/24004778051479-Make-interactions-with-AI （確認日：2026年11月12日）