ワイヤーフレームとは？高CVRのサイトを設計する確認点を解説

ワイヤーフレームは、Webサイトやアプリの設計図として欠かせないツールです。レイアウトや機能をシンプルに表現することで、開発の初期段階で課題を発見し、スムーズな制作進行を助けます。ワイヤーフレームを正しく設計することで高いCVRのサイトが制作可能です。

この記事の執筆者について

15年間で100サイト以上のワイヤーフレーム作成に携わってきた株式会社ユニバーサルマーケティング代表の小長谷直登が、実務経験をもとに初心者向けに解説します。

この記事で分かること

• ワイヤーフレームの定義と設計するコツがわかる
• 作成に必要な準備と具体的な手順がわかる
• ワイヤーフレームを設計するおすすめのツールがわかる

1. ワイヤーフレームとは？

ワイヤーフレームとは、Webページの「何を」「どこに」「どのように」配置するかを示した設計図です。色や画像などの装飾を排除し、情報の構造とユーザーフローを明確にすることが目的です。

1.1 目的と役割

項目	内容
作成者	主にWebディレクター（UXデザイナーやIA担当の場合も）
作成タイミング	要件定義完了後、デザインや実装に入る前
目的	ターゲット・伝える内容・期待する結果をもとに、必要要素・配置・優先順位を設計する
決めること	・各ページに配置する要素と優先度 ・ナビゲーションや導線の流れ ・情報のまとまりとゴールの明確化

ワイヤーフレームで決めないと後でトラブルになること

❌ 情報の優先順位が不明確
→ デザイン段階で「何を目立たせるか」が揺れ、修正が頻発

❌ CTAやコンバージョン導線が曖昧
→ 公開後に成果が出ず、再構築が必要になる

❌ 関係者間で認識が食い違う
→ 「思っていた構成と違う」と後工程で手戻りが発生

1.2 モックアップ・ラフデザイン・プロトタイプの違い

まず、視覚的に違いを理解しましょう。

左：ワイヤーフレーム – 線と箱だけで構成 – 色や写真は使わない – 「何を」「どこに」配置するかを示すもの。
右：ラフデザイン – 色・写真・フォントを使用 – 実際のデザインに近い見た目 – 雰囲気やブランドイメージを確認できるもの。

項目	ワイヤーフレーム	モックアップ	プロトタイプ
目的	情報構造の整理	完成イメージの確認	操作性の検証
表現レベル	線・箱中心 装飾最小限	精緻なビジュアル （静的）	クリック・遷移が 動作する
確認すること	配置・優先度	色・フォント・雰囲気	ユーザー体験
作成タイミング	要件定義後	デザイン前	開発直前

もっと簡単に言うと
✅ ワイヤーフレーム = 「ページの設計図」→どんなコンテンツをどんな順番で配置する？
✅ ラフデザイン= 「仮デザイン」→デザインの雰囲気はこんな感じでOKですか？
✅ モックアップ = 「正式デザイン」→正式デザインはこれで確定でOKですか？
✅ プロトタイプ = 「試作品」→実際の操作感はこんな動きでOKですか？

1.3 ワイヤーフレームを作るメリット

メリット1：早期に問題を発見できる

ワイヤーフレームを作るメリットは事故を減らせると言うことです。

設計図がないまま、デザインや機能性を入れても、後々、プロトタイプを制作時に導線の行き止まりや使いにくさが発覚し、作り直すリスクがあるからです。ワイヤーフレームは一見すると遠回りに見える工程ですが、Webサイト設計における重要な上流工程なのです。

ワイヤーフレームなしで進めた場合
デザイン段階で「CTAボタンの位置が悪い」と気づく → デザイン修正 → コーディング修正 → 工数3倍
このようなリスクが起こり得ます。

ワイヤーフレームを作って進めた場合
設計段階で「CTAボタンの位置が悪い」と気づく → 線画修正のみ → 工数1/3で完了

メリット2：関係者の認識を揃えられる

