《綿貫佳祐のFigma思考ラボ｜Vol.2》オートレイアウトは誰のためにあるのか？ ―視点の違いから考える使い分け―

Web制作に携わる人にとって、いまや日々の業務に欠かせない存在となったコラボレーションプラットフォーム「Figma」。一方で、「もっと使いこなしたい」「ほかの人はどう活用しているのだろう」と感じている方も多いのではないでしょうか。

本連載では、Figmaの使い方や、Figmaを軸にしたワークフローを紹介します。ただし、単なる機能解説ではありません。各機能をどう捉え、どんな思考で使いこなしていくのか–––––その“思考”に焦点を当ててお届けします。ときには1人のUIデザイナーとして、ときにはチームの一員として、私がどのようにFigmaと向き合っているのかを共有していきます。

第2回は「オートレイアウト」を使ううえで理解しておきたい、“視点”の違いです。

はじめに：オートレイアウトをめぐる温度差

私自身は、ほぼすべての要素にオートレイアウトを適用してFigmaデータをつくっています。一度慣れてしまうと、これなしではもう作業ができない──それほど頼りにしている機能です。

てっきり誰もが同じ考え方でいるものと思っていたのですが、日頃Figmaについて情報発信をする中で、オートレイアウトに対する「温度感」が人によって大きく異なることに気づきました。SNSでもこの話題になると、たびたび意見が分かれます。

整理してみると、おおよそ次のような違いが存在していそうです。

	いつでもオートレイアウトを使う派	あまりオートレイアウトを使わない派
要素の配置	並び替えやサイズ変更がしやすくなる	例外をつくるときなど自由度が下がる
変更のしやすさ	あとからの入れ替えや 追加・削除がしやすい	大胆なレイアウト変更の際に つくり直しになる
機能そのものの捉え方	オートレイアウトを使わないなら Figmaを使う意味がない	Photoshopなどを使っていた期間が長く、なくても困らない

どちらの意見も、それぞれの経験や制作スタイルに基づいた合理的な判断だと思います。ただ、この温度差を見るたびに、「なぜここまで意見が分かれるのだろう」と興味を持つようになりました。

私が見ている限り、両者の意見はなかなか交わりません。これは、おそらく前提となる立場や考え方が共有されていないからこそ生じている事象なのではないかと感じています。

どちらが正解・不正解という話ではありませんが、Figmaが打ち出している思想や方向性を踏まえつつ、どのように扱うのが効果的なのかを考えてみたいと思います。

なぜオートレイアウトへの意見が分かれるのか

デザイナー個人視点での効率性

まず「使わない派」の方々からよく聞くのは、「デザイナーとしての自分の作業に限れば、オートレイアウトをかけても大きな効率化にはつながらない。特に細かな要素まですべて設定するのは費用対効果が合わない」という声です。

実際、変更が多そうな箇所にオートレイアウトをかける場合と、3つのアイコンを横に並べただけの要素にオートレイアウトを適用する場合とでは、得られるリターンは大きく異なります。すべてに適用しようとすると、設定に時間がかかるわりに効果が薄れていく、いわゆる「限界効用の逓減」が起きてしまいます。

デザイナーが自身の作業効率だけを基準に判断するのであれば、この考え方は十分合理的だと言えるでしょう。

チーム全体視点での効率性

一方で、私がチームで制作する経験を重ねる中で気づいたのは、後工程──つまり実装者の立場から見ると話が大きく変わる、という点です。

実装者からすると、「この程度なら大丈夫だろう」という感覚でつくられた要素は、インスペクタから値が取りづらく、結果として手動で測定する必要が出てきます。一つひとつは些細なことでも、そうした“測れない要素”がデータ全体に点在していると、実装側にとっては想像以上に作業しにくい状態になります。

その積み重ねとして、デザインデータと実装でサイズや余白が微妙にズレてしまうことも起きやすくなり、最終的にはデザイナーも実装者も誰も幸せにならない状況が生まれてしまいます。

もし自分ひとりでデザインから実装まで完結させるのであれば、「オートレイアウトは本当に必要な箇所だけ」という判断でも成立するでしょう。

しかし、多くの現場ではデザイナーと実装者の役割が分かれています。そうした環境では、後工程を担う人のことも考慮して丁寧にデータをつくることが、結果としてチーム全体の幸せにつながるのではないかと感じています。

インターフェースデザインとグラフィックデザインの違い

「もっともよい見え方」の実現可能性

「使わない派」の理由としてもう一つよく挙げられるのが、個別要素の細かな調整や例外的なスタイルを頻繁につくる場合、オートレイアウトや、それを適用したコンポーネントが不便に感じられるという点です。

「適宜調整してもっともよい見え方を実現したいのに、オートレイアウトのような一定のルールに沿った配置だと限界がある」という声も耳にします。

ただ、私の経験を振り返ると、こうした意見が出てくる背景には、インターフェースデザインとグラフィックデザインの違いを意識する必要があるのではないかと感じています。

インターフェースデザインでは、常に「もっともよい見え方」を提供しようとしても、ユーザーが利用するデバイスや環境設定は本当に多様です。そのため、デザイナーがコントロールできる範囲にはどうしても限界があり、すべてのケースで「完璧な見え方」を実現することは現実的に不可能です。

「コードとの親和性」という制約

