LPはセクションごとにフレーム化し、親をオートレイアウトにして並べ替えを一瞬で行う
LPの各セクションを独立フレームにして縦方向オートレイアウトに入れると、ドラッグ＆ドロップで構成を入れ替えられる。
どんな問題を解決するか / いつ使うか
LPやコーポレートサイトのワイヤー・構成検討段階。「このセクションとこのセクションを入れ替えたい」が頻繁に起きるとき。
やり方
- ヒーロー、課題提起、特徴、実績、料金、FAQ、CTA…と各セクションを個別のフレームにする（中身もそれぞれオートレイアウト）。
- 全セクションを選択して Shift+A で縦方向のオートレイアウトにまとめる（Gap 0、幅は Fill）。
- 順番を変えたいときは、セクションフレームをドラッグ（またはレイヤーパネルで移動）するだけで、後続のセクションが自動で詰め直される。
- 一時的に外したいセクションは非表示にすれば、空白が残らず詰まる。
注意点・対応状況
- セクション内部の高さを Fixed にしていると、文言を増やしたときにはみ出す。原則 Hug を使う。
- 背景が全幅のデザインは、セクションフレーム自体に背景色を持たせると入れ替え時に崩れない。
出典
- 投稿者: @comingstar12 (びすこ)
- 投稿: @comingstar12 · 2026-10-03
- 収集日: 2026-10-09（JST）