• デザイナー：「ここに何を配置するか」が明確になり、デザインが捗る
• エンジニア：「どんな機能が必要か」が事前に分かり、環境を整えられる
• クライアント：「完成イメージ」を早期に確認でき、事故を減らせる
• 営業：正式な見積もりを提示できる

メリット3：コストと時間を削減できる

当社のデータによると、ワイヤーフレームを省略したプロジェクトは結果的に修正工数が平均30%増加します。ワイヤーフレームを丁寧に構築してクライアント側と認識合わせを行うことで、関係者全員が問題なくサイトを公開するためにワイヤーフレームは欠かせません。

1.4 ワイヤーフレームを省略した場合のリスク

❌ リスク1：認識のズレが大規模な修正につながる

クライアントが「こういうイメージじゃなかった」と後から言い出し、デザインを全面的にやり直すケースが多発。

❌ リスク2：情報設計の不備がUXを損なう

ユーザーが目的の情報にたどり着けず、離脱率が上昇。リリース後の改善コストが膨らむ

❌ リスク3：スケジュール遅延と追加コスト

手戻りが発生するたびに納期が延び、予算超過のリスクが高まる

2. Web制作の全体工程とワイヤーフレームの位置づけ

ワイヤーフレームは、Web制作プロジェクトの「設計フェーズ」で作成します。全体の流れは次のとおりです。

2.1 Web制作の6つのフェーズ

※図1：Web制作の5つのフェーズ。ワイヤーフレームは「2. 設計」で作成する

ワイヤーフレームは上図の「2. 設計」フェーズで作成します。各フェーズの詳細は次のとおりです。

各フェーズの詳細

1. 企画・要件定義（2〜4週間）
サイトの目的やターゲットを明確にし、必要なページを洗い出します。
この段階で「サイトマップ」を作成します。

2. 設計（1〜3週間）
ワイヤーフレームはこの工程で情報設計（IA）を行い、各ページの要素を整理します。
その後、ワイヤーフレームで画面構成を可視化します。

3. ラフデザイン作成（2〜4週間）
主要ページのラフデザインで方向性を確認し、モックアップで完成イメージを作ります。
主要ページとは、トップページとサービスページや商品ページなど、コンバージョンつながる重要なページを指します。関係者の認識を合わせて次のフェースに進みます。

4. モックアップ作成（2〜4週間）
各ページモックアップを作り、モックアップで完成イメージを作ります。
関係者の認識を合わせて次のフェースに進みます。

5. 実装（4〜8週間）
コーディングを行い、テスト環境で動作確認をします。
動作に問題なければ、関係者にテスト環境のURLが配布され、手持ちのスマホやPCで動作確認を行います。
プロトタイプで操作性も検証します。

5. 公開・運用
テストを経て本番公開し、その後は改善・保守を続けます。

2.2 なぜワイヤーフレームが重要なのか

上の図を見ると分かるように、ワイヤーフレームはデザインの前段階で作成します。ここで画面構成を確定させることで、後工程がスムーズに進みます。

ワイヤーフレームで情報の配置と優先順位を確定させることで、後工程（デザイン・実装）がスムーズに進みます。

ワイヤーフレームがないと起こる問題
❌ デザイナー：「どこに何を配置すればいいか分からない」
❌ エンジニア：「どんな機能が必要か後から判明して、作り直し」
❌ クライアント：「完成してから『イメージと違う』と言い出す」

ワイヤーフレームがあると
✅ デザイナー：配置が決まっているので、色やフォントに集中できる
✅ エンジニア：必要な機能が事前に分かり、計画的に実装できる
✅ クライアント：早期にイメージを確認でき、安心して進められる

このようにワイヤーフレームはサイトにかかわる関係者にとって欠かせない工程と言えます。

3. ワイヤーフレーム作成前の準備

作成前には道具と情報を整えることが重要です。準備が不十分なまま進めると、後で大幅な修正が必要になります。

