ワイヤーフレームとは？作り方の手順と発注者の確認ポイント、ツールも紹介

Webサイトの制作を依頼すると、デザインに入る前に「ワイヤーフレームを確認してください」と、線と灰色の箱で描かれた図が届くことがあります。色も写真もない図を前に、何を見て、何を判断すればよいのか分からないという声は少なくありません。反対に、自社で簡単なワイヤーフレームを作って、制作会社に要望を伝えたいと考える担当者もいるでしょう。

ワイヤーフレームは、ページに「何を・どの順番で・どのくらいの大きさで」載せるかを決める設計図で、デザインに入る前に発注者が内容と順番を確認して合意しておくと、後の工程での手戻りを大きく減らせます。

この記事では、ワイヤーフレームの意味と役割、サイトマップやデザインカンプとの違い、誰が作るのか、作り方の手順、発注者が確認するときのチェックポイント、作成時の注意点、役立つツール、Figmaでの作り方までを解説します。

ワイヤーフレームとは

ワイヤーフレームとは、Webページに載せる要素（見出し、文章、画像、ボタンなど）の配置を、線と箱で簡略化して示したページの設計図です。

色や写真、書体などの見た目はあえて決めず、「どの情報を」「どの順番で」「どのくらいの大きさで」載せるかに集中して検討するために作ります。見た目の要素を省いているため、関係者が色や写真の好みではなく、ページの内容と構成について話し合えます。

サイトマップ・デザインカンプ・プロトタイプとの違い

Webサイトの制作では、ワイヤーフレームの前後にも似た成果物が出てきます。それぞれの違いは次のとおりです。

ワイヤーフレームは、サイト設計の工程の一部です。サイト設計全体で決めることと手順はサイト設計とは？具体的な手順で解説しています。

ワイヤーフレームの3つの役割

ワイヤーフレームには、ページに必要な要素をそろえる、問い合わせなど目的の行動までの導線を確保する、関係者で完成形の認識をそろえる、という3つの役割があります。

1. ページに必要な要素を確認する

Webページは、タイトル、見出し、本文、画像、図表、動画、問い合わせなどのボタン（CTA）、関連ページへのリンク、バナーといった要素で構成されます。ワイヤーフレームで要素を書き出すと、「事例が足りない」「料金の目安が載っていない」といった情報の過不足に、デザインの前に気づけます。ページの目的によっては不要な要素もあるため、目的に照らして取捨選択します。

2. 問い合わせまでの導線を確保する

導線とは、訪れた人を問い合わせや資料請求などの目的の行動まで導く道筋のことです。たとえばサービスページなら、次の順番で要素を並べると、読み進めながら納得して問い合わせに進めます。

1. 閲覧者の悩みへの共感（こんなことでお困りではありませんか）
2. 解決の方法（サービスの内容）
3. 選ばれる理由と根拠（強み、実績、事例）
4. 料金の目安と進め方
5. よくある質問
6. 問い合わせボタン

導線の考え方はサイト「導線」とは？設計のポイントで詳しく解説しています。

3. 関係者で完成形の認識をそろえる

Webサイトの制作には、発注者の担当者と決裁者、制作会社のディレクター、デザイナー、エンジニア、ライターなど多くの人が関わります。設計図がないまま進めると、それぞれが違う完成形を思い描き、デザインや実装の段階で「思っていたのと違う」という手戻りが起きます。後の工程ほど修正の手間と費用は大きくなるため、見た目を作り込む前の段階で合意しておくことが大切です。

ワイヤーフレームは誰が作る？発注者の関わり方

ワイヤーフレームは制作会社のディレクター（またはデザイナー）が作るのが一般的で、発注者は載せる情報を提供し、内容と順番を確認・承認する役割を担います。

制作会社は、ヒアリングの内容や検索キーワードの調査結果をもとにワイヤーフレームを作ります。一方で、実績の数字、取り扱う製品、社内の制度、よくある質問の内容など、ページに載せる中身を一番よく知っているのは発注者です。ワイヤーフレームの段階で、載せる情報を社内で集め始めると、原稿の準備がスムーズになります。

