あやね
Webサイトやアプリを作るとき、いきなりデザインに着手してしまうチームは少なくありません。しかし実際の現場では、それが後になって大きな手戻りを生む原因になりがちです。「思っていたデザインと違う」「必要な情報が足りていなかった」——そういったトラブルを防ぐために用意するのが、ワイヤーフレームです。
この記事では、ワイヤーフレームの基本的な意味から、作り方のステップ、よく混同される概念との違い、そして実際の作業で使えるツールまでを順番に解説します。Web制作に初めて関わる方でも読み進めやすいように書いていますので、ぜひ最後まで目を通してみてください。
1. ワイヤーフレームとは？
言葉の意味から理解する
「ワイヤーフレーム（Wireframe）」という言葉は、英語の wire（針金・線） と frame（骨組み・枠） を組み合わせたものです。その名のとおり、線や枠だけでシンプルに構成された「骨組み図」のことを指します。
Web制作の文脈でいうと、ワイヤーフレームとは Webページやアプリ画面の設計図 のことです。どこにどんな情報を置くか、ボタンやメニューをどこに配置するか、といった「情報の構造と配置」を視覚化したものです。
よく使われる表現でいえば、「何を・どこに・どのように配置するか」を決めるための図——これがワイヤーフレームの本質です。
家の設計図と同じ考え方
イメージをつかむために、家の建築にたとえてみましょう。
家を建てるとき、大工さんはいきなり材木を切り始めたりしません。まず建築士が設計図を引き、どこに部屋を置くか、窓の位置はどこか、動線はどうなっているかを紙の上で確定させます。設計図なしで家を建てようとしたら、途中で「ドアが邪魔だ」「収納が足りない」といった問題が次々と出てきてしまいます。
ワイヤーフレームは、まさにWebサイトにおける設計図です。実際のビジュアルデザインに入る前に、情報の骨格を固める作業がワイヤーフレームの制作です。
ワイヤーフレームの特徴：色は使わない
ワイヤーフレームの段階では、色・フォント・画像の見た目といったデザイン的な要素は扱いません。グレーや白黒の四角形、テキストの枠、線だけで構成されるのが基本です。
これは手を抜いているわけではなく、意図的なものです。ビジュアルを排除することで、「この情報は本当にここに必要か」「優先順位はこれでいいか」という情報設計の議論に集中できるからです。色やデザインが入ると、どうしてもそちらに目が行ってしまい、本来確認すべき構成の話がおろそかになってしまいます。
ワイヤーフレームの略称
実務では「WF（ダブリューエフ）」や「ワイヤー」と短く呼ばれることが多いです。特にディレクターやデザイナーとのやり取りではこの略称がよく使われるので、覚えておくと会話がスムーズになります。
2. ワイヤーフレームはなぜ必要なのか？
「設計図を作らなくても、ざっくりイメージを共有して進めればいいのでは？」と思う方もいるかもしれません。しかし実際の制作現場では、ワイヤーフレームなしで進めたプロジェクトが後から大きなコストを払う羽目になるケースが頻繁に起きています。
理由① 情報の抜け漏れを早期に発見できる
Webページに何を載せるかは、思った以上に複雑です。特にサービスの紹介ページやLPなど、複数の要素が絡み合うページでは、「ここにお問い合わせフォームへの導線がない」「実績の掲載を忘れていた」といった漏れが起きやすいです。
ワイヤーフレームの段階で情報を洗い出して配置しておくことで、こうした抜け漏れをデザイン・コーディング前に発見できます。後工程で発見するほど修正コストが増えるため、早期発見は非常に価値があります。
理由② チームとクライアントの認識を合わせられる
Web制作のプロジェクトには、ディレクター、デザイナー、エンジニア、そしてクライアントと、さまざまな立場の人が関わります。それぞれが頭の中にぼんやりとイメージを持っていても、言葉だけでは「思っていたものと違う」というズレが生まれやすいです。
ワイヤーフレームという共通の図があれば、全員が同じものを見ながら議論できます。「ここのボタンは上に来るはずだった」「このブロックはもっと大きくしたい」といった修正も、デザイン完成後より圧倒的にスムーズに対応できます。
理由③ デザイナーへの正確な指示書になる
ワイヤーフレームは、後工程を担うデザイナーへの指示書としても機能します。「この位置にこういう情報が入る」という骨格が決まっていれば、デザイナーはビジュアル表現に集中できます。
ワイヤーフレームなしにデザインをお願いすると、デザイナーは情報設計から考えなければならなくなります。これはデザイナーの本来の仕事ではなく、時間もかかりますし、方向性のズレも生まれやすくなります。
理由④ 開発チームとの仕様共有に使える
エンジニアにとっても、ワイヤーフレームは重要な資料です。検索機能、お問い合わせフォーム、ページ遷移のロジックなど、機能要件を視覚的に確認できるため、実装の見積もりや設計がしやすくなります。
「何を作るか」が共有されていれば、実装途中での仕様変更や認識のズレも起きにくくなります。
理由⑤ 後工程の手戻りリスクを大幅に下げられる
上記すべてに共通するのが、「後からの修正コストを下げる」という効果です。ワイヤーフレームの段階での修正は、テキストや線を動かすだけで済みます。しかしデザインが完成した後や、コーディングが進んだ後に設計変更が起きると、その影響範囲は一気に広がります。
制作の初期段階に少し時間をかけてワイヤーフレームをしっかり作ることが、プロジェクト全体の効率を高める最も確実な方法のひとつです。
3. ワイヤーフレームはいつ・誰が作るのか？
作成のタイミング：要件定義の後、デザインの前
ワイヤーフレームを作るのは、要件定義が固まった後が基本です。サイトの目的、ターゲットユーザー、必要な機能、ページ構成といった要件が決まっていないと、ワイヤーフレームの方向性も定まりません。
一般的なWeb制作の流れは次のとおりです。
ワイヤーフレームが完成したら、クライアントやチームメンバーとレビューを行い、合意を得た上でデザインフェーズに進みます。この合意が取れていることが、後工程をスムーズに進めるための重要な条件になります。
なお、案件によっては要件定義と並行してワイヤーフレームを作りながら要件を固めていくアプローチも取られます。特に新規サービスの立ち上げなど、要件が流動的な場合はこのやり方が有効なこともあります。
誰が作るのか：ディレクターが中心、チームで磨く
ワイヤーフレームの作成は、Webディレクターが主導することが多いです。クライアントのヒアリングを直接担当し、要件を最もよく把握しているのがディレクターだからです。
ただし、「ディレクターが一人で完成させる」という考え方は危険です。ワイヤーフレームはチームで磨いていくものです。デザイナーからは「この配置だとデザインが難しい」という実装上のフィードバックが来ることがありますし、エンジニアからは「この機能を実現するには別の設計が必要」という指摘が入ることもあります。
チームの知見をワイヤーフレームに反映させることで、実際に作り始めてから問題が起きるリスクを大きく減らせます。
また、受託案件の場合はクライアントもチームの一員として捉えることが重要です。クライアントは自社のサービスや商品について最もよく知っている存在です。ワイヤーフレームのレビューに積極的に関わってもらうことで、「思っていたものと違う」という事態を防げます。
4. ワイヤーフレームと混同されやすい概念の違い
Web制作の現場では、ワイヤーフレームと似たような言葉がいくつか登場します。それぞれの役割の違いを把握しておくと、チームでの会話がスムーズになります。
ワイヤーフレーム vs モックアップ・デザインカンプ
ワイヤーフレームは、情報の骨格と配置を確認するための設計図です。色やフォントなどのビジュアル要素は含まれません。
モックアップ（デザインカンプ）は、ワイヤーフレームをベースに、実際の色・フォント・画像・ロゴなどを加えたビジュアルの完成見本です。クライアントに「こういうデザインになります」と見せるために使います。
つまり、ワイヤーフレームは「骨格の確認」、モックアップは「見た目の確認」という役割の違いがあります。順番としては、ワイヤーフレーム → モックアップの順に進むのが一般的です。
なお、「デザインカンプ」と「モックアップ」はほぼ同じ意味で使われることが多いです。厳密には若干ニュアンスが異なる場合もありますが、Web制作の現場では同義として扱われることがほとんどです。
ワイヤーフレーム vs プロトタイプ
プロトタイプは「試作品」を意味し、実際のボタンクリックやページ遷移など、動きを伴う体験を再現したものです。ユーザーが実際に操作してみることで、UXの問題点を発見するために使います。
ワイヤーフレームが「静的な設計図」であるのに対し、プロトタイプは「動く試作品」という違いがあります。プロトタイプはワイヤーフレームやモックアップをベースに作成されることが多く、制作プロセスの中ではより後の段階に位置します。
ワイヤーフレーム vs サイトマップ（ディレクトリマップ）
サイトマップは、Webサイト全体のページ構成を階層的に示した図です。「トップページ → サービス紹介 → 料金プラン」といったページ間のつながりや、サイト全体の構造を俯瞰するために使います。
ワイヤーフレームが「1ページの中の設計」を表すのに対して、サイトマップは「サイト全体の構造」を表します。順番としては、サイトマップで全体像を固めてから、各ページのワイヤーフレームを作るという流れになります。
まとめ：4つの関係を整理すると
| 名称 | 目的 | 色・デザイン | 動き |
|---|---|---|---|
| ワイヤーフレーム | 情報の骨格・配置の確認 | なし | なし |
| モックアップ・デザインカンプ | ビジュアルデザインの確認 | あり | なし |
| プロトタイプ | UX・操作感の検証 | あり（場合による） | あり |
| サイトマップ | サイト全体の構造の確認 | なし | なし |
5. ワイヤーフレームの作り方：5ステップで解説
ワイヤーフレームの作り方に「絶対の正解」はありませんが、多くの現場で共通して踏まれているステップがあります。ここでは実践的な5つのステップを紹介します。
STEP 1：サイト・ページの目的と全体像を理解する
ワイヤーフレームはページ単体の設計図ですが、そのページがサイト全体の中でどういう役割を持つかを理解してから作業に入ることが重要です。
まず確認すべきことは次のとおりです。
- サイトの目的は何か（認知拡大・リード獲得・EC販売など）
- ターゲットユーザーは誰か（年齢・職種・抱えている課題など）
- 対象ページのサイト内での役割は何か（トップページ・サービス紹介・LP など）
- コンバージョンポイントはどこか（問い合わせ・資料請求・購入など）
この理解が浅いまま作業に入ると、「情報を並べたけれど目的に沿っていない」という設計になりがちです。要件定義書やクライアントへのヒアリング内容を手元に置いてから始めましょう。
STEP 2：掲載する情報をリストアップし、優先順位をつける
次に、そのページに必要な情報を全て書き出します。この段階ではまだ配置は考えず、「何を載せるか」の洗い出しに集中します。
例えばサービス紹介ページなら、以下のような要素が考えられます。
- キャッチコピー・ファーストビュー
- サービスの概要
- 主な機能・特長（3〜5点）
- 導入事例・お客様の声
- 料金プラン
- よくある質問
- お問い合わせへのCTA
全て書き出したら、ユーザー目線での優先順位をつけます。「ユーザーが最初に知りたいことは何か」「どの情報がコンバージョンに最も直結するか」という視点で順位を決めていきましょう。一般的にページの上部ほど閲覧率が高いため、重要な情報は上に置くのが基本です。
クライアントへのヒアリングをもとにしつつ、ユーザーの視点を忘れずに整理することがポイントです。
STEP 3：レイアウトのパターンを選ぶ
情報が整理できたら、それをどう並べるかというレイアウトを決めます。代表的なレイアウトパターンは以下のとおりです。
シングルカラムレイアウト
1列で縦にコンテンツを積み上げるレイアウト。企業サイトやLPなど、ユーザーに1つの流れでメッセージを伝えたいページに向いています。スマートフォンでの表示とも相性が良いです。
マルチカラムレイアウト
2列・3列など複数の列に分けて情報を並べるレイアウト。ECサイトの商品一覧や、複数のカテゴリを並べて見せたいページに適しています。
グリッドレイアウト
カード型の要素を格子状に並べるレイアウト。ブログのトップページやポートフォリオサイトなど、多数のコンテンツを一覧で見せるページに向いています。
フルスクリーンレイアウト
画面全体に画像や動画を使うレイアウト。ブランドイメージを前面に出したいサイトや、視覚的なインパクトを重視するページに使われます。
レイアウトを選ぶ際は「見た目のかっこよさ」ではなく、「ユーザーの行動パターンとページの目的に合っているか」を判断基準にしましょう。
STEP 4：ラフ（低忠実度）から描き始める
レイアウトが決まったら、実際にワイヤーフレームを描き始めます。最初はローファイ（低忠実度）と呼ばれるラフな状態から始めるのが定石です。
ローファイとは、細部を作り込まずに四角形や線だけで要素の位置関係を表した、いわば「走り書き」のようなものです。紙とペンで描いても、ツール上でざっと配置してもかまいません。
この段階で大切なのは、全体の流れと構造が成立しているかどうかを確認することです。細部の完成度より、「情報がユーザーの求める順番で並んでいるか」「重要なCTAが目立つ位置にあるか」といった骨格の妥当性を検証します。
ラフの段階でチームメンバーや必要に応じてクライアントにフィードバックをもらい、大きな方向性のズレがないかを確認するのも有効です。
STEP 5：要素を詰めてハイファイに仕上げ、レビューする
ローファイで骨格が固まったら、テキストや具体的な要素を入れたハイファイ（高忠実度）のワイヤーフレームに仕上げます。
ハイファイの段階では、「ここにテキストが入ります」といった仮文ではなく、できるだけ実際に使う予定の文言を入れましょう。テキストの文字数や量感が変わると、レイアウトへの影響が出るためです。また、画像が入る箇所には「どんな画像が入るか」を言葉で書き添えておくと、デザイナーへの指示がより明確になります。
仕上がったら、チームでレビューを行います。「なぜこの情報をここに置いたのか」を説明できるようにしておくと、フィードバックの質も上がります。フィードバックを受けて修正し、クライアントの承認を得たら、ワイヤーフレームの完成です。
6. ワイヤーフレーム作成のポイントと注意事項
実際にワイヤーフレームを作り始めると、初心者がはまりやすいパターンがいくつかあります。よくある失敗を知っておくことで、同じミスを避けやすくなります。
ポイント① デザインではなく「情報設計」に集中する
ワイヤーフレームを作っていると、「このボタンは赤にしようかな」「ここのフォントはちょっと大きめにしたい」というように、デザインの議論に入り込んでしまうことがあります。
しかし、ワイヤーフレームの段階ではデザインの話は持ち込まないのが鉄則です。色や装飾を加えると、レビューの場での議論がデザインに向いてしまい、本来確認すべき「この情報の配置は正しいか」「このCTAは見つけやすいか」という設計の話ができなくなります。
ワイヤーフレームはあくまで情報設計の確認ツールです。デザインの話はデザインフェーズで行いましょう。
ポイント② 各要素の配置に根拠を持つ
「なんとなくここに置いた」という要素があると、レビューで指摘を受けたときに対応できません。「なぜこの情報をこの位置に置いたのか」を説明できるようにしておくことが重要です。
例えば「ユーザーへのヒアリングで、料金への関心が最も高かったため、ファーストビューの直下に料金プランを配置した」という根拠があれば、議論が建設的になります。一方、根拠のない配置は「感覚的な話」になってしまい、誰かの主観で決まる展開になりやすいです。
ポイント③ シンプルに作り、変更しやすい状態を保つ
ワイヤーフレームは一度で完成することはほとんどなく、レビューを経て何度も修正されます。そのため、最初から細部まで作り込みすぎると、修正のたびに大きな手間がかかってしまいます。
まずはシンプルな状態で全体の骨格を作り、フィードバックをもとに少しずつ精度を上げていくアプローチが現実的です。特にローファイの段階では、余計な細部を作らないように意識しましょう。
ポイント④ 仮文（ダミーテキスト）の多用は避ける
「テキストが入ります」という仮文をたくさん使ってしまうと、実際にテキストが入ったときのボリュームや印象が全く変わってしまいます。
ワイヤーフレームのレビューでは「情報は正しく入っているか」も重要な確認事項なので、できるだけ実際に使う文言に近いものを入れておきましょう。完璧な文章でなくても構いません。方向性がわかる程度のテキストがあれば、レビューの精度が格段に上がります。
ポイント⑤ 同じレイアウトのページは1つ作れば十分
例えば「5店舗の紹介ページを5ページ分作る」という案件があったとして、各店舗のワイヤーフレームを5つ全部作る必要はありません。レイアウトが同じなら、ワイヤーフレームは1つで十分です。
後工程のデザインやコーディングでも同様のテンプレートを使うことになるため、レイアウトが共通の場合はその旨をチームで共有し、効率よく進めましょう。
ポイント⑥ デバイスごとにレイアウトを検討する
現代のWebサイトは、PCとスマートフォンで見え方が大きく変わります。特にレスポンシブデザインを採用するサイトでは、スマートフォン画面でのレイアウトを別途ワイヤーフレームで確認しておくことが重要です。
PCで横に並んでいた要素がスマートフォンでは縦積みになったとき、情報の見せ方や優先順位はどう変わるか——この視点でモバイル用ワイヤーフレームも準備しておくと、デザインフェーズでの混乱を防げます。
7. ワイヤーフレーム作成におすすめのツール比較
ワイヤーフレームは紙とペンでも作れますが、チームでの共有や修正のしやすさを考えると、オンラインツールを使うのが現代の現場では主流です。ここでは代表的なツールを紹介した上で、Pixsoの特長についても触れます。
Figma
UI/UXデザイン界隈で現在最も広く使われているツールのひとつです。ブラウザ上で動作し、複数人がリアルタイムで同じファイルを編集できるのが大きな強みです。コメント機能でフィードバックをその場でやり取りできるため、チームでのレビューが効率的に進みます。
無料プランでもワイヤーフレーム作成に十分な機能が使えますが、ファイル数や機能に制限があるため、チームで本格的に使う場合は有料プランへの移行が必要になります。
向いている人： デザイナーが多いチーム、モックアップまで一貫して作りたい場合
Miro
オンラインホワイトボードとして広く知られるMiroは、ワイヤーフレームの作成機能も備えています。付箋や図形を使った自由なブレインストーミングからワイヤーフレームまで、幅広い用途に使えるのが特長です。
チームでのリアルタイムコラボレーションに優れており、ワークショップ形式でワイヤーフレームを作る場面にも向いています。
向いている人： ブレインストーミングとワイヤーフレームを一体で進めたいチーム
Adobe XD
Adobeが提供するUI/UXデザインツールです。PhotoshopやIllustrator、After Effectsといった他のAdobe製品との連携に強く、すでにAdobeのワークフローを使っているチームにとっては取り入れやすいツールです。
デバイス別のテンプレートが豊富に用意されており、モバイル画面のワイヤーフレームも作りやすいです。
向いている人： 既存のAdobe製品を使っているデザインチーム
Pixso
Pixsoは、UIデザイン・ワイヤーフレーム・プロトタイピングをひとつのツールで完結できるオールインワンのデザインプラットフォームです。日本語インターフェースに対応しており、英語ツールへの抵抗感がある方でも直感的に使い始めることができます。
ワイヤーフレームの作成に特化した豊富なテンプレートライブラリが用意されており、白紙から始めなくても、目的に合ったテンプレートを選んですぐに作業を開始できます。チームでのリアルタイム共同編集にも対応しており、メンバーがそれぞれ異なる場所にいても、同じファイル上でスムーズに作業できます。
また、ワイヤーフレームからモックアップ、さらにはクリック可能なプロトタイプまで、ツールを切り替えることなく一貫して制作できる点が大きな利点です。デザインの各工程でツールを移動するたびに発生するデータ変換の手間や情報のズレを減らすことができます。
| 比較ポイント | Figma | Miro | Adobe XD | Pixso |
|---|---|---|---|---|
| 日本語対応 | 一部 | ○ | ○ | ○ |
| 無料プラン | ○ | ○ | × | ○ |
| リアルタイム共同編集 | ○ | ○ | △ | ○ |
| ワイヤーフレームテンプレート | ○ | △ | ○ | ○（豊富） |
| プロトタイプまで一貫対応 | ○ | × | ○ | ○ |
| 初心者への取り組みやすさ | △ | ○ | △ | ○ |
よくある質問（FAQ）
Q. ワイヤーフレームとデザインカンプの違いは何ですか？
ワイヤーフレームは色やフォントなどのビジュアル要素を含まない「情報の骨格」を確認するための設計図です。一方、デザインカンプ（モックアップ）は実際の色・フォント・画像を加えた視覚的な完成見本です。制作の順番としては、ワイヤーフレームで構成を固めてからデザインカンプを作るという流れが一般的です。
Q. ワイヤーフレームはどこまで作ればよいですか？
目安は「チームとクライアントが情報の配置と構成を共通認識として持てる状態」です。細部のデザインまで作り込む必要はなく、どこに何の情報があるかが明確に伝わる程度で十分です。プロジェクトによっては、ローファイ（ラフ）で合意を取ってからハイファイに仕上げるという段階を踏むこともあります。
Q. 手書きとツール、どちらで作るのがよいですか？
ラフ段階では手書きでも問題ありません。ただし、チームやクライアントと共有・修正を繰り返す本格的な作業では、オンラインツールを使うのが現実的です。ツールを使えばリアルタイムで共同編集でき、変更履歴も残るため、手書きより圧倒的に効率が上がります。
Q. ワイヤーフレームに色を使ってはいけませんか？
基本的には色を使わないのが推奨です。色が入ると、デザインの議論に移ってしまい、情報設計の確認という本来の目的がぼやけてしまいます。どうしても区別が必要な場合は、グレーの濃淡程度に留めておくのが賢明です。
Q. 全ページのワイヤーフレームを作る必要はありますか？
レイアウトが共通のページについては、1つのワイヤーフレームで代表させれば十分です。例えば店舗紹介ページが10店舗分あっても、構成が同じであれば1つ作れば対応できます。ページ数が多い場合は、重要なページや特殊なレイアウトのページを優先してワイヤーフレームを作成しましょう。
まとめ
ワイヤーフレームとは、Webサイトやアプリの情報設計を可視化した設計図です。色やデザインは含まず、「何を・どこに・どのように置くか」という骨格だけをシンプルに表現するもので、制作プロセスの中でクライアントやチームとの認識合わせに欠かせない役割を担っています。
この記事のポイントを振り返ると、次のようになります。
- ワイヤーフレームは「情報の骨格」を確認するための設計図であり、ビジュアルデザインとは別物
- モックアップやプロトタイプとは役割が異なり、制作プロセスの中での位置づけも違う
- 要件定義の後・デザインの前というタイミングで作成するのが一般的
- ローファイ（ラフ）から始め、レビューを重ねながらハイファイに仕上げていく
- 配置に根拠を持ち、情報設計に集中することが品質の高いワイヤーフレームにつながる
- オンラインツールを使えば、チームでの共有・修正が格段にしやすくなる
ワイヤーフレームはWeb制作の土台となる作業です。最初のうちは時間がかかるように感じるかもしれませんが、しっかりと作り込んでおくことが、プロジェクト全体をスムーズに進める近道になります。