3.1 ワイヤーフレーム設計に必要なツールを選ぶ

ワイヤーフレームを設計するためのおすすめのツールをご紹介します。

おすすめツール比較

ツール	用途	動作	共同編集	学習コスト	料金	主なデメリット
Figma	ワイヤーフレーム作成 Webデザイン作成 修正指示 プロトタイプ制作 クライアント向け資料作成	◎ 軽量	◎ 得意	中	無料〜 （座席課金）	プロジェクトが増えると有料プランが必要になることがある
Miro	ボードでワイヤーフレーム ブレスト向け	◎軽量	◎ 得意	低〜中	無料〜 （座席課金）	すぐに要課金
Canva	テンプレで 簡易WF	◎軽量	◎ 得意	低	無料〜 （座席課金）	プロ用途には機能が不足
XD	Figmaの下位互換		◎ 高速	中	無料〜	Figmaの下位互換
Excel	用途が違う		△条件付き	中	無料〜	ファイルが増えると動作が重くなる
PowerPoint	クライアント資料作成		△条件付き	低	無料〜	自由度が低い
Googleスライド	クライアント資料作成		◎ 得意	低	無料〜	自由度が低い

選び方のポイント

✅ Figmaを選ぶべき人：デザイナーと連携する／プロトタイプまで作りたい
✅ Miroを選ぶべき人：チームでブレストしながら作りたい
✅ Canvaを選ぶべき人：テンプレートで手軽に始めた

ワイヤーフレームを様々なツールで作って来た私がおすすめするのはFigmaです。

これまでMiro、Canva、XD、fireworks（廃止）、エクセル、パワーポイント、など様々なツールを使ってきた私ですが、そんな私は今のところFigma一択です。

Figmaをおすすめする9つの理由

1. 社内外の多くのデザイナーが使っているので、データのやり取りがスムーズ
2. ディレクターがワイヤーフレーム作成→デザイナーがデザインをFigmaで完結できる
3. 修正指示もFigmaで完結し、AUNなどの修正指示ツールを別途使う必要がない
4. クライアントも制作会社側も1つのツールで完結できる
5. デザインからプロトタイプまでスムーズ
6. 動作が軽い
7. 無料プランでも十分な機能が使える
8. 比較的直観的に使え、学習コストが低い
9. 操作に困ったときは、Google検索をすれば情報が多く解決しやすい

Figmaは無料でかなりの範囲で使えるので、よほど複数のサイト設計を同時に進めるような業務でない限りは、無料版で十分でしょう。

3.2 情報設計とユーザー要件の整理

ワイヤーフレームを作る前に、次の3つを明確にしましょう。

✅ ステップ1：ユーザーの目的を洗い出す

• 誰が（ターゲット）
• 何のために（目的）
• どんな情報を求めているか（ニーズ）

✅ ステップ2：サイトマップを作成する

エクセルやスプレッドシートで、必要なページを抜けもれなく洗い出します。このページは本当に要るかな？と思うページがあっても一度すべての可能性を洗い出してから、取捨選択をすると抜け漏れのリスクが減ります。

ページ	ページの目的	必要な要素
トップページ	ブランドに共感してもらう 商品を知ってもらう 各商品ページへ移動してもらう	・キャッチコピー ・サービス説明 ・CTAボタン
ブランドページ	よりブランドに共感してもらう	・ブランドストーリー ・ブランドビジョン
商品詳細ページ	より商品に興味をもってもらう 購入ページへの回遊を促す	・料金表 ・導入事例 ・FAQへのリンク
カートページ 資料請求ページ 会員登録ページ	スムーズに購入・登録まで導く	・カート ・資料請求フォーム ・プライバシーポリシー

スプレッドシートで作るサイトマップのサンプルはこちら

✅ ステップ3：コンテンツマップを作る

必要なページを洗い出したら、次に各ページに必要なコンテンツを洗い出します。まずはトップページに必要なコンテンツを洗い出しましょう。下記のようにページの目的を整理しておくと、次のワイヤーフレーム作成の工程で、作業が捗ります。

