ホームページ制作のワイヤーフレーム完全ガイド｜作り方・おすすめツール・注意点まで

MOVE Q株式会社は、愛媛県松山市に本社、東京渋谷にオフィスを構え、四国・中国エリア（愛媛・松山・香川・徳島・高知・広島）を中心に、全国の企業様のホームページ制作とInstagram運用代行を手がけているweb制作会社です。本記事では、これまで数多くの企業サイトを立ち上げてきた経験をもとに、ホームページ制作における「ワイヤーフレーム」の役割と必要性、具体的な作り方の7ステップ、実務で使えるおすすめツールの選び方、よくある失敗と注意点までを、初心者の方でも分かりやすく徹底解説します。

「ワイヤーフレームを作成したほうが良いと聞くけれど、何をどこまで描けばよいのか分からない」「ツールが多すぎて選び方に迷う」「デザインカンプとの違いが曖昧で理解できていない」といったお悩みをお持ちの担当者の方も多いはずです。結論から言えば、ワイヤーフレームはホームページ制作の成否を左右する最重要の設計図であり、この段階を丁寧に詰めておくことで、後のデザイン・コーディング工程での手戻りを大幅に減らせます。読了後には、自社サイトの新規立ち上げやリニューアルの際に、自信を持ってワイヤーフレーム作成へと取り組めるはずです。

ワイヤーフレームとは、ホームページ制作の初期段階で作成される、ページ単位の「設計図」のことです。英語の「wire（針金）」と「frame（枠組み）」を組み合わせた言葉で、その名の通り、シンプルな線や図形だけを使ってページに必要な要素の配置やレイアウトを視覚的に表現したものを指します。一般的には、色やフォント、画像といった装飾的な要素はまだ含めず、グレースケールやモノクロで描かれることがほとんどです。

ワイヤーフレームが担う役割は、大きく3つあります。1つ目は、ページに掲載する情報の「種類」と「優先順位」を明確にすること。ヘッダー、ファーストビュー、メインコンテンツ、CTA（問い合わせや申し込みなどのアクションボタン）、フッターといった項目を、どの順番でどの場所に配置するかを整理します。2つ目は、ユーザーが求める情報に最短でたどり着けるよう、誘導の流れを論理的に設計すること。スクロールの流れやクリック経路を意識して要素を配置することで、閲覧体験が整い、マーケティング上の成果にも繋がります。3つ目は、ディレクター・デザイナー・エンジニア・ライター・クライアントといったプロジェクト関係者全員の共通認識を作ること。視覚的な設計図があることで、テキストだけでは伝えることが難しいニュアンスを揃え、議論の土台として活用できます。

ワイヤーフレームは、家づくりでいう「間取り図」に近い存在です。間取りが固まらないまま壁紙の色や家具の配置を決めても、後から大規模なやり直しが発生する可能性があります。ホームページ制作も同様で、いきなりデザインから着手すると、必要なコンテンツが抜けていたり、情報の優先順位が曖昧になったりと、完成度の低いサイトになりがちです。だからこそ、制作のもっとも早い段階でワイヤーフレームをしっかり固めることが、情報発信の目的を達成できるホームページへの第一歩となります。

ホームページ制作の現場でよく混同されるのが、ワイヤーフレーム・デザインカンプ・モックアップ・プロトタイプの4つです。いずれもWeb制作の過程で作られる中間成果物ですが、それぞれ目的も完成度も異なります。ここで一度、比較して整理しておきましょう。

ワイヤーフレームは、前述の通り「骨組み」です。色やフォント、写真などの装飾を省き、情報の配置と構造だけを定めます。ここで決めるのは「何を」「どこに」「どの順番で」置くかという情報設計であり、見た目の美しさは後回しで構いません。

