ワイヤーフレームとは、Webページのどこに何を置くかを、色や装飾を省いた線と枠で示した設計図です。デザインの見た目を決める前に情報の骨組みを固める工程で、ここを飛ばすと制作の途中で「やはり構成を変えたい」という手戻りが起きやすくなります。この記事では、ワイヤーフレームの役割、デザインカンプやモックアップとの違い、作成の基本手順、ツールの選び方までを、Webサイトを発注する事業者の視点で整理します。
ワイヤーフレームとは｜ページ構成を決める設計図
ワイヤーフレームとは、Webページ内の要素の配置と優先順位を、色や写真を使わずに線画で示した設計図です。建築でいえば間取り図にあたり、「見た目」ではなく「何をどこに、どの順番で置くか」を決めるためのものです。
この記事の要点
- ワイヤーフレームは、色や装飾の前に情報の配置と優先順位を決める設計図
- デザインカンプ（色・装飾つきの完成見本）やモックアップ、動きを確認するプロトタイプとは役割が異なる
- 目的とページの役割を先に決めてから、大まかな配置、要素の詳細の順に作り込む
- 紙・スライドツール・専用デザインツールなど、関係者のスキルと目的で選ぶ
あえて色やあしらいを省くのには理由があります。見た目が入ると人はデザインの好みに目が向き、肝心の「情報の並び順」や「導線」への議論が後回しになりがちです。装飾を省くことで、関係者が構成そのものに集中して合意できます。ページの目的や情報整理の考え方は、UI/UXデザインとはの記事も参考になります。
デザインカンプ・モックアップ・プロトタイプとの違い
ワイヤーフレームは、制作工程の中で似た言葉と混同されやすいものです。それぞれ作る目的とタイミングが異なります。
名称 | 主な役割 | 色・装飾 | 作るタイミング |
|---|---|---|---|
ワイヤーフレーム | 要素の配置と優先順位を決める | 基本的になし（線画） | 設計の初期 |
デザインカンプ | 配色・写真・装飾を反映した完成見本 | あり（本番に近い） | ワイヤーフレーム合意後 |
モックアップ | 実物に近い外観を確認する見本 | あり | デザイン確定前後 |
プロトタイプ | クリックや画面遷移など動きを確認する | あり/なし | 設計〜デザインの検証時 |
大まかには、ワイヤーフレームで「構成」を決め、デザインカンプで「見た目」を決め、プロトタイプで「動き」を確かめる、という順序で考えると整理しやすくなります。装飾を後回しにするほど、早い段階での方針変更がしやすくなります。
ワイヤーフレームを作る3つのメリット
ワイヤーフレームを挟む一番の利点は、制作後半の手戻りを減らせることです。具体的には次の3点があります。
1. 認識のズレを早い段階で防げる
発注側と制作側で「トップページに何を、どの順で載せるか」を、装飾のない図で早期に確認できます。文章や口頭では曖昧になりがちな配置を、目に見える形で合意できます。
2. 情報の優先順位を整理できる
限られた画面の中で、最初に見せるべき情報とそうでない情報を切り分けられます。伝えたいことを詰め込みすぎて、かえって何も伝わらない状態を避けられます。誰に何を届けるかの整理には、カスタマージャーニーマップとはで扱う考え方も役立ちます。
3. デザイン・実装の指示書になる
合意したワイヤーフレームは、そのままデザイナーやエンジニアへの指示書になります。「ここに問い合わせボタン」「この下に事例3件」といった要件が図で共有され、制作の判断が速くなります。
Cataly Design でも、デザイン着手前にワイヤーフレームで構成の合意を取ることを基本にしています。ここで各ページに載せる文字量や導線を決めておくと、原稿とデザインの往復が減り、公開までの進行が安定します。
ワイヤーフレームの作り方（5つの基本手順）
ワイヤーフレームは、いきなり画面を描き始めず、目的の整理から始めるのが基本です。おおまかに次の順で進めます。
- ページの目的とゴールを決める：そのページで訪問者にどう動いてほしいか（問い合わせ、資料請求、来店など）を1つに絞ります。
- 載せる情報を洗い出す：必要なコンテンツ（見出し、説明、実績、料金、問い合わせなど）を書き出します。原稿の準備はホームページの原稿の書き方もあわせて確認すると進めやすくなります。
- 優先順位を付けて並べる：洗い出した情報を、重要な順に上から並べます。最初に見せる要素を決めるのがこの段階の肝です。
- 大まかな配置（レイアウト）を描く：ヘッダー、メインビジュアル、本文、問い合わせ導線などのブロックを枠で配置します。まずは細部を気にせず全体像を作ります。
- 要素を具体化して調整する：各ブロックに入る見出しやボタンの文言、おおよその文字量を書き込み、関係者で確認して整えます。
最初から作り込みすぎないのがコツです。序盤は手描きや簡単な枠でよく、合意が取れてから精度を上げていくと、方針転換の負担が軽くなります。ページ設計はサイト制作全体の一工程です。前後の流れはホームページ制作の流れで確認できます。
ワイヤーフレーム作成ツールの選び方
ツールは「関係者が無理なく使えるか」を基準に選ぶのが現実的です。高機能なツールでも、確認する人が開けなければ合意は進みません。大きく3種類あります。
手軽に始められる手段
- 紙とペン：思考を素早く形にでき、初期の発散に向く
- PowerPoint・Googleスライド：多くの人が扱え、共有・コメントが容易
本格的に作り込む手段
- 専用デザインツール（Figmaなど）：再利用や共同編集に強く、そのままデザインへ移行しやすい
- 一方で、確認だけの関係者には操作の学習が必要になる場合がある
2026年時点では、共同編集やコメントのしやすさからFigmaのようなブラウザで使えるツールが制作現場で広く用いられています。ただし発注側が確認するだけなら、閲覧用リンクや画像で共有すれば十分です。ツール選びで迷ったら、次の観点で確認すると絞り込めます。
- 確認する関係者が、特別な準備なく閲覧・コメントできるか
- 修正の反映と履歴の共有がしやすいか
- 合意後にデザイン工程へスムーズに引き継げるか
ワイヤーフレームでよくある失敗と注意点
ワイヤーフレームは「構成を決める」ための工程です。目的から外れると、かえって時間がかかります。
初期段階で色やフォント、写真にこだわり込むと、構成の議論が止まります。序盤は装飾を持ち込まず、配置と優先順位に集中しましょう。
完璧な1案を長時間かけて作るより、粗い案を早く見せて意見をもらうほうが、結果的に手戻りが少なくなります。特に関係者が多い場合は、早めの共有が有効です。
また、ワイヤーフレームはあくまで設計図であり、実際の見た目や文章の印象は次のデザイン・原稿工程で決まります。ここで細部を作り込みすぎないことも、全体の進行を早めるポイントです。
サイトの構成づくりから、資料でポイントを確認したい方へ。
まとめ
ワイヤーフレームは、Webページの構成と優先順位を装飾抜きで決める設計図です。要点を整理します。
- デザインカンプ（見た目）やプロトタイプ（動き）とは役割が異なり、ワイヤーフレームは「構成」を担う
- 目的の決定 → 情報の洗い出し → 優先順位付け → 配置 → 具体化、の順で作る
- ツールは高機能さより、関係者が無理なく確認できるかで選ぶ
- 序盤は作り込みすぎず、粗い案を早く共有して合意を取ると手戻りが減る
構成の設計から公開後まで一貫して進めたい場合は、Cataly Design のサービスもご確認ください。要件の整理段階からご相談いただけます。