当社のコーポレートサイト制作では、ヒアリング・現状診断、ブランディング設計の後に「情報設計・ワイヤーフレーム」の工程（目安2週間）を設けています。検索キーワードの調査結果をもとにサイトマップとページ構成を決め、全ページのワイヤーフレームを作成し、問い合わせや資料請求のボタンの位置、フォームの項目、計測したい指標もこの段階で決めます。発注者の方には、サイトマップとワイヤーフレームの確認・承認と、掲載する情報（実績・数字・制度など）のご提供をお願いしています。

ワイヤーフレームの作り方：7つの手順

ワイヤーフレームは、作るページと目的を決め、要素を洗い出して優先順位をつけ、レイアウトの型を選んでから、手書きのラフ、ツールでの清書、共有と確認の順で作ります。

1. 作るページと目的を決める

サイトマップをもとに、ワイヤーフレームを作るページを決めます。トップページ、サービスページ、問い合わせにつながるページなど優先度の高いページから作り、事例やお知らせのように同じ形で増えていくページは、1つの型を作ってほかのページに使い回します。ページごとに「このページを見た人に何をしてほしいか」を一文で書いておくと、後の判断がぶれません。

2. 必要な要素を洗い出す

目的を達成するために必要な要素を、思いつく順に書き出します。多くのページは、大きく分けて次の3つの部分で構成されます。

• ファーストビュー：ページを開いて最初に見える部分。何のページかを伝える
• メインコンテンツ：説明、根拠、事例、図表など
• クロージング：まとめ、よくある質問、問い合わせボタン

何が必要か分からない場合は、同業他社のページにどんな情報が載っているかを確認すると参考になります。コーポレートサイトに必要なページはコーポレートサイトに必要なページ構成一覧で紹介しています。

3. 要素に優先順位をつける

書き出した要素に、ページの目的から見た優先順位をつけます。Webページは上から順に読まれ、下に行くほど読む人が減るため、優先度の高い要素ほど上に置きます。たとえばサービスの申し込みを目的とするページでは、サービスの内容と申し込みボタンの優先度が高く、会社の沿革などは低くなります。

4. レイアウトの型を選ぶ

要素の量とページの目的に合わせて、レイアウトの型を選びます。

5. 手書きでラフを描く

いきなりツールで作ると、図形の大きさや位置の調整に時間を取られ、構成を考えるのが遅くなります。最初は紙やホワイトボードに手書きで大まかな配置を描き、構成が固まってからツールで清書します。ラフを描くときは、閲覧者の視線の動きを意識すると、要素の置き場所を決めやすくなります。

これらはあくまで傾向です。視線の流れに合わせて、左上に何のページかを示す見出しを、視線の終わる右下やページの下部に次の行動を促すボタンを置く、という使い方をします。

6. ツールで清書する（パソコン版とスマートフォン版）

ラフをもとに、ツールで清書します。文字は「ここにキャッチコピー」のような仮の文字でもかまいませんが、見出しや本文のおおよその文字数は想定しておきます。パソコン版とスマートフォン版の両方を作り、スマートフォンでの並び順（横に並んでいた要素が、どの順番で縦に並ぶか）も決めておきます。スマートフォンからの閲覧が多いサイトでは、スマートフォン版から作るのも有効です。

7. 共有して確認・合意する

関係者に共有し、意見をもらって修正します。「このページの目的」と「見てほしい点」を添えて共有すると、的確な意見が集まります。合意した内容は日付を付けて保存し、どの案で決まったかを記録しておきます。

例：BtoB企業のトップページのワイヤーフレーム

たとえば、BtoBの製造業のトップページでは、上から次の順番で要素を並べるのが一つの型です。

1. ファーストビュー（キャッチコピー、工場や製品の写真、主要なメニュー、問い合わせボタン）
2. 事業・製品の紹介（3〜4つの事業への入口）
3. 選ばれる理由（強みを根拠とともに3つ程度）
4. 数字で見る会社（設備の台数、取引社数、創業年など）
5. 導入事例・実績
6. お知らせ
7. 採用情報への入口
8. 問い合わせ・資料請求