デザインカンプは、ワイヤーフレームの次の工程で作られる、ホームページの「完成見本」です。実際に使用するカラーリング、フォント、画像、ボタンのスタイルなど、ビジュアル要素をすべて反映した状態で、クライアント側に「完成後のサイトはこう見えます」と伝えることができる段階のもの。デザインカンプが固まれば、そのまま実装（コーディング）作業へ移行できます。

モックアップは、デザインカンプとほぼ同様の意味で使われることも多い言葉ですが、厳密には「実物に近い見た目を確認するためのビジュアル」を指します。デザインの雰囲気や配色の完成度をチェックするための試作的なアウトプットと捉えてください。

プロトタイプは、4つの中でもっとも完成度が高く、「動きを含めた試作品」です。リンクのクリックでページが遷移したり、ボタンをタップしてメニューが開いたりといった、実際のサイト操作に近い挙動をシミュレーションできます。UI/UXの検証や、クライアントへの最終イメージ共有に役立ちます。

流れとしては、ワイヤーフレーム → デザインカンプ（モックアップ）→ プロトタイプ → コーディングという順で進むのが一般的です。ワイヤーフレームはもっとも上流の工程であり、ここで情報設計を誤ると、下流のどの工程でも取り返しがつかなくなります。地味な作業に見えても、決して軽視してはいけないフェーズなのです。

「いきなりデザインから作り始めてはダメなのか」と思う方もいるかもしれません。実際、小規模な個人サイトであればワイヤーフレームを省略して進めることもあります。しかし、ビジネス用途のホームページであれば、ワイヤーフレームの作成は強く推奨されます。必要性の高い理由を4つ、以下にご紹介します。

ホームページに載せたい情報は、事業紹介、サービス内容、実績、料金、お客様の声、採用情報、お問い合わせ、会社概要など、膨大になります。ワイヤーフレーム作成の段階で「どの情報をファーストビューに置くか」「どこに配置すれば読まれやすいか」を決めざるを得なくなるため、優先順位が明確になり、本当に価値のある情報が埋もれるリスクを防げます。

ホームページ制作は、クライアント・ディレクター・デザイナー・コーダー・ライターなど、立場の異なる多くのメンバーが関わるプロジェクトです。テキストの指示書だけでは解釈の幅が生まれ、「思っていた仕上がりと違う」というトラブルが起きやすくなります。視覚的なワイヤーフレームがあれば、議論のたたき台として機能し、関係者全員が同じゴールを見て進められます。

デザインが完成した後に「やっぱりこのセクションを追加したい」「お問い合わせボタンを上部に移動したい」といった変更が入ると、デザインの再調整だけでなくコーディングのやり直しも発生します。ワイヤーフレームの段階であれば線と図形の入れ替えだけで済むため、修正コストが圧倒的に小さくなります。外注している場合、変更回数によって追加料金が発生することもあるため、ワイヤーフレームで議論を尽くしておくことは予算管理の面でも重要です。

ホームページは「見て終わり」では意味がなく、問い合わせ・資料請求・購入などのアクションへ誘導する必要があります。ワイヤーフレームで「どの順番で情報を読ませ、どこにCTAを置くか」を設計しておくことで、ユーザーが迷わずゴールにたどり着ける構成を実現できます。ファーストビューからCTAまでのストーリー設計は、マーケティング施策の達成を左右する最重要ポイントであり、ワイヤーフレームの重要性はここに集約されると言っても過言ではありません。

ワイヤーフレームを作り始める前に、「どのページにどんな要素を入れるのか」を把握しておく必要があります。ホームページのトップ（top）ページに含まれる代表的な要素は、以下のとおりです。

画面上部のヘッダー部分には、ロゴ、グローバルナビゲーション（主要メニュー）、お問い合わせボタン、電話番号などの基本情報を記載します。ファーストビューは、ユーザーが最初に目にする最重要エリアで、キャッチコピー、メインビジュアル、主要なCTA（問い合わせ・資料請求ボタン）を盛り込みます。メインコンテンツには、事業やサービスの紹介、商品紹介、実績事例、特徴、料金プラン、お客様インタビュー、よくある質問（FAQ）、関連するお知らせや動画コンテンツなど、ページの目的に応じた要素を順番に配置します。フッター部分には、サイトマップ、プライバシーポリシー、利用規約、会社概要へのリンク、Instagram・FacebookといったSNSへの導線、シェアボタン、コピーライトなどを置くのが一般的です。