トップページのコンテンツマップのイメージ
トップページ
├グローバルメニュー
├ブランドに共感してもらうキャッチコピー
├レギュラー商品ラインナップ紹介
├お知らせ
├オファー用商品紹介
└フッターメニュー

4. ワイヤーフレームの作成

ここからはいよいよワイヤーフレームの作成方法を紹介します。

ステップ1：トップページの画面構成を考える

準備編で洗い出したサイトマップを使って、トップページのページの画面構成を作ります。Figmaが使い慣れていないときは、手書きからで構成を練るのもおすすめです。上から優先順位が高いものから配置をします。

最終的なワイヤーフレームのイメージ

もし、優先すべきことが多くて、迷ったときは「見やすい」「わかりやすい」と感じるベンチマークサイトの構成を参考にすると良いでしょう。

チェックするべきポイント

• グローバルメニューを配置したか
• ボタンやリンクなど、導線を配置したか
• 画像が入る場所とテキストが入る場所を区別したか
• デザイン要素は入れていないか

5. よくある失敗と対策【実例付き】

ワイヤーフレーム作成時によく見られる失敗を、パターン別に整理しました。これらの失敗は、すべてワイヤーフレーム段階で気づけば修正が容易ですが、デザインや実装後に気づくと大幅な手戻りになるという共通点があります。

失敗パターン1：情報設計（IA）をせずにトップページから作り始める

よくある問題
サイト全体でどのようなページが洗い出しをしないままに、ワイヤーフレームを作り始めると、後で「このページが足りない」「リンク先がない」という問題が発生し、ワイヤーフレームの修正が増えます。

実例
トップページのワイヤーフレーム完成 後、社内で料金ページへの導線はどこに入れるの？と聞かれたものの、全く考えていなかったため、トップページに料金コンテンツをどの位置に入れるか再設計が必要になりました。その後も次々と想定していなかったページが出ため、その度にトップページに入れ込んだが、トップページの構成がとても全体最適とは言えなくなってしまったケースです。

どのように対処すれば良かったのか
本来であれば、サイト全体でどのようなページが必要なのか、漏れなく洗い出した上で、取捨選択をして、作るページがほぼ確定してからワイヤーフレームに着手するべきだったケースです。

失敗パターン2：デザイナーにワイヤーフレーム設計を任せる

よくある問題
デザイナーは「見た目」の専門家であり、「情報設計」はWebディレクターの領域です。役割分担を間違えると、見た目は良いのに、なぜか使いにくいサイトになります。

実例
使いにくいサイトの特徴としては、「トップページが使いにくい」「導線が行き止まり」「欲しいところにリンクがない」「欲しい情報がすぐ手に入らない」といった現象が起こります。

どのように対処すれば良かったのか
いきなりデザイナーに依頼せずに、サイト全体で必要なページの洗い出しを行い、せめてトップページだけでのワイヤーフレームを構築していれば、もっとも重要なトップページが使いにくいということは避けれらるはずです。

失敗パターン3：導線が曖昧なワイヤーフレーム

よくある問題
リンクがどこにつながるか不明のままワイヤーフレームを完成させ、デザインに着手したけど、導線の行き止まりが発生し、使いずらいサイトが完成してしまうといった問題があります。

実例
導線が曖昧なワイヤーフレームを受け取ったデザイナーは、どこがボタンでどのページの遷移するのかわからないので、本来のデザイン作業以外にも本来の守備範囲外の導線設計の作業も重なり、時間を取られたり、専門家ではないため、導線設計が甘くなったり、もしくは導線をそれほど考慮せずにデザインを仕上げると、次の工程を担当するコーダーやエンジニアに負荷がかかります。

どのように対処すれば良かったのか
導線設計をデザイナーやエンジニアに任せる前に、Webディレクターがサイトマップ制作→コンテンツマップ制作→ワイヤーフレーム制作の手順を行い、デザイナーに渡すことを大切が大切です。

