ワイヤーフレーム・モックアップ・プロトタイプの違いと使う順番

ワイヤーフレーム、モックアップ、プロトタイプ。制作の現場で毎日飛び交う3語ですが、初めて聞くと全部「デザインの下書き」に見えますよね。

この3つは作る順番も、確かめたいことも違います。順番を守ると、直しが軽いうちに問題が見つかります。逆に飛ばすと、完成間近で並びを変える羽目になります。
このレッスンでは、3つの違いを「その段階で何を決めるか」で整理して、最後に手書きでワイヤーフレームを1枚起こすところまでやりますね。

3つは決めることが違う

先に全体像です。3つを並べると、担当している範囲がはっきりします。

見た目の完成度が上がるほど、直すのが重くなります。だから軽い順に、ワイヤーフレーム → モックアップ → プロトタイプと進めます。

ワイヤーフレーム：並びと優先順位だけを決める

ワイヤーフレームは、ページに何をどの順番で置くかだけを決めた設計図です。線と四角で描くので、この名前がついています。

ここで色や写真を入れません。理由は2つあります。
1つは、見た目が入ると内容の話ができなくなるから。「この写真、もっと明るいのない？」と話が飛んで、肝心の並びが決まりません。
もう1つは、捨てやすくするためです。10分で描いた紙なら、丸ごと書き直せます。

ワイヤーフレームで決めるのはこの4つです。

道具は紙とペンで十分です。慣れたらFigma（無料で使える画面デザインのツール）でも構いませんが、最初の1枚は手書きのほうが速く終わります。ためしにYouTubeのトップページを線と四角で写してみてください。検索欄と動画のカードが並んでいるだけだと分かります。
Amazonと楽天の商品ページを同じやり方で写すと、違いがもっとはっきりします。Amazonは四角が少なく縦一列、楽天は四角が多くて横にも広がります。同じ「商品を買うページ」でも、決めた並びが違うわけです。

モックアップ：完成後の見た目を決める

モックアップは、ワイヤーフレームに色・書体・写真・余白を入れて、完成後の見た目まで作り込んだ静止画です。動きません。押しても何も起きない、1枚の絵だと考えてください。

ここで確かめるのは印象です。狙ったトーンになっているか、読ませたい順に目が動くか、ブランドの色として成立しているか。
Appleの製品ページが分かりやすい例です。大きな写真と広い余白で、製品そのものに目が行く形になっています。並びだけを見れば「写真・見出し・説明・ボタン」の繰り返しで、特別なことはしていません。印象を作っているのは、写真の大きさと余白の量です。
クライアントへ見せて合意を取るのも、たいていこの段階です。並びの話はもう終わっている前提なので、ここで「やっぱり順番を変えたい」と言われると、作り直しの量が一気に増えます。

Web制作では「デザインカンプ」と呼ぶ人もいます。カンプは印刷業界から来た言葉で、完成見本を指します。ほぼ同じ意味で使って大丈夫です。
ただ「モックアップ」には別の使い方もあります。Tシャツやスマホの画面に自分のデザインをはめ込んだ合成画像。ポートフォリオでよく見るあれもモックアップと呼びます。文脈で見分けてくださいね。

プロトタイプ：触って動きを確かめる

プロトタイプは、画面と画面をつないで実際に操作できるようにした試作です。ボタンを押すと次の画面へ進む、メニューが開く、エラーが出る。ここまで再現します。アプリの会員登録で、入力 → 確認 → 完了と進む流れがありますよね。あの順番どおりに画面をつなぎます。
Instagramの投稿を思い出してください。写真を選ぶ、加工する、文章を書く、投稿する。1画面ずつ進んで、どこからでも前に戻れます。この行き来を確かめるのがプロトタイプの役割です。

確かめたいのは「迷わず目的まで進めるか」です。静止画では気づけない問題が、ここで出ます。
戻るボタンがなくて行き止まりになる、入力の途中で何をすればいいか分からなくなる、確認画面から修正へ戻れない。どれも触ってはじめて分かります。

