Studioのボックス入れ子構造には階層上限がある——11階層を目安に、深くなりすぎない工夫

Studioでサイトを作っていると、ボックスの中にボックスを重ね、その中にまたボックスを重ね……と、入れ子（階層）がどんどん深くなっていくことがあります。これは、生成AIが書いたコードをそのまま取り込んだときだけでなく、手作業で少しずつデザインを作り込んでいく過程でも起こります。

Studioのボックス入れ子構造には、公式に案内されている階層の上限があります。この記事では、その仕組みと、深くなりすぎないための工夫を整理します。

入れ子の階層上限とは

Studioでは、ボックスの中に別のボックスを配置することで、親子関係（入れ子構造）を作ります。1つの親ボックスには複数の子ボックスを内包でき、子ボックスの中にさらに別のボックスを入れて階層を深めることもできます（ここでいう「階層」は、ページのURLの階層とは別物で、1つのページの中でボックスがどれだけ深く重なっているかを指します）。

公式ヘルプによると、この入れ子構造にはシステム上の上限があり、上限は12階層までとされています。ただし、意図しないデータ破損を防ぐため、実際の目安としては最大11階層までの構成が推奨されています。上限値は、サイトのデザイン構成や追加スタイルの有無によって多少前後することもあるとされています。

気づかないうちに深くなりやすい理由

階層が深くなるのは、複雑な生成AIのコードをそのまま取り込んだときだけではありません。手作業でデザインを作っているときも、装飾のための入れ子（背景用の箱、余白調整用の箱など）を積み重ねていくうちに、思っている以上に深くなっていることがあります。

複数のボックスをまとめる「グループ化」の操作も、実質的には新しい親ボックスを1つ増やす操作です。整理のためにグループ化を重ねるほど、階層はその分深くなります。

上限に達するとどうなるか（見落としやすい注意点）

上限に達すると、「ボックスの親子関係が保存できる最大の深さを超えたためデータを保存できません。」というエラーが表示され、それ以上の入れ子は作成できなくなります。

注意したいのは、このエラーが表示されるタイミングです。上限を超えた瞬間ではなく、データの保存または読み込みを実行したタイミングで表示されます。つまり、作業中は気づかないまま進めてしまい、あとで保存し直したときに初めて「超えていた分のデザインが保存されていなかった」と気づく、という展開になりえます。

深くなりすぎないための工夫

• 定期的にレイヤーパネルを開き、階層がどれくらい深くなっているか確認する
• 省略できる入れ子（見た目に影響しない、整理のためだけの箱）があれば、グループ化を解除して1段減らす
• 横並び・縦並びの切り替えなどはレイアウト設定側で表現し、入れ子を増やさずに済む方法が無いか見直す
• 生成AIにコードを書かせる場合は、入れ子を深くしすぎないよう具体的に伝えておく

まとめ

ボックスの入れ子は、Studioで複雑なデザインを表現するための基本の仕組みですが、無制限に深くできるわけではありません。11階層を目安に、レイヤーパネルで定期的に階層の深さを確認する習慣をつけておくと、保存できずにデザインが消えるという事態を避けやすくなります。

生成AIが書いたコードをStudioに持ち込む際の注意点は生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較にもまとめているので、あわせてご覧ください。