Figmaオートレイアウトの使い方｜余白・伸縮・折り返しを練習する

※本記事にはPRを含む場合があります。

こんにちは。『脱会社員』脱サラを応援し続けるブログ、運営者の『なかびー』です。

Figmaのオートレイアウトは、要素の並び方、間隔、内側の余白、幅や高さの変わり方をルールとして持たせる機能です。ボタンの文字を長くしたら背景も伸びる、カードの幅を狭めたら文章が折り返される、といった動きを作れます。ただし、機能を付けるだけであらゆる画面が自動的に整うわけではありません。親と子のどちらが寸法を決めるかを考えることが大切です。

この記事では、短いボタン、情報カード、カード一覧の順に練習しながら、Hug contents・Fill container・固定サイズ、入れ子、折り返しを理解します。完成した見た目だけをまねるのではなく、文字量や画面幅を変えても説明できる構造を目指しましょう。Figma Designの編集権限がある練習用ファイルで進める想定です。

機能の名称と仕様は2026年10月3日に確認したFigma公式資料を基にしています。画面の配置や利用できる項目は更新によって変わるため、表示が違う場合は選択中のレイヤーと公式ヘルプを確認してください。図版は仕組みを説明する生成イメージで、公式画面のスクリーンショットではありません。以下のカード名や数値は学習用の架空例で、実案件の成果や標準値を表すものではありません。

オートレイアウトの基本｜親・子・方向・余白を理解する

座標を並べる方法から、関係を決める方法へ変える

通常の配置では、図形や文字を好きな座標へ動かして見た目を整えられます。ところが文章が一行増えたり、ボタンが一つ追加されたりすると、他の要素も手で移動する必要が出てきます。オートレイアウトでは、一定方向へ並べる、間を空ける、端から余白を取るといった関係を設定します。変更後の位置を一つずつ直す代わりに、動き方を先に決める考え方です。

例として、見出し、説明文、ボタンを縦に置くカードを考えます。説明文が長くなったら、ボタンが下へ押し下げられ、カード全体も高くなる構造なら、文章を変更しても重なりにくくなります。一方、カードの高さを固定する必要があるなら、説明文をどこまで表示するかなど別の判断が必要です。自動に任せる前に、何が変わり、何は変えてはいけないかを書き出します。

オートレイアウトはデザインの意味まで判断する機能ではありません。価格を隠してよいか、ボタンを次の行へ送ってよいか、重要な文章を省略してよいかは、作り手が決めます。見た目が崩れなくても、情報の優先順位が伝わらなければ目的を満たしません。練習では、まず簡単な内容に絞り、配置の仕組みと情報設計の判断を分けて学びましょう。

親フレームと、その直下の子を区別する

オートレイアウトを考えるときは、選択している要素が「親」なのか「子」なのかを最初に見ます。親フレームは、その中の子をどう並べるか、どのくらい余白を取るかを決めます。子は、親の中でどの幅や高さを持つかを設定します。一つのフレームが、外側から見れば子、内側から見れば親になることもあります。ここが入れ子を理解する出発点です。

キャンバスを何度もクリックすると、文字や背景など意図しないレイヤーを選ぶことがあります。左側のレイヤー一覧を開き、階層のどこが選ばれているかを確認してください。背景に見える長方形を選んでいるのか、カード全体のフレームなのかで、右側に出る設定は違います。項目がないときは、機能が消えたと考える前に選択対象を見直すと解決することがあります。

公式のオートレイアウトのガイドでは、親と子のサイズの関係や各プロパティーが説明されています。練習用ファイルでは「カード」「本文まとまり」「ボタン」のように役割が分かる名前を付けましょう。「Frame 37」が増える状態より、どの階層を調べればよいかを判断しやすくなります。

※表は横にスクロールできます。

横・縦の方向と、gap・paddingを分けて覚える

方向は、子を主に横へ並べるか、縦へ並べるかを決めます。横方向はアイコンとラベル、横並びのボタンなどで考えやすく、縦方向は見出しと本文、一覧の行などで使いやすくなります。一つのフレームにすべてを置く必要はありません。縦に並べるカードの中に、横に並べるボタン行を入れれば、異なる方向を組み合わせられます。

