KAKERU AI NEWS suetomi

Figmaのオートレイアウトが「縦方向の折り返し」に対応｜入りきらない項目が次の列へ

Figma Vertical Wrap オートレイアウトが縦でも折り返す

Figmaのオートレイアウトで、項目を縦に並べた一覧を作る。項目が増えるたびに枠が下へ伸びていき、「ここから先は2列目にしたいのに」と、枠を2つに分けて手で振り分けることになりがちでした。

2026年9月25日、Figmaのリリースノートで「Vertical wrap available in auto layout」が公開されました。オートレイアウトを縦方向（Vertical）にしたときにも折り返し（Wrap）が使えるようになり、入りきらない項目が次の列へ自動で移ります。

生成AIの話題ではありませんが、Webサイトやバナーのデザインを作る人には毎日の作業に関わる更新です。この記事では、リリースノートとFigmaヘルプをもとに、何が変わったのか、どう設定するのか、仕事での使いどころと注意点を整理します。

トミー

AIの新機能ではないけれど、デザインの現場で「地味に効く」のはこういう更新。KAKERUとしては外せない話題です。

何が発表された？

リリースノートに書かれている内容は、次の2点です。

  • あふれた項目は新しい列へ折り返す：フレームの外へはみ出すのではなく、右の新しい列に入る
  • CSSのflexboxと同じふるまい：オートレイアウトをCSSに近づける更新

用語を少し整理しておきます。オートレイアウトは、Figmaで中身に合わせて並びや大きさを自動で整える仕組みです。並べ方（フロー）には縦（Vertical）・横（Horizontal）・グリッド（Grid）があります。折り返し（Wrap）は、枠に入りきらなくなった項目を次の行や列に送る設定です。

縦方向のオートレイアウトで、入りきらない項目が次の列へ折り返すイメージ
縦方向のオートレイアウトで、入りきらない項目が次の列へ折り返すイメージ

これまでと何が違う？

これまで折り返しは横方向のフローだけの設定でした。横に並べたボタンやタグが、幅いっぱいになったら次の行に回る、という使い方です。Figmaの日本語版ヘルプ（9月29日確認）にも、いまのところ「水平を選択すると、折り返しが利用可能になります」と書かれています。

今回、英語版のヘルプは「折り返しは水平と垂直の両方のフローで使える」に更新されています。縦方向のフローでは、項目が上から下へ並び、枠の高さまで来たら新しい列に続きます。

つまり、これまで「縦に並べて、途中から2列目」というレイアウトは、列ごとに枠を分けて作り、項目を増やしたり減らしたりするたびに手で並べ直す必要がありました。これからは1つの枠のまま、項目の増減に合わせて列が組み替わります。

何ができるようになった？

設定は3ステップ

Figmaヘルプに書かれている手順は、次のとおりです。

  • オートレイアウトのフレームを選ぶ
  • フローを縦（Vertical）にする
  • Wrapをオンにする

列の区切りは「枠の高さ」で決める

ヘルプでは、フレームの高さを固定にすると、どこで新しい列が始まるかをコントロールできると説明されています。高さが「中身に合わせる」のままだと枠が伸びるだけなので、列にしたいときは高さを決めるのがポイントです。

すき間を2つ別々に決められる

折り返しをオンにすると、同じ列の中の項目どうしの間隔と、列と列の間隔を別々に設定できます。縦の一覧で項目はつめ気味、列の間はゆったり、といった調整がしやすくなります。

CSSに置きかえやすい

ヘルプには、縦方向の折り返しはCSS flexboxの flex-direction: column と flex-wrap: wrap と同じふるまいと書かれています。デザインとコーディングで同じ考え方を使えるので、デザイナーと実装する人の間で「この一覧は何列になるの？」という確認が減らせます。

CSSでも、縦に並べて折り返すには入れ物の高さ（または最大の高さ）を決めておく必要があります。Figmaで「高さを固定する」のと同じ考え方なので、デザインの段階で「この一覧の高さはいくつか」を決めておくと、コーディングにそのまま渡せます。

縦方向の折り返しの設定手順と、高さ・すき間・CSSの考え方
縦方向の折り返しの設定手順と、高さ・すき間・CSSの考え方

