ワイヤーフレームとプロトタイプの違い：どちらが必要？

ワイヤーフレームとプロトタイプの違い：ワイヤーフレームは、画面のどこに何を置くかを示すシンプルなレイアウトです。プロトタイプは、製品がどう流れるかを確かめられる、クリックできるモデルです。Webサイト、アプリ、SaaSのプロジェクトの多くは、ワイヤーフレームが先、プロトタイプが後と、両方が必要です。シンプルなWebサイトなら、ワイヤーフレームまでで十分なことも多いでしょう。アプリは、プロトタイプを省かないでください。

ワイヤーフレームとプロトタイプ、先に作るのはどちら？

ワイヤーフレームが先、プロトタイプが後です。ワイヤーフレームで、各画面に何を載せるかを決めます。プロトタイプで、人がそれらの画面を進んで作業を終えられるかを確かめます。

モックアップは、その中間に入ります。3つの用語を一文ずつにまとめました。チームにそのまま伝えられます。

• ワイヤーフレーム：1つの画面を、枠、文字、ボタンだけで描いた、色のないシンプルなレイアウト。
• モックアップ：本物の色、フォント、画像を使った画面の静止画。クリックはできません。
• プロトタイプ：実際のコードは使わずに、製品のように動くクリック可能なモデル。

家づくりにたとえてみましょう。ワイヤーフレームは間取り図です。モックアップは、塗装や仕上げまで描いた完成予想図です。プロトタイプは、ドアを開けて部屋がつながっているかを確かめる内覧です。少なくとも最初と最後を済ませる前に、コンクリートを流し込むことはないでしょう。

ワイヤーフレームとは？

ワイヤーフレームは、コンテンツや操作をどこに置くかを示す、1つの画面のシンプルなレイアウトです。グレーの枠、仮の画像、飾りのない文字、ボタンで作ります。ブランドカラーも写真も、仕上げの作り込みもありません。あえてそうしています。

その素朴さに意味があります。ワイヤーフレームは変更に手間がかからないので、登録ボタンを動かしたり、セクションを丸ごと削ったりしても、数日ではなく数分で済みます。話題を構造に集中させる効果もあります。青がこれでいいかどうかを誰も議論していなければ、もっと大事な問いを投げかけられます。このページで合っているのか、載せるものは正しいのか、という問いです。

小さな例を挙げます。簿記事務所のランディングページのワイヤーフレームなら、見出しの枠、サービスの枠が3つ、お客様の声の帯、「相談を予約する」というボタンが1つ並ぶかもしれません。料金の案内を置く場所がないことが、ひと目でわかります。誰かがデザインに取りかかる前に、直せるわけです。

次のような習慣を持つと、ワイヤーフレームはぐっと役に立ちます。

• 登録する、訪問を予約する、請求書を支払うなど、作業ごとに1画面を描きます。こうすると、1つの画面の役割が1つになります。
• 見出しやボタンには、ダミーの文字ではなく実際の言葉を使います。本物の言葉を入れると、収まらないレイアウトが見えてきます。
• どの画面にも主な操作を表示し、それをいちばん目立たせます。
• まず、新しいユーザーが最初の成果にたどり着くために必要な画面から始め、残りは後で足します。

プロトタイプとは？ ローフィデリティ・プロトタイプとは？

プロトタイプは、実際のコードを使わずに、本物のように動く、クリックできる製品のモデルです。ボタンをタップすると、次の画面に移ります。フォームに入力すると、確認画面が表示されます。何も保存されず、支払いも行われませんが、実際の人が流れを試す様子を見て、どこでつまずくかを確かめられます。

プロトタイプは「忠実度(フィデリティ)」で表されます。完成品にどれだけ近い見た目と操作感かを示す言葉です。低忠実度のプロトタイプは粗めのもので、シンプルなワイヤーフレームの画面をつなげて、手順の流れをテストできるようにしたものが多くあります。高忠実度のプロトタイプは、最終的な色、書体、画像を使い、実際に動くプロダクトとほとんど変わらない感触になります。低忠実度は、手早く、安く修正できます。高忠実度は、最終承認や、投資家・関係者への提示に向いています。

次に、紙のプロトタイプがあります。紙やカードに手描きした画面を並べ、誰かがボタンを指すたびに、別の人がコンピューター役としてシートを差し替えるものです。ワイヤーフレームと紙のプロトタイプの違いは、主にここにあります。ワイヤーフレームは、人が見て読み取る画面のレイアウトです。紙のプロトタイプは、流れをテストするために手で演じるスケッチです。ワイヤーフレームは、どちらの出発点にもなります。

避けたいのは、流れをテストすべきときにレイアウトをテストしてしまう失敗です。「ユーザーは3ステップで購入手続きを終えられるか」を知りたいなら、ワイヤーフレーム1枚では答えが出ません。クリックして進められるものが必要です。

モックアップはどこに位置づけられる?

モックアップは、ワイヤーフレームとプロトタイプの中間にあたります。最終的な色、フォント、画像、ロゴをすべて入れた、スタイルの完成した静止画の画面です。プロダクトがどう見えるかは示せますが、どう動くかは示せません。

