Figmaでレスポンシブデザインを作る！デバイス別レイアウト設計

Posted on by

なぜ「レスポンシブデザイン」が重要なのか

現代のWebサイトやアプリは、ユーザーが閲覧するデバイスが多様です。
PC、タブレット、スマホ、さらには大型モニターまで。
どんな画面でも快適に見られるデザインが求められます。

そんな時に必要なのが 「レスポンシブデザイン」。
Figmaを使えば、実際の画面幅を意識しながら柔軟にレイアウトを調整できます。
しかも、Auto Layout や Constraints（制約） を活用すれば、
コーディングを意識した“再現性の高いデザイン”が作れるのです。

レスポンシブデザインとは？

レスポンシブデザインとは、1つのデザインファイルで複数の画面サイズに対応する設計手法のこと。

HTMLやCSSでは、メディアクエリ（@media screen and (max-width: ...)）で制御しますが、
Figma上でも「フレーム構造」と「制約設定」で同じ発想を実現できます。

つまりFigmaでの目的は、
「画面幅が変わっても自然に伸縮・再配置されるUIを作る」ことです。

Step 1：デバイス別フレームを準備する

まずはFigmaで、各デバイスごとにアートボード（フレーム）を作成します。
上部メニューから「Frame Tool（F）」を選び、右サイドバーのプリセットを活用します。

デバイスサイズ（px）備考
PC1440 × 1024一般的なデスクトップ向け
タブレット768 × 1024iPadなど縦表示を想定
スマホ375 × 812iPhone 13など標準的な幅

ポイント
フレーム名を Desktop, Tablet, Mobile としておくと、チーム共有時もわかりやすくなります。

Step 2：オートレイアウトを活用して伸縮に強い構造を作る

オートレイアウト（Auto Layout）はレスポンシブ設計の土台です。
ボタン、カード、ナビゲーションなどを柔軟に拡がるUIとして構築できます。

▶ 例：横並びナビゲーション

  1. テキスト要素を3つ作成（「Home」「Service」「Contact」など）
  2. それらを選択し「Shift + A」でオートレイアウト化
  3. Spacing between items を 32px、Padding を 16px に設定
  4. Resizing 設定を「Hug contents」→「Fill container」に変更

これで画面幅を変えても、
メニューが自然に中央寄せ・左右揃えに対応するようになります。

Step 3：Constraints（制約）で位置を固定する

レスポンシブ対応で欠かせないのが Constraints（制約）設定。
これは「画面サイズが変わった時に、どの方向に伸びるか・固定されるか」を定義する機能です。

▶ 設定場所

右パネル → “Constraints” セクション

設定動作例
Left左側に固定される（例：サイドメニュー）
Right右側に固定される（例：CTAボタン）
Left & Right幅が自動で伸縮（例：ヘッダー背景）
Center画面中央に位置固定（例：ロゴ・見出し）
Scale親要素に対して相対的に拡大縮小（例：背景画像）

特に「ヘッダー」「フッター」「背景画像」などは、
Left & Right / Top 固定 の組み合わせで自然に伸びるよう設計します。

Step 4：Grid（レイアウトグリッド）で設計ルールを統一

レスポンシブデザインでは、「どのデバイスでも統一された余白・整列ルール」が重要です。
そのために活用するのが Layout Grid。

▶ 設定例：12カラムグリッド

  1. フレームを選択
  2. 右サイドバー「Layout Grid」→「＋」
  3. Grid type を「Columns」に変更
  4. Count: 12、Gutter: 24px、Margin: 80px に設定

これで、Tailwind CSSやBootstrapと同じ感覚でデザインできます。
タブレットやスマホでは、
それぞれ 8カラム → 4カラム に減らして調整します。

Step 5：ブレークポイントを意識して構成を変える

レスポンシブデザインでは、単純な縮小ではなく「構成の切り替え」が発生します。
たとえば：

コンテンツPCスマホ
メインビジュアル横並び（テキスト＋画像）縦並び（テキスト→画像）
メニュー横一列ハンバーガーメニュー化
カードリスト3列1列

これらをFigmaで再現するには、デバイスごとのフレームでレイアウト変更版を作るのが基本です。

  1. Desktop版を完成させる
  2. Duplicateして「Tablet」「Mobile」版を派生
  3. 必要に応じて要素を縦並びや縮小版に調整

Step 6：ComponentとVariantでデバイス別UIを統合管理

デバイスごとに別レイアウトを作ると、「管理が大変…」という悩みが出てきます。
そこで役立つのが Variant（バリアント） 機能です。

▶ 例：カードコンポーネント

  1. PC用とSP用カードをそれぞれコンポーネント化
  2. 両方を選択 → “Combine as Variants”
  3. Property に「Device（Desktop / Mobile）」を設定

これで1つの「Card」コンポーネント内でデバイスを切り替えられるようになります。
デザインの再利用性が一気に高まり、修正も楽になります。

Step 7：プレビューとミラーで動作確認

Figmaの右上「Present」モードで、実際のレスポンシブ挙動を確認できます。

また、スマホで確認する場合は Figma Mirrorアプリ が便利です。
実機プレビューでタップ・スクロールなどを試すことで、
実際の感覚に近いレスポンシブ体験を確認できます。

Step 8：コーディングを意識した命名と構造

最後に重要なのが、実装との整合性です。
Figma内でレイヤー名・フレーム名をしっかり整理しておくと、
開発者がTailwindやCSSをスムーズに書けます。

Figma要素名対応コード例
section-hero<section class="hero">
container<div class="container mx-auto px-6">
btn-primary<button class="bg-blue-500 text-white rounded-md">

チーム全体で「命名ルール」を共有しておくと、デザイン → コード の変換コストが大幅に減ります。

まとめ：Figmaで“動くように考えるデザイン”を

レスポンシブデザインとは、単に画面を縮めることではなく、情報の優先度を整理することです。

Figmaでは、

  • Auto Layout で柔軟に
  • Constraints で位置固定を制御
  • Grid で整列ルールを維持
  • Variant でデバイス別UIを管理

この4つを使いこなせば、「どんなデバイスでも美しく見えるUI」を自在に設計できます。

コードを意識したデザインをするほど、
開発者にも伝わる“強いデザイン”が生まれます

#Figma #レスポンシブデザイン #UIデザイン #Webデザイン #UXデザイン #Figma初心者 #オートレイアウト #Figma学習 #デザイン勉強 #UI設計 #デザインシステム #TailwindCSS #Web制作