ワイヤーフレームの作り方｜Webサイトの設計図を初心者向けに解説

PhotoshopやCanvaを開いたとき、何から作っていけばいいのか分からず手が止まる…
「ワイヤーフレームからお願いします」と言われても、何をどこまで作ればいいのか分からない…

ホームページやLPを作ろうとして白いキャンバスの前で手が止まるのは、どんなセクションををどんな順番で配置するかが、まだ決まっていないからです。その順番を先に決めておく設計図が、ワイヤーフレームです。

この記事では、ワイヤーフレームとは何かを押さえたうえで、紙1枚から描いて清書するまでの作り方をご紹介します。専用のツールを新しく覚える必要はありません。

ワイヤーフレームとは？Webサイトの「設計図」

ワイヤーフレームとは
Webページのどこにどんなセクションを置くかを、線や文字だけで示した設計図です。配色や画像、フォントはまだ決めません。

ワイヤーフレームで決めること・決めないこと

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

• ページに載せる情報
• 情報を並べる順番
• どの情報を大きく見せるか
• ボタンの位置

反対に、配色や画像、フォントなどはまだ決めません。デザインの要素は一旦後回しにして、情報の順番の話に集中するためです。

デザインカンプ・ラフとの違い

ぬるま湯デザイン塾では、見た目の情報が少ない順に、ワイヤーフレーム、デザインカンプと使い分けています。違いを表にまとめました。

比べるポイント	ワイヤーフレーム	デザインカンプ
目的	配置と順番を決める	完成形を確認してもらう
見た目	白・黒・グレーの線と箱	本番と同じ色・写真・文字
決めること	載せる情報・順番・優先度	細かい見た目のすべて
作るタイミング	載せる内容が決まった後	コーディングの前

ワイヤーフレームを作る前に決める3つのこと

箱の並べ方に迷うのは、並べる根拠がないからです。描き始める前に、目的・見る人・してほしい行動の3つを決めておきます。

1、ページの目的

このページを見た人に、最後にどうしてほしいのかを1つ決めます。例えば、次のような目的です。

• 体験レッスンに申し込んでほしい
• お店に来店予約をしてほしい
• 資料請求をしてほしい
• 会社を信頼して、問い合わせてほしい

目的によって、ページの組み立ても変わります。LPなら1ページで申し込みまで運び、ホームページなら複数のページで信頼を積み上げる、という違いです。

LPとホームページの役割の違いは、以下の記事で詳しく説明しています。

2、見る人と、見る状況

次に、誰がどんな状況でこのページを見るのかを書き出します。書き出すのは、次の3つです。

1. 誰が見るのか（例: 料理が苦手で、家族のごはんに悩んでいる人）
2. どんな気持ちで見るのか（例: 習ってみたいけれど、ついていけるか不安）
3. どこで見るのか（例: 家事の合間に、スマホで）

不安を抱えて見に来る人なら、最初に「はじめてでも大丈夫」と分かる情報を置きたくなります。見る人が決まれば、上に置くものも自然と決まるわけです。

見る人と市場の整理の仕方は、以下の記事で詳しく説明しています。

3、してほしい行動

最後に、押してほしいボタンを1種類に絞ります。もし「申し込む」「問い合わせる」「資料を見る」が並んでいると、見る人はどれを押せばいいのか迷いますよね。

同じボタンをページの途中、最後、と複数箇所に配置するのは問題ありません。行き先が1つであれば、何度出てきても迷いません。

ワイヤーフレームの作り方5ステップ（紙1枚から）

四角と線しか使わないので、絵のうまさは関係ありません。ここからは、架空の「料理教室」のLPを例に、説明します。

STEP1 載せる情報をすべて書き出す

付箋やメモ帳に、ページに載せたい情報を思いつくだけ書き出します。この段階では、順番や大きさは考えません。料理教室の例なら、次のような情報です。

• キャッチコピー
• 教室の雰囲気が分かる写真
• 体験レッスンの内容と料金
• 講師の紹介
• 参加した人の声
• よくある質問
• 教室へのアクセス
• 申し込みボタン

紙に書き出すのは、画面を開くとつい見た目から考え始めてしまうからです。

STEP2 優先順位をつける

書き出した情報に、A・B・Cの印を付けます。

• A：必ず見てほしい（キャッチコピー、体験レッスンの内容、申し込みボタン）
• B：迷っている人の背中を押す（参加した人の声、講師の紹介）
• C：あると親切（よくある質問、アクセス）

Aは大きく上のほうに、Cは小さく下のほうに置くのが目安です。印があると、STEP3で配置に迷ったときの判断材料になります。

STEP3 紙に箱で配置する

紙を縦長に使い、スマホの画面を描くつもりで、上から読む順番に箱を並べます。料理教室の例では、次の順番です。

