Figmaオートレイアウトの絶対配置｜バッジを崩さず重ねる実務設定

こんにちは！UIデザイナーのYunyです。

FigmaでUIを組む際、オートレイアウトは欠かせない機能です。
ボタンの余白調整から複雑なカードレイアウトまで、整然としたデザインを素早く構築できます。

しかし、通知バッジや閉じるボタンのように「要素の上に少し重ねたい」場面で手が止まったことはないでしょうか。
オートレイアウトの中にそのまま要素を追加すると、横のテキストや画像が押し出されて全体のレイアウトが崩れてしまいます。

そこで活躍するのが、Figmaの絶対配置（Absolute position）です。
本記事では、絶対配置の基本的な設定場所から、親フレームの伸縮に追従させる制約（Constraints）のルール、実務で頻出する3大パターンの作り方まで分かりやすく解説します。

なぜオートレイアウトで「重ねる」と崩れてしまうのか？

オートレイアウトは、Web標準のFlexbox（フレキシブルボックス）と同じ考え方で設計されています。
フレーム内の子要素に対して「横並び（水平）」または「縦並び（垂直）」の方向性を与え、一定の余白（Gap）を保って順番に並べるのが基本動作です。

この仕組み上、フレーム内にあるすべての要素はレイアウトの専有面積を持ちます。
そのため、アバターの右上に通知用の小さな赤丸を置こうとすると、オートレイアウトはその赤丸を「並列に並ぶ1つの要素」として認識し、隣のユーザー名テキストを横へ押し出してしまうのです。

絶対配置機能が実装される以前は、この課題を回避するために無理な工夫が必要でした。
バッジを配置するためだけに余計なフレームを何重にもネストしたり、マイナスマージンを使って強引に位置を戻したりしていた方も多いのではないでしょうか。

自分自身も過去の実務で、複雑にネストされたフレームを組んでしまい、後からの修正でデータ構造が破綻して手戻りになった経験があります。
絶対配置を活用すれば、不要なフレームのネストを排除し、極めてシンプルな構造で重ね合わせを実現できます。

Figmaの「絶対配置（Absolute position）」はどこにある？基本操作と有効化手順

絶対配置を使いこなす第一歩は、設定アイコンの正確な位置を把握することです。
機能自体は非常にシンプルですが、アイコンの場所が少し控えめなため、初見では見落としやすい位置にあります。

設定ボタンは、オートレイアウトフレーム内の子要素を選択した際、右サイドバーの「Frame」または「Position」プロパティの右上に表示されます。
四角形の上に十字のクロスヘアが重なったようなアイコンが目印です。

1. 重ねたい子要素を選択する: オートレイアウトフレーム内にあるバッジやアイコンを選択します。
2. 位置・サイズ指定欄を確認する: 右サイドバー最上部のプロパティ（X, Y, W, H）を見ます。
3. 「絶対配置」アイコンをクリックする: 欄の右上にある「四角と十字のアイコン（Absolute position）」をクリックします。

アイコンをクリックすると、その要素の枠線表示が通常の水色から青い点線（または制約ライン付きの枠）に変化します。
左サイドバーのレイヤーパネルでも、通常のレイヤーアイコンから「十字マーク付きのアイコン」に切り替わり、絶対配置が有効になったことが確認できます。

絶対配置をオンにした瞬間、その要素は親フレームの整列計算から完全に切り離されます。
キャンバス上でドラッグして好きな位置に動かしても、周囲のテキストやボタンが押し出されることは一切ありません。

また、位置の微調整は矢印キー（カーソルキー）で行えます。
Shift + 矢印キー で10px単位、矢印キー単体で1px単位で移動できるため、アバターのフチにぴったり重なる位置へ正確に配置できます。

レスポンシブでずらさない！「制約（Constraints）」の連動ルール

絶対配置を使った直後に最も多くの人が直面するトラブルが、「親フレームの横幅を変えたら、バッジが変な位置に取り残される」という問題です。
せっかくカードの右上にバッジを置いたのに、カード幅を広げるとバッジだけが左側に固定されたまま動かない現象が起きます。

