「FigmaでWebデザインをしたい！」
そう思ってFigmaを開いたはいいものの、
真っ白なページを見て何から始めていいのかわかりませんでした。
この記事では、そんな数年前の筆者のように、
Figmaで初めてWebデザインをするときになにからはじめたらいいのかわからない方へ
最初にやるべき3つのことを紹介します。
Figmaを開いたら、最初にやるべきこととは？
Frameで画面を作る
FrameとTextでワイヤーフレームを作る
Auto Layoutで余白を整える
この3ステップを押さえるだけで、迷わずFigmaでのWebデザインがはじめられます。
1.Frameで「画面」を作る
最初にFrameで「画面サイズの土台」を作ることが重要です。
1-1.Rectangle（長方形）ではなくFrame（フレーム）から始める理由
いきなり図形を置いてレイアウトを始める…なんてことはしないでください。
FigmaでWebデザインを始める際は、Rectangle（長方形）ではなく、
必ずFrame（フレーム）を使って画面を作ります。
Webデザインは「画面の中に要素を配置する作業」なので、
まずは画面サイズの土台を作成しましょう。
ではなぜ、Rectangle（長方形）ではなくFrame（フレーム）を使うべきなのでしょうか。
Rectangleはただの図形なので、配置の基準や構造が曖昧になりやすく、
後から要素が増えたときにレイアウトが崩れやすくなります。
一方でFrameは「画面」や「セクション」を管理するための入れ物です。
Frameを使っておくことで、Figmaの強みであるAuto Layoutなどの機能を活用できます。
要素が増えても余白や整列が自動で保たれるため、レイアウトの崩れを気にせず作業を進められます。
1-2.PC版とSP（スマホ）版のレイアウト、どちらを先に考えるか？
2026年のデザイントレンドでは引き続き
モバイルファースト（スマートフォンでの見やすさを優先する）の考えが主流ですが、
デザイン初心者はPC版から作成することをお勧めします。
なぜなら、SP版は狭いレイアウトなので
どこを削るのか？
どこを折りたたむのか？
情報の優先順位は？
などデザイン上級者の判断が必要となり、
PC版で全体を設計して→SP版で優先順位の低い要素を削って縦に積んでいく
という引き算の作業の方が、初心者には簡単だからです。
また、BtoBの場合、PCのほうがアクセス数が多く、PC版から作成することが多いです。
ターゲットに合わせて選ぶ必要があるということも頭に入れておいてください。
1-3.Frameのサイズの決定
最初に画面の最大幅を決めます。
ここで決めるのはユーザーがWebサイトを閲覧するパソコン（モニター）の最大画面のサイズです。
一般的なPC画面の解像度が1920px×1080pxであることが多いため、
PC版なら横幅1400～1920pxの画面サイズのFrameを作り、
その中に要素を配置していきます。
画面の両端には見やすさを考慮して余白を設けるため、
コンテンツ幅を横幅1200px前後で設けると全体設計がしやすくなります。
その際はルーラー（ガイド）やレイアウトガイドで、コンテンツ幅のガイド線を引いておきましょう。
2.Figmaの基本機能を使ってワイヤーフレームを作る
2-1.FrameとTextだけでワイヤーフレーム（骨組み）を作る
いきなり配色を決めたり装飾を入れたりはしないでください。
あくまでワイヤーフレームはWebサイトの設計図です。
最初にやるべきなのは色を決めることではなく、
ページの構造を整理してどんな情報をどのように見せるかを決めることです。
ユーザーがこのWebサイトのどの情報を求めているのかを考え
情報をまとめてユーザーが直感的に操作できるような構造にしなければいけません。
例えば、ユーザーからのお問い合わせをスムーズに案内したいとき、
「お問い合わせボタン」に迷わずたどり着ける導線を意識した構造を
Figmaの基本機能であるFrameとTextツールでグレーのみで作成していきます。
2-2.構造を整理するため、セクションごとにFrameを分ける
まずは画面全体のFrameの中に、
ヘッダー
メインコンテンツ
CTA（ユーザーに起こしてほしい行動に誘導する要素）
フッター
などのセクションごとにFrameを分けて配置していきます。
この時点ではFrameの背景をグレーにするだけで十分です。
次に、各セクションのFrameの先頭にTextツールで見出しを置きます。
見出しは、Textを太字にしたり、Frameに簡単な枠線（Stroke）を適用したり
見出しとわかる程度でOK。
本文や画像を配置する枠も仮置きしていきます。
2-3.ワイヤーフレームの目的は「骨組みを最短で作ること」
大事なのはこの時点で装飾ではなく、
「このページのこの部分に何を掲載するのか」を先に決めることです。
さらに、FigmaのAlign機能で中央揃え・均等配置を駆使して
見やすいワイヤーフレームが短時間で作成できます。
3.Auto Layoutで余白を整える
3-1.Webデザインは余白で9割決まる
初心者のデザインが素人っぽく見える原因の一つに、
「余白が揃っていないこと」があげられます。
例えば、
- 1.要素間の余白がバラバラ
- 2.ボタンの余白が統一されていない
- 3.テキストの量が増減すると崩れる
これを一気に解決するのがAuto Layoutです。
3-2.gap（子要素同士の距離）とpaddingを数字で管理すると一気に整う
Auto Layoutを使うと、要素同士の間隔（gap）や内側の余白（padding）を数値で管理できます。
例えば、
- 1.要素間の余白は80pxで統一する
- 2.ボタンの左右に48px余白を入れる
- 3.テキストの自動改行（成り行き改行）
といったルールが自動で保たれます。
初心者でも一気にプロっぽいレイアウトができるだけでなく、
作成スピードが向上し、なおかつ修正に強いデザインになります。
Frameの役割やAuto Layoutについての詳しい解説は
以前まとめたブログで少しだけ紹介しておりますので、よろしければこちらもご覧ください。
【Figma】セクション・フレーム・グループの違いをまとめてみた
WEBデザインツールFigmaが凄いところをコーダー目線で紹介してみた
まとめ.Figma初心者が覚えるのはこの3つだけで十分
Figmaで最初から装飾を頑張る必要はありません。
Frameで画面を作る
FrameとTextでワイヤーフレームを作る
Auto Layoutで余白を整える
この3つだけを意識して、まずは1ページのワイヤーフレームを作成してみてください。
ここまでできれば、Figmaの基礎はもう十分身についています！
そこから少しずつ「フォント」「色」「コンポーネント」などデザインのルールを設定して
迷わないように効率よくデザインをすすめましょう。
