レスポンシブデザインの実践

レスポンシブデザイン — Figmaで全デバイス対応を設計する

「デザインはPCで完璧なのに、スマホで見たら崩れている」——この問題はデザイン段階でレスポンシブを意識していないことが原因です。Figmaにはレスポンシブデザインを支援する機能が複数あり、正しく使えばモバイル・タブレット・デスクトップすべてのレイアウトを一つのファイルで管理・確認できます。

このレッスンでは、Constraintsの設定からブレイクポイントごとのフレーム設計、モバイルファーストアプローチまでを体系的に習得します。

レスポンシブ設計 — 4ブレイクポイントとConstraints

---

ブレイクポイントの設計

業界標準の4ブレイクポイント

現代のWebデザインでは、以下の4つのブレイクポイントが標準として広く使われています。TailwindCSSのデフォルト設定とも一致しており、エンジニアとの連携がスムーズになります。

💡 すべてのブレイクポイントをデザインする必要はありません。案件の要件に応じて「モバイル（375px）とデスクトップ（1440px）の2パターン」から始めて、必要なブレイクポイントを追加していくのが効率的です。

Figmaでのブレイクポイント設定

各ブレイクポイントに対応するフレームを作成します。

推奨フレームサイズ:

• ◆モバイル: 375px（iPhone SE相当の最小サイズが基準）
• ◆タブレット: 768px（iPad縦向き）
• ◆ラップトップ: 1024px（一般的なノートPC）
• ◆デスクトップ: 1440px（フルHDの一般的な幅）

フレーム作成のコツ:

1. ◆まず375pxのモバイルフレームでデザインを完成させる
2. ◆Ctrl/Cmd + D で複製し、フレーム幅を768pxに変更
3. ◆Auto Layoutのおかげで多くの要素が自動リフローする
4. ◆崩れた部分を手動修正してタブレットデザイン完成
5. ◆同じ手順で1024px・1440pxを作成

---

Constraints（制約）

Constraintsとは

Constraintsは、親フレームのサイズが変わったときに子要素がどう振る舞うかを定義する設定です。Auto Layoutを使わない場面や、Auto Layout内に固定位置の要素を配置する場面で重要になります。

水平方向のConstraints

垂直方向のConstraints

⚠️ Constraintsは親フレームのリサイズ時のみ機能します。Auto Layoutフレームの子要素のサイズ制御はHug/Fill/Fixedで行い、Constraintsは補助的な役割と理解してください。

---

モバイルファーストの設計哲学

なぜモバイルから設計するのか

日本国内のWebトラフィックの約60〜65%はスマートフォンからです。さらに重要な理由として、モバイルから設計することで「本当に必要な情報だけを残す」思考が鍛えられます。

モバイルファーストの原則:

• ◆画面の制約が情報の優先順位付けを強制する
• ◆小さい画面で機能するデザインは大きい画面でも機能する
• ◆逆（デスクトップファースト）はコンテンツの削減が難しい

モバイルデザインの制約と解決策

---

レスポンシブコンポーネントの設計

ナビゲーションバーのレスポンシブ対応

ナビゲーションはレスポンシブデザインで最も変化が大きいコンポーネントです。

モバイル（375px〜767px）:

• ◆ロゴのみ表示
• ◆ハンバーガーメニューアイコン（右上）
• ◆メニュー展開はオーバーレイ（ドロワー）

タブレット（768px〜1023px）:

• ◆ロゴ + 主要メニュー（3〜4項目）を横並び
• ◆CTAボタンあり
• ◆二次メニューは省略またはドロップダウン

デスクトップ（1024px〜）:

• ◆ロゴ + 全メニュー + CTA + 検索アイコン
• ◆Space betweenで左右端に配置
• ◆ホバーエフェクトあり

Figmaでのバリアントを活用したレスポンシブコンポーネント

ナビゲーションバーをコンポーネント化し、「Size」プロパティで mobile / tablet / desktop の3バリアントを作成します。フレームごとに適切なバリアントを配置することで、デザインの一貫性を保ちながら各ブレイクポイントに対応できます。

💡 Figmaのコンポーネントプロパティを使えば、バリアントを切り替えるだけでナビゲーションの表示パターンを変更できます。スタックコンポーネントをResponsive対応させる最も効率的な方法です。

---

グリッドシステムの活用

Layout Gridの設定

FigmaのLayout Grid機能を使うと、列グリッドを可視化してデザインの整合性を保てます。

設定手順:

1. ◆フレームを選択して右パネルの「Grid」セクションで「+」をクリック
2. ◆グリッドの種類を「Columns」に変更
3. ◆列数・ガター幅・マージンを設定

ブレイクポイント別推奨グリッド:

グリッドに揃えたレイアウト設計

要素をグリッドの列境界に揃えることで、デザインに自然な秩序が生まれます。Figmaの「Snap to grid」機能（Shift + Ctrl/Cmd + ' でグリッド表示）を使うと、要素がグリッドに自動スナップします。

---

実践例: ヒーローセクションのレスポンシブ設計

モバイル（375px）

1. ◆縦スタックレイアウト（垂直Auto Layout）
2. ◆コピーテキスト: H1 28px Bold（2〜3行）
3. ◆サブテキスト: 14px Regular
4. ◆CTAボタン: 幅Fill × Hug（画面幅いっぱい）
5. ◆ヒーロー画像: 幅Fill × 高さ240px（下に配置）

タブレット（768px）

1. ◆テキストとボタン: 中央揃えに変更
2. ◆コピーテキスト: H1 36px Bold
3. ◆CTAボタン: Hug幅に変更（テキストの中央配置）
4. ◆ヒーロー画像: 幅Fill × 高さ360px

デスクトップ（1440px）

1. ◆水平2カラムレイアウト（左: テキスト、右: 画像）
2. ◆コピーテキスト: H1 48px Bold（1〜2行）
3. ◆CTAボタン: Hug幅、左揃え
4. ◆ヒーロー画像: 右カラム全体（Fill × Fill）
5. ◆外枠コンテナ: max-w-7xl（Figmaでは1280px幅フレーム＋余白マージン）

---

🏋️実践ワーク

1. ◆以下の3フレームを作成してください（各フレームはページの上部に横並びで配置）。
   • ◆フレームA: 375px幅（モバイル）
   • ◆フレームB: 768px幅（タブレット）
   • ◆フレームC: 1440px幅（デスクトップ）
2. ◆各フレームにLayout Gridを設定してください（ブレイクポイント別推奨値を参照）。
3. ◆フレームAにヒーローセクションを作成してください。
   • ◆見出し: 28px Bold、「あなたのデザインを次のレベルへ」
   • ◆サブテキスト: 14px Regular、2〜3行の説明文
   • ◆CTAボタン: 幅Fill、高さ48px、背景#6366f1
   • ◆配置: 垂直Auto Layout、Gap 16px、Padding 20px
4. ◆フレームAをベースにフレームB・フレームCに対応したレイアウトに変更してください。
   • ◆タブレット: テキスト中央揃え、ボタンをHug幅に変更
   • ◆デスクトップ: 水平2カラム化（テキスト左 / 画像右）

📝まとめ

レスポンシブデザインはモバイルファーストで設計し、ブレイクポイントごとにフレームを作成してレイアウトの変化を可視化することが重要です。ConstraintsとAuto LayoutのHug/Fill/Fixedを組み合わせることで、コンテナのリサイズに追従するデザインが作れます。グリッドシステムを使うと整合性の高いレイアウトが効率的に作成できます。次のレッスンではFigmaのプロトタイプ機能でインタラクションを実装します。