見出し画像

Figmaで作る崩れないレスポンシブデザイン

ライブエスト制作部

レスポンシブデザイン、なんとなく作っていませんか？

スマートフォン、タブレット、PCなど、ユーザーの閲覧環境は年々多様化しています。そのため、レスポンシブデザインは今やWeb制作において欠かせない要素です。

しかし、デザイン段階では

  • PC版だけ作って後からスマホ対応する

  • サイズ変更したらレイアウトが崩れる

  • エンジニアに「これどう動きますか？」と聞かれる

といった経験はないでしょうか。

こうした問題は、Figmaの機能を正しく使えばかなり防ぐことができます。

この記事では、現場でもよく使われる
Figmaでレスポンシブデザインを作るためのコツを紹介します。


まず理解しておきたいレスポンシブ設計の基本

レスポンシブデザインとは、画面サイズに応じてレイアウトを柔軟に変化させる設計のことです。

よくあるブレイクポイントは次のようなものです。

  • SP（スマートフォン）：375px

  • Tablet：768px

  • PC：1200px前後

デザインを作るときは、次のポイントを意識すると実装がスムーズになります。

レスポンシブ設計の基本

  • 横幅は固定ではなく「伸びる前提」で考える

  • 要素の並び替えを想定する

  • コンテンツ幅と余白のルールを決める

例えばPCでは横並びのカードが、スマホでは縦並びになるケースは多いです。

PC
[card][card][card]

SP
[card]
[card]
[card]

この変化を想定してデザインしておくことが重要です。

Auto Layoutを使って柔軟なレイアウトを作る

Figmaでレスポンシブデザインを作る際に最も重要なのが
Auto Layout（オートレイアウト）です。

Auto Layoutを使うと、要素の追加やサイズ変更に合わせて自動でレイアウトが調整されます。

例えば、ボタンを作る場合。

通常のデザインでは文字を変更するとボタンサイズを手動で調整する必要があります。

しかしAuto Layoutを使うと、テキストに合わせてボタンサイズが自動で変わります。

ボタン作成例

Button
 ├ padding: 16px
 ├ horizontal padding: 24px
 └ auto layout: horizontal

メリットは以下です。

  • テキスト変更に強い

  • コンポーネント化しやすい

  • 実装イメージに近い

特にカードUI・ナビゲーション・ボタンなどは、Auto Layoutで作るのがおすすめです。

Constraintsで画面サイズ変化に対応する

もう一つ重要なのが**Constraints（制約）**です。

Constraintsは、親フレームのサイズが変わったときに要素がどう動くかを指定する機能です。

主な設定には次のようなものがあります。

設定動きLeft左に固定Right右に固定Center中央Left & Right横に伸びる

例えばヘッダーのロゴとメニュー。

[Logo]                    [Menu]

設定例：

  • ロゴ → Left

  • メニュー → Right

これにより、画面サイズが変わっても配置が崩れません。

また、検索バーなどは

Left & Right

にすると横幅が伸縮するので便利です。

フレームサイズを変えてレスポンシブ確認する

Figmaではフレームサイズを変更するだけでレスポンシブ確認ができます。

例えばPCデザインを作ったあと、

1200px → 768px → 375px

とサイズを変えることで、要素の動きをチェックできます。

チェックポイントは以下です。

  • テキストが折り返されているか

  • 余白が狭くなりすぎていないか

  • 画像の比率が崩れていないか

この確認をデザイン段階で行うことで、実装後の修正を減らすことができます。

コンポーネント化でレスポンシブ設計を楽にする

Figmaではコンポーネント設計もレスポンシブと相性が良いです。

例えばカードUI。

Card Component
 ├ Image
 ├ Title
 └ Description

これをコンポーネント化しておくと、

  • SP版

  • PC版

  • バリエーション

などを簡単に管理できます。

特におすすめなのがVariants機能です。

Card
 ├ Desktop
 └ Mobile

のように管理すると、デザインの整合性が保ちやすくなります。

まとめ

Figmaでレスポンシブデザインを作るときは、次のポイントを意識することが重要です。

レスポンシブ設計のポイント

  • レイアウトは伸縮する前提で考える

  • Auto Layoutで柔軟なUIを作る

  • Constraintsで配置ルールを設定する

  • フレームサイズを変えて確認する

  • コンポーネント化して再利用する

これらを意識するだけで、実装しやすいデザインを作れるようになります。

レスポンシブデザインは「あとで対応するもの」ではなく、最初の設計段階から考えるものです。

Figmaの機能をうまく活用して、効率的なWebデザイン制作を目指していきましょう。