こんにちは！
カチコムでデザインを担当しているりゅうちゃんです！
Figmaを学び始めると、必ず出てくる「Auto Layout（オートレイアウト）」。
SNSやYouTubeでは
- 最初から組み込んで設計しよう
- Auto Layoutを積極的に活用しよう
- コンポーネントとセットで覚えよう
ただ、実際にWebサイト制作をしていると、「LP制作でそんなに使う？」「結局、手で調整した方が早くない？」と思ったことがある人も少なくないはずです。
実際、僕自身もFigmaで複数のWebサイトを制作してきましたが、案件によってはほとんど使わないこともあります。
この記事では、Webデザイナーである僕視点で、『なぜAuto Layoutが評価されているのか』『なぜWeb制作では温度差があるのか』『レスポンシブとの本当の関係』について整理していきます。
1. Auto Layoutが”神機能”扱いされている理由
まず前提として、
Auto Layoutはかなり便利な機能です。
Auto Layoutが大活躍する場面といえば
- テキスト量でボタンサイズを自動調整
- 余白を自動管理
- 並び替えが簡単
- レスポンシブ調整しやすい
- コンポーネントとの相性が良い
などがあります。
これらは『SaaS』『アプリ』『UIデザイン』『管理画面』『デザインシステム』では非常に重要な神機能となります。
SaaS(Software as a Service)を例に挙げると、
これは『Gmail』などブラウザ上で使う業務システムやサービスのことで、
『言語変更』『メニュー追加』『カード増減』『権限ごとの表示切り替え』など、
後から画面や機能がどんどん変わっていきます。
つまり、「変更され続ける前提」で設計をする必要があるんです。
そのため、崩れずに再利用もでき管理もしやすいことが重要となります。
そのため、Auto Layoutのような「崩れにくく管理しやすい設計」が重要視されています。
2. HP・LP制作では使い方が分かれる
一方で、コーポレートサイトやLPでは話が変わります。
なぜなら、前者では比較的「完成形が固定」されているからです。
一般的なコーポレートサイトのTOPページ構成を見てみると
- FV（ファーストビュー）
- 悩み・課題解決
- サービスの特徴
- フロー・流れ
- よくある質問
- CTA
- 実績
- お客様の声
- お知らせ
などなど、構成自体はそこまで頻繁に変わることはありません。
さらにWebデザインでは
- 世界観
- 空気感
- 余白
- 視線誘導
- ビジュアル演出
が重要なケースが多いです。
つまり”設計管理”よりも”見せ方”が重視されやすく、
「手で調整した方が早い」こともかなりあります。
実際、僕も最初は「全部Auto Layout化した方がいいのかな」と思っていました。ただ、LP制作では細かな演出調整も多く、結果的に“必要箇所だけ使う”方が制作しやすいケースも多くありました。
3. 「Auto Layout = レスポンシブ対応」ではない
Figma界隈では
「Auto Layoutを使えばレスポンシブができる」
と言われがちですが、Web制作の実務では少し違います。
正確には「崩れにくいUI構造を作れる」です。
実際のWeb制作では、
PC→SP（スマホ）は単純縮小ではありません。
画像のようにSPはHPと比べ「別レイアウト」に近いんです。
そのため多くのWebデザイナーは実務では
1. PCデザイン作成
2. それを参考にSPを別で作成
という流れが一般的です。（僕もそうしてます）
※モバイルファーストでSPデザインから作成するケースもあります
4. じゃあAuto Layoutは不要なの？
もちろん不要ではありません。
むしろWeb制作において部分的にはかなり便利な機能です。
Auto Layoutが活躍するケースをいくつか挙げると、
- ボタン
テキスト変更でサイズが崩れやすいですが、Auto Layout化することで余白の維持が容易になります。 - カードUI
ブログ一覧、採用一覧、サービス一覧など、高さ調整や余白管理に使用することが多いです。 - FAQ
テキスト量の変化に対応するために使用します。 - コンポーネント運用
複数ページにわたる修正反映が圧倒的に楽になります。
特にコンポーネントはWeb制作時に起こる修正対応の救世主となります。
コンポーネントについても、今後別記事で詳しくまとめようと思っています。
以上の通り、実際のWeb制作では
「全部Auto Layout」ではなく「必要な箇所だけAuto Layout」を使用することがかなり多いです。
5. Web制作とUI制作では、Figmaの使い方が少し違う
そもそも、Webサイト制作とUI制作では、Figmaに求めている役割が少し違います。
例えば、コーポレートサイトやLP制作では前述した通り世界観やビジュアルなど
「どう見せるか」が重視されることが多くあります。
そのため、細かなバランスを見ながら、手作業で調整した方が早い場面も少なくありません。
一方で、SaaSやアプリのUI制作では、
同じパーツを繰り返し使うことや、後から機能追加されること。開発との連携など、
「綺麗に見せること」だけではなく「崩れにくく管理しやすいこと」も非常に重要になります。
この違いがあるため、UIデザイン向けのFigma解説をそのままWeb制作に持ち込むと
「管理は綺麗だけど、制作スピードは落ちる」
というケースも実際にあります。
だからこそ、Auto Layoutを”全部に使う”のではなく、
「どこで使うと効果的か」を考えることが大切です。
まとめ
Auto Layoutは便利です。ただし、「全部に使うべき神機能」ではありません。特にWeb制作では、制作スピードやビジュアル調整、コーダーとの連携、世界観づくりの方が重要になることも多くあります。だから大事なのは、「Auto Layoutを全部使えること」ではなく、「どこで使うべきか判断できること」です。
特にレスポンシブでは、「PCをそのまま縮小する」のではなく、「SPで再設計する」という感覚も非常に重要です。そこを理解すると、Figmaをより実務的に使いやすくなります。自分の制作スタイルや案件に合わせながら、無理なく取り入れていくのがおすすめです。
コメント