作り方はむずかしくありません。Figmaなら、モックアップの画面を並べてボタンから次の画面へ線をつなぐだけ。コードは書きません。
他人に触ってもらうときは、説明を先にしないでください。黙って渡して、迷った場所を見る。これがプロトタイプのいちばんの価値です💡

段階を飛ばすと何が起きるか

いきなりモックアップから始める人は多いです。作っている実感があって楽しいので、気持ちは分かります。

でも、色と写真まで入れた画面で「この項目、いらなかったね」となると、レイアウトを組み直すことになります。写真の位置が変われば選び直し、文字数が変われば大きさも調整。10分の手戻りが、3時間の手戻りに変わります。

個人の制作でも、この順番は効きます。ポートフォリオを作るときも、まず紙に並びを描く。それから色を決める。最後にスマホで触ってみる。この3回に分けるだけで、完成までの時間が短くなりますよ。

ミニ実践：好きなページを手書きで起こす

20分ほど。紙とペンだけです。好きなWebサイトを1つ選んで、そのトップページをワイヤーフレームに戻します。

1. 紙を縦に置いて、スマホ画面の縦長の枠を1つ描く
2. そのページを上から見て、要素のかたまりを四角で写す。写真は四角に斜線、文字は横線で表す
3. 見出しの文字だけ実際の言葉で書く。本文は横線のままでいい
4. 色を塗らない。ペンは1本だけ使う
5. 描き終わったら、上から3つのかたまりだけを見て、このページが何のページか言えるか確かめる
6. 言えなければ、自分ならどう並べ替えるかを、もう1枚描く

6番の描き直しまでやってください。写して終わりだと観察で止まります。並べ替えたところで、はじめて自分の判断が入ります。

できあがったら、この4つで確認します。

この練習は5枚くらい続けると効きます。上手な人の並べ方が、手を動かした分だけ自分の引き出しに入りますよ◎

よくある質問

ワイヤーフレームとモックアップの違いは何ですか？

決めることが違います。ワイヤーフレームは要素の並びと優先順位だけを決める線画で、色や写真を入れません。モックアップは、そこへ色・書体・写真・余白を入れて完成後の見た目まで作り込んだ静止画です。どちらも動きません。動かして確かめる段階がプロトタイプです。

ワイヤーフレームを作るメリットは何ですか？

直しが軽いうちに問題を見つけられる点です。線画なら10分で描き直せますが、色と写真の入った画面だと同じ変更に数時間かかります。もう1つは話が散らからない点。見た目が入っていないので、載せる情報と順番の話に集中できます。人と合意を取るときにも役立ちます。

ワイヤーフレームとカンプの違いは何ですか？

カンプは完成見本のことで、位置づけはモックアップとほぼ同じです。印刷業界から来た言葉で、Web制作では「デザインカンプ」と呼びます。色も写真も入った、完成後の姿を見せるための1枚です。ワイヤーフレームはその前の段階で、並びだけを決めます。

個人の制作でも3段階に分ける必要はありますか？

分けたほうが速く終わります。ただし全部を作り込む話ではありません。ワイヤーフレームは紙に10分、モックアップは1枚、プロトタイプは主要な3画面をつなぐだけ。これで十分です。バナー1枚のような小さな制作なら、ラフのスケッチと本番の2段階でも問題ありません。

次に学ぶこと

ワイヤーフレームは並び、モックアップは見た目、プロトタイプは動き。軽い順に進めて、重くなる前に問題を見つける。これが3段階を分ける理由です。

次はデザインシステムとデザインガイドラインへ。何枚も画面を作るときに、毎回ゼロから決めない仕組みの話です。

制作全体の流れは制作の流れ（ラフ→カンプ→フィックス）でまとめています。全体の並びはデザイン基礎コースの目次から確認してくださいね。