はじめてのFigma④｜レイアウトのベースを作ろう

「デザインがうまくまとまらない…」
「バナーを作ったけど、なんだかバランスが悪い…」

そんなときにカギになるのが、レイアウトのベース作り です。

今回は、Figma初心者が最初に覚えておきたい「レイアウトの土台を整える基本ステップ」を解説します。

関連

はじめてのFigma①｜知っておきたい基本と使い方

🎨 レイアウトのベースとは？

レイアウトのベースとは、デザイン全体の配置ルールや間隔の基準を決めること。

この段階で土台を整えておくことで、後から要素を追加してもバランスが崩れにくく、見やすく整ったデザインに仕上がります。

特にWebデザインやUIデザインでは「グリッド」や「フレーム」「オートレイアウト」などを活用するのが基本です。

オートレイアウトは次回にしっかりと説明する予定なので今回は割愛します。

🧩 Step1｜フレームを使ってキャンバスを整えよう

まずはフレームツール（Fキー）を使って、デザイン全体の枠を作ります。

ツールバーの左から2番目の「フレーム（F）」アイコンを選択

画面サイズに合わせてキャンバスを設定（今回はandroid）

名前を「Main-Aria」などに変更

💡ヒント：フレームはPhotoshopの「アートボード」、Illustratorの「カンバス」に近い存在です。

🧱 Step2｜列を設定して整列の基準を作ろう

フレームを選択した状態で、右側のパネルから「Layout Grid（レイアウトグリッド）」を設定します。

レイアウトガイドという項目の右側にある＋をクリックし、グリッドの横の▿をクリック。

「列」をクリック。

数はピンクのガイドの本数。今回は６本で設定。

余白は両端（左右）の余白の設定。今回は10に設定。

ガターというのはCSSで言う所のgap。列の間のすき間（溝）を設定。今回は16で設定。

• 要素間隔：8px刻み（8, 16, 24, 32pxなど）
• 余白（Padding）：テキストサイズの約1.5倍

などと巷では言われているのでそんな感じで。

今回は説明なのでざっくりといっています。（後々変更できるので大丈夫）

レイアウトガイドスタイルとして登録する場合は、「レイアウトガイド」という項目横の◎が４つ積み重なったマーク（スタイルを適用）をクリックし、「レイアウトガイドスタイル」項目の横の＋をクリック。

「新しいレイアウトガイドスタイルを作成」の名前（好きな名前でOK)を設定して「スタイルの作成」をクリックすると登録されます。

他の設定

Grid（グリッド）：網目状（方眼）で慣れたら使いやすいが細かいのでパーツつくりに最適。

行：横線（まぁ、ここらはお好みで）

🧭 Step3｜画像などのおおまかな配置場所をざっくり決めよう

正方形ツールを使ってざっくりと、header、main、section、footerなどを作ろう。

この作業をする前に手書きでざっくりとしたWebページのレイアウト（コンテ）を書いておくとイメージしやすいです。

デザインが「詰まりすぎ」または「スカスカ」に見える原因の多くはスペーシング（要素間の距離）にありますが、中に入れるテキストなどにもよるので最初は作り方を覚えましょう。

🧱 Step4｜左メニューのレイヤーの名前を変更しておこう

各エリアの名前を変更しておくと操作しやすいです。

チームで開発する場合などは必須ですね。

✨ Step5｜テキストを挿入しよう

メニューバーの「T」をクリックし、テキストを入れたいところの上端をクリックしたままドラッグしてテキストボックスを作る。

📘 まとめ：レイアウトのベースは「デザインの骨格」

この表のオートレイアウトと背景設定は後日書きます。

が、こんな感じで作業するよーって感じで覚えておいてください。

次回はパーツ作りをアップ予定。

ここで無料の初回カウンセリング受けた後、会員登録すると無料でFigmaの基本操作コースがついてくるのでおススメです。これからのデザイン業界はFigmaに移行していくと思うので今のうちに勉強しておきましょう。この無料コースでも30分ぐらいの動画と長いテキスト（図と余白が多くて見やすいです）ついているので、普通にFigmaが使えるようになるボリュームでした。まったく勧誘もないです。メールが一通くる程度。有料講座は添削付きで本気で副業や転職をしたい人は要チェック！

関連

【未経験からプロのWebデザイナーへ】Fullme（フルミー）で学ぶオンラインデザインスクールの魅力