Webデザインの第一歩！Figmaでワイヤーフレームを作る方法

ワイヤーフレームとは？まずは“設計図”の考え方から

Webサイト制作の最初の工程で欠かせないのが「ワイヤーフレーム」です。
ワイヤーフレームとは、Webページの構成を整理した“設計図”のこと。
文字通り“ワイヤー（線）”でページの構造を描くようなイメージです。

目的は「見た目」ではなく「情報の整理」。
デザインや色づけは後回しにして、「何を」「どの順番で」「どこに配置するか」を決めるのが主な役割です。

なぜFigmaで作るのがいいの？

以前はAdobe XDやSketchが主流でしたが、
今ではFigmaがワイヤーフレーム作成の定番ツールになっています。

Figmaがワイヤーフレームに最適な理由

理由	解説
無料で始められる	個人利用ならずっと無料でOK
ブラウザで動く	インストール不要、どのPCでも開ける
シンプルなUI	図形とテキスト中心の構成にぴったり
リアルタイム共有	クライアントやチームと同時編集が可能
コンポーネント管理	共通パーツを再利用できる

特に、「構造を考える」練習には余計な機能が少ない方が良いため、
Figmaのシンプルさが初心者には最適なんです。

Step 1：新規ファイルを作ってキャンバスを設定しよう

まずはFigmaでワイヤーフレーム用の作業スペースを用意します。

手順

1. https://www.figma.com/ にアクセス
2. 「New design file」をクリック
3. Frame（Fキー） を選び、サイズを指定

おすすめサイズ

• PCデザイン：1440×1024 px
• スマホデザイン：375×812 px（iPhone 13 など）

フレームは“Webページ全体”のキャンバス。
後から縦に伸ばしてもOKです。

Step 2：レイアウトグリッドを設定する

整ったワイヤーフレームを作るには、グリッド設定が超重要。
要素を“きれいに並べる”基準線になります。

設定方法

1. フレームを選択
2. 右パネルの「Layout grid」→「＋」をクリック
3. 「Columns」に変更
4. 設定値を入力
   • Count：12
   • Gutter：20
   • Margin：80（両端の余白）

これで、Webデザインで一般的な“12カラムグリッド”が完成。
要素をこの線に合わせることで、自然と整ったデザインになります。

5. Step 3：ヘッダー・メイン・フッターの3構成を描く

ワイヤーフレームは大きく3ブロックに分かれます。

[Header]　：ロゴ・メニュー・CTA
[Main]　　：メインビジュアル・コンテンツ
[Footer]　：会社情報・著作権・リンク

作成のコツ

• 長方形（Rキー）でエリアをざっくり区切る
• テキスト（Tキー）で「ここにメニュー」「ここにボタン」などとメモを書く
• 線やアイコンで“構成を視覚化”する

見た目を整えるよりも、「何を配置するか」を言語化することが目的です。

Step 4：コンテンツブロックを整理する

続いて、ページ内の要素をブロックごとに配置していきます。

例：サービスサイトの場合

1. ヒーローセクション（メインビジュアル＋見出し＋ボタン）
2. サービス概要（アイコン＋テキスト）
3. 実績紹介（カードレイアウト）
4. お客様の声（リストや吹き出し）
5. お問い合わせCTA

それぞれを矩形＋テキストで簡単に配置していきましょう。

オートレイアウト（Shift + A）を使うと、
要素間の間隔を自動で揃えられるので、整列がラクになります。

Step 5：UIパーツを追加して“流れ”を確認する

ボタン、カード、ナビゲーションなど、よく使うパーツを組み合わせて
「情報の流れ」が自然かどうかを確認します。

よく使うUI要素

要素	説明
ボタン	Call To Action（例：資料請求・お問い合わせ）
カード	サービス・実績などの一覧に最適
アイコン	見出し横や装飾に使うと情報が整理される
フォーム	入力項目を想定して配置
テーブル	料金表・比較表に活用

ここでは“仮置き”でOK。
デザインに入る前に、ページ全体のリズムを整えることが大切です。

Step 6：テキスト階層を意識して整理する

情報設計のポイントは「階層構造」にあります。

見出しの優先度

H1：ページ全体のテーマ
H2：セクションのタイトル
H3：小見出し・補足説明

例

H1：私たちのサービス
H2：デザインで課題を解決します
H3：Web・印刷・動画制作に対応

フォントサイズや太字だけで階層を区別すると、クライアントにも分かりやすくなります。

Step 7：コメントをつけて構成意図を共有する

Figmaの強みは、コメント機能（Cキー）を使ってワイヤーフレーム上に直接メモを残せる点です。

コメント例

• 「ここはアニメーションで動きをつけたい」
• 「この部分はスマホでは非表示」
• 「画像を入れ替え予定」

これにより、デザイナー・ディレクター・クライアント間の“意図のすれ違い”を防ぐことができます。

Step 8：スマホ版も一緒に作ると理解が深まる

Figmaでは、デスクトップ版 → スマホ版の順で作るのが基本。

手順

1. PC用フレームを複製（Ctrl + D）
2. サイズを 375×812 に変更
3. コンテンツを縦並びにリサイズ

レスポンシブ構造を考える良い練習になります。
余白・フォントサイズ・CTA位置などを調整しながら、
「スマホで見やすいデザイン」を意識してみましょう。

Step 9：完成したらチームと共有しよう

FigmaはURL共有で簡単にレビュー依頼ができます。

共有方法

1. 右上の「Share」ボタンをクリック
2. 権限を「Can view」または「Can comment」に設定
3. URLを共有

Slackやチャットに貼るだけでOK。
クライアントもブラウザ上で確認できるので非常に便利です。

Step 10：デザインへの“橋渡し”として活用する

ワイヤーフレームは、デザインの土台です。
ここが整理されていないと、色や写真を足しても“散らかった印象”になります。

完成後は、

1. 要素の優先順位（情報設計）
2. 配置のバランス（視線誘導）
3. CTAの位置（行動導線）

この3つを見直してから、デザイン段階に進みましょう。

まとめ：Figmaで“設計思考”を身につけよう

ワイヤーフレームは、「考えるデザイン」の第一歩。
色をつける前に、情報の整理と構成の意図を明確にすることが
“伝わるデザイン”への最短ルートです。

この記事のまとめ

ステップ	内容
Step1	新規ファイルを作る
Step2	グリッドを設定する
Step3	ページを3構成に分ける
Step4	コンテンツをブロック化
Step5	UI要素を追加
Step6	テキスト階層を整理
Step7	コメントで共有
Step8	スマホ版を作る
Step9	共有・レビュー
Step10	デザインへ発展させる

デザインの上達は「整える力」から。
Figmaを使って、自分の考えを“見える形”にしていきましょう。

Favorite