gapは子同士の間隔、paddingは親の境界と中身の間の余白です。見出しと本文の間を広げたいのにpaddingを変えると、カードの外周ばかり広がることがあります。逆に、枠の端と文字が近すぎるなら、子同士のgapだけでは解決しません。どの二つの境界の間を変えたいかを言葉にすると、操作する項目を選びやすくなります。

最初は見た目の感覚だけでドラッグせず、分かりやすい仮の数値を入れて変化を観察します。たとえばgapを8から16へ変えた場合、どの間隔が変わったかを確認します。この数字は練習用で、デザインの正解ではありません。変化する場所を理解してから、読みやすさや周囲の構成に合う値へ調整すると、理由を持って余白を扱えるようになります。

追加・解除は練習用の複製で試す

基本の追加方法は、対象レイヤーを選び、右クリックの追加項目やShift＋Aを使う方法です。既存の複数要素へ適用すると、選択した内容が新しい親へまとめられることがあります。適用直後は見た目だけでなく、レイヤー一覧がどう変わったかを見てください。意図した要素だけが同じ親に入っているかを確認すると、後のサイズ調整が分かりやすくなります。

複雑な画面へ一度に適用して、全部が思いどおりになることを期待しないでください。まずボタン一つ、次に本文のまとまり、最後にカード全体という順で、意味のある単位ごとに作ります。自動提案を利用する場合も、提案された階層や方向が目的に合うかを確認します。見た目が近くても、長い文章や項目追加で破綻する構造が残ることがあります。

解除や大きな組み替えを試すときは、元のフレームを複製して比較用に残します。これは本番ファイルを無制限に増やすという意味ではなく、練習中の違いを観察するためです。「適用前」「縦並び」「幅変更テスト」のように名前を付ければ、どの設定がどの動きにつながったかを比較できます。理解できたら、不要な試行を整理して完成形を明確にしましょう。

ボタンでHug・Fill・固定を練習｜幅と高さを別々に決める

文字に合わせて伸びるボタンを一つ作る

最初の課題は、文字に合わせて幅が変わるボタンです。テキストで「詳細を見る」と入力し、その文字を選んでオートレイアウトを追加します。新しい親フレームに背景色を付け、左右と上下のpaddingを設定してください。背景用の長方形を別に重ねるより、親フレーム自体へ塗りを付けると、文字と背景の関係が単純になります。

学習用の仮設定として、左右16、上下10の余白を入れます。親の幅と高さを中身に合わせる設定にし、「詳細を見る」を「サービスの詳細を見る」へ変えてみます。背景が文字の長さに合わせて伸び、外周の余白が保たれるかを見ましょう。数値は操作を観察するための例であり、実際のボタンサイズや押しやすさを保証するものではありません。

公式のボタン作成のチュートリアルにも、ラベルへオートレイアウトを適用し、中身に合わせてフレームを伸縮させる例があります。本記事の練習では、コンポーネント化や状態の設計を急がず、まず文字量が変わったときの幅を理解します。部品を再利用する仕組みと、配置を伸縮させる仕組みは分けて覚えると混乱しにくくなります。

Hug contents・Fill container・固定の判断を言葉にする

Hug contentsは中身に合わせる、Fill containerは親の利用可能な領域へ広げる、固定は指定した寸法を保つ、と考えると入り口が分かりやすくなります。ただし、どの設定が使えるかは選択対象と階層によります。特にFillは親との関係が必要なので、キャンバス上の最上位フレームへ同じ感覚で設定できるとは限りません。

文字の長さに応じて伸びる単独ボタンなら、中身に合わせる考え方が向いています。スマホ画面の横幅いっぱいに置く送信ボタンなら、親の幅へ広げる考え方が候補になります。アイコンを一定の大きさで保つなら、固定が分かりやすくなります。同じボタンでも、置く場所と役割が変われば適切な幅の決め方が変わるため、名前だけで暗記しないでください。

