見積もり
ワイヤーフレームの作り方完全ガイド｜おすすめツールも紹介【初心者向け】
ホームページ制作を進める中で、「何をどこに配置すべきか」「デザインに入る前に何を決めておくべきか」と悩む担当者は少なくありません。特にWeb制作の初心者や新任担当者にとって、サイトマップを作った後の「次の一手」が見えにくいのが実情です。
その答えが「ワイヤーフレーム（WF）」です。ワイヤーフレームを正しく作成することで、情報設計の精度が上がり、チーム間の認識ズレが減り、デザイン・コーディング工程での手戻りを大幅に削減できます。つまり、制作全体のスピードと品質を同時に高める「最初の重要な一手」です。本記事では、ワイヤーフレームの基礎知識から実践的な作成手順、よくある失敗と回避策、おすすめツールまで体系的に解説します。最後まで読めば、初めてワイヤーフレームを作る方でも迷わず制作を進められるようになります。
※パワーポイント形式のワイヤーフレームのサンプルをプレゼントしております。お気軽にダウンロードしてください。
今すぐ使えるワイヤーフレームの雛形をご提供！
ワイヤーフレーム サンプル（PowerPoint形式）
ホームページのワイヤーフレームのサンプルです。PowerPoint形式ですぐに編集・修正できるので、ホームページ制作の依頼やリニューアルの際にお役立てください。
無料でダウンロードする
※簡単な質問に答えるだけ！さくっと見積もりが知りたい方はこちらのシミュレーションがおすすめです。回答内容をもとに、Web幹事に登録されている5,000社の料金データから見積もりを算出します。
ワイヤーフレーム（WF）とは？Webサイト制作に不可欠な「設計図」の基礎知識
ワイヤーフレームとは、Webサイトの「骨組み」を可視化したページ設計図です。色やフォントといったビジュアルデザインは一切含まず、各ページに「何を」「どこに」「どの優先度で」配置するかをシンプルな線と文字だけで表現。住宅建築に例えると、完成予想図を描く前に作成する「間取り図」に相当します。
デザイン制作の前段階でワイヤーフレームによる情報設計を行うことで、後工程での大幅な修正を防ぎ、クライアント・デザイナー・エンジニアが同じ完成イメージを共有した状態で制作を進められます。
ワイヤーフレームとモックアップ・プロトタイプの違い
Web制作の現場では「ワイヤーフレーム」「モックアップ」「プロトタイプ」という3つの言葉が混同されがちです。それぞれの役割は明確に異なります。
|
名称 |
目的 |
特徴 |
|
ワイヤーフレーム（WF） |
情報・レイアウトの骨組みを決める |
線と文字のみ。色・画像なし |
|
モックアップ |
完成に近い外観を確認する |
デザインカンプ。実際の色・画像あり |
|
プロトタイプ |
動作・操作感を検証する |
インタラクションを再現した試作品 |
制作工程の順序は「ワイヤーフレーム→モックアップ→プロトタイプ」が基本です。ワイヤーフレームは早い段階で作成するため、この段階で情報設計を確定させることが全工程の品質を左右します。修正コストは工程が後になるほど指数関数的に増加するため、WFの段階で徹底的に検討することが重要です。
情報設計（IA）とワイヤーフレームの関係
情報アーキテクチャ（IA：Information Architecture）とは、「ユーザーが必要な情報に迷わずたどり着けるよう、情報を体系的に整理・構造化すること」です。IAはWebサイトのUXの根幹を成す考え方であり、ワイヤーフレームはIAを「視覚的に表現するためのアウトプット」です。
具体的には、IAの設計段階でナビゲーション構造・コンテンツの分類・ページ間の導線を決定し、WF上で配置として落とし込んでいきます。IAをしっかり設計せずにワイヤーフレームを作り始めると、ページ内の情報が散漫になり「何を伝えたいサイトなのか」がユーザーに伝わりにくいサイトになってしまいます。
ワイヤーフレームを作る前に「このページで伝えるべき情報は何か」「ユーザーに次に取ってもらいたい行動は何か」を言語化しておくことが成功の鍵です。
ワイヤーフレームを作成する4つの目的
ワイヤーフレームを作成することには、制作効率と品質の両面から4つの明確な目的があります。
- 掲載情報の優先順位を整理するため
ホームページに掲載する情報は膨大です。ワイヤーフレームの作成を通じて「どの情報をファーストビューに置くか」「どの情報を下層に移すか」を強制的に整理できます。優先順位が明確になることで、ユーザーにとって価値のある情報が埋もれるリスクを防ぎます。
- 視覚的なレイアウト（骨組み）を確定させるため
1カラム・マルチカラム・タイル型など、ページの大枠の構造をワイヤーフレームの段階で固めておくことで、デザイナーがビジュアル制作に集中できる環境が整います。
- チーム・クライアント間での認識齟齬を防ぐため
テキストだけで共有する場合と異なり、ワイヤーフレームは「完成イメージの共通言語」として機能します。ミーティングで決定した内容をワイヤーフレームに反映させることで、議事録的な役割も果たし、後から「いった・いわない」のトラブルを防ぎます。
- 修正コストを抑えるための「たたき台」として活用
デザインやコーディングが完成した後の構成変更は、莫大な修正コストが発生します。ワイヤーフレームの段階で積極的に議論・修正を行うことで、後工程の大幅な手戻りを未然に防ぎ、プロジェクト全体のコストを最小化できます。
ワイヤーフレームとは？Webサイト制作・アプリ開発に必須のページ設計図を解説【2026年最新版】 | Web幹事
貴社のホームページ制作の費用がいくらかかるか
60秒で診断してみませんか？
全国5,000社の見積もりから算出した、
Web幹事オリジナルの料金シミュレーターを無料でご利用いただけます。
「社内稟議の前に予算を決めたいけれど相場がわからない」
「事前に取った見積額の妥当性に不安がある」
という方は、ぜひお試しください。
まずは最初の質問です
ホームページ制作は初めてですか？
はい
いいえ
初心者でも迷わない！ワイヤーフレームの作り方6ステップ（全体フロー）
ワイヤーフレームの作成は、「何を・どの順番で決めるか」さえ把握すれば、初めての方でも迷わず進めることができます。以下の6ステップで進めましょう。
- サイトマップを作る
- 作成するページを絞り込む
- 基本レイアウトを決める
- 各要素を配置する
- ツールで清書し細部を整える
- チームでレビューしデザイン工程へ引き継ぐ
ステップ1：まずはサイトマップを作る
ワイヤーフレームは「個別ページの設計図」であるため、そもそも「どんなページが必要か」の全体像が固まっていなければ作成を始めることができません。サイトマップは全体像を一覧にした資料であり、ワイヤーフレーム作成の前提となります。
サイトマップを作成する手順は以下の通りです。
- 必要なページをすべて書き出す
- コンテンツをカテゴリ別に分類する（「会社情報」「サービス」「採用」など）
- ページの階層（親ページ・子ページの関係）を決める
いきなりワイヤーフレームを書き始めてしまうと、後から新しいページが追加・削除されるたびにワイヤーフレームを書き直す手間が発生します。サイトマップを先に完成させてからワイヤーフレーム作成に入りましょう。
ステップ2：作成するページを絞り込み優先順位を付ける
すべてのページのワイヤーフレームを作成するのが理想ですが、リソースが限られている場合は現実的ではありません。以下の判断基準に沿って、ワイヤーフレーム作成の優先順位を決めましょう。
- TOPページ：サイト全体の目次・第一印象を決める最重要ページ
- 主要コンバージョンページ：問い合わせフォーム・エントリーページ・購入ページなど、サイトのゴールに直結するページ
- 特殊レイアウトページ：他のページと大幅に異なるレイアウトを使用するページ（特集ページ・ランディングページなど）
逆に、「企業理念」「会社概要」「採用情報一覧」のような、他ページと同じレイアウトを流用できるページは、代表的な1ページだけワイヤーフレームを作成すれば十分です。時間が限られている場合は、上記の優先ページに絞ってワイヤーフレームを作成し、効率を最大化しましょう。
今すぐ使えるワイヤーフレームの雛形をご提供！
使いやすいPowerPoint形式でサンプルをご用意しました。
無料でダウンロードする
ステップ3：ページの基本レイアウト（カラム数）を決める
ページに配置する要素を決める前に、まずページ全体の「骨格＝レイアウト」を決めます。サイトの目的・ターゲットユーザー・掲載するコンテンツ量にあわせてレイアウトの「型」を選ぶことが、UX品質を左右する重要な判断です。
レイアウトの型を先に決めることで、その後のコンテンツ配置の議論がスムーズになります。逆に、型を決めずにワイヤーフレームを書き始めると、コンテンツが増えるたびにレイアウト全体を見直す手戻りが発生しやすくなります。
Webサイトのレイアウトの基本｜ホームページの目的別に適した種類を現役デザイナーが解説 | Web幹事
レイアウトの種類と決め方
今回は採用サイトを制作するため、採用サイトに適したレイアウトを考えてみましょう。
いくつか代表的なレイアウトをご紹介します。
1カラムレイアウト
カラムとは「列」のこと。1カラムは1列にコンテンツを縦に並べるレイアウトのことです。
1カラムレイアウトのメリット
- 画面を横に大きく使うため、インパクトを与えやすい
- 上から順番に見えていくため、ストーリーが作りやすい
1カラムレイアウトのデメリット
- コンテンツの量が多いと縦に長くなりすぎるため、読みにくい
- 品質の高い画像や動画などの素材がないと寂しく見えてしまう
画面幅をいっぱいに使ってコンテンツを見せられるため、インパクトのある訴求がしやすいのが1カラムレイアウトの特徴です。
そのため、広告用のランディングページやブランドの訴求をする際によく使われます。
またコンテンツの量が少なく1ページでまとめたい場合もよく使われます。
1カラムレイアウトの参考サイト集（外部サイト）
タイル型レイアウト
コンテンツの要素を「タイル状」にして並べるレイアウトです。
タイル型レイアウトのメリット
- たくさんのコンテンツを並べられる
- 情報が区切られていて探しやすい
- スマホ対応しやすい
タイル型レイアウトのデメリット
- 掲載できる情報量が限定的
- コンテンツに優先順位や強弱がつけられない
たくさんのコンテンツをコンパクトに並べることが多いため、ブログ型のサイトのTOPページに使われることが多いです。
マルチカラムレイアウト
1カラムレイアウトとタイル型レイアウトを組み合わせたようなレイアウトです。
企業サイトなどで、よく用いられるレイアウトかと思います。
マルチカラムレイアウトのメリット
- 情報を非常に整理しやすい
- 優先して見せたい情報は大きく表示するなど強弱がつけやすい
マルチカラムレイアウトのデメリット
- （タイル型と同じく）掲載できる情報量が限定的
- 1カラムやタイル型と比べてスマホ対応しにくい
情報が整理しやすく、コンテンツの強弱もつけられるため、今回の採用サイトのTOPページはこのレイアウトで行きたいと思います。
サイドバー固定レイアウト
サイドバーを固定し、スクロールしても常に表示されているようにするレイアウトです。
個人的には最近少しずつ増えてきたと感じています。
サイドバー固定レイアウトのメリット
- メニュー（サイドバー）を常に表示できるので、ユーザーが迷いにくい
サイドバー固定レイアウトのデメリット
- スマホで閲覧するときには使用できない
サイドバーを固定しているため、ユーザーがいつでもメニューを見ることができ、目的のコンテンツにたどり着きやすいのがメリットです。
ただし、PCなどのある程度の横幅のディスプレイがあるものでしか利用できません。
本記事の採用サイトのレイアウト
本記事では、ページ数が20ページ程度と、それなりの分量があるので
TOPページには「マルチカラムレイアウト」を使います。
また本記事で詳細なワイヤーフレームは作成しませんが、下層のコンテンツページは、しっかりとユーザーに読んでもらいたいので1カラムレイアウトを採用するのが良いでしょう。
ステップ4：各要素（ヘッダー・メイン・フッター）を配置する
レイアウトの型が決まったら、各エリアに具体的なコンテンツ要素を配置していきます。この工程では「ユーザーの視線がどこから始まりどこへ向かうか」を常に意識することが重要です。
横書きのWebページではユーザーの視線は「Z型（左上→右上→左下→右下）」や「F型（左から右へスキャンし下へ）」に動くことが多いとされています。重要な訴求（キャッチコピー・CTAボタンなど）を視線の流れにあわせて配置することで、ユーザーの自然な行動を引き出すワイヤーフレームを設計できます。
また、ヘッダーやフッターなどの共通パーツは設計ルールを統一し、全ページで一貫した体験を提供することを意識しましょう。
ワイヤーフレームツールのおすすめ10選をWeb担当者が厳選！ | Web幹事
各要素の設置
採用サイトのTOPページをいくつかの要素に分けて、コンテンツを設計して行きます。
今回は下記の4種類に分けて設計しましょう。
ヘッダー・グローバルナビゲーション
サイトの一番上に表示される部分です。
ヘッダーやグローバルナビゲーションといわれ、全ページで共通して使用されます。
ここでは、「この採用サイトにはこんなコンテンツがありますよ」というメニューとして設計。
今回の採用のサイトマップは下記のような形のため「会社について」などTOPページのすぐ下の階層を並べてあげるとGoodです。
並べるとこういう形になりました。
全ページに表示される共通部分のため、2つのポイントを守って作成しましょう！
- サイト全体の目次として情報を整理する
- どのページからでもエントリーできるようにする
その際、エントリーページのような、他のページと種類が異なるページは配置や見え方を変えるとGoodです。
メインビュー
メインビューは、ユーザーがTOPに入ってきたときに、真っ先に目に入る重要な部分です。
インパクトのあるキャッチコピーや画像を入れて、サイトを印象付けることが重要です。
※ここではキャッチコピーや写真については割愛させていただきます。
コンテンツエリア
重要なのが、この部分です。
採用サイトのTOPページは、サイト全体の「目次」的な役割を果たすため下層のコンテンツページをわかりやすく並べてあげるのがコツ。
そのときに重要なのは下記のポイントです。
- 全てのコンテンツを並べてはいけない
- 見せたいコンテンツから順番に並べる
例えば「会社について」の部分
サイトマップでは
- 企業理念
- 会社概要
- 会社の沿革
- オフィス風景
- 社長メッセージ
- データで知る〇〇
と6ページの内容でしたが、TOPページでは、特にユーザーに見て欲しい「社長メッセージ」と「データで知る〇〇」に絞りました。
TOPページで掲載する情報は「特にユーザーに見て欲しい情報」に絞ると強弱がついて非常に良いページになります。 
以上のような情報整理を「会社について」「事業について」「社員について」「採用について」全てで行います。
今回は下記のような流れのコンテンツ設計になりました。
いきなり、綺麗に情報を整理するには経験やノウハウが必要になります。
最初のうちはプロジェクトメンバーと一緒に議論しながら進めると良いでしょう。
ポイントは「どの情報を優先してユーザーに見せたいか？」です。
それによってコンテンツの配置や順番が、決まってきます。
フッター
ページの一番下に表示される要素です。
ここもヘッダーと同じく、全てのページに共通して表示される部分です。
主に、コンテンツを全て読んだ人の目に入る部分のため、ここにもサイトの全体像がわかるように目次として使いましょう。
ヘッダーと違い、フッターは縦幅が大きくなっても大丈夫ですので、ページをできるだけ掲載すると良いでしょう。
他ページへの導線
他のページへのリンク部分はすぐに分かるように、色分けしておくといいでしょう。
今回は「ヘッダーのエントリーボタン」「〇〇について詳しく知る」「採用情報について詳しく知る」と一旦ボタン部分です。
他ページへのリンク部分や応募に繋がる部分は、採用サイトでも特に重要なため、ワイヤフレームの時点で目立たせておくのがポイントです。
完成したワイヤーが下記の通りです！
シンプルなワイヤーフレームですが、これだけでも十分効果を発揮すると思います。
ステップ5：ツールを使って清書し細部を整える
手書きのラフスケッチやホワイトボードでのブレインストーミングを経たら、デジタルツールで清書する工程に入ります。清書の際に特に注意すべきポイントが2点あります。
「Lorem ipsum」などのダミーテキストを避ける
「テキストが入ります」というプレースホルダーでワイヤーフレームを作成すると、実際の文字量やコンテンツの密度が把握できません。可能な限り実際の原稿に近いテキスト量でシミュレーションすることで、「デザインが完成したら文章が入り切らなかった」という典型的なトラブルを未然に防げます。
グレースケール（白黒）で作成する
ワイヤーフレームに色を使い始めると、情報の優先順位よりも「見た目」の議論に時間が割かれてしまいます。清書段階でも色は使わず、グレースケールに徹することで「どの情報が重要か」という本質的な議論に集中できます。
ステップ6：チームでレビューしデザイン工程へ引き継ぐ
ワイヤーフレームが完成したら、デザイン工程に入る前にチームメンバー・クライアントとのレビューを実施します。レビューで確認すべき観点は以下の通りです。
- 目的の達成可否：このページでユーザーに取ってもらいたいアクション（CTA）が明確に配置されているか
- 情報の優先順位：伝えたい情報がファーストビューに配置されているか
- デバイス別の考慮：スマホ・タブレットでの表示順序や操作性が考慮されているか
- 導線の網羅性：ユーザーが次に進むべきページへのリンクが適切に配置されているか
レビューで出たフィードバックをワイヤーフレームに反映させた上で、デザイナーへ引き継ぎます。引き継ぎの際は「このボタンはファーストビュー内に収めてほしい」「このエリアの優先度は低いのでコンパクトにまとめてよい」といった設計の意図を口頭や注記で伝えることが、デザイン品質を高める最重要ポイントです。
現場の失敗から学ぶ！ワイヤーフレーム作成で陥りがちな落とし穴と数値的損失
ワイヤーフレーム作成の経験が浅い担当者が陥りやすい失敗には、一定のパターンがあります。「なぜかサイトの成果が出ない」「制作が計画より大幅に遅れた」という現場の悩みは、ワイヤーフレームの設計段階で防げるケースが少なくありません。
ケース1：「テキストが曖昧」でCVRが30%低下
ワイヤーフレーム作成時に「ここにテキストが入ります」「キャッチコピー」とだけ記載し、実際の文章を後回しにした場合に起こりやすい失敗です。デザインが完成した後に実際の原稿を流し込むと、「文字が多すぎてレイアウトが崩れる」「本来強調すべき訴求文が小さいエリアに押し込まれる」といった事態が発生します。
その結果、ユーザーに伝えるべき「このサービスがあなたの課題を解決する」というメッセージが視覚的に埋もれ、ページを読んでも魅力が伝わらないためコンバージョン率が大幅に低下します。実際の訴求テキストが曖昧なままデザインを進めると、最終的にCVRが20〜30%低下するケースも報告されています。
ワイヤーフレームの段階で実際の文字数・文章量を想定したダミーではなく「仮原稿」レベルの精度でテキストを記載することが重要です。
ケース2：「デザインを凝りすぎ」て公開が1ヶ月遅延
ワイヤーフレームに色・フォント・画像のイメージを盛り込みすぎた結果、「情報設計の確認」のはずのレビュー会議が「デザインの好みの議論」に変容してしまうケースです。
「このバナーはもう少し大きくしたい」「背景色をもっと明るくしたい」という装飾に関する意見が噴出し、本来確認すべき「情報の優先順位が正しいか」「導線が適切か」という本質的な議論が疎かになります。
その結果、ワイヤーフレームのレビューに過剰な時間がかかり、後のデザイン工程でも「ワイヤーフレームで決まったはずのデザインと違う」という差し戻しが頻発。プロジェクト全体で1ヶ月以上の遅延が生じ、機会損失が発生した事例は珍しくありません。
ワイヤーフレームはグレースケールで作成し、デザインの議論はデザイン工程で行うというルールをチームで徹底することが解決策です。
ケース3：「モバイル対応を後回し」にして離脱率が20%増加
PC版のワイヤーフレームのみで構成を固め、「スマホ版は後でデザイナーがいい感じに調整してくれる」と考えていた結果、スマホでの操作性が著しく低下したケースです。PC版で横並びに設計した要素がスマホでは縦積みになった際に表示順序が崩れ、ユーザーが最初に目にすべき情報よりも先に補足的な情報が表示されてしまうことがあります。
現在の日本のWeb閲覧環境ではスマートフォンからのアクセスが過半数を占める状況が続いており、Googleもモバイルファーストインデックスを採用しています。モバイル表示の設計が不十分なページはスマホユーザーの直帰率が上昇し、広告費に対する成果が著しく低下する可能性も。実際に離脱率が20%増加したケースでは、広告投資対効果が大幅に悪化した報告もあります。
ワイヤーフレーム作成で失敗を回避するための3つの鉄則【実務マニュアル】
前章で紹介した失敗事例を踏まえ、現場で実践すべき「守るべき3つのルール」をご紹介します。3つを習慣化するだけで、ワイヤーフレーム作成の品質は大幅に向上します。
1. ダミーを避け「実際のテキスト」で構成を組む
文字量の想定精度がレイアウトの成否を決めるため、ダミーを避けて「実際のテキスト」で構成を組むようにしましょう。
実践手順：
- ワイヤーフレームを書く前に、主要なセクションの見出し・リード文・ボタンテキストを「仮原稿」として書き起こす
- ワイヤーフレーム上のテキストエリアに実際の文字数に近いダミー文章を入れる
- テキストが溢れる・短すぎるエリアはレイアウト側を調整する
この手順により、「デザイン完成後に文字が入り切らない」という手戻りを根本から防止できます。すべての原稿が揃わない段階でも、少なくともキャッチコピー・見出し・CTAボタンのテキストだけは確定させた上でワイヤーフレームを作成することを強く推奨します。
2. 装飾を排し「グレースケール」で設計する
色があると、人間の脳は「意味」よりも「視覚的印象」に引きずられます。ワイヤーフレームの段階では、 装飾は行わずに「グレースケール」で設計することを推奨します。
実践手順：
- ワイヤーフレームで使う色は「白・グレー・黒」の3色のみに限定する
- 強調したい要素はグレーの濃淡（例：CTAボタンは濃いグレーの四角）で表現する
- レビュー時には「この要素は他の要素より重要か」「視線が自然にCTAへ向かうか」だけを評価する
グレースケールで設計することで、レビュー参加者が「情報の重要度と配置の適切さ」という本質的な評価軸で議論できるようになります。「CTAボタンの色は何色にするか」という議論はデザイン工程で行うと、チームに徹底させましょう。
3. 常に「モバイル（スマホ版）」を最優先する
Googleの評価基準では、モバイルファーストインデックスにより、スマホ表示の品質がSEO評価に直結します。 常にスマホでの表示を優先しましょう。
実践手順：
- まずスマホ版（幅375px想定）のワイヤーフレームを先に作成する
- スマホの1画面（約800px）に「重要な情報と1つのCTA」が収まっているかを確認する
- スマホ版が完成してからPC版（幅1280px想定）に展開し、余白の使い方や横並びレイアウトを検討する
「モバイルファースト」で設計することで、スマホでの情報優先順位が明確になり、PC版でも本質的な情報構造が整った高品質なワイヤーフレームが完成します。
ワイヤーフレームのセルフチェックリスト
ワイヤーフレームが完成したら、デザイン工程に進む前に以下のチェックリストで品質を確認しましょう。すべての項目に「✓」が入る状態になってから次工程へ進むことを習慣化することで、デザイン後の大幅な構成変更を防ぐことができます。
【目的・ゴール】
- このページでユーザーに取ってもらいたいアクション（CTA）が1つ明確に定義されている
- CTAボタン・リンクはファーストビューおよびページ下部に配置されている
- ページのゴール（コンバージョン）につながる導線が自然な流れで設計されている
【情報設計・コンテンツ】
- 掲載情報に優先順位がついており、最重要情報がページ上部に配置されている
- テキストエリアに実際の文字量に近い仮原稿が入っている（「テキストが入ります」は使用していない）
- 各セクションの見出しだけを読んでも、ページ全体の流れが理解できる
【視線誘導・レイアウト】
- ユーザーの視線の流れ（Z型・F型）を意識した要素配置になっている
- 重要度の高い要素ほど視覚的に大きく・上部に配置されている
- 余白が適切に確保されており、情報が詰め込みすぎになっていない
【デバイス対応】
- スマホ版のワイヤーフレームが別途作成されている（主要ページのみでも可）
- スマホの1画面（約800px）内に最重要情報とCTAが収まっている
- PC版の横並びレイアウトがスマホで縦積みになった際の表示順序が適切である
【チーム共有・引き継ぎ】
- 各要素の設計意図が注記・コメントで補足されている
- ワイヤーフレームに関わる全員（クライアント・デザイナー・エンジニア）がレビュー済みである
- レビューで出たフィードバックがワイヤーフレームに反映されている
ワイヤーフレームの事例・参考サイト
「どんなワイヤーフレームが良いワイヤーフレームなのか」を学ぶためには、優れた設計のワイヤーフレーム事例を数多く参照することが効果的です。以下のリソースを活用して、質の高いワイヤーフレームの「型」を自分のものにしましょう。
Pinterestでのワイヤーフレームリサーチ手法
Pinterestで「wireframe web design」「ワイヤーフレーム 参考」などで検索すると、世界中のデザイナーが共有した実際のワイヤーフレーム画像が見つかります。ページ種別（TOP・LP・ECサイト・フォームなど）を絞って検索すると、制作したいものに近い構成の参考例を効率よく収集できます。
競合サイトの構成分析
参考にしたい競合サイトをブラウザで開き、「実際のデザインを無視してコンテンツの配置だけを見る」視点でサイトを分析することも有効です。「なぜこの位置にCTAが配置されているのか」「なぜこのセクションの順番なのか」を考察することで、効果的なワイヤーフレーム設計のノウハウが身につきます。
効率を劇的に上げる！ワイヤーフレーム作成おすすめツール
ワイヤーフレームの作成ツールは「プロジェクトに関わる全員が使い慣れたもの」を選ぶことが最優先です。チームのデジタルリテラシーや案件の規模・複雑さによって適したツールは異なります。以下を参考に、自社・案件に適したツールを選びましょう。
関連記事：目的ごとにしっかり選べる！おすすめワイヤーフレームツール【Web担当者が厳選】
Figma（フィグマ）：現在のWeb制作の標準ツール
FigmaはWeb制作のプロの現場で広く使われているデザイン・ワイヤーフレームツールです。ブラウザ上で動作するためインストール不要で、複数人がリアルタイムで同じファイルを編集できる共同編集機能が強みです。
ボタン・テキストフィールド・ナビゲーションなどワイヤーフレームのパーツを「コンポーネント」として登録しておくことで、複数ページにわたる共通パーツの一括変更が可能。ワイヤーフレームから完成デザイン・プロトタイプまでを同一ツール内で完結できるため、デザイン工程への引き継ぎもスムーズです。
ただし、高度な機能を使いこなすには一定の学習コストがかかるため、まずは無料プランで基本操作に慣れることをおすすめします。
Miro（ミロ）：ホワイトボード感覚でアイデア出しに最適
Miroはオンラインホワイトボードツールであり、非デザイナーのビジネス担当者でも直感的に操作できる点が特徴です。付箋・矢印・手書きなどを組み合わせたブレインストーミングから、シンプルなワイヤーフレーム作成まで1つのキャンバスで完結できます。
「まずラフなアイデアをチームで出し合い、ワイヤーフレームに発展させる」というフローに特に適しており、プロジェクトの初期段階でクライアントや非技術系メンバーを巻き込んで構成のアイデアを出し合う際に威力を発揮します。
ただし、Figmaのような高精度なワイヤーフレーム作成には向いていないため、アイデア出し・構成の合意形成フェーズでMiroを使い、清書フェーズでFigmaに移行する使い分けが実務での主流です。
パワーポイント・Googleスライド：使い慣れた環境で作成
ビジネスの現場で普及しているプレゼンテーションツールを使ったワイヤーフレーム作成は、特にクライアント側の担当者や非デザイナーのチームメンバーが多いプロジェクトで有効です。多くの方がすでに操作に慣れているため、ツールの学習コストがゼロである点がメリットです。
ただし、ページ数が20ページを超えるような大規模サイトや、複雑なインタラクションが多いサイトのワイヤーフレームには、操作性の観点からFigmaへの移行を検討しましょう。
エクセル・スプレッドシート：情報量の多いサイトに
エクセル・Googleスプレッドシートは、セルのグリッド構造を活かして要素を整理するワイヤーフレーム手法です。パワーポイントと異なり図形の自由度は低いものの、「セルを結合して大きなエリアを表現する」という方法でシンプルなレイアウト設計が可能です。
特にコンテンツ量が膨大なECサイト・ポータルサイトなど大規模サイトでは、各ページのコンテンツ要素を一覧で管理できるスプレッドシートの強みが活きます。またグリッド構造の制約上、必然的にシンプルなワイヤーフレームになるため「デザインに凝りすぎない」というワイヤーフレームの鉄則を守りやすい点もメリットです。
ただし、ボタンやフォームなどのUI要素を表現するには工夫が必要なため、ワイヤーフレーム作成に慣れた方向けのツールといえます。
cacoo
cacooを使うメリット
・ワイヤーフレームのための図形や素材が豊富
・情報量が多いページでも対応しやすい
ワイヤーフレーム作成のための専用ツールなので、ボタンや入力フォームなどの素材が豊富。
簡単なレイアウトであれば、雛形も用意されているのでテンプレートに沿って作成するだけでワイヤーフレームが完成します。
他のメンバーへの共有機能もついているので、しっかりワイヤーフレームを作りたいという方にはぴったりなツールです。
cacooを使うデメリット
- 慣れが必要
- 本格的に利用するには有料版が必要
パワーポイントに似て、直感的に操作できるのですが、普段からパワーポイントやWebのツールを使っていない方には少しわかりにくいかもしれません。
また、7ページ以上のワイヤーフレームを作成する場合は有料版が必要になってしまいます。
無料でのツールをお探しの方はエクセルかパワーポイントが最適でしょう。
（エクセルやパワーポイントも有料ですが、既にインストールされている場合を想定しています）
ワイヤーフレームの作り方 まとめ
ワイヤーフレームには、守るべきルールといったものはありません。
使うツールも手書きやパワーポイントなど自由です。
重要なポイントは2点です。
- ホームページに使用するコンテンツをしっかり整理すること
- プロジェクトメンバーの認識を合わせるためのツールとして利用すること
上記のポイントが守られていれば、ワイヤーフレームの役割はしっかり果たされています。
ぜひ参考にして、素晴らしいサイト制作・リニューアルにしてください！
※ワイヤーフレームの他にホームページに必要な「仕様書」はこちらをご覧ください！
ホームページ制作の仕様書の作り方とポイントをプロが解説！
ワイヤーフレームのサンプルをプレゼント
本記事で使用したワイヤーフレームのサンプルを、PowerPoint（パワーポイント）形式でプレゼントいたします。
下記のページからダウンロードが可能です。パワーポイント形式のためすぐに編集・修正が可能です。
お気軽にダウンロードしてください。
ワイヤーフレーム サンプル（PowerPoint形式）
ホームページのワイヤーフレームのサンプルです。PowerPoint形式ですぐに編集・修正できるので、ホームページ制作の依頼やリニューアルの際にお役立てください。
無料でダウンロードする
ホームページの改善に関する相談はWeb幹事へ
Web幹事は、あなたに最適なホームページ制作会社を「人力で」マッチングするサービス。
実際にWeb制作を経験したプロのコンサルタントが対応するため、業者選びの手間なく、質の高いマッチングを受けることが可能です！
無料で対応致しますので、ホームページ制作の見積もり・発注、その他ホームページについてお悩みの際はお気軽にご相談下さい！
Q. ワイヤーフレームを作る目的は？
「ホームページのレイアウトを決めるため」「プロジェクトメンバーと認識を合わせるため」「アイデア出しや議論のたたき台にするため」等が挙げられます。
Q. ワイヤーフレーム作成の際に注意すべきことはありますか？
ワイヤーフレームを作成する際には、デザインに凝りすぎないことが重要です。ワイヤーフレームの目的は情報を整理することなので、過度なデザイン要素を入れると制作が困難になる可能性があります。