発注者がワイヤーフレームを確認するときのチェックポイント

ワイヤーフレームの確認では、見た目ではなく「目的に合った情報が、正しい順番で、過不足なく載っているか」を見て、デザインに進む前に気になる点をすべて伝えておきます。

確認するときは、灰色の箱や仮の文字の見た目を評価しないように注意します。色や写真はデザインの段階で検討するため、この段階では「内容と順番」に集中します。反対に、構成についての意見をデザインの段階まで持ち越すと、デザインを作り直すことになり、期間と費用が増えます。

ワイヤーフレームを作るときの注意点

ワイヤーフレームは、作り込みすぎず、サイト全体の構造を先に決め、パソコンとスマートフォンの両方を用意し、実際の原稿の量を想定して作ることが大切です。

• 書き込みすぎない：細かな装飾や色まで決めると、デザイナーが工夫する余地がなくなり、ワイヤーフレームの修正にも時間がかかります。決めるのは要素と順番、おおよその大きさまでにします
• サイトの構造を先に決める：どのページがどの階層にあるかを決めてから作らないと、ページ同士で情報が重複したり、ページによって構成がばらばらになったりします
• パソコン版とスマートフォン版を作る：パソコン版だけで合意すると、スマートフォンでの並び順が実装の段階まで決まらず、手戻りの原因になります
• 原稿の量を想定する：見出しが2行になる、説明文が想定の倍ある、といったずれは、デザインの崩れにつながります。原稿の下書きと並行して進めると確実です
• 変更の記録を残す：誰の意見で何を変えたかを残しておくと、後で判断を振り返れます

ワイヤーフレームの作成に役立つツール

ワイヤーフレームは手書きでも、普段使っている資料作成ソフトでも作れますが、制作会社とのやり取りまで考えると、共有とコメントがしやすいFigmaが便利です。

Adobe XDの提供状況はアドビの公式ページで確認できます。単体プランの販売は2023年1月に終了したと報じられています（窓の杜）。XDで作った既存のデータがある場合は、今後の修正をどのツールで行うかを制作会社と確認しておくと安心です。

Figmaでワイヤーフレームを作るメリットと手順

Figmaでワイヤーフレームを作ると、インストール不要のブラウザで作業でき、URLで共有してコメントで意見を集められ、プロトタイプで画面の流れまで確かめられるため、制作会社とのやり取りが速くなります。

Figmaを使うメリット

• インストールが不要：ブラウザで動くため、WindowsでもMacでも使え、会社のパソコンと持ち出し用のパソコンなど、別の端末からも同じデータで作業できます
• 共有とコメントが簡単：URLを送るだけで共有でき、相手はワイヤーフレームの該当箇所に直接コメントを書き込めます。閲覧とコメントだけの利用者は料金がかかりません（Figma公式ヘルプ：シートの種類）
• 同時に編集できる：打ち合わせをしながら、その場で要素を入れ替えて確認できます
• 無料プランから始められる：スタータープランは無料で使えます。ただし、チームで共有できるファイルの数などに制限があります
• 部品やテンプレートが豊富：Figmaのコミュニティには、利用者が公開しているワイヤーフレーム用の部品集やテンプレートが多数あります
• そのままデザインに進める：合意したワイヤーフレームをもとに、同じファイルでデザインを作れます

以前は「メニューが英語」「和文フォントが少ない」ことがFigmaの弱点として挙げられていましたが、2026年10月時点では画面表示を日本語に切り替えられ、Google Fontsの和文フォントやパソコンにインストールしたフォントも使えます。

Figmaでのワイヤーフレームの作り方