幅と高さは独立して考えます。横幅は親に合わせ、高さは文字の行数に合わせる構成もできます。両方をまとめて「自動」と呼ぶと、どちらの方向で問題が起きているか分からなくなります。練習では「幅は親、高さは中身」のように読み上げ、実際に横幅を変えて確かめましょう。見た目だけでなくルールを説明できれば、別の部品にも応用しやすくなります。

※表は横にスクロールできます。

親の幅を決めてから、Fillの動きを見る

Fillを試すときは、まず外側に幅が決まったフレームを作り、その中へボタンを入れます。外側へオートレイアウトを設定し、子のボタンが親の内側へ広がるようにします。外側のpaddingを変えると、ボタンが使える幅も変わることを確認してください。親がどれだけの空間を提供しているかが分かると、Fillの動きが理解しやすくなります。

「親は子の大きさに合わせたい」「子は親いっぱいへ広がりたい」を同じ軸で同時に求めると、寸法の基準が曖昧になります。Figmaが設定を切り替える場合もあるため、操作後に親の幅の設定を読み直してください。値が変わったことを不具合と決めつけず、どちらが基準になるべきかを考えます。外側の幅を固定する、内側を中身に合わせるなど、役割を分担させましょう。

練習では外側の幅を広い状態から狭い状態へ変え、ボタンの端と親のpaddingがどう動くかを見ます。文字が長すぎる場合は、折り返すのか、一行を保つのか、幅を広げるのかを別に決める必要があります。Fillを付ければ長文問題がすべて消えるわけではありません。表示できる範囲を超えたときの扱いまで考えると、実際の画面に近い練習になります。

固定サイズを使う場面と、手動変更の影響を確認する

固定サイズは悪い設定ではありません。アイコン、一定の画像枠、比較対象の基準寸法など、変わってほしくないものに役立ちます。ただし文字を含む部品の高さまで固定すると、文章が増えたときに中身が収まらないことがあります。固定にする理由を確認し、その制約の中で何を優先するかを決めましょう。

キャンバス上で幅をドラッグしたり、数値欄へ直接寸法を入れたりすると、伸縮の設定が固定へ変わることがあります。「さっきまで文字に合わせて動いていたのに、動かなくなった」という場合は、直前の操作と現在の幅・高さの設定を見ます。形を見た目で整えた操作が、ルールの変更になっている可能性を意識してください。

三つのボタンを並べ、短い文字と長い文字を入れ替える練習も有効です。一つは中身基準、一つは親基準、一つは固定にし、同じ文章を入れて結果を比較します。どれが美しいかだけでなく、どの条件で収まらなくなるかを観察します。失敗した状態を残して原因を書いておくと、正しい見本を見るだけより理解が深まりやすくなります。

カードで入れ子と折り返しを練習｜情報のまとまりを構造にする

見出し・本文・ボタンを小さなまとまりから作る

次の課題は、架空のオンライン講座を紹介するカードです。見出し、短い説明、所要時間、詳細ボタンを用意します。最初に見出しと説明を縦のまとまりにし、次に所要時間と補足ラベルを横のまとまりにします。その二つとボタンを、カード全体の縦方向フレームへ入れると、関係が整理しやすくなります。

見出しと説明のgap、本文まとまりとボタンのgap、カードの外周paddingを別々に調整します。すべての余白を一つの数値で扱う必要はありません。同じ意味のまとまりは近づけ、異なる役割の区切りは少し離すなど、情報の関係を余白へ反映します。数値の美しさだけでなく、どこまでが一つの内容かを読み取れるかを確認しましょう。

階層は細かければよいわけでもありません。一つの文字だけを意味なく何層も囲むと、選択や修正が難しくなります。「このフレームは何を一緒に動かすためか」を説明できる単位にします。方向、余白、背景、伸縮などを一つのまとまりとして扱う必要があるところに親を作ると、入れ子が機能のための構造になります。

本文の幅と高さを変え、カードを伸ばす

