Figmaでフレームの作成とレイアウトガイド

UIデザインでは、最初に 画面サイズ（フレーム） を正しく作ることがとても大切です。
スマホ・タブレット・PC それぞれの幅や画面構成を理解しておくことで、レスポンシブ前提のワイヤーフレームや UI を作りやすくなります。

また、レイアウトを整えるために レイアウトガイド（グリッド） を使うことで、より正確で見やすいデザインが作れるようになります。

Contents

1. フレームの作り方（SP / タブレット / PC）

まずは、Figma のフレームツールで 画面サイズを3種類 作る練習をします。

ツールバーのフレームを選択
右側パネルに「デバイス一覧」が表示される
下記のデバイスをそれぞれ1つずつ作成する
- iPhone 16 （スマートフォンサイズ）
- iPad / Tablet（タブレット）
- Desktop（パソコンサイズ）

キャンバスに 3つのフレームを横に並べて 配置します。
これで、スマホ → タブレット → PC の構造比較がしやすくなります。

次に、フレーム内のレイアウトを整えるためのレイアウトガイド（Layout grid） を追加します。

レイアウトグリッドには以下の種類があります。

細かい作業向け。パーツのズレを防げる。→ 4px / 8px グリッド が UI では基本。

LP や Web サイトのデザインに使う、縦方向の「カラムレイアウト」。
スマートフォンが4列・タブレットが 8列・PCが 12 列が一般的。

横方向のガイド用。バナーやキービジュアルなどの高さの調整や、セクション区切りに便利。

さらに細かい位置合わせや、特定の区切りが必要な場合は定規（Ruler）とガイド（Guide） を活用します。

メニュー → 表示 > 定規（Shift + R）フレームの外側にメモリ付きの定規が出ます。

定規から ドラッグ → ガイド線が出現配置したい位置まで移動します。

ガイドを選択 → 右側パネルに 位置（X/Y） が表示数値を入力して、ぴったりの位置に移動可能。