レイアウトパターンには、定番のものがいくつか存在します。1カラム型は、ページ全体を縦一列で構成するシンプルなレイアウトで、スマートフォンとの相性もよく、現在のコーポレートサイトやサービスサイト、LPの主流となっています。2カラム型は、メインコンテンツとサイドバーに分けるレイアウトで、ブログやメディアサイトでよく採用されます。マルチカラム型は、3列以上に分けて情報量を詰め込むレイアウトで、ポータルサイトやECサイトなど情報量の多いサイトに多く見られます。タイル型・カード型は、画像と見出しを組み合わせた「カード」を並べる構成で、実績紹介ページやギャラリーページ、採用情報ページの社員インタビュー一覧などに適した表現です。

どのレイアウトが正解というものはなく、ホームページの目的、想定ユーザー、業種によって最適解は変わります。地域密着型の店舗サイトであれば、サービス内容とアクセス情報をファーストビュー付近に置く1カラム型が向いていますし、情報発信を重視するオウンドメディアであれば2カラム型が機能するでしょう。ワイヤーフレームの段階で、自社サイトに合うレイアウトをじっくり検討しておくことが大切です。

加えて、PCとスマートフォンでは画面の横幅が大きく異なるため、両方のワイヤーフレームを作成することを強くおすすめします。PC版だけを作ってスマホ版を後回しにすると、「スマホで見たら崩れていた」「重要な情報が下に埋もれた」といった問題が頻発します。現在はスマートフォン経由のアクセスが大半を占めるサイトも多く、レスポンシブデザインを前提に、むしろスマホ版から先に設計する「モバイルファースト」の考え方も有効です。表示環境ごとに最適な見え方になるよう、画面別にレイアウトを検討しましょう。

ここからは、実際にワイヤーフレームを作成する手順を、7つのステップに分けて具体的に解説します。初心者の方でも迷わず進められるよう、順序立ててご覧ください。

ワイヤーフレームの前に、まずはサイト全体の階層構造を示す「サイトマップ」を作成します。サイトマップはサイト内のページ構成をツリー図で表したもので、「どのページが必要か」「ページ同士がどう繋がるか」を一覧できます。この調査・整理を省略してワイヤーフレームから始めると、必要なページを作り漏らしたり、不要なページを作ってしまったりするため、遠回りになります。

サイトマップから、どのページのワイヤーフレームを先に作るかを決めます。通常は、トップページ・サービス紹介ページ・お問い合わせページなど、成果に直結する主要ページから着手します。下層ページをすべて作る必要はなく、似た構造のページは1つ作ってテンプレート化すれば十分です。

ページを作る前に、「誰に」「何をしてほしいか」を言語化します。想定読者の属性・悩み・行動パターンを整理した「ペルソナ」を設定し、そのペルソナにページを見てどんなアクションを取ってもらいたいか（問い合わせ、資料請求、購入、入社応募など）を決めます。この目的が曖昧なままワイヤーフレームに入ると、情報の優先順位も曖昧になり、成果の出ないサイトになってしまいます。

ペルソナと目的が決まったら、ページに載せるべき情報をリストアップします。例えばサービス紹介ページであれば、サービス名、特徴、強み、料金、実績、お客様の声、FAQ、会社概要など、必要な要素を漏れなく書き出していきます。この段階ではまだ配置は考えず、ひたすらアイデアを出すことに集中してください。競合サイトや参考サイトを3社程度調査し、不足している要素や、他社にはない差別化ポイントがないかもチェックしておくと精度が上がります。