カードの本文は、幅が狭くなると行数が増えることを前提にします。子のテキストが親の幅を使える設定か、高さが文章に合わせて増える状態かを確認してください。見出しだけを伸ばしても、その外側の本文フレームやカードが固定高さなら、途中で重なったり切れたりすることがあります。内側から外側へ一段ずつ見ます。

公式のレスポンシブなカードの作成例では、テキストと親の幅の関係を確認する練習が示されています。この記事の課題では、まず全文を見せるカードを作り、本文を一文から三文へ増やしてみます。文章が増えた分だけカードが高くなり、下のボタンが重ならず移動するかを観察しましょう。

すべてのカードを同じ高さへそろえる必要がある場合は、別の仕様判断が必要です。本文を省略してよいか、行数を制限するか、下部のボタン位置をそろえるかを決めます。重要な料金や条件まで切り捨てると、見た目が整っても情報が欠けます。オートレイアウトの操作だけで決めず、そのカードを使う人が判断に必要な内容を読めるかを優先してください。

※表は横にスクロールできます。

タグの折り返しは、親の境界と二方向の間隔を見る

タグを複数並べる練習では、横方向の親フレームを用意し、幅の違う短いラベルをいくつか入れます。折り返しを有効にして親の幅を狭めると、入らない子が次の行へ送られる動きを確認できます。タグ同士の横のgapと、折り返した行の間隔は別に考えてください。一行目が整っていても、二行目になると詰まりすぎることがあります。

公式の横・縦方向のフローの説明では、現在は両方向でWrapが扱われています。横方向は次の行、縦方向は次の列へ流れる考え方です。古い記事を見て「折り返しは横だけ」と決めつけず、手元の版と公式案内を照合しましょう。本記事の練習は、分かりやすい横並びのタグから始めます。

折り返しの親が中身に合わせて無制限に横へ伸びる構成では、期待した場所で改行されないことがあります。親の幅に境界があるかを確認し、その範囲に子を収める設計へ変えます。また、一つのタグ自体が親より長い場合は、タグ内部のテキストの扱いが別問題になります。行が増える問題と、一要素が長すぎる問題を分けて考えましょう。

装飾や重なりは、通常の並びと区別する

カードの右上へ小さなバッジを重ねるなど、通常の並びから外したい要素もあります。すべてを同じ流れに入れると、バッジが一段を占めたり、本文の位置を押し下げたりすることがあります。その要素が情報の並びに参加するものなのか、別の位置へ重ねるものなのかを先に判断してください。

並びの計算から外す設定を使う場合は、対象の位置と親の境界を確認します。自由に動かせるからといって、長文や狭い幅で本文へ重ならない保証はありません。装飾を追加した後は、バッジの文字が長い場合、カードの幅が狭い場合、画像がない場合を再テストします。固定の位置へ置いた要素ほど、通常とは違う条件で確認する必要があります。

練習段階では、まず装飾なしのカードを完成させ、複製してからバッジを加えると比較しやすくなります。装飾を消すと問題がなくなるなら、本文の構造全体を作り直す前に、その要素の参加方法や位置を見直します。部品ごとの責任を分ける考え方は、複雑な画面になったときの診断にも役立ちます。

一覧・ヘッダーの幅変更テスト｜長い文章と項目追加で検証する

広い画面と狭い画面を、同じルールで試す

カード一枚ができたら、複数並べた一覧を作ります。最初は同じカードを複製して並び方を確認し、その後に見出しや本文の長さを変えます。すべてが同じ文字量だと、実際には起きる高さの違いや折り返しを見つけにくくなります。短いカードと長いカードを混ぜることで、同じルールがどこまで通用するかを観察できます。

幅のテストには、学習用の仮値として広い960、途中の680、狭い360を使ってもよいでしょう。これは対応端末の標準を指定するものではなく、異なる幅で挙動を見るための例です。三つの静止画を別々に手作業で整えるだけでなく、親の幅を変えた途中でも変化を見ます。最終形だけでなく、どの幅で情報が収まらなくなるかを把握することが重要です。