1. 一番上に、キャッチコピーと写真の箱を描く
2. 体験レッスンの内容と料金の箱を置く
3. 参加した人の声、講師の紹介を続ける
4. よくある質問とアクセスを下のほうに置く
5. 申し込みボタンを、途中と最後に置く

写真の位置は四角に×印、本文の文字は何本かの横線で表すのが定番です。

STEP4 CanvaかPhotoshopで清書する

紙の案が固まったら、人に見せられる形に清書します。使い慣れているほうで大丈夫です。

Canvaの公式ページによると、Canvaのワイヤーフレームツールは全ユーザーが無料で使えます。手順は次のとおりです。

1. Canvaで「ワイヤーフレーム」と検索する
2. ホワイトボードのテンプレートを選ぶか、白紙から作る
3. 箱やアイコン、矢印、テキストの説明を足す
4. PDF・PNG・JPGのいずれかでダウンロードする

Photoshopなら、グレーの長方形と文字だけで組めます。写真の位置には、長方形に×印の線を重ねます。同じ大きさの箱はレイヤーを複製して並べると、大きさをそろえる手間が減ります。

清書でよく使うショートカットは、次のとおりです。

操作	Windows	Mac
定規の表示・非表示	Ctrl＋R	Command＋R
選んだレイヤーを複製	Ctrl＋J	Command＋J
自由変形（箱の大きさを変える）	Ctrl＋T	Command＋T

※キーの割り当てを自分で変えている場合は、この表と異なります。

STEP5 目的に照らして見直す

清書したら、描く前に決めた3つのことに戻って読み直します。

上から順に読んだ人は、最後にボタンを押したくなるか？
見る人が最初に知りたいことが、上のほうにあるか？
押してほしいボタンは1種類になっているか？

1つでも答えに詰まったら、STEP2の印に戻って順番を入れ替えます。

伝わるワイヤーフレームの書き方のルール

ワイヤーフレームは、クライアントやコーディングの担当者に渡して使います。自分以外の人が見て分かるように、次のルールで描きます。

色は使わず、白・黒・グレーで描く

色があると、見た人の意見が配置より色の好みに向かいます。濃いグレーは目立たせたい所、薄いグレーは控えめな所というように、濃淡で優先度を示します。

見出しには仮の言葉を入れる

見出しを「見出しが入ります」のようなダミー文字にすると、その箱に何を書くのかが伝わりません。「はじめてでも包丁の持ち方から教えます」のように、仮の言葉を入れておきます。

配置の理由を注釈で書き添える

箱の横に「迷っている人向けに、ここで参加した人の声を見せる」と一言書いておきます。理由が書いてあれば、クライアント目的に合っているかどうかで確認しやすいです。

スマホ版から描き、PC版は変わる所だけ描く

スマホでは縦1列に並ぶ情報も、PCでは横に並べる所が出てきます。PC版は、並びが変わる部分だけ描き足せば足ります。

細かさは「どこに何があるか言える」程度で止める

クライアントが見て「ここに料金、ここに申し込みボタン」と言えれば十分です。線の太さや余白を整え始めたら、それはデザインカンプで行う作業です。

初心者がつまずきやすい3つの失敗

どれも、描き始めてから気づくことの多い失敗です。

1、いきなり見た目から作り始める

PhotoshopやCanvaを開いてすぐに色や写真を選ぶと、配置の理由が後付けになります。手が止まったら、STEP1の書き出しに戻ります。

2、すべての情報を同じ大きさで並べる

どの情報も大事に思えて、同じ大きさの箱が並ぶことがあります。迷うのは自然なことです。

ただ、全部が同じ大きさだと、見る人はどこから読めばいいのか分かりません。A・B・Cの印に戻って、Aだけを大きくします。

3、ボタンや行き先を増やしすぎる

親切のつもりで行き先を増やすと、見る人が迷ってしまいます。例えば、次のようなボタンが1ページに並ぶ状態です。

• 体験レッスンに申し込む
• 問い合わせる
• 資料を請求する
• LINEに登録する

これだけ並ぶと、どれも押さずにページを閉じる人も出てきます。押してほしい行動は、1つに絞るのが基本です。

公開した後も、ヒートマップでどこまで読まれたかを見て、読まれていない部分を削り、読まれている部分を前に出していきます。ワイヤーフレームで決めた順番は、公開後の数字を見て育てていくものです。

ワイヤーフレームを学んだ後に何から身につけるかは、以下の記事で詳しく説明しています。

まとめ

1、ワイヤーフレームは、色や写真を決める前に配置と順番を決める設計図
2、描く前に「目的・見る人・してほしい行動」の3つを決める
3、紙に箱を並べてから、CanvaかPhotoshopで清書すれば十分

参考にした情報源

• Canva「無料ワイヤーフレームツール」https://www.canva.com/ja_jp/online-whiteboard/wireframes/（2026年10月23日確認）