リストアップした情報を、どのようにページ上に並べるかを決めます。1カラムか2カラムかといったレイアウトパターンを選び、情報の優先順位に沿って上から並べていきます。いきなりツールで作るのではなく、紙に手書きでラフスケッチを描くのがおすすめです。手書きは修正も簡単で、チーム内でのアイデア出しにも向いています。

レイアウトの方向性が固まったら、FigmaやPowerPointといったツールを使って清書します。手書きのままでは共有や修正が難しいため、ツールで整えたワイヤーフレームにしておくと便利です。各要素には「ここはキャッチコピー」「ここは事業紹介の3カラム」といった説明文章を添えておくと、後工程の担当者が迷わずに済みます。

ワイヤーフレームが完成したら、一度自分で見直したうえで、社内メンバーやクライアントとレビュー会を行います。情報の優先順位、導線の自然さ、要素の抜け漏れなどを細かく確認し、フィードバックを反映します。レビューが完了したら、デザイナーへワイヤーフレームとセットで「このページの目的」「想定ペルソナ」「各セクションの意図」を申し送り、デザイン工程へ進めます。このフローを守ることで、制作全体の手戻りを最小限に抑えられます。

ワイヤーフレームは手書きでも作成できますが、ツールを使うことで効率的かつ共有しやすい形に仕上がります。現場で多く使われている代表的な外部ツールを、無料・有料を含めて以下にご紹介します。

現在もっとも主流のWebデザインツールです。ブラウザ上で動作するため、Windows・Mac・ChromeOSなど環境を問わず利用でき、無料プランでも十分な機能が使えます。1つのファイルを複数人で同時編集できる点が大きなメリットで、チームでリアルタイムに共有しながら進めたい場合に最適です。さらにFigmaには「Figma AI」という生成AI機能が搭載されており、なかでも「First Draft」はテキストのプロンプトを入力するだけでワイヤーフレームの下書きを自動生成してくれます。アイデア出しの初期段階で活用すれば、作業時間を大きく短縮できるでしょう。

オンラインホワイトボード型のツールで、付箋・図形・矢印などを組み合わせてワイヤーフレームを作成できます。チームでの議論やアイデア出しに強く、豊富なテンプレートとアイコンが用意されているため、ゼロから組み立てる手間を省けます。「Miroアシスト」というAI機能も搭載されており、ワイヤーフレームの作成や整理を自動化できる点も魅力です。議論・アイデア出しをチームで活性化させたい場合はMiro、デザインへスムーズに繋げたい場合はFigmaと使い分けるとよいでしょう。

ブラウザとアプリで利用できる、シンプルで直感的なWebデザインツールです。PowerPoint感覚で操作できるため、デザイン初心者の方や社内スタッフでの内製に向いています。無料プランでも豊富なテンプレートが使え、縦に長いスクロール型のページ構成にもスムーズに対応できます。大規模な制作プロジェクトというよりは、小規模サイトのワイヤーフレームや社内提案用の資料作成に役立ちます。

特別なツールを導入せずに、使い慣れたOfficeソフトでワイヤーフレームを作ることも可能です。PowerPointは図形やテキストボックスが扱いやすく、スライド単位でページごとのレイアウトをまとめられます。Excelは1ページが途切れずに続くため、縦に長いサイトの全体像を把握しやすい点がメリットです。関係者が少なく、ツール導入のコストを抑えたい場合に有力な選択肢になります。ただし、本格的なデザイン制作やプロトタイプ化を視野に入れるなら、専用ツールへの移行をおすすめします。

Adobe XDは長年Web制作現場で使われてきたツールですが、2023年1月に単体プランの販売が終了し、2024年にはサポートも終了しています。すでに利用している方は引き続き使えますが、これから新規導入する場合はFigmaへ移行するのが現実的です。2025年以降、Web制作会社の現場でも主力ツールはFigmaへと移行が進んでおり、2026年時点では業界標準と言ってよい状況です。Photoshopでもワイヤーフレーム作成は可能で、Adobe製品をメインに使っている方であれば連携しやすい選択肢ですが、用途としてはデザインカンプ以降の作業に向いています。