一覧の列数を明確に決めたい場合と、要素が入るだけ並べて折り返したい場合では考え方が異なります。オートレイアウトにはグリッドのフローもあるため、行列を明示する構成が必要なら、その機能の公式案内を別途確認します。本記事では横・縦の基本と折り返しを扱い、どんな一覧にも同じ設定を押し付けないようにします。

ヘッダーは「左右へ分ける」と「等間隔」を区別する

ヘッダーの練習では、左にサイト名、右に操作ボタンを置く構成を考えます。両端へ分けたいのか、各項目を同じ間隔で並べたいのかで、余った空間の配り方が変わります。固定のgapで並べる場合と、自動の間隔を使う場合を複製して比較すると、親の幅を広げたときに何が変わるかを理解しやすくなります。

見た目を合わせるために空の長方形や大量のスペース文字を間へ入れると、幅変更に弱い構造になりやすくなります。空白を一つの部品として置く前に、親の間隔や配置設定で目的を表現できないかを考えましょう。ただし、特別な意図を持つ余白が必要な場合もあります。大切なのは、なぜその空間が存在するかを説明できることです。

サイト名が長い、ボタンが一つ増える、表示言語が変わるといった条件も試します。左右に分けるだけでは、両方が長くなったときに収まらなくなることがあります。小さい幅ではメニューの見せ方を変える必要があるかもしれません。その判断はデザインの仕様であり、オートレイアウトが自動的に適切なメニューへ作り替えてくれるわけではありません。

※表は横にスクロールできます。

項目ゼロ・一件・多数と、画像なしの状態を見る

通常の画面だけでなく、内容が少ない状態も重要です。タグが一つだけ、一覧が空、説明文がない、画像が読み込まれない、といった条件を用意します。余白が不自然に広がる、空のフレームだけが残る、ボタンが意図しない位置へ寄るなど、通常の見本では隠れていた問題が見つかることがあります。

一件しかないときの自動間隔の動きは、設定や版の変更によって古い教材と異なる可能性があります。公式のCSS Flexboxとの整合に関する案内には、自動gapやpaddingなどの挙動の変更が説明されています。過去の画面を再現できない場合は、操作ミスだけでなく更新差も確認してください。

空の状態では、ただ何も表示しないのか、説明文や次の操作を置くのかを決めます。デザインファイル内で画像を消しただけで、実装時の読み込み失敗状態を再現したことにはなりません。必要な状態を別の練習フレームとして示し、どの条件で表示する想定かを書いておくと、確認する人が判断しやすくなります。

最小幅・最大幅は、限界の理由を持って設定する

幅の下限や上限は、狭すぎる、広がりすぎる状態を制御するために役立ちます。ただし、数値を入れれば全体の収まりが必ずよくなるわけではありません。最小幅の合計が親の幅を超えれば、どこかで並び方を変える必要があります。各部品の制約と、親が使える幅を一緒に見てください。

たとえばカードをこれ以上狭くすると見出しが極端に長くなるなら、下限を設ける理由になります。逆に本文が横に広がりすぎて読みづらいなら、最大幅を設ける考え方があります。数値は実際の文字量、フォント、余白、見る環境で判断します。見本の寸法だけをコピーせず、なぜその境界が必要かを説明できる状態にしましょう。

限界を設けた後は、その手前と直後の幅を試します。広い状態だけで完成とすると、下限に当たったときのはみ出しや、上限に当たったときの寄り方を見落とします。制約が働いた瞬間の動きまで確かめると、仕様を引き継ぐ相手へ「ここからは別構成」と伝えやすくなります。Figma上の構成と、実装時の切り替え条件は区別して記録してください。

レイアウトが崩れたときの診断｜階層・寸法・文章を順に調べる

まず選択対象と、直上の親の設定を見る

崩れたときは、目についた場所へいきなり余白を足す前に、問題の要素と直上の親を確認します。カードの本文が伸びないなら、本文テキスト、本文のまとまり、カード全体の順で、幅と高さが何に基づくかを見ます。最外側だけを変えても、内側の固定幅や固定高さが原因なら問題は残ります。

