STUDIOでページを作っていると、セクションとボックスの違いで手が止まりやすいです。どちらも四角いまとまりに見えるため、見た目だけで選ぶと、あとから余白調整やスマホ表示で崩れやすくなります。
大事なのは、セクションを「ページを区切る大きなまとまり」、ボックスを「その中身を組み立てる部品」と分けて考えることです。この記事では、ファーストビュー、サービス紹介、料金表、CTAなどの具体例を使いながら、どちらを使えばよいか判断できるように整理します。
studioのセクションとボックスの違いは役割で考える
STUDIOのセクションとボックスの違いは、機能名だけで覚えるよりも、ページの中での役割で考えると分かりやすくなります。セクションは、ページ全体を大きく分けるための枠です。たとえば「ファーストビュー」「サービス紹介」「導入事例」「料金」「お問い合わせ」のように、内容のまとまりごとにページを区切るときに使います。
一方でボックスは、そのセクションの中に見出し、文章、画像、ボタン、カード、横並びレイアウトなどを配置するための部品です。セクションが部屋だとすれば、ボックスは机、棚、椅子のようなものです。部屋を増やしたいのか、部屋の中の配置を整えたいのかで、使うものが変わります。
| 項目 | セクション | ボックス |
|---|---|---|
| 主な役割 | ページを大きな内容ごとに区切る | 中身の要素やレイアウトを作る |
| 使う場面 | FV、特徴、料金、FAQ、CTAなどを分ける | 見出し、画像、カード、ボタン、横並びなどを組む |
| 考え方 | ページ構成の単位 | デザインや配置の単位 |
| 間違えやすい点 | 細かい部品までセクションで分けすぎる | ページ全体をボックスだけで無理に作る |
迷ったときは、「このまとまりはページの目次に載せられる内容か」で判断すると扱いやすいです。たとえば「料金」「よくある質問」「お問い合わせ」は目次に載せられるためセクション向きです。反対に、料金表の中の「ベーシックプラン」「スタンダードプラン」「プレミアムプラン」のカードは、料金セクション内のボックスとして考えると自然です。
STUDIOには、あらかじめデザインや構成が用意されたセクションパーツと、白紙の状態から自由に作る空のセクションがあります。初心者の場合は、最初からすべてをボックスで組むより、セクションパーツを使って大枠を作り、必要な部分だけボックスで調整するほうが失敗しにくいです。特にスマホ表示まで考える場合、最初から整った構造を使うことで、余白や並びの修正が少なくなります。
まずページ構成を分けて考える
セクションとボックスで迷う原因の多くは、先にデザインの見た目から作り始めてしまうことにあります。STUDIOは直感的に操作できるため、画像やテキストを置きながら進められますが、ページ全体の構成が決まっていないと、セクションを追加すべき場面とボックスを追加すべき場面が混ざりやすくなります。
セクションは内容の区切り
セクションは、訪問者がページを読み進めるときの大きな話題の切り替わりを作るものです。ファーストビューの次に課題提起、その次にサービス内容、さらに実績や料金、最後にお問い合わせという流れであれば、それぞれを別のセクションとして分けると管理しやすくなります。背景色を変えたり、上下の余白を広く取ったりするのも、セクション単位で考えると整理しやすいです。
たとえば店舗サイトなら、「メインビジュアル」「おすすめ商品」「店舗のこだわり」「アクセス」「予約導線」のように分けます。採用サイトなら、「募集職種」「働く環境」「社員の声」「選考の流れ」「応募フォーム」などがセクションの候補です。このように、ページを見る人が内容の切り替わりを感じる単位がセクションです。
セクションを分けるメリットは、あとから順番を入れ替えたり、不要なまとまりを非表示にしたりしやすいことです。たとえばキャンペーン期間だけ「特典」セクションを上に移動したい場合、最初からセクション単位で分けておけば作業が簡単になります。反対に、すべてを1つの大きなボックスに入れてしまうと、移動や修正のたびに中身の配置が崩れることがあります。
ボックスは中身の配置
ボックスは、セクションの中で要素を並べたりまとめたりするために使います。見出しと本文をまとめる、画像と説明文を横並びにする、3つの特徴カードを等間隔に置く、ボタンを中央に配置するなど、細かなレイアウト調整の中心になるのがボックスです。ボックスを使うことで、複数の要素をひとつのまとまりとして扱えます。
たとえばサービス紹介セクションの中に、3つのサービスカードを横並びで配置する場合を考えます。このとき、サービス紹介全体はセクション、3つのカードを包む横並びの親要素はボックス、各カードもボックス、その中のアイコン・見出し・説明文・ボタンがさらに要素になります。つまりボックスは、ページの部品を整理するための箱として使います。
ただし、ボックスを増やしすぎるとレイヤー構造が複雑になり、どこを選択しているのか分かりにくくなります。余白を調整したいだけなのに、親ボックス、子ボックス、孫ボックスのどれに設定すればよいか迷うこともあります。最初は「横並びにしたい」「背景をまとめて付けたい」「複数の要素を一緒に動かしたい」という目的があるときだけ、ボックスを増やす意識で十分です。
使い分けの基準を具体例で見る
セクションとボックスの違いは、実際のページ例に当てはめると判断しやすくなります。ここでは、よく使うファーストビュー、サービス紹介、料金表、CTAを例にして、どこまでをセクションにして、どこからをボックスにするのかを整理します。
ファーストビューの場合
ファーストビューは、ページを開いた瞬間に見える大きなエリアなので、基本的には1つのセクションとして作るのが自然です。背景画像、キャッチコピー、説明文、ボタン、メイン画像などをまとめて管理する必要があるため、ページ全体の中でも独立した大きなまとまりとして扱います。ここを小さなボックスだけで作ると、あとから高さや背景の調整をするときに扱いづらくなります。
ファーストビューの中身は、ボックスで整理します。たとえば左側にテキスト、右側に画像を置くレイアウトなら、セクションの中に横並び用の親ボックスを置き、その中にテキスト用ボックスと画像用ボックスを入れると分かりやすいです。テキスト用ボックスの中には、キャッチコピー、補足文、CTAボタンをまとめて入れます。
スマホ表示では、横並びを縦並びに変更することが多くなります。このとき、テキストと画像が別々のボックスに分かれていれば、順番や余白を調整しやすくなります。最初からセクションとボックスの役割を分けておくと、パソコンでは横並び、スマホでは縦並びという切り替えにも対応しやすくなります。
サービス紹介の場合
サービス紹介は、ページ内でひとつの話題として独立しているため、基本はセクションとして分けます。その中に「Web制作」「広告運用」「SEO対策」のような複数のサービスカードを配置する場合、カード群を包むボックスを作り、さらに各カードを個別のボックスとして作ると整理しやすいです。カードごとに背景色、角丸、影、余白を設定したい場合も、ボックス単位にしておくと調整しやすくなります。
サービスカードをセクションで1つずつ分けてしまうと、ページの構造が細かくなりすぎます。訪問者にとっては「サービス紹介」という大きな内容の中に3つの項目があるだけなので、カード1枚ごとにセクションを分ける必要はありません。セクションを増やしすぎると、ページの見通しが悪くなり、レイヤーパネルでも全体構成を把握しにくくなります。
一方で、サービス紹介のあとに「選ばれる理由」や「制作実績」が続く場合は、そこから別セクションに分けると自然です。内容の目的が変わるところでセクションを切り、同じ話題の中の見出し、文章、カード、画像はボックスでまとめる。この考え方を持っておくと、LPでもコーポレートサイトでも迷いにくくなります。
| ページ内の要素 | おすすめの扱い | 理由 |
|---|---|---|
| ファーストビュー全体 | セクション | ページ冒頭の大きなまとまりで、背景や高さをまとめて管理するため |
| キャッチコピーとボタン | ボックス | テキスト群としてまとめ、余白や位置を調整しやすくするため |
| サービス紹介全体 | セクション | 内容の話題がひとつ切り替わるため |
| サービスカード1枚 | ボックス | アイコン、見出し、説明文をひとまとまりにするため |
| 料金表全体 | セクション | ページ内の重要な判断材料として独立するため |
| 料金プランの各カード | ボックス | プランごとの背景、余白、高さを調整するため |
ボックスを使うときの注意点
ボックスは便利ですが、使い方を間違えるとページが修正しづらくなります。特にSTUDIOでは、ボックス同士の親子関係や並び方向がレイアウトに影響するため、見た目だけを合わせようとしてボックスを重ねすぎると、スマホ表示や後日の修正で困りやすくなります。
入れ子を増やしすぎない
ボックスの中にボックスを入れることを、入れ子構造として考えます。入れ子は、横並びやカード型レイアウトを作るうえで必要ですが、深くしすぎると管理が難しくなります。STUDIOでは複雑な入れ子構造に上限があり、深くなりすぎると保存や読み込みで問題が出る可能性があります。実務では、見た目を作るためだけに何重にもボックスを重ねないことが大切です。
たとえば、カードの中に画像、見出し、本文、ボタンを入れる程度なら自然です。しかし、余白を少し増やすためだけにボックスを追加し、さらに背景色のためにもう一つ追加し、位置調整のためにさらに追加するような作り方は避けたほうがよいです。余白、背景、整列は、できるだけ既存の親ボックスやカードボックスの設定で対応できないか確認します。
レイヤーパネルを見たときに、同じような名前のBoxが何段も続いている場合は、構造が複雑になっているサインです。修正のたびにどのBoxを選べばよいか分からない状態なら、いったん不要なボックスを減らし、役割ごとに整理しましょう。「横並び用」「カード用」「テキスト用」のように役割を意識すると、構造を見直しやすくなります。
余白の場所をそろえる
STUDIOで崩れやすいページは、余白を入れる場所がバラバラになっていることが多いです。セクションに上下の余白を入れるのか、親ボックスに余白を入れるのか、個別のテキストや画像に余白を入れるのかが混ざると、パソコンでは整って見えてもスマホで間延びしたり、逆に詰まりすぎたりします。
基本的には、セクションの上下余白はセクション側で管理し、カード内の余白はカードのボックス側で管理するのがおすすめです。たとえば「サービス紹介」全体の上と下に広めの余白を取りたいならセクションで調整し、各サービスカードの中でアイコンと見出しの間隔を調整したいならカード内のボックスや要素で調整します。余白の役割を分けると、あとから変更しても影響範囲が分かりやすくなります。
また、同じ種類の要素は同じルールで余白を設定することが大切です。3つのカードのうち1つだけ内側余白が違う、見出しと本文の間隔が場所によって違う、といった状態になると、ページ全体の印象が不安定になります。最初に「セクション間は広め、カード内は中くらい、テキスト間は小さめ」というルールを決めておくと、見た目も管理もしやすくなります。
セクションで失敗しやすい作り方
セクションはページ構成を整理するために便利ですが、増やし方を間違えると逆に扱いづらくなります。特に、見た目の区切りと内容の区切りを混同すると、セクションが細かく分かれすぎたり、逆に大きくなりすぎたりします。セクションは「内容のまとまり」で切ることを意識しましょう。
細かく分けすぎる
よくある失敗は、見出し、画像、ボタンのような小さな要素ごとにセクションを分けてしまうことです。たとえばサービス紹介の見出しだけで1セクション、説明文だけで1セクション、カード部分だけで1セクションにすると、ページ構造が細かくなりすぎます。一見すると配置しやすく感じますが、全体の余白や背景色をそろえるときに手間が増えます。
セクションを細かく分けすぎると、同じ話題なのに背景や余白が分断されやすくなります。スマホ表示で見たときに、見出しとカードの間が大きく空いたり、逆に別の話題に見えたりすることもあります。訪問者にとっては「サービス紹介」という一つの内容なので、その中の見出し、説明文、カードは同じセクション内に置いたほうが自然です。
判断に迷ったときは、「この部分だけをページから削除しても、ひとつのまとまりとして成立するか」を考えてみてください。サービス紹介全体は削除してもひとまとまりとして成立しますが、見出しだけ、説明文だけ、カード1枚だけではページ構成として不自然になりやすいです。独立した話題ならセクション、話題の中身ならボックスという基準を持つと、分けすぎを防げます。
ひとつに詰め込みすぎる
反対に、1つのセクションに多くの内容を詰め込みすぎるのも避けたい作り方です。たとえばファーストビュー、サービス紹介、料金、FAQ、問い合わせボタンまでを1つのセクション内に入れてしまうと、ページの流れが見えにくくなります。編集時にも、どこからどこまでが何の内容なのか判断しにくくなり、修正ミスが起きやすくなります。
詰め込みすぎたセクションでは、背景色や余白の調整も難しくなります。料金部分だけ背景を薄いグレーにしたい、FAQだけ上下余白を広げたい、CTAだけ目立つ色にしたいという場合、本来ならセクション単位で分けたほうが自然です。無理にボックスだけで対応すると、背景用のボックスや余白用のボックスが増え、構造が複雑になります。
ページを作る前に、H2見出しのような大きな見出しを紙に書き出すと、セクションの分け方が見えやすくなります。「誰に向けたページか」「何を伝えるか」「なぜ選ばれるか」「料金はいくらか」「どう問い合わせるか」のように話題が切り替わる場所がセクションの候補です。STUDIO上でいきなり配置するより、先に構成を決めてから作るほうが、あとで修正しやすいページになります。
作る前に決めること
STUDIOでセクションとボックスの違いに迷ったら、まずページ全体をセクション単位で分け、その中をボックスで組み立てる順番にすると失敗しにくいです。先にファーストビュー、サービス紹介、実績、料金、FAQ、CTAのような大きな流れを決めてから、それぞれの中に必要な見出し、文章、画像、カード、ボタンを入れていきましょう。
作業前には、次の順番で確認すると整理しやすくなります。
- ページ内の大きな話題を5〜7個ほど書き出す
- 話題ごとにセクションとして分ける
- 各セクション内に必要な要素を並べる
- 横並び、カード化、背景設定が必要な部分だけボックスでまとめる
- パソコン表示を作ったあと、スマホ表示で順番と余白を確認する
特に初心者の場合は、最初から完全に自由なボックスだけで作るより、セクションパーツを土台にするほうが安心です。セクションパーツには、見出し、本文、画像、ボタンなどの基本的な構造があらかじめ入っているため、ページ構成の考え方を学びながら調整できます。慣れてきたら、空のセクションを追加し、自分でボックスを組み合わせてオリジナルのレイアウトを作るとよいでしょう。
最終的には、セクションは「ページを読む順番を作るもの」、ボックスは「その中を見やすく整えるもの」と覚えておけば十分です。迷った場所では、訪問者が内容の切り替わりを感じるかどうかを基準にしてください。切り替わるならセクション、同じ話題の中で配置を整えたいだけならボックスを使う。この基準で作ると、見た目だけでなく、後から直しやすいSTUDIOサイトに近づきます。