最後に忘れてはならないのが、紙とペンによる手書きのワイヤーフレームです。ツールを開く前のラフスケッチとして、もっとも効率的な手段です。修正も自由で、心理的な負担が少ないため、俯瞰的にレイアウトを検討できます。プロのデザイナーも初期段階は手書きから始めることが多く、清書はその後にツールで行うのが定番の流れです。ツールのダウンロードや操作方法を覚えるよりも、まずは手を動かして発想を広げる方が良い結果に繋がるケースも少なくありません。

なお、今回ご紹介したツールはあくまで代表例で、他にもBoxや国産ツールなど選択肢は多数存在します。自社の体制や関係者の使い方に合わせて、最適なものを選んでください。

ワイヤーフレームは慣れていないと失敗しやすい工程でもあります。現場で頻発するミスと、その対策を以下に整理しておきます。

まず多いのが、ワイヤーフレームの段階でデザインを作り込みすぎてしまうケースです。色や画像を細かく配置してしまうと、レイアウトの議論ではなく「このボタンの色はどうか」といったデザイン議論に話が逸れてしまいます。ワイヤーフレームはあくまで骨組みを決める工程であり、グレースケールで十分です。シンプルに保つことで、情報設計に集中できます。

次に、テキストを「ダミーテキスト」で埋めてしまう失敗も見逃せません。「あとで入れます」と仮置きのテキストで進めてしまうと、実際のテキスト量と合わず、完成時にレイアウトが破綻する可能性があります。加えて、キャッチコピーや見出しが曖昧なまま進むと、ユーザーへの訴求力が弱まり、良い印象を与えられずコンバージョン率の低下にも繋がります。完璧でなくとも、実データに近い文章を入れておくことが重要です。

スマートフォン版のワイヤーフレームを後回しにする失敗も、よくある注意点です。PC版だけ作ってスマホ版を「後で考えよう」と放置すると、スマホで見たときに主要情報が下の方に埋もれていたり、ボタンが押しづらい場所にあったりといった問題が発生します。モバイル経由のアクセスが多いサイトでは、むしろスマホ版から設計する方が安全です。

ペルソナや目的を設定せずに作り始めるのも典型的な失敗パターンです。「誰に何をしてほしいか」が曖昧なままレイアウトを考えても、優先順位のつけようがありません。結果として、作り手が入れたい情報を並べただけの、成果の出ないサイトになってしまいます。STEP3で解説したペルソナ設計は、省略せずに必ず行いましょう。

社内レビューを経ずにデザイン工程へ渡してしまうのも危険です。担当者ひとりの視点だけで作ったワイヤーフレームは、視野が狭くなりがちで、重要な要素の抜け漏れやユーザー視点の欠如を見逃しやすくなります。ディレクター・デザイナー・エンジニア・クライアントなど、複数の立場からフィードバックをもらうことで、ワイヤーフレームの質は大きく向上します。

最後に、競合サイトや参考サイトの調査を省略する失敗もあります。競合がどのような構成・レイアウトを採用しているかを知らずに自社サイトを設計しても、差別化ポイントや業界の定番パターンを外してしまい、ユーザーに違和感を与えるサイトになりがちです。ご覧いただきたいサイトを最低でも3〜5社程度リストアップし、良い点と改善すべき点を詳細にメモしてから設計に入ると、知識の蓄積にも繋がります。

失敗を避けるだけでなく、積極的に制作をスムーズにするコツも押さえておきましょう。

いきなりFigmaやMiroを開くと、ツールの操作に意識が向いてしまい、肝心の情報設計が後回しになりがちです。A4用紙やホワイトボードにラフを描いてから清書する流れにすると、発想の自由度が上がり、無駄な手戻りも減ります。