ブランドカラーを使い、本物の写真と力強い見出しを入れたホームページの画像を思い浮かべてください。眺めて見た目を承認することはできますが、メニューをクリックしたり、フォームを開いたりはできません。それがモックアップです。そのモックアップの画面同士をつないで、タップして進められるようにすると、高忠実度のプロトタイプになります。

避けたいのは、モックアップを「プロダクトが機能する証拠」とみなしてしまう失敗です。見栄えのよい画像は、わかりにくい流れを隠してしまうことがあります。モックアップは見た目の合意に使い、手順の確認にはプロトタイプを使ってください。

ワイヤーフレームとプロトタイプを比べてみる

ワイヤーフレームとプロトタイプの違いは、ひとことで言えば次のとおりです。ワイヤーフレームは「どこに何を置くか」を示し、プロトタイプは「使ったときに何が起こるか」を示します。下の表では、中間の段階としてモックアップも加えているので、3つを一度に見比べられます。

大きなトレードオフは、スピードと証明力のどちらを取るかです。ワイヤーフレームは手早く安く修正できますが、証明できるのはレイアウトが妥当だということだけです。プロトタイプは手間がかかりますが、実際の人が手順を最後まで進められるかどうかを確かめられるのは、3つのうちプロトタイプだけです。

簡単な判断の目安があります。疑問が「これはどこに置くべき?」で始まるなら、ワイヤーフレームを作ります。「誰かがこれを最後までやり遂げられる?」で始まるなら、プロトタイプを作ります。

最初にお金をかけるべきなのは、Webサイトのワイヤーフレームとアプリのプロトタイプのどちら?

最も大きなリスクに答えてくれる段階に、お金をかけましょう。シンプルなWebサイトでは、リスクは散らかったレイアウトなので、ワイヤーフレームで十分です。アプリやSaaSプロダクト(オンラインで使うソフトウェアで、多くは月額や年額の定額制)では、リスクはわかりにくい流れなので、誰かがコードを書く前に、クリックして進められるプロトタイプが必要です。

具体例を見てみましょう。配管業者の5ページのサイトなら、電話番号、サービス一覧、見積もりボタンをどこに置くかを関係者で合意するために、ワイヤーフレームが必要です。予約アプリにはプロトタイプが必要です。本当に確かめたいのは、お客様が助けなしで時間を選び、予約を確定できるかどうかだからです。

避けたい落とし穴が2つあります。1つ目は、早い段階で見た目を作り込みすぎることです。レビューする人は色や写真が目に入ると、レイアウトではなくロゴについて意見を言いはじめ、本当の問題が見過ごされてしまいます。2つ目は、AIツールの存在です。今では見栄えのよい画面を数分で生成できるため、つい間違った段階から始めてしまいがちです。生成されたきれいな画面はモックアップであり、流れがうまく働く証拠ではありません。

Figmaは人気のデザインツールで、ワイヤーフレーム、モックアップ、プロトタイプのどれも作れます。ただ、ツールが答えを決めてくれるわけではありません。何を知りたいのかを考え、それを学べる段階を選んでください。

AppDesign360はワイヤーフレームとプロトタイプをどのように進めていますか?

AppDesign360では、コードを書く前にレイアウトとクリックできるプロトタイプを作り、その両方を承認していただきます。この順番にすると、直すのがまだ安いうちに、高くつく間違いを見つけられます。作業は次の手順で進みます。

1. 20分の無料ディスカバリーコールをご予約いただきます。
2. 固定価格と公開日を記した書面のスコープをお渡しします。
3. 最初の2週間で、チームがユーザーフローを設計し、クリックできるプロトタイプを作ります。
4. 実際にクリックして確認し、承認していただきます。それまでコードは一行も書きません。
5. 開発は2週間ごとのスプリントで始まり、各スプリントの終わりに、動くソフトウェアをステージング用リンクでお見せします。

有料の最初のステップは「Blueprint」と呼ばれています。モバイルアプリ向けのApp Blueprintでは、クリックできるプロトタイプ、技術仕様書、開発の見積もりをお渡しします。料金は1,250ドルからです。SaaS向けのBlueprintは1,250ドルから2,500ドルです。その後のモバイルアプリ開発は、合意したスターター範囲で3,500ドルから、範囲を定めたSaaSのMVPは15,000ドルからで、目安は8〜10週間の計画です。

このやり方は、漠然としたアイデアしかなかったクライアントにも役立ってきました。The Motley FoolのMax Keelerさんは、AppDesign360が大まかな指示や要望のリストを、魅力的で使いやすいインターフェースを備えた素晴らしいプロトタイプのウェブアプリに仕上げてくれたと語っています。

プロジェクトにワイヤーフレームが必要か、プロトタイプが必要か、それとも両方か迷っている場合は、appdesign360.com の無料ディスカバリーコールでご相談ください。どのステップに最初にお金をかけるべきかが分かった状態で、お帰りいただけます。