この記事のポイント
この記事でおさえておきたいポイントは以下です。
-
ワイヤーフレームとは
-
Webページのどこに何を置くかを、線と箱と文字だけで表した設計図。色や写真を決める前に、関係者で「何を・どの順で伝えるか」をそろえるために作る。
-
作り方は5ステップ
-
目的・ターゲット・ゴールを決める→要素を書き出す→優先順位をつける→手書きでラフ→ツールで清書して注釈を付ける。スマホ版とPC版は分けて作る。
-
ツールとAI
-
Figma・Miro・Cacoo・Canvaは無料プランから使える（2026年10月確認）。Adobe XDはメンテナンスモード。FigmaやMiroのAIでたたき台を作れるが、目的や自社の強みは人が確認する。
ワイヤーフレームとは、Webページのどこに何を置くかを決める「設計図」です。色や写真を入れる前に、線と箱と文字だけでページの骨組みを描き、制作に関わる全員で「何を・どの順番で伝えるか」をそろえるために作ります。
この記事では、ワイヤーフレームの意味とデザインカンプ・プロトタイプとの違い、PC・スマホのワイヤーフレームの例、初心者でも迷わない作り方5ステップ、FigmaやMiroなど無料で始められるツール（料金は2026年10月2日に公式サイトで確認）、生成AIでの作り方までまとめました。後半では、制作会社から受け取ったワイヤーフレームを確認するときのポイントも紹介します。
2026年版＼無料／サイト制作実践ガイド2026を受け取る
無料資料ダウンロード
サイト制作実践ガイド2026
リニューアルでよくある5つの失敗と、検索評価を落とさない移行
- ご担当者が挙げた3つの悩み
- リニューアルでよくある5つの失敗
- 成果はデザインの前に決まる
ワイヤーフレームとは？Webサイトの設計図
まずはワイヤーフレームの意味と役割、誰がどのタイミングで作るのか、どこまで作り込めばよいのかを整理します。ここを押さえておくと、作り方やツール選びで迷いにくくなります。
ワイヤーフレームの意味と役割
ワイヤーフレーム（wireframe）は、直訳すると「針金の骨組み」です。Web制作では、ページのレイアウトとコンテンツの配置を、線・四角形・テキストだけで表した設計図を指します。略して「ワイヤー」「WF」と呼ばれることもあります。
ワイヤーフレームで決めるのは、主に次の内容です。
- ページに載せる要素（見出し、本文、画像、ボタン、フォームなど）
- 要素を並べる順番と、それぞれの大きさ（優先度）
- ヘッダー・グローバルナビゲーション・フッターなどの共通部分
- リンクやボタンの遷移先、フォームの項目などの動き
色・フォント・写真といった見た目はまだ決めません。見た目を外すことで、「このページで何を伝え、ユーザーに何をしてもらうか」という中身の議論に集中できます。
誰が・いつ作るのか
ワイヤーフレームは、Webディレクターが中心になって作ることが一般的です。デザイナーやUIデザイナーが作る場合や、企画段階で発注者側のWeb担当者が簡単なものを用意する場合もあります。デザインの経験は必須ではなく、ページの目的とユーザーを理解している人が作るのが理想です。
作るタイミングは、サイト全体のページ構成（ディレクトリマップ・サイトマップ）を決めたあと、デザインに入る前です。たとえば、ニュートラルワークスのコーポレートサイト制作では、ヒアリングのあとにページ構成（サイトマップ）とワイヤーフレームでご提案し、内容を固めてからデザインに進みます。
どこまで作り込むか（粒度の目安）
ワイヤーフレームの作り込み具合は、目的によって変わります。最初から細かく作ると修正の手間が増えるため、段階的に詳しくしていくのが基本です。
| 段階 | 内容 | 向いている場面 |
|---|---|---|
| ラフ（低精度） | 手書きや付箋で、要素の並び順と大まかな配置だけを描く | アイデア出し、社内での方向性の確認 |
| 標準（中精度） | ツールで清書し、見出しや仮の文章、ボタンの文言、リンク先を入れる | 発注者との合意、デザイナーへの引き継ぎ |
| 詳細（高精度） | 実際の原稿、フォーム項目、PC・スマホ別の配置、動きの注釈まで入れる | 規模の大きいサイト、機能の多いページ、エンジニアとの仕様確認 |
迷ったら「デザイナーとエンジニアが、質問せずに次の作業に進める程度」を目安にしましょう。特に見出しやボタンの文言は、仮でもよいので実際に近い言葉を入れておくと、レイアウトのズレを防げます。
ワイヤーフレームが必要な3つの理由
ワイヤーフレームを省いていきなりデザインを作ると、あとから大きな修正が発生しがちです。ここでは、ワイヤーフレームを作るべき3つの理由を説明します。
関係者の認識をそろえられる
Webサイト制作には、発注者、ディレクター、デザイナー、エンジニア、ライターなど多くの人が関わります。「トップページに実績を載せる」と言葉で決めても、どのくらいの大きさで、何件、どこに置くのかは人によって思い浮かべるものが違います。
ワイヤーフレームという1枚の図があれば、全員が同じものを見ながら話せます。発注者にとっても、完成前にページの全体像を確認できるため、「思っていたものと違う」というすれ違いを防げます。
デザイン・実装後の手戻りを防げる
デザインやコーディングが進んだあとに「この要素を追加したい」「順番を入れ替えたい」となると、デザインの作り直しや実装の修正が必要になり、費用も期間も膨らみます。
ワイヤーフレームの段階なら、箱を動かしたり書き換えたりするだけで修正できます。必要な要素の抜け漏れや、ページ間の矛盾にも早い段階で気づけるため、結果的に制作全体のスケジュールが安定します。
見た目ではなく情報設計に集中できる
色や写真が入ったデザインを見ると、どうしても「好き・嫌い」の議論になりがちです。ワイヤーフレームは見た目の要素を外しているため、「ユーザーが知りたい情報が上にあるか」「問い合わせまでの流れが自然か」といった情報設計の議論に集中できます。
情報設計はUI/UXの土台です。ユーザーにとっての使いやすさについては、UI/UXとは？もあわせてご覧ください。
ワイヤーフレームとデザインカンプ・モックアップ・プロトタイプの違い
Web制作では、ワイヤーフレームと似た言葉がいくつも出てきます。それぞれ「何を決めるための資料か」が違うため、制作の流れに沿って整理しておきましょう。
| 名称 | 決めること | 見た目 | 主な作成者 |
|---|---|---|---|
| ディレクトリマップ（サイトマップ） | サイト全体のページ構成・階層・URL | 一覧表・ツリー図 | ディレクター |
| ワイヤーフレーム | 1ページ内の要素と配置 | 線と箱とテキスト（白黒） | ディレクター |
| デザインカンプ | 完成時の見た目（色・フォント・写真） | 完成形に近い静止画 | デザイナー |
| モックアップ | 見た目の確認（実物に近い画面イメージ） | 完成形に近い静止画 | デザイナー |
| プロトタイプ | 画面遷移や動き、操作感 | クリックして動かせる試作品 | デザイナー・エンジニア |
※デザインカンプとモックアップは、会社によってほぼ同じ意味で使われることもあります。
ディレクトリマップ（サイトマップ）との違い
ディレクトリマップは、サイトに必要なすべてのページの階層・URL・タイトルなどをまとめた一覧表です。サイト全体を俯瞰するための資料で、ワイヤーフレームは、その中の1ページずつの中身を設計する資料です。
順番としては、ディレクトリマップでページの数と役割を決めてから、各ページのワイヤーフレームを作ります。作り方は次の記事で詳しく解説しています。
ディレクトリマップとは？Web制作での必要性やメリット、作り方を解説
Web制作に関わる人にとっては聞きなれた、見慣れたディレクトリマップですが、何のために必要なのでしょうか？Web制作でディレクトリマップが無いとどんなことで困るのか、基本的なことから解説します。
デザインカンプ・モックアップ・プロトタイプとの違い
デザインカンプは、ワイヤーフレームをもとにデザイナーが色・フォント・写真を入れて作る、完成形に近いデザインです。ワイヤーフレームが「何をどこに置くか」を決めるのに対し、デザインカンプは「どう見せるか」を決めます。
プロトタイプは、ボタンを押すと次の画面に移るなど、実際に操作できる試作品です。アプリや機能の多いサイトでは、ワイヤーフレームの段階で簡単なプロトタイプを作り、操作の流れを確かめることもあります。
ワイヤーフレームの例（サンプル）とレイアウトの型
実際のワイヤーフレームがどのようなものか、例を見るとイメージがつかみやすくなります。ここではコーポレートサイトとメディアの例、よく使われるレイアウトの型を紹介します。
コーポレートサイトのトップページ例（PC・スマホ）
下は、BtoB企業のコーポレートサイトのトップページを想定したワイヤーフレームの例です。PCでは横に並べている要素を、スマホでは縦に積み直している点に注目してください。
PC版
キャッチコピー＋要約1文＋［資料ダウンロード］ボタン
スマホ版
キャッチコピー
［資料DL］
この例では、ファーストビューに「何の会社か」と次の行動（資料ダウンロード）を置き、その下に事業内容・実績・お問い合わせの順で並べています。コーポレートサイトに載せるべき項目は、コーポレートサイトの構成とは？で詳しく紹介しています。
ブログ・メディアのトップページ例
次は、ブログやオウンドメディアのトップページを想定したワイヤーフレームです。記事一覧を中心に、サイドバーにランキングやCTAを置き、記事を回遊しながら問い合わせや資料ダウンロードにつながる構成にしています。
よく使うレイアウトの型
ワイヤーフレームを一から考えるのが難しい場合は、よく使われるレイアウトの型から選ぶと効率的です。
| レイアウト | 特徴 | 向いているページ |
|---|---|---|
| シングルカラム | コンテンツを1列で縦に並べる。スマホと相性がよい | LP、サービス紹介、採用ページ |
| マルチカラム | メインとサイドバーなど2〜3列に分ける | ブログ、ニュース、メディア |
| グリッド | 同じ大きさの箱を格子状に並べる | 事例一覧、商品一覧、ポートフォリオ |
| フルスクリーン | 画像や動画を画面いっぱいに使う | ブランドサイト、キャンペーンページ |
要素の並べ方では、視線の動きも参考になります。画像や見出しが中心のページでは、左上から右へ、そして下へと「Z」の形に視線が動くといわれています（Zの法則）。文章が多いページでは、上部を横に読み、そのあと左側を縦に流し読みする「F字型」の読み方が多いことが、ユーザビリティ調査で知られています（参考：Nielsen Norman Group）。重要な情報ほど左上や各ブロックの冒頭に置くのが基本です。
ワイヤーフレームの作り方5ステップ
ワイヤーフレームは、いきなりツールで描き始めるより、目的と要素を整理してから作る方が早く仕上がります。ここでは初心者でも迷わない5つの手順を紹介します。
- 目的・ターゲット・ゴールを決める
- ページに必要な要素を書き出す
- 要素に優先順位をつける
- 手書きでラフを描く
- ツールで清書し、注釈を付けて共有する
STEP1 目的・ターゲット・ゴールを決める
最初に、そのページの目的（何のためのページか）、ターゲット（誰が見るか）、ゴール（見た人に何をしてほしいか）を一文ずつ書き出します。たとえば「製造業の情報システム部門が、自社サービスの導入事例を見て、資料をダウンロードする」のように具体的にします。
ゴールが決まると、ボタンをどこに置くか、どの情報を先に見せるかの判断基準になります。ここが曖昧なまま作ると、要素を詰め込んだだけの、何を伝えたいのか分からないページになりがちです。
STEP2 ページに必要な要素を書き出す
次に、ページに載せる要素をすべて書き出します。この段階では順番や配置は気にせず、付箋やスプレッドシートに思いつくものを並べていきます。
- 共通部分：ロゴ、グローバルナビゲーション、パンくずリスト、フッター
- メイン部分：キャッチコピー、サービスの説明、特徴・強み、料金、導入事例、よくある質問
- 行動を促す部分：お問い合わせボタン、資料ダウンロード、電話番号
競合サイトや参考にしたいサイトがどのような要素を載せているかを確認すると、抜け漏れを防げます。
競合分析ツールおすすめ12選｜無料・有料別に競合サイトで見るべき項目も解説
この記事では、競合サイトの順位比較や詳細な分析に役立つおすすめのツールを10種類紹介しています 各ツールの特徴や活用方法、競合調査における選定ポイントについても丁寧に解説しています。
STEP3 要素に優先順位をつける
書き出した要素に、ターゲットにとっての重要度で優先順位をつけます。ユーザーが最初に知りたいこと、判断に必要なこと、行動のきっかけになることの順に並べるのが基本です。
優先度の高い要素ほど、ページの上部に大きく配置します。すべてを目立たせようとすると、結局どれも目立たなくなるため、「このページで一番伝えたいことは1つ」と決めておきましょう。
STEP4 手書きでラフを描く
優先順位が決まったら、紙やホワイトボードに手書きでラフを描きます。箱と線だけで十分で、上手に描く必要はありません。手書きなら何パターンも短時間で試せるため、配置の案を比べるのに向いています。
ラフの段階で、関係者に一度見てもらうのもおすすめです。方向性の違いに早く気づけるほど、あとの修正が少なくなります。
STEP5 ツールで清書し、注釈を付けて共有する
方向性が固まったら、ツールで清書します。見出しやボタンの文言、リンク先、フォームの項目なども書き込み、配置の意図や動きは横に注釈として残しておくと、デザイナーやエンジニアへの引き継ぎがスムーズです。
清書したワイヤーフレームは、関係者がコメントを書き込める形で共有しましょう。オンラインで共同編集できるツールを使うと、修正の履歴も追いやすくなります。
ワイヤーフレーム作成におすすめのツール
ワイヤーフレームは、専用のデザインツールからプレゼンテーションソフトまで、さまざまなツールで作れます。料金・機能は2026年10月2日に各社の公式サイトで確認した内容です。最新の情報は公式サイトでご確認ください。
| ツール | 無料で使える範囲 | 有料プラン（公式表記） | 向いている人 |
|---|---|---|---|
| Figma | スタータープラン（無料）。UIキット・テンプレート、AIクレジット（月に最大500） | プロフェッショナル：フルシート月16ドル〜（米ドル表記） | デザイナーへ引き継ぐ、本格的に作る |
| Miro | Free：編集可能ボード3件、AIは月10クレジット | Starter：1人あたり月8ドル（年払い） | チームでアイデア出しから進める |
| Cacoo | フリープラン（機能制限あり）、全機能30日間無料 | スペースプラン：月18,000円 | 日本語のサポート・国産ツールを使いたい |
| Canva | 無料のワイヤーフレームテンプレートあり | Canvaプロ：1人あたり年11,800円 | テンプレートから手軽に作りたい |
| PowerPoint・Googleスライド・Excel | Googleスライドは無料。PowerPointはMicrosoft 365に含まれる | Microsoft 365 Personal：年21,300円 | 新しいツールを覚えず、社内で共有したい |
Figma
Figmaは、ブラウザで動くデザインツールです。ワイヤーフレームからデザインカンプ、プロトタイプまで1つのツールで作れるため、デザイナーやエンジニアへの引き継ぎが簡単です。複数人で同じファイルを同時に編集でき、コメントでのやり取りもできます。
無料のスタータープランでも、UIキットやテンプレートを使ってワイヤーフレームを作れます。有料のプロフェッショナルプランは、フルシートが月16ドルからで、ファイルとプロジェクトを無制限に作れます（2026年10月2日、公式の料金ページで確認。料金は米ドルで表示されています）。
Miro
Miroは、オンラインホワイトボードツールです。付箋でアイデアを出し、そのままワイヤーフレームに落とし込めるため、チームで要素を洗い出すところから作業したい場合に向いています。ワイヤーフレームのテンプレートや、ボタン・フォーム・ナビゲーションなどのUIコンポーネント、テキストの指示からワイヤーフレームを生成する「Miro AI」も用意されています。
Freeプランでは編集可能なボードが3件までで、AIは月10クレジットまで試せます。有料のStarterプランは1人あたり月8ドル（年払い）です（2026年10月2日、公式の料金ページで確認）。
Cacoo
Cacoo（カクー）は、株式会社ヌーラボが提供する国産のオンラインホワイトボードツールです。URLで簡単に共有でき、ワイヤーフレームのテンプレートも用意されています。画面が日本語で分かりやすく、社内やクライアントとの共有に使いやすいツールです。
フリープラン（一部機能に制限あり）があり、30日間はすべての機能を無料で試せます。有料のスペースプランは月18,000円（年契約は180,000円）です（2026年10月2日、公式の料金ページで確認）。
Canva
Canvaは、テンプレートを使って手軽にデザインを作れるツールです。無料のワイヤーフレームテンプレートが用意されており、選んで文字や箱を書き換えるだけでワイヤーフレームを作れます。オンラインで共同編集もできます。
無料で利用でき、有料のCanvaプロは1人あたり年11,800円です（2026年10月2日、公式の料金ページで確認）。デザイナーへ引き継ぐ前提の本格的なワイヤーフレームより、社内向けのたたき台づくりに向いています。
PowerPoint・Googleスライド・Excel
普段使っているPowerPointやGoogleスライド、Excelでもワイヤーフレームは作れます。図形とテキストボックスを組み合わせればよく、新しいツールを覚える必要がありません。Excelはセルを方眼紙のように使えるため、要素の幅をそろえやすいのが特長です。
Googleスライドは無料で使え、PowerPointはMicrosoft 365（個人向けのPersonalは年21,300円）に含まれます（2026年10月2日、公式サイトで確認）。ただし、デザインツールへの引き継ぎや、スマホ表示の確認には向かないため、ページ数が多い場合は専用ツールを検討しましょう。
Adobe XD・Photoshopを使う場合の注意
Adobe XDは、ワイヤーフレームやプロトタイプの作成に使われてきたAdobeのツールですが、現在はメンテナンスモードとなっており、新機能の追加は見込めません（Adobe XD公式サイト）。すでに使っている場合を除き、これから導入するならFigmaやMiroなど継続的に開発されているツールを選ぶのが安心です。
また、Adobe Photoshopでもワイヤーフレームを作成でき、自由度の高いレイアウトを作れます。ただし画像編集が本来の用途のため、要素の修正や共同編集の手軽さでは、上で紹介したツールの方が向いています。
生成AIでワイヤーフレームを作る方法と注意点
最近は、テキストで指示するだけでワイヤーフレームのたたき台を作れるAI機能が、主要なツールに搭載されています。ここでは、できることと使うときの注意点を整理します。
AIでできること
Figmaには、説明文から編集可能なワイヤーフレームやデザインを数分で作る「First Draft」という機能があります。Figmaの公式ヘルプによると、2026年5月20日以降はFigmaのエージェント（ベータ版・段階的に提供）がこの機能の新しい入口になり、エージェントはすべてのプランで利用できるとされています（Figma ヘルプセンター（英語））。
Miroでも、「3ステップのチェックアウトフローを作成」のようなテキストの指示から、ワイヤーフレームのレイアウトを生成できます（Miro公式サイト）。いずれも、白紙から考えるよりも早く、比較のための案を複数出せるのが利点です。
AIを使うときの注意点
AIが作るワイヤーフレームは、一般的なWebサイトやアプリのパターンをもとにした「よくある形」です。自社のターゲットや強み、問い合わせまでの流れは反映されないため、そのまま使うのではなく、たたき台として次の点を人が確認しましょう。
- STEP1で決めた目的・ターゲット・ゴールに合っているか
- 自社にしかない情報（実績、料金、強み）が入る場所があるか
- 要素の優先順位が、ターゲットの知りたい順になっているか
- 社外秘の情報をAIへの指示文に入れていないか（社内のルールを確認する）
AI機能の内容や利用できるプランは変わりやすいため、使う前に各ツールの公式情報を確認してください。
ワイヤーフレームを作るときの注意点
ワイヤーフレームは、作り方を間違えると手間ばかりかかって制作の役に立ちません。ここでは、作るときに気をつけたい5つのポイントを紹介します。
先にディレクトリマップを作る
ワイヤーフレームは、サイト全体のページ構成を決めてから作ります。ページ構成が決まっていないと、ページ同士で同じ内容が重複したり、あるべきリンク先が存在しなかったりと、あとから大きな修正が必要になります。
まずはディレクトリマップやサイト構成図でページの数と役割を固め、それからページごとのワイヤーフレームに進みましょう。サイト構成図の作り方はWebサイトの構成図の作り方で解説しています。
作るページを絞り、優先順位をつける
すべてのページのワイヤーフレームを作る必要はありません。トップページ、サービス紹介、お問い合わせなど、重要なページやレイアウトが特殊なページから作り、同じ型を使うページ（お知らせの詳細ページなど）は代表的な1ページで済ませるのが効率的です。
どのページから作るか優先順位を決めておくと、限られた時間でも制作の要になるページに力を注げます。
競合・参考サイトを分析してから作る
ワイヤーフレームを作る前に、競合サイトや参考にしたいサイトがどんな要素を、どんな順番で載せているかを確認しましょう。ユーザーが同じ業界のサイトで当たり前に期待している情報が抜けていると、比較されたときに不利になります。
一方で、競合と同じ構成にするだけでは差別化できません。自社の強みが伝わる要素をどこに置くかを意識して設計しましょう。
スマホ版とPC版を分けて作る
同じ内容でも、画面の幅が違えば最適な配置は変わります。PCで横に並べている要素は、スマホでは縦に積むことが多く、メニューの出し方やボタンの大きさも変わります。主要なページは、スマホ版とPC版のワイヤーフレームを分けて作りましょう。
スマホからのアクセスが多いサイトでは、スマホ版から先に設計する「モバイルファースト」で考えると、情報の優先順位を絞り込みやすくなります。画面幅に合わせて表示を切り替える仕組みはレスポンシブデザインとは？で解説しています。
デザインを作り込みすぎず、配置の意図を書き残す
ワイヤーフレームの段階で色や装飾を入れすぎると、議論が見た目に流れ、デザイナーの提案の幅も狭めてしまいます。白黒・グレーを基本に、要素の配置と優先度が伝わる程度にとどめましょう。
その代わり、「なぜこの要素をここに置くのか」は注釈で書き残しておきます。配置の意図が分かれば、デザインや実装の段階で判断に迷ったときの拠り所になり、修正の相談もスムーズに進みます。
制作会社のワイヤーフレームを確認する5つのポイント
Webサイトの制作を外部に依頼すると、デザインの前にワイヤーフレームの確認を求められることが一般的です。発注者として何を見ればよいのか、5つのポイントにまとめました。
目的とターゲットに合っているか
最初に、依頼時に伝えた目的とターゲットが反映されているかを確認します。たとえば「採用の応募を増やしたい」のに、トップページの上部が事業紹介ばかりになっていないか、といった視点です。
違和感があれば、この段階で遠慮なく伝えましょう。ワイヤーフレームの修正は、デザイン完成後の修正よりはるかに負担が小さく済みます。
必要な情報が優先順位どおりに並んでいるか
載せたい情報がすべて入っているか、そしてユーザーが知りたい順に並んでいるかを確認します。社内の都合で載せたい情報（社長挨拶など）が、ユーザーにとって重要な情報（サービス内容や料金）より上に来ていないかもチェックしましょう。
原稿を自社で用意する場合は、ワイヤーフレームの各ブロックに入る文字量の目安も確認しておくと、原稿づくりが楽になります。
問い合わせまでの導線が途切れていないか
ページを読み終えたユーザーが、次に何をすればよいか迷わない作りになっているかを確認します。お問い合わせや資料ダウンロードのボタンが、ページの上部と、読み終えたあたりの両方にあるかが目安です。
フォームの入力項目もワイヤーフレームの段階で確認しておきましょう。項目が多すぎると、送信前に離脱される原因になります。
スマホでの見え方が用意されているか
PC版のワイヤーフレームしか提出されていない場合は、スマホ版の配置も確認させてもらいましょう。特に、メニューの開き方、表や画像の見せ方、電話・お問い合わせボタンの位置は、スマホ版で大きく変わる部分です。
実際に自分のスマホで見ることを想像しながら、文字の量やボタンの押しやすさに問題がないかを確認します。
検索やAIに「おすすめ」される判断材料が入っているか
最近は、ChatGPTやGeminiなどのAIに「おすすめの〇〇の会社は？」と聞いて依頼先を探す人も増えています。AIや検索エンジンに候補として選ばれるには、まずページの中に判断材料がテキストで書かれていることが前提です。サービスの対象、料金の目安、強み、事例、よくある質問を載せる枠が、ワイヤーフレームの段階で確保されているかを確認しましょう。
Googleは、AIによる概要やAIモードに表示されるための追加の要件や特別な最適化は必要なく、SEOのベストプラクティスが引き続き有効だとしています（Google 検索セントラル「AI 機能とウェブサイト」）。特別な対策より、ユーザーの判断に必要な情報をきちんと載せることが基本です。なお、AIにおすすめされることを保証できる方法はありません。
ワイヤーフレームの見方や、目的に合った構成づくりに不安がある場合は、設計から相談できる制作会社を選ぶと安心です。ニュートラルワークスのコーポレートサイト制作では、目的とターゲットの整理から設計・デザイン・公開後の運用までを一貫して支援しています。LPの場合は、LP制作の制作内容に競合分析とワイヤーフレームの作成を含めています。
まとめ：ワイヤーフレームで「何を・どの順で伝えるか」を先に決めよう
ワイヤーフレームは、Webページに何を・どの順番で載せるかを決める設計図です。デザインの前に関係者の認識をそろえることで、手戻りを防ぎ、ユーザーにとって分かりやすいページを作れます。作り方は、目的とターゲットを決め、要素を書き出し、優先順位をつけてから、ラフ・清書へと進めるのが近道です。
まずはこの記事の例と5ステップを参考に、手書きのラフから始めてみてください。サイト全体の設計や制作の進め方に迷ったときは、無料の資料ダウンロードやご相談をご活用ください。
2026年版＼無料／サイト制作実践ガイド2026を受け取る
無料資料ダウンロード
サイト制作実践ガイド2026
リニューアルでよくある5つの失敗と、検索評価を落とさない移行
- ご担当者が挙げた3つの悩み
- リニューアルでよくある5つの失敗
- 成果はデザインの前に決まる
ワイヤーフレームのよくあるご質問
- ワイヤーフレームとは何ですか？
-
ワイヤーフレーム（wireframe）とは、Webページのレイアウトとコンテンツの配置を、線・四角形・テキストだけで表した設計図です。色や写真などの見た目を決める前に、ページに載せる要素とその順番を決め、制作に関わる人の認識をそろえるために作ります。
- ワイヤーフレームは誰が作りますか？
-
Webディレクターが中心になって作ることが一般的です。デザイナーが作る場合や、企画段階で発注者側のWeb担当者が簡単なものを用意する場合もあります。デザインの経験は必須ではなく、ページの目的とユーザーを理解している人が作るのが理想です。
- ワイヤーフレームはどこまで作り込めばよいですか？
-
目的によって変わりますが、デザイナーとエンジニアが質問せずに次の作業に進める程度が目安です。最初は手書きのラフで要素の並び順を決め、合意が取れたらツールで清書し、見出しやボタンの文言、リンク先、フォーム項目、PC・スマホ別の配置を入れていきます。色や装飾は入れません。
- ワイヤーフレームとデザインカンプの違いは何ですか？
-
ワイヤーフレームは「何をどこに置くか」を決める白黒の設計図で、主にディレクターが作ります。デザインカンプは、ワイヤーフレームをもとにデザイナーが色・フォント・写真を入れた、完成形に近いデザインで、「どう見せるか」を決めるものです。
- ワイヤーフレームは無料のツールで作れますか？
-
作れます。Figma、Miro、Cacoo、Canvaには無料プランがあり、Googleスライドも無料で使えます（2026年10月2日時点の公式サイトで確認）。無料プランはファイル数やボード数、AI機能の回数などに制限があるため、チームで本格的に使う場合は有料プランも検討しましょう。
- ワイヤーフレームのサイズはどう決めればよいですか？
-
制作するサイトを見るユーザーの主な画面サイズに合わせて、PC版とスマホ版を作るのが基本です。Figmaなどのデザインツールには、デスクトップやスマートフォンの画面サイズのテンプレートが用意されているので、それを使うと便利です。実際のアクセス解析で多いデバイスを確認して決めると確実です。
- 制作会社に依頼する場合、ワイヤーフレームは自分で作るべきですか？
-
必須ではありません。多くの制作会社はヒアリングをもとにワイヤーフレームを作って提案します。ただ、載せたい情報や参考サイト、ページの目的を整理して伝えると、提案の精度が上がります。手書きのラフでも、イメージを共有する材料として役立ちます。