レイヤー一覧で目的の要素を選び、右側の設定を読む習慣を付けると、見た目だけでの修正を減らせます。自分が触っているのは親のpaddingか、子の幅か、テキストの表示設定かを言葉にしてください。名称が分からない場合も、「この箱の外周」「この二つの間」のように対象を説明すれば、何を調べるべきかを整理できます。

診断用の複製を作り、色を変えて親の境界を分かりやすくする方法もあります。これは完成デザインの配色を変えるためではなく、どこまでが同じ箱かを見るためです。問題が分かったら、診断用の色を本番へ混ぜないように戻します。見た目の修正と構造の診断を分けると、余計な変更を避けやすくなります。

伸びない・広がりすぎる・折り返さないを分ける

伸びないときは、固定サイズになっていないか、中間の親が変化を止めていないかを見ます。広がりすぎるときは、必要な幅の境界があるか、中身に合わせる設定が想定外の長文をそのまま受け入れていないかを確認します。折り返さないときは、折り返し設定だけでなく、親の幅が実際に制限されているかを調べます。

文字が切れる場合は、テキストの幅、高さ、行数制限、省略設定などを確認します。箱の高さだけを増やしても、文字側の設定が制限していれば解決しないことがあります。逆に、文字は正しく伸びていても、親の表示範囲からはみ出して見えない場合があります。文字の問題と、親の領域の問題を分けて見ることが大切です。

一度に複数の設定を変えると、偶然整っても原因を説明できなくなります。変更前の状態を残し、一項目だけ変え、同じ長文や同じ幅で比べます。改善しなければ戻し、次の候補へ進みます。正解の設定を当てるゲームにせず、どのルールがどの結果を生んでいるかを理解する診断にすると、別の画面でも応用できます。

※表は横にスクロールできます。

自動配置と、Web実装の完成を同一視しない

Figmaで幅変更に追従したとしても、そのままWebサイトとして動くわけではありません。実装にはHTMLの構造、CSSの配置、画像の読み込み、ブラウザーの文字表示など別の条件があります。デザインの意図を整理したファイルは引き継ぎに役立ちますが、実際の端末での動作確認の代わりにはなりません。

引き継ぎでは、固定したい寸法、中身に合わせたい部分、親に広げたい部分、狭い幅で変える構成を短く説明します。「このカードはいい感じに伸びる」より、「本文は全文表示し、高さは内容に合わせる。画像枠は同じ比率を保つ」の方が判断しやすくなります。具体的な実装方法は、開発担当と条件を確認して決めてください。

クリックできる見た目のボタンを作っただけで、操作性やアクセシビリティーを確認したことにもなりません。フォーカス、キーボード操作、読み上げ、エラー表示などは別の設計・検証が必要です。オートレイアウトの練習では配置ルールへ集中し、完成物で何がまだ未確認かを明示します。できた部分と残る部分を分けることが、実務での誤解を減らします。

一つの部品を「作る・変える・説明する」で仕上げる

練習の終わりには、ボタンとカードをそれぞれ一つ選び、短い文字、長い文字、狭い幅、項目追加を試します。そのうえで、親の方向、gap、padding、幅と高さの基準を説明してみてください。操作名を全部覚えていなくても、どこがなぜ動くかを説明できれば理解は進んでいます。説明できない部分は、次に調べる課題として残しましょう。

添削を受けたい場合は、完成画像だけでなく、変化する条件と困っている状態を示します。「カードの幅を狭めると本文が重なる。本文の高さは内容基準だが、その親が固定になっている」と書けば、確認する人が問題へたどり着きやすくなります。学習方法や支援を比較したい人は、Webデザインスクールの料金・学習期間・副業支援を比較するガイドで、質問や添削の範囲を確かめてください。

オートレイアウトを使いこなす第一歩は、複雑な画面を一度に組むことではありません。小さなボタンで寸法の基準を理解し、カードで階層を作り、一覧で幅と内容を変えて確かめることです。見た目を整えた後に必ず条件を変え、崩れたら階層へ戻る。この往復を繰り返すと、変更に対応しやすいデザインを自分で組み立てられるようになります。