このズレを防ぐ鍵となるのが、制約（Constraints）の設定です。
絶対配置を有効にした要素は、通常のオートレイアウト設定（FillやHug）ではなく、親フレームのどの端を基準に固定するかという「制約」によって位置が決まります。

右サイドバーの「Constraints」セクションを開くと、上下左右の固定位置を指定するボックスが表示されます。
意図した挙動を実現するために、配置したい場所に合わせて以下の基準を設定してください。

例えばカード右上に閉じるボタンを配置する場合、制約を「Top」かつ「Right」に設定します。
こうすることで、親フレームの横幅をどれだけ伸縮させても、常にカードの「右上端からの距離」が一定に保たれ、美しいレスポンシブ動作が維持されます。

また、親フレーム自体の設定が「Hug contents（中身に合わせる）」か「Fill container（親に合わせる）」かも確認しておきましょう。
親フレームが適切に伸縮する設定になっていれば、絶対配置された要素も意図した基準点に完璧に追従します。

実務で即効！絶対配置を使う3大定番パターン

ここからは、実務のUIデザインで絶対配置を日常的に活用する3つの定番パターンと、具体的な作成手順を紹介します。
いずれもコンポーネント化して汎用的に使い回せる設計です。

1. アバター・ベルアイコンの通知バッジ（右上固定）

ユーザーのプロフィールアイコンやヘッダーの通知ベルに、未読を知らせる赤いドットや数字バッジを重ねるパターンです。
ベースとなるアイコン自体をオートレイアウト化しておくと、最小限の手順で構築できます。

1. アバター画像を用意する: 40×40pxのアバター画像を配置し、フレーム化しておきます。
2. 通知ドットを作成する: 10×10pxの赤い円形シェイプを作り、白で2pxの枠線をつけておきます。
3. アバターのフレーム内に入れる: 作成したドットをアバターのフレーム内へドラッグします。
4. 「Absolute position」をオンにする: ドットを選択し、右サイドバーで絶対配置ボタンをクリックします。
5. 制約を「Top & Right」にする: Constraints（制約）で右上固定を指定します。
6. 右上の角へ配置する: アバターの右上端に少し重なる位置へ移動させます。

ドットの外側に親フレームの背景色と同じ色（白など）で2px程度の枠線（Stroke）をつけておくと、重なった境界がくっきりと見やすくなり、視認性が大幅に向上します。
アバターの画像が変更されても、バッジの重ね位置は常に右上に固定されます。

2. カード右上のフローティングアクション（お気に入り・閉じる）

プロダクト一覧カードの右上にお気に入り（ハート）ボタンを置いたり、モーダルカードの右上に閉じる（×）ボタンを配置する構成です。
カード全体を1つのオートレイアウトフレームで組みながら、ボタンだけを独立して浮かせる手法をとります。

1. カードの土台を組む: カード全体のオートレイアウトフレーム（縦並び・Padding 16px等）を用意します。
2. アクションボタンを作る: 32×32pxの丸型ボタン（ハートアイコン等）を作成します。
3. カードフレーム内に入れる: ボタンをカードのオートレイアウト内へドラッグして配置します。
4. 「Absolute position」をオンにする: ボタンを選択し、右サイドバーで絶対配置ボタンを有効化します。
5. 制約を「Top & Right」にする: Constraintsで右上固定を指定します。
6. 右上の定位置に合わせる: カードの右上端から12pxや16pxの内側余白を開けた位置へ配置します。

この設計の大きなメリットは、カード内のテキスト本文が何行に増減しても、右上のボタン位置がコンテンツ量に影響を受けない点にあります。
タイトルが2行から3行に伸びても、お気に入りボタンは常にカード右上の定位置に留まり続けます。

3. ステータスタグ・リボンの重ね配置（左上はみ出し）

ECサイトの商品カードや記事カードでよく見られる、「NEW」「おすすめ」「SALE」といったラベルをカードのフチに重ねるパターンです。
カードの内側余白を無視して、少し外側へはみ出させるようなリッチな表現も簡単に作れます。