1. アカウントを作成し、デザインファイルを作る：Figmaにログインし、新しいデザインファイルを作成します。表示は設定から日本語に切り替えられます。
2. フレームを用意する：フレームツール（Fキー）を選ぶと、画面右側にパソコンやスマートフォンなどの画面サイズの一覧が表示されます。パソコン用とスマートフォン用のフレームを並べて用意します。
3. 図形とテキストで要素を配置する：長方形（Rキー）やテキスト（Tキー）で、見出し、画像の位置、ボタンを配置します。画像の位置は、灰色の四角に「工場の写真」などと書いておくと分かりやすくなります。
4. オートレイアウトで整える：要素をオートレイアウトでまとめると、要素を追加したり並べ替えたりしても、余白が自動で整います。
5. プロトタイプで画面の流れを確認する：ボタンと移動先の画面をつないで再生すると、クリックしたときの画面の移り変わりを確かめられます。
6. 共有してコメントをもらう：画面右上の「共有」から、確認してほしい人を招待するか、リンクを送ります。確認だけの人は閲覧の権限で招待します。

ゼロから作るのが難しい場合は、Figmaのコミュニティで公開されているワイヤーフレーム用の部品集（ボタン、見出し、画像の枠など）を使うと、部品を組み合わせるだけで作れます。Figmaの基本的な使い方はFigmaの使い方入門で解説しています。

よくあるご質問

ワイヤーフレームについて、発注者の方からよくいただくご質問にお答えします。

ワイヤーフレームの段階で、色や写真も決めますか？

決めません。色・書体・写真は、デザインの段階でコンセプトやトーン＆マナーに沿って決めます。ワイヤーフレームでは、要素の種類と順番、おおよその大きさに集中します。ただし写真については、「工場の全景」「社員の集合写真」など、どんな写真を置くかを書いておくと、撮影の準備を早く始められます。

発注者がExcelやPowerPointで作ったワイヤーフレームを渡してもよいですか？

問題ありません。手書きやPowerPointの簡単な図でも、「載せたい情報」と「優先したい順番」が伝われば、制作会社にとって大切な情報になります。ただし、制作会社は目的や検索キーワード、導線の観点から構成を見直すことがあるため、たたき台として渡すと考えるのがよいでしょう。

ワイヤーフレームの確認には、どれくらい時間をかければよいですか？

ページ数によって変わりますが、社内の関係者の意見を集めて取りまとめる時間も含めて、日程を確保しておくことが大切です。全ページを一度に見るより、トップページと主要なページを先に確認し、その考え方をほかのページに当てはめると効率的です。確認の期限は、制作会社とあらかじめ決めておきましょう。

ワイヤーフレームを確定した後に、変更はできますか？

変更はできますが、デザインや実装が進むほど影響が大きくなり、追加の費用や期間が必要になることがあります。当社では各工程の終わりに成果物を確認いただき、合意してから次の工程に進みます。合意後の変更は、影響範囲に応じて追加費用・期間をご相談のうえ対応しています。

まとめ

ワイヤーフレームは、ページの内容と順番を見た目より先に決めるための設計図で、発注者がこの段階で確認・合意しておくことが、手戻りの少ないサイト制作につながります。

• ワイヤーフレームは、何を・どの順番で・どのくらいの大きさで載せるかを線と箱で示したページの設計図
• 役割は、要素の確認、導線の確保、関係者の認識合わせの3つ
• 作るのは制作会社が一般的で、発注者は情報の提供と確認・承認を担う
• 作り方は、目的と要素の洗い出し→優先順位→レイアウトの型→手書きのラフ→ツールで清書→共有と合意
• 確認では見た目ではなく、目的・情報の過不足・並び順・ボタン・スマートフォン版を見る
• ツールは共有とコメントがしやすいFigmaが便利。Adobe XDはメンテナンスモードのため、新規導入には選びにくい

当社のコーポレートサイト制作では、サイトマップ、全ページのワイヤーフレーム、対策キーワード一覧、問い合わせボタンと計測の定義を設計書としてお渡しし、確認・合意をいただいてからデザインに進みます。サイトの構成から相談したい場合も、お気軽にお問い合わせください。

関連記事：Webサイト制作のフローと作業項目／要件定義書とは？記載内容と必要な理由／コーポレートサイトのデザインの決め方