ホームページ制作を依頼するとき、制作会社から「ワイヤーフレームを確認してください」と言われたことはありませんか？初めて聞いた方は「何のこと？」と戸惑うかもしれません。でもじつは、ワイヤーフレームの確認はサイト制作の中でもっとも重要なステップのひとつです。
この記事では、Web制作を外注している担当者・経営者の方に向けて、ワイヤーフレームとは何か・なぜ必要なのか・どうやって確認すればいいのかを、専門知識ゼロの前提でわかりやすく解説します。
ワイヤーフレームとは何か
ワイヤーフレームとは、Webページの「骨組み」を表した設計図のことです。英語で「ワイヤー（wire＝線・針金）」と「フレーム（frame＝枠組み）」を組み合わせた言葉で、線や枠だけでシンプルに描かれたページのレイアウト図をイメージするとわかりやすいです。
具体的には、「ここにヘッダーを置く」「このあたりに大きな見出しと画像を並べる」「ここに問い合わせボタンを配置する」といった情報を、色もデザインもないシンプルな図で表したものです。
ワイヤーフレームに含まれる内容
ワイヤーフレームには、主に以下の要素が含まれます。
- ヘッダー・フッターの位置と構成
- ナビゲーションメニューの配置
- テキスト（見出し・本文）の位置とおおよそのボリューム
- 画像・動画が入るエリアの大きさと位置
- ボタン・フォームの配置
- 各セクションの順番と優先度
色・フォント・写真・イラストといったビジュアル要素は含まれません。あくまで「何をどこに置くか」という構成だけを確認するための図です。
ワイヤーフレームはいつ作られるのか
制作フローの中では、ワイヤーフレームはデザイン制作の前に作られます。
一般的な流れは次のとおりです。
- ヒアリング・要件定義（サイトの目的・ターゲット・必要なページを確認）
- ワイヤーフレーム作成・確認（ページの構成・レイアウトを設計）
- デザイン制作（見た目・カラー・フォントを決める）
- コーディング（HTMLやCSSでページを実装する）
- テスト・公開
ワイヤーフレームは「2番目のステップ」に位置します。ここで構成を固めてからデザインに進むのが、良いWeb制作の基本的な流れです。
ワイヤーフレームは誰が作るのか
制作会社のWebディレクターやデザイナーが作成するのが一般的です。発注者（皆さん）が自分で作る必要はありません。ただし、確認・承認するのは発注者の役割なので、「何を見てどう判断するか」を知っておくことが大切です。
なぜワイヤーフレームが必要なのか
ワイヤーフレームがなくていきなりデザインを作ると、どんな問題が起きるでしょうか。たとえば「デザインを見てみたら、会社概要ページへのリンクがどこにも見つからなかった」「サービス一覧と問い合わせボタンの位置が遠すぎて使いにくい」といった問題です。デザインが完成してから構成を変えるのは、手戻りが大きく時間もコストもかかります。
ワイヤーフレームには、そういった手戻りを防ぐための重要な役割があります。
認識のズレを早期に防げる
発注者と制作会社が「頭の中で考えていたもの」は、意外なほど違います。「スタッフ紹介ページは必要だと思っていた」「問い合わせフォームはメインメニューに入れてほしかった」──そんなすれ違いを、ワイヤーフレームの段階で発見して修正できます。
デザイン完成後・コーディング後に修正するより、ワイヤーフレームの段階で修正するほうが工数もコストも大幅に少なくて済みます。
ページの目的とユーザー導線を確認できる
ワイヤーフレームを見ると、「このページはユーザーに何をしてほしいのか」「どの順番で情報を読んでもらうのか」が視覚的に確認できます。
たとえばトップページなら、「まず会社の特長を見せて、次に実績を見せて、最後に問い合わせに誘導する」という流れが設計されているはずです。その流れが自分たちの意図と合っているかをチェックできるとベストです。
制作チーム全体で認識を統一できる
ワイヤーフレームは、発注者だけでなく、デザイナー・コーダー・ライターなど制作に関わる全員が参照する指示書でもあります。「このエリアには何が入るのか」「このボタンはどこに遷移するのか」という情報が共有されることで、チーム全体がスムーズに動けます。
混同されやすい用語との違い
ワイヤーフレームと似たような言葉がいくつかあります。それぞれの違いを整理しておきましょう。
デザインカンプとの違い
デザインカンプ（「カンプ」はcomprehensive layoutの略）は、実際の完成デザインを忠実に再現した見本画像のことです。色・フォント・写真・余白などが全て決まった状態で作られます。
ワイヤーフレームが「骨格（構造）」なら、デザインカンプは「外見（見た目）」です。制作フローでは、ワイヤーフレームで構成を固めてからデザインカンプを作ります。
プロトタイプとの違い
プロトタイプは、実際にクリックやスワイプで操作できる試作品（デモ）のことです。ワイヤーフレームは静止画ですが、プロトタイプはボタンを押すと画面が遷移するなど、動きを確認できます。
スマートフォンアプリやECサイトなど、操作の流れが重要なサービスではプロトタイプを作ることがあります。一般的なコーポレートサイトでは、ワイヤーフレームまでで十分なことが多いです。
モックアップとの違い
モックアップは、デザインの完成イメージを実際の端末画面に当てはめて見せる画像のことです。「こんな感じの見た目になります」とクライアントに見せるためのビジュアルサンプルです。
ワイヤーフレームよりも後のステップで作られ、デザインカンプと合わせて確認・承認に使われます。
サイトマップとの違い
サイトマップは、サイト内のページ一覧と階層構造を示した図です。「トップページの下にサービスページがあり、その下に各サービス詳細ページがある」という全体像を把握するために使います。
ワイヤーフレームが「1ページの中の構成図」なら、サイトマップは「サイト全体のページ構成図」です。どちらも制作の初期段階で作られます。
ワイヤーフレームの作り方（制作会社の作業フロー）
発注者が自分で作る必要はありませんが、制作会社がどのように作っているかを知っておくと、確認のときに役立ちます。
Step 1: 要件を整理する
まずサイトの目的・ターゲット・必要なページ・掲載したいコンテンツを整理します。ヒアリングシートや提案書の内容をもとに、「このページには何が必要か」を洗い出す作業です。
Step 2: 情報の優先順位を決める
洗い出した要素に優先順位をつけます。「問い合わせにつなげたい」という目的があれば、問い合わせボタンを目立つ場所に置く必要があります。逆に優先度が低い情報は、ページ下部やサブページに移します。
Step 3: レイアウトを組み立てる
優先順位をもとに、要素を配置していきます。縦長のシングルカラムレイアウト・2〜3カラムのグリッドレイアウトなど、ページの性質に合わせて最適な構成を選びます。
Step 4: ブラッシュアップして共有する
FigmaやAdobe XDといったツール、またはExcel・PowerPointで作成したワイヤーフレームを発注者に共有し、フィードバックをもとに修正します。ここで発注者からの確認・承認が得られれば、次のデザイン工程に進みます。
ワイヤーフレームを作成する代表的なツール
参考までに、制作会社がよく使うツールを紹介します。
Figma
現在もっとも広く使われているUIデザインツールです。ワイヤーフレームからデザイン制作まで一貫して使えます。ブラウザ上で動作するため、発注者もURLを共有するだけで確認できます。当社もFigmaを使ってワイヤーフレームを作成しています。
Adobe XD
AdobeのUIデザインツールです。Illustratorなど他のAdobeツールと連携しやすく、プロトタイプ（動作確認）も作れます。
Cacoo
日本製のオンラインホワイトボードツールです。直感的に使えるため、制作経験の少ないメンバーでも扱いやすいのが特長です。
Excel / PowerPoint / Google スライド
ツールに慣れていない場合や、シンプルな構成を素早く共有したい場合は、表計算・スライドソフトで代用することもあります。精度は下がりますが、手軽に使えるのがメリットです。
発注者として確認するときのポイント
ワイヤーフレームを受け取ったとき、何を確認すればいいのでしょうか。以下のポイントを意識できるとベストです。
目的に沿った構成になっているか
「このサイトで一番やってほしいこと（問い合わせ・資料請求・来店など）」に向けて、自然な流れで誘導されているかを確認します。問い合わせボタンがページの隅に追いやられていたり、必要な情報が目立たない場所にあったりしないかをチェックしましょう。
必要なコンテンツが全て入っているか
「このページには絶対載せたい情報」が含まれているかを確認します。会社の強み・実績・料金の目安・よくある質問など、ユーザーが判断するために必要な情報が抜けていないかを見ます。
ユーザーの視点で読めるか
ページを上から順番に読んだとき、「何のサービスか → なぜ選ぶべきか → 次に何をすればいいか」という流れが自然につながっているかを確認します。専門用語が見出しに使われていないか、初めて訪れた人でも理解できる構成かを意識するとよいです。
スマートフォン版も確認する
現在はスマートフォンからのアクセスが多くのサイトで過半数を超えています。PC版とスマホ版の両方のワイヤーフレームを確認できるとベストです。スマホ版は縦長の1カラムが基本で、ボタンのサイズや位置が指で押しやすいかもチェックポイントになります。
ワイヤーフレームでよくある失敗と注意点
デザインの話をしてしまう
ワイヤーフレームは構成の確認段階です。「この枠の色をもう少し明るくしてほしい」「フォントを丸みのあるものにしたい」というデザインの話は、次のデザイン工程でするのが正しい流れです。ワイヤーフレームの段階では「構成・配置・情報量」にフォーカスしましょう。
細かい文言にこだわりすぎる
ワイヤーフレームのテキストはあくまでダミーや仮の文言です。「このキャッチコピーの言い回しが気になる」というコメントは後工程でも対応できます。この段階では「何を伝えるか・どんな量の文章が入るか」を確認する程度で十分です。
一度承認してから大きく構成を変える
ワイヤーフレームを承認した後に「やっぱりページ構成を変えたい」となると、デザインのやり直しが発生します。承認前にしっかり確認しておくことが大切です。「なんとなく問題なさそう」ではなく、「この構成でいける」と納得してから承認できるとベストです。
レスポンシブ対応を見落とす
PC版のワイヤーフレームだけ確認してスマホ版を見ていないケースがあります。PCとスマホで情報の優先順位や配置が変わるため、両方の確認が必要です。スマホ版ワイヤーフレームを用意していない制作会社に依頼している場合は、スマホ対応の設計方針を口頭でも確認しておきましょう。
ワイヤーフレームの確認・修正はどのくらい時間がかかるのか
一般的なコーポレートサイト（5〜15ページ程度）であれば、ワイヤーフレームの制作に1〜2週間程度かかることが多いです。その後、発注者の確認・修正を経て最終承認まで、さらに1〜2週間を見ておくと余裕があります。
修正のやり取りが増えると時間がかかるため、確認時は「なんとなくOK」ではなく、疑問点・要望を具体的にフィードバックすることが大切です。「ここが気になるけど、どう直せばいいかわからない」という場合も、「なんとなく違和感がある」と正直に伝えると、制作側が提案してくれます。
まとめ
ワイヤーフレームは、Webページの「骨格」を示す設計図です。色もデザインも入っていないシンプルな図ですが、「何をどこに置くか」という構造を確認する、制作の中でも重要なステップです。
発注者として押さえておきたいポイントをまとめると、次のとおりです。
- ワイヤーフレームはデザイン前に確認する骨格図
- 目的・導線・必要なコンテンツが揃っているかをチェックする
- PC版とスマホ版の両方を確認する
- デザインの話はこの段階ではしない
- 疑問・違和感は遠慮なく伝える
ワイヤーフレームの段階で「これでいける」と納得できれば、その後のデザイン・コーディングはスムーズに進みます。「よくわからないまま承認してしまった」という状況を避けるために、この記事を参考に積極的に確認してみてください。