また、インターフェースは最終的にコードで表現されるため、デザイン段階からコードとの親和性を意識しておかないと、メンテナンス性や拡張性が損なわれてしまいます。

この点で、オートレイアウトによって表現される構造は、CSSでいえばflexやgridと非常に近い考え方になっており、そのままコードに変換しやすいという大きなメリットがあります。むしろ、オートレイアウトでは「できないこと」があるからこそ、それがよい制約や“ガードレール”として働いてくれるとも感じています。

こうした点を踏まえると、最終的にユーザーへ提供するインターフェースの品質を重視するのであれば、漏れのないオートレイアウト適用は非常に重要だと言えるでしょう。

使い分けの判断基準

とはいえ、Figmaでバナーやスライドをつくることもできますし、それによって十分高い品質のものを実現できます。
そのようなケースでは、無理にオートレイアウトを適用する必要はありません。錯視の調整など、視覚的な見え方を最優先する場合は、むしろオートレイアウトを使わないほうがよいこともあります。

スクリーン上に表示するグラフィックデザインをつくっているのであれば、オートレイアウトは必須ではありません。一方で、インターフェースデザインをしている場合は、最終的な出力まで見越して、オートレイアウトは「マスト」と考えておくのがよいでしょう。

実践：オートレイアウトの適用判断フロー

判断のための3つの質問

オートレイアウトをどの程度適用すべきか迷ったときは、次の3つの質問を自分に投げかけてみるとよいと思います。

1. 最終的にコードで実装されるか？
   ⇨YESなら、オートレイアウトが必須となる可能性が高い。
2. レスポンシブ対応や動的なコンテンツ変化があるか？
   ⇨YESなら、細かな箇所までオートレイアウトを適用しておくことで、最終的に大きな効率化につながる。
3. 他のメンバー（特に実装者）がこのデータを使うか？
   ⇨YESなら、オートレイアウト、もしくはそれに相当する情報量で意図を過不足なく伝えることが重要。

ケーススタディ：実際の適用例

カード型のコンポーネント

細かな箇所までオートレイアウトを適用することを推奨します。コンテンツ内容によってサイズが動的に変化するため、オートレイアウトで可変性を正確に表現しておくことで、実装時の仕様が明確になります。

ヘッダーナビゲーション

“無理のない範囲で”のオートレイアウト適用を推奨します。コードで実装され、レスポンシブ対応も必要になります。

ただし、メニュー内容やデバイスごとの細かな条件までは、Figmaデータで完全再現できない場合があるため、可能な範囲で適用するというバランスが大切です。

プレゼンテーションスライド

効果的な部分にのみオートレイアウトを適用すれば十分です。コードに変換されず、固定レイアウトで表示されるため、視覚的な美しさを最優先した配置が適切です。

ただし、ページタイトルやページ番号などフォーマット化しやすい要素にはオートレイアウトをかけておくと作成負荷が軽減できます。

キャンペーンバナー

基本的にオートレイアウトはほとんど不要です。固定サイズの画像として書き出されるため、視覚調整を優先するほうがよい結果につながります。

オートレイアウトの可能性：AIとの組み合わせ

Figma MCPでの実験結果

最近、Figma MCPの性能を検証し、その結果をQiitaに投稿しました。その中でもっともコード品質に影響していたのは、驚くほど単純に「オートレイアウトの有無」でした。

https://qiita.com/kskwtnk/private/f132070f4ece1f2867fc

オートレイアウトが適切に設定されているデザインでは、AIが構造を正確に理解し、かなり高精度なコードを生成してくれます。一方で、オートレイアウトが設定されていない場合、見た目こそ再現されているものの、すべてが絶対配置となり、実用的なコードとは言えませんでした。

実践事例：引越し侍の開発チーム

AIを用いた開発が一般化しつつある今、この特性を活かさない手はありません。実際、私の周囲でも変化が起きています。

弊社が運営する、引越しの比較・予約サービス「引越し侍」では、Figmaデータを構造的に正確につくっていたことが功を奏し、フロントエンド実装の大半をAIに任せられるようになったそうです。

人間とAIではコードを書くスピードの差は圧倒的です。つまり、オートレイアウトの有無が、制作全体のスピードにそのまま跳ね返ってくるとも言えるでしょう。

これからのデザインワークフロー

AI時代において、デザイナーの役割は「実装の前段階として視覚情報をつくる人」から、「意図を構造として正確に伝える人」へとシフトしていくのではないかと感じています。

オートレイアウトは、その“意図の伝達”を明確にする手段の1つとして、今後さらに価値を増していくのかもしれません。

まとめ：自分の立ち位置を理解して選択する

この記事では、オートレイアウトをめぐる意見の違いについて、それぞれが置かれている立場や視点の違いから整理してきました。

ポイントは以下の通りです。

• オートレイアウトの価値は「誰のためのものか」によって変わる
• デザイナー個人の効率性と、チーム全体の効率性は一致しないことがある
• インターフェースデザインとグラフィックデザインでは、適用の考え方が大きく異なる
• AI時代において、構造化されたデザインデータの価値はさらに高まる

大切なのは、「使う・使わない」という二項対立で語ることではありません。自分がどのような立場で、どのような前提でデザインに向き合っているのかを理解したうえで、ケースに応じて最適な選択をしていくことだと思います。

文：綿貫佳祐