1. ステータスラベルを作る: テキスト・背景色・角丸を組み合わせた「NEW」などのラベルコンポーネントを作成します。
2. 対象カード内へ配置する: ラベルを商品カードや記事カードのフレーム内へ入れます。
3. 「Absolute position」をオンにする: ラベルを選択し、右サイドバーで絶対配置を有効化します。
4. 制約を「Top & Left」にする: Constraintsで左上固定を指定します。
5. カード角にはみ出して配置する: カードの左上角に合わせ、少し外側へはみ出るよう座標を調整します。

少し左上にはみ出させる場合は、X座標やY座標に負の数値（マイナス値）を指定するか、カードの左上角（X: 0, Y: 0）にぴったり揃えます。
絶対配置であれば、カード本体のパディング（内側余白）に干渉されることなく、狙った位置へ自由にレイアウトできます。

重なり順（Z-index）とレイヤー管理のポイント

絶対配置を使う際、もう1つ知っておくべき仕様が「重なり順（スタッキング順序）」のコントロールです。
配置したバッジが画像やテキストの下に隠れてしまい、表面に出てこないトラブルを防ぐ知識を押さえておきましょう。

レイヤーパネルの並び順と表示の優先度

Figmaでは、左サイドバーのレイヤーパネルにおいて「上にあるレイヤーほど画面の手前（前面）」に表示されるのが基本原則です。
絶対配置した要素が他のコンテンツの背面に隠れてしまう場合は、レイヤーパネルでその要素をフレーム内の最上位にドラッグして移動させてください。

また、オートレイアウトフレーム全体の設定としてCanvas stacking（キャンバスの重なり順）が存在します。
オートレイアウトの詳細設定（「…」アイコン）内にある「Canvas stacking」で、以下のいずれかが選択可能です。

• Last on top（デフォルト）: 後から並んだ要素（レイヤーパネルで下にある要素）が手前に重なる
• First on top: 先に並んだ要素（レイヤーパネルで上にある要素）が手前に重なる

通常はデフォルトのままで問題ありませんが、アバターの重ね合わせ表示などと併用する際は、この設定が意図した表示順になっているか確認してください。

エンジニア連携を見据えたレイヤー命名

デザインデータを開発チームへ引き渡す際、絶対配置を使った要素のレイヤー名が整っていると、実装が非常にスムーズになります。
Figmaの絶対配置は、CSSにおける position: absolute; と1対1で対応しています。

レイヤー名を単なる「Frame 12」や「Ellipse 4」のまま放置せず、badge-unread や btn-close のように役割が一目で分かる名前に整えておきましょう。
Dev Mode（開発モード）を参照するエンジニアも、親フレームに対する相対配置関係を迷わずコードへ落とし込めるようになります。

次のステップ：あわせて深掘りしたいFigma設計術

オートレイアウトの絶対配置を習得した後は、オートレイアウト全体の構造設計や、カードUIにおける情報設計をあわせて学ぶことで、コンポーネント設計の完成度が一段と高まります。

オートレイアウトの基本原則やネストの破綻を防ぐルールについては、以下の記事で体系的にまとめています。

Figmaオートレイアウト完全ガイド！崩れないネストと余白設計

オートレイアウトの基礎からネスト構造、余白設計までを体系的に解説した完全ガイド。

また、絶対配置を活用する代表格である「カードUI」の枠線・影・余白のバランス設計については、こちらの解説もぜひ参考にしてください。

カード型UIの設計ルール｜枠線・影・余白の使い分けと情報整理術

カードUIの枠線・影・余白の使い分けと、破綻しない情報設計のルールを徹底解説。

終わりに

最後までお読みいただき、ありがとうございます！

Figmaのオートレイアウトは、並列の配置だけでなく「絶対配置」と「制約」を組み合わせることで、真の柔軟性を発揮します。
通知バッジや閉じるボタンを無理なフレーム分割で作っていた方は、ぜひ今日から絶対配置を取り入れてみてください。

データの構造が非常にシンプルになり、日々のレイアウト調整や修正作業がスムーズになるはずです。