仕事ではどう使えそう？

Figmaヘルプでは、使いどころとしてチェックボックスの一覧、商品の短い紹介、プロフィールのような「高さを決めた複数列のレイアウト」が挙げられています。ここから、仕事で使いやすい場面を考えてみます。

Webサイトのフッターやサイトマップ

ページへのリンクを縦に並べ、決まった高さで2列・3列に分けるフッターは、ページが増えるたびに列の振り分けを直す必要がありました。1つの枠で折り返しを使えば、リンクを足すだけで列が組み替わります。

チラシ・パンフレットの料金表やメニュー

紙の制作物でも、決まったスペースに項目を縦に流し込みたい場面は多いものです。メニューや料金の項目を差し替えたときに、列の高さに合わせて自動で送られるので、確認の作業が軽くなります。

フォームのチェックボックスの一覧

「当てはまるものを選んでください」といった選択肢の多い一覧は、縦に長くなりがちです。高さを決めて折り返せば、読む順番（上から下、次の列）を保ったまま画面に収められます。

スタッフ紹介やプロフィールの一覧

人数が変わる会社紹介のページでも、プロフィールのカードを1つの枠で管理できます。ただし、カードの高さがばらばらだと列の下にすき間が出る点は、後の注意点で説明します。

KAKERUならこう使う／使わない

KAKERUの判断基準で分けると、こうなります。

  • 使う：フッターのリンク一覧、料金表、チェックボックスのように、1つずつの高さがそろっている項目の一覧。コーディングでもflexboxの縦の折り返しに置きかえやすい
  • 使わない：写真やカードの高さがばらばらで、すき間なく詰めて見せたい一覧（いわゆるメイソンリー）。今回の機能はその並びにはならないので、グリッドや別の作り方を選ぶ
  • 確かめてから使う：実際のWebページでは、画面の幅や文字の量で列の高さが変わる。Figmaの見た目をそのまま本番に持っていけるかは、コーディングの段階で確かめる
トミー

「縦に読ませたいけど、場所は限られている」という相談は、Webでも紙でもよくある。1つの枠で済むのは、あとから直すときに本当に楽になるところです。

誰が使える？

リリースノートでは、この更新はFigma Designの「New release」として紹介されています。リリースノートとヘルプには、特定のプランだけという条件は書かれていません。オートレイアウトのフレームであれば、フローを縦にしたときに設定できます。

注意点

  • メイソンリーではない：ヘルプに明記されているとおり、項目はオートレイアウトの順番のまま並び、今の列が高さいっぱいになってから次の列に移る。高さの違うカードを詰めて並べる機能ではない
  • 高さを固定しないと列にならない：列の区切りは枠の高さで決まる。高さが中身に合わせる設定のままでは、下へ伸びるだけになる
  • 日本語版のヘルプはまだ更新前：9月29日の確認時点で、日本語版は「折り返しは水平のとき」という説明のまま。最新の説明は英語版を見る
  • グリッドとは別物：行と列をまたいで配置したいなら、オートレイアウトのグリッド（オープンベータ）のほうが合う

まとめ

  • 2026年9月25日、Figmaのオートレイアウトで縦方向の折り返しが使えるようになった
  • 入りきらない項目は、枠の外へはみ出さずに新しい列へ移る
  • 設定は「縦のフロー」＋「Wrap」。列の区切りは枠の高さで決める
  • CSSの flex-direction: column と flex-wrap: wrap と同じふるまい
  • 高さの違うカードを詰めるメイソンリーではない点に注意

フッターや料金表のように「縦に読ませて、横に並べる」一覧を作ることが多いなら、次にその一覧を直すときから、1つの枠で組む方法に切り替えられます。

参考・情報源

確認日：2026年9月29日。機能や提供状況は変わることがあります。最新の情報は公式ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

FigmaのデザインをWeaveで量産。Figma nodeが登場
関連記事FigmaのデザインをWeaveで量産。Figma nodeで文字と画像を差し替えて展開できるように
Figma Vertical Wrap オートレイアウトが縦でも折り返す

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA