こんにちは！UIデザイナーのYunyです。
- Webサイトやアプリのワイヤーフレームを初めて作ることになり、進め方に悩んでいる方
- Figmaでいきなりデザインを作り始めてしまい、後からの仕様変更や手戻りに困っている方
- 要件整理からレイアウトへの落とし込み、チームとの合意形成のコツを体系的に学びたい方
Webサイトやアプリの制作を始めるとき、いきなりFigmaを広げて綺麗なビジュアルから作り始めてしまった経験はないでしょうか。
自分自身も駆け出しの頃、いきなり色をつけて整った画面を作っては、クライアントから大幅な修正を指示される失敗を繰り返していました。
何時間もかけたデザインが崩壊し、大きな手戻りになってしまった苦い経験があります。
手戻りを最小限に抑えてスムーズに制作を進めるには、ビジュアルを作る前段階の「ワイヤーフレーム（情報設計）」が何より重要になります。
今回は、要件整理からFigmaでの実践的な作成手順、そして実務で手戻りを防ぐマイルールまで、現場目線で体系的に解説していきます。
- そもそもワイヤーフレームとは？デザインカンプとの違いと3つの役割
- デザインカンプ・プロトタイプとの明確な違い
- 【余談】ワイヤーフレームはExcelやPowerPointでも作れる？
- 実装解像度と作業コストのバランス：合意形成に応じた使い分け
- 実務でワイヤーフレームを作る3つの役割
- Figmaを開く前に！手戻りを防ぐ「要件整理」の3ステップ
- ステップ1：目的とペルソナを1文で言語化する
- ステップ2：掲載要素の洗い出しとグルーピング
- ステップ3：情報の優先順位付けと視線誘導の設計
- 【実践】Figmaでワイヤーフレームを作成する5つの手順
- 手順1：適切なアートボード（Frame）を用意する
- 手順2：レイアウトグリッドを設定して揃えの基準を作る
- 手順3：グレースケールのみでブロックを配置する
- 手順4：Auto Layoutを活用して「伸縮に強い骨組み」にする
- 手順5：ダミーテキストを避け、「実際の想定テキスト」を入れる
- 実務で差がつく！ワイヤーフレーム作成の5つのコツ
- コツ1：グレーの「明度差」だけで視覚的ヒエラルキーを作る
- コツ2：繰り返し使うパーツは簡易コンポーネント化する
- コツ3：レスポンシブ（SP表示時）の縦スクロール量を意識する
- コツ4：デザインの意図や動きを「アノテーション（注記）」で残す
- コツ5：Figmaプラグインやキットを活用して時短する
- レビュー前に確認！手戻りを防ぐセルフチェックリスト
- 1. ビジネス観点で伝えたいこと・目的が叶えられているか
- 2. 文言やキャッチコピーの具体性が確保されているか
- 3. 画像やテキストの強弱と情報の並び順が適切か
- 4. 例外パターン（エラー・0件表示）が考慮されているか
- 5. ステークホルダーとの合意形成の材料として揃っているか
- 次のステップ：あわせて深掘りしたい知見
- 終わりに
そもそもワイヤーフレームとは？デザインカンプとの違いと3つの役割
Webサイトやアプリ制作において色や装飾を排除し、「情報の優先順位」と「大まかなレイアウト」を線と枠だけで定義した画面の設計図です。ビジュアルを作る前に骨組みの合意をとることで、実務での大幅な手戻りを防止します。
ワイヤーフレーム（Wireframe）とは、画面の「情報の優先順位」と「大まかなレイアウト」を線と枠だけで示した設計図のことです。
家を建てるときにいきなり壁紙を選ばず間取り図を描くのと同じように、画面制作でもまず骨組みを確定させる役割を持っています。
デザインカンプ・プロトタイプとの明確な違い
Web制作の現場では「ワイヤーフレーム」「デザインカンプ」「プロトタイプ」という3つの成果物が登場します。
これらは目的や忠実度（具体性の度合い）が大きく異なるため、まずは役割の違いを整理しておきましょう。
| 成果物 | 主な役割 | 表現レベル | 検証するポイント |
|---|---|---|---|
| ワイヤーフレーム | 情報の構造と配置の決定 | モノクロ・線と枠のみ | 何を・どこに・どの優先度で置くか |
| デザインカンプ | ビジュアルの完成見本 | フルカラー・実画像・フォント | 配色やタイポグラフィ、世界観の統一 |
| プロトタイプ | 画面遷移と操作性の検証 | インタラクティブな動作 | 実際の使い心地や導線、アニメーション |
ワイヤーフレームの段階では、色やフォントといった「視覚的な装飾」をあえて削ぎ落とすことが大切です。
装飾を排除することで、「ボタンの色が合わない」といった表面的な好みに脱線せず、情報の構造そのものに集中して議論できます。
【余談】ワイヤーフレームはExcelやPowerPointでも作れる？
極論を言えば、ワイヤーフレームは「情報項目の構造と配置の決定」が最低限できれば十分です。
そのため、ExcelやPowerPoint、あるいは手書きの紙とペンでも目的は十分に達成できます。
要は「何を・どこに・どの優先度で置くか」の骨組みを整理し、関係者と目線を合わせることが本質だからです。
ただし今回の記事では、リアルタイム共同編集やAuto Layoutによる柔軟な調整など、現代のプロダクト開発のトレンドである「Figma」をベースに実践的な手順を解説していきます。
実装解像度と作業コストのバランス：合意形成に応じた使い分け
ワイヤーフレーム、デザインカンプ、プロトタイプは、後者になるほど実装されるものとのイメージが近づく特徴があります。
完成形に近い状態で見せられるため、関係者間のイメージ共有は格段にスムーズになります。
一方で、後者になるほど作成や修正にかかる作業コストが跳ね上がる点には注意が必要です。
プロトタイプまで作り込んだ段階で根本的な仕様変更が起きると、手戻りの工数被害は非常に大きくなります。
ただし最近では、「Figma to Code」やAIツールの進化によって、デザインから動く画面を起こすハードルも下がってきています。
そのため、従来の各工程の境界線は以前よりも少し柔軟（グラデーション）になりつつあるのも実情です。
だからこそ実務では、形式的に全ステップを踏むのではなく、ステークホルダーとの「合意形成の目的」に合わせて最適な粒度を選ぶことが何より大切です。
情報設計や掲載内容の過不足を握りたい初期段階なら、修正コストが最小で済むワイヤーフレームで素早く合意をとるのが得策です。
逆に、複雑な操作感や遷移の検証が最優先の局面なら、部分的に簡易プロトタイプを組んで検証するなど、状況に応じた柔軟な判断が求められます。
実務でワイヤーフレームを作る3つの役割
なぜ時間を使ってまでワイヤーフレームを作る必要があるのでしょうか。
実務においてワイヤーフレームが果たす役割は、主に以下の3点に集約されます。
1. 文言やテキスト・画像の強弱と順番を可視化する
Webページを開いたとき、ユーザーが最初に目にするべき情報は何でしょうか。
キャッチコピーの具体的な文言や、テキストと画像の強弱、そしてユーザーに読ませる順番など、画面全体の視線誘導を設計できるのがワイヤーフレームの強みです。
2. ディレクターやクライアントと「ビジネスの目的」をすり合わせる
ワイヤーフレームは、ビジネス観点で伝えたいことや達成したい目的が叶っているかを、ディレクターやクライアントと確認するための材料です。
早い段階で骨組みを共有し、関係者全員で「この文言と構成で進める」という合意をとることで、後工程での大幅な手戻りを防止できます。
3. エンジニアへの実装要件伝達をスムーズにする
ワイヤーフレームがあることで、開発担当のエンジニアも「どんなデータが必要か」「どんなAPI連携が必要か」を早期に把握できます。
デザイン完成を待たずにバックエンドの実装方針を検討できるため、プロジェクト全体の進行スピードも上がります。
自分自身の経験でも、ワイヤーフレームを丁寧に作り、クライアントと「情報の配置」を握り合えた案件ほど、その後の工程が驚くほどスムーズに進む実感があります。
Figmaを開く前に！手戻りを防ぐ「要件整理」の3ステップ
ワイヤーフレーム作りで最も多い失敗は、「いきなりデザインツールを開いてしまうこと」です。
画面の目的や必要な要素が整理されていない状態でFigmaを開くと、どこから手を付ければいいか迷い、作業が完全に止まってしまいます。
手戻りをゼロにするために、ツールを触る前に以下の3つのステップで要件を整理しておきましょう。
ステップ1：目的とペルソナを1文で言語化する
まずは「誰のためのページで、何を達成したいのか」を明確にします。
例えば、以下のように「主語・対象・アクション」を1文で書き出してみるのがおすすめです。
- 整理例: 「業務効率化に悩む中小企業のバックオフィス担当者が、ツールの資料請求を申し込むためのLP」
この軸が決まっていると、レイアウトを組む際にも「この情報は担当者にとって本当に今必要か？」という判断がブレなくなります。
ステップ2：掲載要素の洗い出しとグルーピング
次に、ページに必要な情報を箇条書きで漏れなくリストアップします。
テキストエディタやメモ帳を使って、思いつく限りのコンテンツを書き出していく作業です。
- FV（ファーストビュー）: サービス名、メインキャッチコピー、サブコピー、CTAボタン、イメージ画像
- 課題提起: ユーザーが抱えている代表的な悩み3選
- サービスの特徴: 3つの強み、画面キャプチャ、簡単な解説テキスト
- 導入実績: 利用企業ロゴ、導入社数の数字、ユーザーの声
- 料金プラン: 月額料金、機能比較表、おすすめプランの強調
- よくある質問（FAQ）: 導入期間、セキュリティ、サポート体制
- フッター: 会社概要、プライバシーポリシー、問い合わせ導線
リストアップができたら、関連する要素同士をグループにして、セクション（ひとまとまりのブロック）単位に分類していきます。
ステップ3：情報の優先順位付けと視線誘導の設計
グルーピングしたセクションを、ユーザーに見せたい順番に並び替えます。
Webページを読むユーザーの視線は、一般的に「Zの法則」や「Fの法則」に沿って動きます。
- 優先度（高）: FVでの価値提示、最重要のCTAボタン
- 優先度（中）: 導入のメリット、具体的な機能、信頼性を担保する実績
- 優先度（低）: 細かい仕様、利用規約、運営会社情報
Figmaに向かう直前の準備として、紙とペンでざっくり5分間のラフスケッチを描いてみるのが個人的にはとてもおすすめです。
手書きで全体の流れを俯瞰しておくだけで、ツール上での迷いが一気に解消されます。
【実践】Figmaでワイヤーフレームを作成する5つの手順
要件が整理できたら、いよいよFigmaを使ったワイヤーフレーム作成に入ります。
初心者の方でも迷わず綺麗な構造を組めるよう、実践的な5つのステップで進めていきましょう。
手順1：適切なアートボード（Frame）を用意する
Figmaを立ち上げたら、まずは土台となるフレームを作成します。
ショートカットキーの 「F」 を押し、右側のプロパティパネルからデバイスサイズを選択します。
- PC向け基準サイズ: 幅
1440px（コンテンツ最大幅は1100px〜1200px程度に収める） - スマートフォン向け基準サイズ: 幅
375px（iPhone SE系）または393px（iPhone 15/16系）
初心者の方がやりがちなミスとして、図形ツールの「Rectangle（長方形）」で土台を作ってしまうケースがあります。
Rectangleは単なる図形であり、中に要素をネストしたりクリッピングしたりできません。
レイアウトの土台には、必ず「Frame」を使用することを習慣づけましょう。
手順2：レイアウトグリッドを設定して揃えの基準を作る
フレームを選択した状態で、右パネルの「Layout grid」からグリッドを設定します。
基準となるガイドラインがあることで、要素の配置や余白のバラつきを防ぐことができます。
- PCの場合: 「Columns」を選択し、Count:
12、Gutter:20px〜24px、Margin:Autoまたは左右均等 - SPの場合: 「Columns」を選択し、Count:
4、Gutter:16px、Margin:16px〜20px
Webデザインでは「12カラムグリッド」がデファクトスタンダードとして広く使われています。
12という数字は2、3、4、6で割り切れるため、柔軟なカラム変更に対応しやすい利点があります。
手順3：グレースケールのみでブロックを配置する
ワイヤーフレームで使う色は、基本的に白・黒・グレーの3色（無彩色）のみに絞ることが大切です。
- 背景:
#FFFFFFまたは ごく薄いグレー（#F9FAFB） - コンテンツカード枠:
#E5E7EBなどの薄いボーダー - 本文テキスト:
#4B5563や#374151 - 見出し・強調テキスト:
#111827 - メインのCTAボタン:
#111827（黒）または#374151（濃いグレー）
鮮やかな青や赤などの有彩色を使ってしまうと、確認する相手が無意識に「色の印象」に引っ張られてしまいます。
「ボタンを目立たせたい」という場合も、色ではなくグレーの明度差や文字の太さ、周囲の余白で優先度を表現します。
手順4：Auto Layoutを活用して「伸縮に強い骨組み」にする
Figmaの最大の強みである「Auto Layout（Shift + A）」を最初から活用しましょう。
ボタンやカード、リストなどをAuto Layoutで組んでおくと、後からテキストの文言が変わっても、自動で余白が維持されます。
- ボタン: テキストを打ち、
Shift + AでAuto Layout化。上下パディング12px、左右パディング24pxに設定。 - カード: 画像プレースホルダー、タイトル、説明文を選択し、縦並び（Vertical）のAuto Layout化。間のギャップを
16pxに統一。 - セクション全体: 各カードを横並び（Horizontal）にしてAuto Layout化し、さらにセクション全体を縦方向に束ねる。
Auto Layoutを意識して組んでおくと、コード（HTML/CSSのFlexbox）に近い構造でデータが整理されます。
構造が最初から整っているため、エンジニアへの引き継ぎも格段にスムーズになります。
Figmaでのレイヤー構造や命名規則については、以下の記事で詳しく解説しています。
あわせて読むことで、後から破綻しないクリーンなデータ設計が身につきます。
手順5：ダミーテキストを避け、「実際の想定テキスト」を入れる
ワイヤーフレームを作るとき、「テキストが入ります」といったダミーテキストで埋めてしまうケースがよく見られます。
しかし、実務においてこれはレイアウト崩れを引き起こす大きな要因になります。
- ダミーテキストの落とし穴: 実際のテキストが入った際に、想定外の改行でボタンが画面外に押し出されるなどのトラブルが後から頻発します。
- 対策: 完全なコピーでなくても構いません。「業務効率を50%改善するクラウドERP」のように、実際に近い長さと意味を持った仮テキストを入れることが大切です。
文字数や行数のリアリティを持たせておくことで、デザインカンプに移行した際の手戻りを大幅に削減できます。
実務で差がつく！ワイヤーフレーム作成の5つのコツ
基本の手順を押さえたら、現場のデザイナーが実践している「手戻りを防ぎ、作業効率を上げるコツ」を取り入れていきましょう。
ちょっとした配慮をワイヤーフレームに込めるだけで、チームからの信頼度が格段に向上します。
コツ1：グレーの「明度差」だけで視覚的ヒエラルキーを作る
ワイヤーフレームはモノクロで作成しますが、すべてが同じグレーだと情報が平坦に見えてしまいます。
そこで意識したいのが、グレーの明度（明るさ・暗さ）の使い分けです。
- 最も目立たせる要素（Primary CTA）: 塗りつぶしの黒（
#111827）に白文字 - 補助的な要素（Secondary CTA）: 白背景にグレーの枠線（
border: 1px solid #D1D5DB） - 見出しテキスト: 濃いグレー（
#1F2937）でフォントサイズを大きめに設定 - 補足説明・メタ情報: 中間グレー（
#6B7280）でフォントサイズを小さく設定
このように、グレーの明度差だけで「どこが最も重要か」が直感的に伝わる状態を作ることが、優れたワイヤーフレームの共通点です。
コツ2：繰り返し使うパーツは簡易コンポーネント化する
ボタンやヘッダーなど、複数の画面で使い回す要素は初期段階でコンポーネント化（Ctrl / Cmd + Alt + K）しておくのがおすすめです。
- 実務でのメリット: メインコンポーネントを1箇所修正するだけで、全画面に一瞬で変更が反映されます。レビュー後の修正工数を最小化できます。
- 注意点: ワイヤーフレームの段階では、バリアント（Variants）を複雑に組みすぎず、最低限のステート（通常時・非活性時など）に留めておくのが作業スピードを落とさないポイントです。
コツ3：レスポンシブ（SP表示時）の縦スクロール量を意識する
PC画面のワイヤーフレームを作っていると、つい見栄えの良さに満足してしまいがちです。
しかし、Webサイトのアクセスの大半はスマートフォンが占めています。
- SP表示での変化: PCで横並びになっている3つの特徴カードは、SP画面では「縦3段」に積み上がります。
- 確認すべきこと: 縦に積んだ結果、スクロール量が長すぎてユーザーが離脱しないかを意識します。Figma Mirrorアプリ等で、実機での操作感を必ず確認しましょう。
必要に応じて、SPではカルーセルに切り替えるなど、画面サイズに応じた最適な見せ方をワイヤーフレームの段階で検討しておきます。
コツ4：デザインの意図や動きを「アノテーション（注記）」で残す
ワイヤーフレーム単体では、画面の「動き」や「細かな仕様」までは伝わりません。
フレームの横にテキストボックスを配置し、簡単なアノテーション（補足説明の矢印や注記）を添えておくことで、認識のズレを防ぐことができます。
- アノテーションの具体例:
* 「このボタンをクリックすると、ログインモーダルがポップアップ表示」
* 「初期表示時は最新の3件のみ表示、もっと見るボタンで全件展開」
* 「未入力の場合は送信ボタンを非活性（グレーアウト）にする」
こうした注記を書いておくと、クライアントへの説明がスムーズになります。
さらに、エンジニアが見積もりや実装設計をする際の貴重な判断材料としても役立ちます。
コツ5：Figmaプラグインやキットを活用して時短する
ワイヤーフレームの作成に何時間もかけるのは本末転倒です。
あくまで「骨組みの合意」が目的であるため、便利なプラグインを活用してスピーディーに仕上げることを意識しましょう。
- アイコン:
Lucide IconsやFeather Iconsなどの定番プラグインを使い、検索して即座に配置する。 - ダミー画像: 写真を探して切り抜くのではなく、灰色の四角の中に山と太陽の簡易アイコンを置いた「画像プレースホルダー」を使う。
自分が実務で作業スピードを高めるために愛用しているFigmaプラグインについては、以下の記事で紹介しています。
ワイヤーフレーム作成はもちろん、その後のデザイン制作全般の効率化に役立ちます。
レビュー前に確認！手戻りを防ぐセルフチェックリスト
完成したワイヤーフレームをディレクターやクライアントに提出する前に、必ず自分自身で品質チェックを行いましょう。
ワイヤーフレームの段階では、細かな装飾や余白のpx値といったミクロなデザイン仕様を気にする必要はありません。
ビジネス観点で伝えたい意図が伝わり、関係者とスムーズに合意形成できる材料になっているかを以下の5項目で見直します。
1. ビジネス観点で伝えたいこと・目的が叶えられているか
ページ全体を通じて、ビジネス上のゴール（問い合わせ獲得やサービス理解など）がブレずに反映されているかを確認します。
ユーザーに期待するアクションに対して、導線設計に不自然な点がないかをディレクター目線で見直しましょう。
2. 文言やキャッチコピーの具体性が確保されているか
「テキストが入ります」といったダミーではなく、実際の訴求内容が伝わる仮文言が入っているか確認します。
文言の解像度が高いほど、クライアントも完成イメージをリアルに想像しやすくなり、意図のすり合わせが正確になります。
3. 画像やテキストの強弱と情報の並び順が適切か
最も目立たせるべき要素と、補足的な情報の「コントラスト（強弱）」が適切についているかを確認します。
ユーザーが上から順に読み進めた際に、自然な流れで理解できる並び順（ZやFの視線誘導）になっているかをチェックしましょう。
4. 例外パターン（エラー・0件表示）が考慮されているか
理想的なデータが入った状態だけでなく、データが0件（Empty State）の画面や入力エラー時の表示も想定しておきます。
実務ではこうした例外画面の考慮漏れが開発終盤の手戻りに直結するため、ワイヤーフレームの段階で洗い出しておくことが大切です。
5. ステークホルダーとの合意形成の材料として揃っているか
デザインの意図や画面遷移の挙動について、必要なアノテーション（注記）が添えられているかを確認します。
クライアントや開発陣が見たときに、「この構成で進めて問題ない」と自信を持って判断できる状態を作ることがゴールです。
次のステップ：あわせて深掘りしたい知見
ワイヤーフレームで骨組みが確定したら、次は色や装飾を乗せていく「デザインカンプ」の工程へと進みます。
優れたUI事例を観察し、レイアウトやあしらいをインプットしておくことで、デザインへの落とし込みがスムーズになります。
以下の記事では、現役デザイナーが実務で活用しているUIデザインギャラリーを紹介しています。
デザインの引き出しを広げるためのインスピレーション源として役立ちます。
終わりに
最後までお読みいただき、ありがとうございます！
ワイヤーフレームの作成は、装飾がないぶん一見地味な作業に思えるかもしれません。
しかし、「何を伝え、どう動かすか」という情報設計にじっくり向き合うことこそが、結果として最も手戻りを減らし、質の高いUX/UIを素早く生み出す近道になります。
最初から完璧を目指さず、まずは紙とペンで要件を整理し、FigmaのAuto Layoutを使ってシンプルな骨組みを組み立ててみてください。
これからも、デザイン設計の楽しさを一緒に探求していきましょう。
それでは、良いデザインライフを！
