Webサイトを制作するとき、いきなりデザインを作り始めるのではなく、まず「ワイヤーフレーム」を作成すると、ページ全体の構成や情報の配置を整理しやすくなります。
この記事では、Figmaを使ってWebサイトのワイヤーフレームを作成する方法を、初心者向けに順番に解説します。
今回は例として、H-dash worksのトップページを題材にして制作していきます。
STEP0：サイトの構成を考える
まず、ワイヤーフレームを作る前に、どのようなページを作るのか、ページ内にどのようなコンテンツを配置するのかを整理しておきましょう。
例として、今回作成する、H-dash worksのトップページでは
以下の要素を配置します。
1. Header（ヘッダー）
2. Hero（ファーストビュー）
3. Learning Roadmap（学習ロードマップ）
4. Portfolio（ポートフォリオ制作）
5. Popular Articles（人気記事）
6. Category（カテゴリー）
8. Latest Articles（最新記事）
9. Footer（フッター）この段階では、細かなデザインや色まで決める必要はありません。
まずは、
「ページの中に何を、どの順番で配置するのか」
を決めておきます。
ワイヤーフレームは、Webサイトの設計図のようなものです。
Figmaファイルの整理方法に決まりはある？
Figmaでワイヤーフレームを作り始める前に、ひとつ知っておきたいことがあります。
それは、
ワイヤーフレームやデザインカンプの配置方法には、すべてのデザイナーが共通して使う唯一の正解があるわけではない
ということです。
例えば、次のような管理方法があります。
方法① Pageを分けて管理する
ページ1
_Wireframe
TOP Page
About Page
Contact Page
ページ2
_Design
TOP Page
About Page
Contact Pageワイヤーフレームとデザインカンプを、FigmaのPageごとに分ける方法です。
方法② ワイヤーフレームとデザインカンプを横並びにする
例えば、同じFigmaPage内で、
Wireframe Design
トップページ [ WF ] [ Design ]
アバウトページ [ WF ] [ Design ]
コンタクトページ [ WF ] [ Design 
のように配置します。
この方法では、ワイヤーフレームと完成したデザインを横に並べて比較しやすいというメリットがあります。
方法③ 同じPage内で縦方向に整理する
例えば、
Wireframe
TOP
↓
About
↓
Contact
Design
TOP
↓
About
↓
Contactのように、制作段階ごとに縦方向へ整理する方法もあります。
では、どの方法を使えばいい？
どれか一つが「正しい」というわけではありません。
Figmaのファイル構成は、
- 自分が管理しやすいか
- チームで共有しやすいか
- 制作工程を把握しやすいか
- ページ数が増えても整理しやすいか
などを考えて決めます。
今回は「Pageを分ける」方法で作成します
この記事では、Figma初心者の方が、
ワイヤーフレーム → デザインカンプ
という制作工程を理解しやすいように、制作段階ごとにPageを分けて作成します。
例えば、以下のような構成です。
ページ01_ワイヤーフレーム
↓
ページ02_デザインカンプこれは「Pageを分ける方法が唯一の正解だから」ではありません。
今回の記事では、制作工程を分かりやすくすることを優先して、この方法を採用しています。
実際の制作現場では、ワイヤーフレームとデザインカンプを同じPage内に配置したり、横並びにして比較したりするなど、プロジェクトやチームによってさまざまな管理方法があります。
Figmaのファイル構成には唯一の正解があるわけではなく、目的に合わせて管理しやすい方法を選ぶことが大切です。
STEP1：Figmaで新しいデザインファイルを作成する
それでは、実際にFigmaでワイヤーフレームを作っていきましょう。
まずFigmaを開きます。
- Figmaを開く
- 「ドラフト」→「Design」をクリックしファイルを新規作成する
新しいキャンバスが表示されたら、左側の「Pages」からワイヤーフレーム用のPageを作成します。
ページの名前を、
ワイヤーフレームとしておきます。
今回の制作では、このページの中にワイヤーフレームを作成していきます。
STEP2：ワイヤーフレーム用のSectionを作成する
次に、今回はページ毎にワイヤフレームとデザインカンプなどを分ける方法で作成するため、
必要ないですがワイヤーフレームを整理するためのSectionを作成します。
Figmaには「Section」という機能があります。
Sectionは、複数のFrameやオブジェクトをまとめて、キャンバス上を整理するときに便利です。
今回は、
「ここからここまでがワイヤーフレーム制作エリア」
という整理のためにSectionを使用します。
ツールバーから「Section」を選択します。
ショートカットは、
Mac：Shift + S
Windows：Shift + Sです。
キャンバス上をドラッグしてSectionを作成します。
Sectionの名前を、
01_Wireframeなど、分かりやすい名前に変更しておきます。
sectionの大きさは、仮で横幅:6000px高さ6000pxとしておきましょう。
SectionとFrameの役割を整理しておこう
ここで、Figma初心者の方が混乱しやすい「Section」と「Frame」の役割を整理しておきましょう。
今回の制作では、
Section
└── WebページのFrameという構造にします。
Sectionは制作エリアを整理するために使用し、実際のWebページはFrameで作成します。
例えば、
01_Wireframe（Section）
└── H-dash works TOP（Frame）という構造です。
もちろんセクションは無しで、そのままキャンバスにフレームを使って、サイト各ページのワイヤーフレームを作成しても大丈夫です。
STEP3：Webページ用のFrameを作成する
次に、Sectionの中にトップページ用のFrameを作成します。
ツールバーから「Frame」を選択します。
ショートカットは、
Fです。
まずはフレームを作ります。ツールバーから「Frame」ツールを選択し、プロパティパネルから適切なデバイスサイズを選択（例：ワイヤーフレーム）します。
なおコンテンツを配置していくとページの高さは変わるため、必要に応じて後から幅や高さは調整します。
Frameの名前を、
（サイト名）＋ TOPに変更します。
ここまで作成すると、レイヤーは次のようになります。
01_Wireframe
└── （サイト名）TOP補足：Frameには分かりやすい名前を付けよう
Frameを作成したら、あとから見ても内容が分かるように名前を付けておきましょう。
このサイトでは、Frame名を半角英数字で統一しています。
例えば、トップページ全体を H-dashworks_TOP、ページ内のセクションを Header、Hero、Learning_Roadmap のように命名します。
命名方法に絶対的な決まりがあるわけではありませんが、名前を統一しておくと、Figma内で目的のFrameを見つけやすくなり、デザインやコーディングに進んだときにも構造を把握しやすくなります。
特にWeb制作では、HTMLやCSSのクラス名などでも英数字を使うことが多いため、Figmaの段階から分かりやすい名前を付ける習慣をつけておくと便利です。
STEP4：レイアウトガイドを設定する
次に、Webページのレイアウトを整えるためにレイアウトガイドを設定します。
作成したFrameを選択してください。
右側のプロパティパネルから、
レイアウトガイド＋を追加します。
初期状態では「グリッド」になっているので、
グリッド
↓
列に変更します。
今回は以下の設定にします。
数
12
種類
ストレッチ
余白
120
ガター
24英語UIでは、
Count
12
Type
Stretch
Margin
120
Gutter
24です。
レイアウトガイドは何のため？
レイアウトガイドを設定すると、Frameの中に縦方向のガイドラインが表示されます。
今回の設定では、左右に120pxの余白を確保し、その間を12カラムに分割します。
イメージすると、
|← 120px →| 12 Columns |← 120px →|という構造です。
このガイドを使うことで、
- テキスト
- 画像
- ボタン
- カード
- セクション内のコンテンツ
などの位置を揃えやすくなります。
余白の120pxの位置には要素を置かないの？
レイアウトガイドの余白「Margin 120」は、「120pxの位置には絶対に要素を置いてはいけない」というルールではありません。
あくまでコンテンツを揃えるための基準です。
例えば、Webサイトのメインコンテンツを、
|←120px→| コンテンツ |←120px→|の範囲に収める設計にすることができます。
ただし、Headerの背景色やHeroの背景画像など、ページ全体に広がる要素はFrameいっぱいに配置することもあります。
つまり、
余白は「要素を置いてはいけない場所」ではなく、「レイアウトを揃えるための基準線」
と考えると分かりやすいでしょう。
STEP5：ページ内のセクションフレームを配置
ここから、トップページの各コンテンツを配置していきます。
今回のポイントは、シェイプツールではなくフレームを使うことです。
私のサイトを例として、トップページフレームの中に、以下のフレームを作成します。
H-dash works TOP
│
├── Header（ヘッダー）
├── Hero（ファーストビューエリア）
├── Learning Roadmap（ロードマップエリア）
├── Portfolio（ポートフォリオエリア）
├── Popular Articles（人気記事）
├── Category（カテゴリー）
├── Latest Articles（最新記事）
└── Footer（フッター）
※見た目で分かりやすいように、各フレームに線をつけています。中身のコンテンツを配置したら消しておきましょう。
なぜシェイプツールではなくフレームを使うの？
シェイプツールは、基本的には「図形」です。
例えば、
- 背景
- カードの背景
- 画像の仮置き
- 装飾
などに使用できます。
一方、フレームは、
他の要素を入れてレイアウトを組み立てるための入れ物
として使用できます。
例えばHeroなら、
Hero（Frame）
│
├── Left Content（Frame）
│ ├── Heading
│ ├── Description
│ └── CTA Button
│
└── Right Content（Frame）
└── Illustrationというように、要素を階層的に整理できます。
さらに後からAuto Layoutを設定したり、レスポンシブを考えたりする場合にもFrameを活用できます。
各フレームの高さを大まかに設定する
まずは細かな文字や画像を配置する前に、トップページ全体の骨格を作ります。
例えば、以下のように各Frameの高さを仮設定します。
Header
100px
Hero
640px
Learning Roadmap
500px
Portfolio
400px
Popular Articles
500px
Category
400px
Latest Articles
500px
Footer
300pxただし、これはあくまでワイヤーフレーム段階での仮の数値です。
実際には、コンテンツ量やデザインによって変わります。
最初からすべての高さを正確に決める必要はありません。
ワイヤーフレームでは「大きさの基準」を持っておく
Webサイトを作るとき、
「Headerは何pxにする？」
「Heroは何pxにする？」
と最初から細かく決めすぎる必要はありません。
ワイヤーフレームでは、
どのくらいの大きさが必要なのかを確認するために、大まかな基準を設定する
くらいで十分です。
例えば、
Header
約80px
Hero
約600〜700px
Section
コンテンツ量に応じて調整といった具合です。
実際のデザインカンプを作る段階で、文字サイズや画像サイズ、余白などを調整しながら具体的な高さを決めていきます。
STEP6：各フレームの中身を作る
STEP5では、Webページを「Header」「Hero」「Learning Roadmap」などの大きなフレームに分けました。
次は、それぞれのフレームの中に、ロゴ・ナビゲーション・見出し・ボタン・画像などの要素を配置していきます。
ワイヤーフレームでは、実際のデザインを完成させるのではなく、「どこに何があるのか」が分かる状態を目指します。
Figmaでは、作りたい要素に合わせて「テキスト」「図形」「画像」などのツールを使い分けます。
ツールの使い分け表
| Webページの要素 | Figmaで使うもの | ワイヤーフレームでの表現 |
|---|---|---|
| ロゴ | テキストツール / 長方形ツール | 「LOGO」などの文字や四角形 |
| ナビゲーション | テキストツール | HOME / ABOUT など |
| 見出し | テキストツール | 見出しの文字 |
| 本文 | テキストツール | ダミーまたは実際の文章 |
| ボタン | 長方形ツール＋テキスト | 四角形＋「詳しく見る」など |
| 画像 | 長方形ツール | 画像の大きさを示す四角形 |
| アイコン | 図形 / アイコン素材など | 必要に応じて簡略化 |
| 区切り線 | 線ツール | セクションなどの区切り |
| カード | 長方形ツール | カードの外形 |
コーディングを意識して配置しよう
ワイヤーフレームを作る段階から、少しだけコーディングを意識すると、後のHTML・CSS制作につなげやすくなります。
ただし、この段階でHTMLのタグやCSSのクラス名まで細かく決める必要はありません。
「どの要素が、どの要素の中に入るのか」
「どこがひとまとまりのコンテンツなのか」
といった、ページの構造を意識して配置してみましょう。
例えばHeaderなら
Header
├── Logo
└── Navigation
├─ HOME
├─ABOUT
├─カテゴリー
├─ポートフォリオ制作
└─お問い合わせHeaderには、主に「ロゴ」と「ナビゲーション」を配置します。
① ロゴ
ワイヤーフレームでは、実際のロゴ画像を用意しなくても問題ありません。
テキストツールで「H-dash works」と入力したり、長方形ツールでロゴの位置を示したりして、ロゴが配置される場所を分かるようにします。② ナビゲーション
ナビゲーションはフレームで作成し、その中に各ナビゲーション項目をテキストとして配置します。
全て配置したらまとめてグループ化をしておきましょう。
以下画像に、私のサイトを例としてそれぞれの要素に使うツールを紹介します
Figmaのワイヤーフレームキットを活用しよう
ワイヤーフレームを作るときは、すべてのパーツを最初から自分で作る必要はありません。
Figmaには、Webサイトやアプリのワイヤーフレーム制作に使えるテンプレートやキットが公開されています。
例えば、Figmaのコミュニティなどで「Wireframe」「ワイヤーフレーム」などのキーワードで検索すると、さまざまなキットを見つけることができます。
必要なパーツをコピーして、自分のファイルに貼り付けて使うこともできます。
今回は「和文ワイヤーフレームキット」のパーツを利用しています。
今回の使用させてもらうキットには、
- ナビゲーション
- ボタン
- フォーム
- 画像のプレースホルダー
- カード
- リスト
- モバイル用のUI
- 各種レイアウト
など、ワイヤーフレームでよく使うパーツがあらかじめ用意されています。
そのため、
「ボタンを作るだけで時間がかかってしまう」
という初心者でも、パーツをコピーして配置することで、ページ全体の構成を考えることに集中できます。
STEP7：レイアウトを整えてワイヤーフレームを完成させる
各フレームに要素を配置したら、ワイヤーフレーム全体を見直します。
ワイヤーフレームでは、デザインの細かな部分よりも、ページの構成や情報の配置、ユーザーが目的の情報へたどり着けるかを確認することが重要です。
ワイヤーフレームのチェックポイント
① 必要なコンテンツが入っているか
② 情報の順番は適切か
③ ページの構造が分かりやすいか
④ ユーザーの導線が自然か
⑤ 要素の配置・優先順位が適切か
⑥ レイアウトに無理がないか
⑦ 実装できる構造になっているか
今回の制作ルール
今回の記事では、以下の考え方でFigmaを使っていきます。
| Figmaの機能 | 今回の用途 |
|---|---|
| ページ | Wireframe・Designなど制作段階を分ける |
| セクション | キャンバス上の制作エリアを整理する |
| フレーム | Webページや各セクションの入れ物 |
| グループ | 必要な場合のみ複数要素をまとめる |
| シェイプ | 背景や装飾など、単純な図形として使用 |
| レイアウトガイド | Webページのレイアウト基準を作る |
このルールで進めることで、単にFigmaの操作を覚えるだけでなく、
「Webページをどのような階層で設計していくのか」
も一緒に理解できるようになります。
まとめ
ワイヤーフレームは、Webサイトの完成したデザインを作る前に、ページの構成や情報の配置、ユーザーがたどる導線を整理するための設計図です。
今回はFigmaを使って、サイトの構成を確認し、SectionやFrameを作成してページ全体のレイアウトを組み立てました。
ワイヤーフレームを作る際は、見た目を細かく作り込むことよりも、「何をどこに配置するのか」「情報の順番は適切か」「ユーザーが目的の情報までたどり着けるか」を考えることが大切です。
また、後のコーディングを意識して、要素同士の親子関係やコンテンツのまとまりを考えておくと、次の工程にもつなげやすくなります。
ワイヤーフレームが完成したら、次は色・フォント・画像・余白などを具体化し、Webサイトの完成イメージとなるデザインカンプを作成していきます。