競合サイトの分析、自社の強み・弱みの洗い出し、想定ペルソナの深掘りなど、ワイヤーフレームを描く前に揃えておくべき情報は多岐にわたります。ここに時間をかけた分だけ、作業全体の効率が上がり、完成度も上げることができます。

キャッチコピーや見出しは、完成版に近い形で入れておきます。文字量が実物に近いほど、レイアウトの破綻を事前に発見でき、デザイン段階でのやり直しを減らせます。

作成直後は自分の中の「こう見せたい」というバイアスが強く、客観的な判断がしづらくなります。半日〜1日ほど間を空けてから見直すと、違和感や抜け漏れに気付きやすくなります。

FigmaのFirst DraftやMiroアシストなど、生成AIを活用したワイヤーフレーム自動生成機能が充実してきています。ゼロから作るよりも、AIが出したたたき台を手直しする方が圧倒的に速く、アイデアの幅も広がります。最新のツールをうまく取り入れれば、作業時間を大きく短縮できるでしょう。ただし、AI任せにすると画一的なレイアウトになりやすいため、最終的な判断は必ず人の目で行ってください。

ここまで自力でワイヤーフレームを作る方法を解説してきましたが、「やはり自社だけで設計するのは難しい」「情報設計のプロに外注したい」と感じる方も少なくないはずです。そんなときは、ホームページ制作会社にワイヤーフレーム作成ごと依頼するのも有力な選択肢です。

web制作会社に依頼する最大のメリットは、情報設計の専門性とSEO対策・コンバージョン最適化のノウハウを一括で活用できることです。経験豊富なディレクターやデザイナーは、業種ごとの成功事例や、ユーザーが反応しやすい誘導設計を熟知しています。自社だけで設計した場合に見落としがちな「検索されやすいキーワード配置」「CTA位置の最適化」「信頼性を担保する要素（実績・お客様の声）の置き方」などを、プロの視点で組み込んでもらえます。

加えて、ワイヤーフレーム単体ではなく、サイトマップ・ペルソナ設計・デザイン・コーディング・公開後の運用改善まで一貫して任せられるのも強みです。工程が分断されると、担当者間でのコミュニケーションコストが増え、意図のズレが発生しやすくなりますが、ワンストップ対応であれば一貫した思想でサイトが作られるため、完成度が安定します。

ワイヤーフレームは、ホームページ制作のなかでもっとも地味でありながら、完成度を決定づけるもっとも重要な工程です。ページの目的と情報の優先順位を明確にし、関係者全員の認識を揃え、デザイン・コーディング工程での手戻りを減らす。これらの効果を得るためには、サイトマップの作成からペルソナ設計、情報のリストアップ、レイアウト決定、ツールでの清書、チームレビューまでのステップを丁寧に踏むことが欠かせません。

ツール選びは、Figmaを中心に、チームコラボ重視ならMiro、手軽さ重視ならCanva、既存資産の活用ならPowerPointやExcelといった形で、自社の状況に合わせて選ぶのが現実的です。最新のAI機能も賢く取り入れながら、最終判断は人の目で行うというバランスを意識しましょう。一方で、専門性の高いノウハウをもとに情報設計をしっかり組みたい、公開後の運用まで見据えてサイトを立ち上げたいという場合は、制作会社への依頼が近道になります。

MOVE Q株式会社では、愛媛・松山をはじめ、香川・徳島・高知・広島、そして東京・全国のお客様からのホームページ制作・リニューアルのご相談を承っております。ワイヤーフレーム段階の設計アドバイスから、デザイン・コーディング・公開後のSNS運用代行までワンストップで対応可能です。「自社サイトをもっと成果の出る形にリニューアルしたい」「ワイヤーフレーム作成で迷っている」「ホームページとInstagramを連動させて集客を伸ばしたい」といったお悩みがあれば、まずはお気軽にご相談ください。現状ヒアリングから最適なプランをご提案いたします。