TH01-19
「デザインの4原則は理解した。でも、修正のたびに要素を動かして余白を測り直すのは時間がかかる……」
そんな悩みを解決するのが、Figmaの「オートレイアウト（Auto Layout）」です。
この機能を使いこなせば、4原則を「意識して守る」状態から「システムが勝手に守ってくれる」状態へと進化できます。
目次
【近接】を数値で固定する
オートレイアウトの基本は、要素間の「余白（Gap）」を数値で定義することです。
- ロジック：見出しと本文を一つのオートレイアウト枠に入れ、Gapを8pxに設定します。これにより、テキスト量が増減しても「近接」のルールが常に保たれます。
- 手動で配置する隙をなくすことで、感覚に頼ったバラバラな余白を根絶できます。
【整列】を「設定」で強制する
オートレイアウト枠内の「パディング（Padding）」と「整列（Alignment）」を使えば、要素は常に完璧な位置に吸着します。
- 左揃えの徹底：枠内の設定を「左上」に固定すれば、新しい要素を追加しても自動的に左端が揃います。
- 中央揃えの安定：バナーなどの構成で「中央軸」を外したくない場合も、設定一つで1pxの狂いもなく中央を維持し続けます。
【反復】をコンポーネントで量産する
オートレイアウト化した要素を「コンポーネント」化することで、反復の効率は最大化されます。
- 一貫性の自動化：一つのボタンコンポーネントを修正すれば、サイト内のすべてのボタンの余白や整列が同期されます。
- リストの作成：カード型のUIをオートレイアウトで並べれば、要素を複製（Cmd+D）するだけで、一定の間隔を保った「反復」が完成します。
【対比】を「変数値（Variables）」で管理する
Figmaの「Variables」や「Styles」を使えば、対比のロジックを定義できます。
- サイズ比の固定：見出しを「Title/Large」、本文を「Body/Medium」と定義しておくことで、後から「対比が弱いから全体的にサイズ差を広げよう」といった調整も一括で行えます。
ツールはロジックの「補助輪」
本サイトの原則において、Figmaの機能はあなたの理性をサポートする強力な味方です。
- オートレイアウトで近接・整列を物理的に固定し、
- コンポーネントで反復をシステム化し、
- スタイル管理で対比を制御する。
ツールを正しく設定して活用することは、デザインの品質を担保する「仕組み」を作ることと同義です。