こんにちは。UI/UXの最前線で戦う皆さん、今日も画面と向き合っていますか？
Figmaの「Auto Layout」は、もはや単なる整列ツールではありません。それは、私たちが頭の中で描く「動的なインターフェースの論理」をそのまま実装へ落とし込むための、強力な「レイアウト・エンジン」です。
今回は、その中でも特に扱いが難しい「絶対配置（Absolute Position）」について、現場の知見を詰め込んで解説します。これをマスターすれば、今まで「重なり」を表現するために泣く泣くAuto Layoutを解除していた、あの不毛な作業から解放されますよ。
—
1. 絶対配置（Absolute Position）とは何か？
従来のAuto Layoutは、要素を「積み木」のように隣り合わせに並べるのが基本でした。しかし、UIには必ず「枠からはみ出す要素」が存在します。
- 従来のAuto Layout: すべての要素が「フロー（流れ）」の中にあり、お互いに影響し合う。
- 絶対配置: 親フレームの「左上（0,0）」を原点として、フローから完全に切り離して自由に配置する。
つまり、「親のルールには従うけれど、位置関係は無視して好きな場所に浮遊させる」という魔法のような機能です。
—
2. 実践！現場で輝く3つのユースケース
絶対配置の真価は、以下の3つのパターンで発揮されます。
① 未読バッジ（Notification Badge）
アバターアイコンの右上にちょこんと乗る赤い点。これをAuto Layoutだけでやろうとすると無理が生じますが、絶対配置なら一瞬です。
- コツ: 親フレーム（アバター）を選択し、右上の「Absolute Position」アイコンをクリック。あとは座標を微調整するだけです。
② フローティング・アクション・ボタン（FAB）
画面の右下に常に浮かんでいるボタン。これもコンテンツのスクロールに関係なく位置を固定できるため、絶対配置が適しています。
③ 重なり合うユーザーアイコン（Stacking Avatars）
チームメンバーのアイコンを少しずつ重ねて表示するUI。
- 実装: 親フレームにAuto Layoutを適用しつつ、各アイコンを「絶対配置」にするか、あるいは「負の余地（Negative Spacing）」と組み合わせて制御します。
—
3. レイアウト崩れを防ぐ「極限の知見」
絶対配置は強力ですが、乱用すると「レスポンシブで崩壊する爆弾」になります。「なぜ崩れるのか？」を理解し、防ぐための3つの鉄則を授けましょう。
鉄則1：親フレームの「Clip Content」を使いこなせ
絶対配置した要素は、親フレームの境界線を無視して配置されることがあります。デザインの意図しない場所まで要素がはみ出ないよう、親フレームの「Clip Content（コンテンツをクリップ）」に必ずチェックを入れてください。これが「事故」を防ぐ最初の一歩です。
鉄則2：座標の「アンカー（基準点）」を意識する
絶対配置の右側のパネルを見てください。四隅の角が選択できるようになっていますよね？
- 右下に配置したいなら、右下のアンカーを選択する。
- これをしておかないと、画面サイズが変わった時に、左上からの距離を保ったまま要素が宙に浮いてしまいます。アンカー設定は「親のどの角に従うか」の宣言です。
3. 「絶対配置」に頼りすぎない勇気
これが最も重要なアドバイスです。「Auto Layoutだけで解決できるなら、絶対配置は使うな」。
絶対配置を使うのは、あくまで「フローのルールから外れる必要がある時」だけです。可能な限り Auto Layout の `Space between` や `Padding` で制御する方が、後から仕様変更が入った時の柔軟性が段違いに高くなります。
—
まとめ：最初の一歩を踏み出そう
Figmaの操作に慣れていない方は、まずは簡単な「HelloWorld」として、以下の手順を試してみてください。
1. フレームを1つ作る（これが親要素）。
2. その中に円（アイコン）を置く。
3. 円を選択した状態で、プロパティパネル右上の「Absolute Position」アイコンをクリック。
4. 右側のパネルで「右上のアンカー」を選択し、適当に数値を調整してみる。
5. 親フレームのサイズをドラッグで変えてみる。
いかがですか？ 親が動いても、バッジが右上に追従するはずです。
これが理解できれば、あなたのデザインは「静止画」から「システム」へと進化します。最初は少し癖があるかもしれませんが、慣れてしまえば、これほど強力な武器はありません。
さあ、ツールを触って、手を動かしてみましょう。あなたのUIが、より美しく、より論理的なものになることを楽しみにしています。
質問があればいつでもどうぞ。共に最高のものを作り上げていきましょう！