失敗がもたらす結果

❌ CVRが上がらない
❌ 導線が行き止まりになる
❌ KPIが達成できないサイトになる
❌ 修正コストと時間が膨大になる

このような結果を避けるためにも、工程を端折らずに丁寧に進めることが大切です。

7. よくある質問（FAQ）

Q1. デザインを見ないとイメージできません。デザインを作りながら構成を考えるのはダメですか？

A. 二度手間のリスクが高く、コストも時間も余計にかかるのでおすすめしません。
「デザインを見ないと分からない」という気持ちは理解できます。しかし、デザインと構成を同時に進めると、以下の問題が起こります。

デザインから作り始めた場合、デザイン完成後に「この情報が足りない」「ボタンの位置が悪い」と気づき、デザインを全面的に作り直すケースが多発します。結果的にコストが3倍以上になるケースもあります。家の建築に例えるなら、家の地盤の調査や土台の設計をしないまま、見た目重視でデザインを作っても、そのデザインが環境と合わずに、結局調査からやり直しになると似ています。

特にデザインにこだわるサイトの場合デザインのやり直しはかなりのコストがかかります。それを避けるためにも上流工程のサイトマップ→コンテンツマップ→ワイヤーフレームの手順を守りましょう。

Q4. フローティングバナーもワイヤーフレームに入れるべきですか？

A. 入れるべきです。配置と優先度を明確にしましょう。
フローティングバナー（画面に固定表示されるバナー）は、ユーザー体験に大きく影響します。

✅ 配置：右下？左下？上部？のどこに配置するか
✅ 表示タイミング：ページを開いた瞬間？スクロール後？
✅ サイズ：小さめ？大きめ？
✅ 閉じるボタンの有無：ユーザーが消せるか？
✅ モバイル対応：スマホでも表示する？

よくある失敗
❌ ワイヤーフレームに入れず、実装段階で追加
→ 他の要素と重なり、メインコンテンツが見づらくなる

❌ 大きすぎるバナーを配置
→ ユーザーが邪魔に感じ、離脱率が上昇

ワイヤーフレームに以下のように記載することをおすすめします。

【フローティングバナー】
位置：右下
サイズ：横300px × 縦150px
表示タイミング：ページ読み込み後3秒
内容：「資料ダウンロード」ボタン
閉じるボタン：あり
モバイル：非表示

結論：フローティングバナーはユーザー体験に直結するため、ワイヤーフレーム段階で配置と仕様を決めるべきです。

8. 外注する場合のチェックポイント

ホームページを外注する場合でも、ワイヤーフレームの理解は重要です。

質問：制作会社に依頼する場合、ワイヤーフレームは誰が作りますか？

A. 基本的には制作会社が作りますが、発注者が作る場合もあります。基本は制作会社が作りますが、発注者が簡易版を作ると、コミュニケーションがスムーズになります。

外注する前に確認すること

• ワイヤーフレームは納品物に含まれるか
• 修正回数の上限はあるか
• スマホ版も作成されるか

これらを確認しておくと、費用のトラブルを避けることができます。

ワイヤーフレーム確認時のチェックリスト
✅ 自社の目的（CV獲得など）が反映されているか
✅ ターゲットユーザーの導線が明確か
✅ 競合と差別化できているか

9. まとめ

ワイヤーフレームは、Webサイト制作の成功を左右する重要な設計図です。
✅ ワイヤーフレームは「情報構造」を可視化する設計図
✅ デザイン前に作ることで、手戻りとコストを削減できる
✅ Figma・Miro・Canvaなど、用途に応じてツールを選ぶ
✅ 情報の詰め込みすぎと動線の曖昧さに注意
✅ 外注する場合も、ワイヤーフレームの確認は必須

ワイヤーフレームをしっかり作れば、デザインも実装もスムーズに進みます。紙とペンで、ラフスケッチから始めてみましょう。