Studioのボックスの種類と使い分け——テキスト・画像・埋め込み・リスト・トグルの基本

Studioでは、文字や画像、動画など、画面を組み立てるあらゆる部品を「ボックス」として配置していきます。ただ、追加できるボックスの種類は意外と多く、「この内容にはどれを使えばいいのか」と迷うことがあります。

この記事では、エディタの「追加」パネルに並ぶ分類にそって、主なボックスの役割と使い分けの目安を整理します。詳しい設定方法は、公式ヘルプの「各種ボックス」にまとまっています。

「追加」パネルの分類をつかむ

エディタ左側の「追加」を開くと、ボックスが用途ごとに分かれて並んでいます。「基本」にはSection・Box・Image・Text・Icon・RichText・Video、「埋め込み」にはMap・YouTube・Vimeo・X(Twitter)・Instagramなど、「インタラクション」にはCarousel・Toggle・Loop Boxなど、「フォーム」にはフォーム一式が入っています。まずはこの4つの分類を頭に入れておくと、目的のボックスを探しやすくなります。

テキストとリッチテキストの違い

文字を置くボックスには、Text（テキストボックス）とRichText（リッチテキストボックス）の2種類があります。公式ヘルプによると、リッチテキストは、文章の一部の文字だけに装飾をつけたい場合や、Studio CMSで作った記事本文を紐付けて表示する場合に使います。リッチテキストではMarkdown記法も使えます。

見分け方も案内されていて、文字のボックスを選択したときに、右パネルの一番左のタブが「テキスト」なら通常のテキストボックス、「コンテンツ」ならリッチテキストボックスです。見出しやボタンの文言など、全体が同じ見た目でよい文字はテキスト、本文のように途中で太字や色を変えたい文章はリッチテキスト、と使い分けるのが目安です。

画像ボックスの「Boxモード」と「Imgモード」

画像ボックスには表示のしかたが2つあり、ボックスの右上のスイッチで切り替えられます。公式ヘルプによると、Boxモードは画像を「背景」として扱うため、その上に文字などの子要素を重ねたり、背景に加工をかけたりできます。一方のImgモードは画像そのものを独立した要素として扱い、元の縦横比を保ったまま表示しますが、子要素を入れることはできません。

写真の上に見出しを重ねたいならBoxモード、商品写真やロゴのように縦横比を崩したくないならImgモード、が基本の選び方です。画像を軽くする工夫についてはStudioで画像を軽くする基本——公開後の表示速度を落とさない3つの工夫にもまとめています。

埋め込みボックスで外部のサービスを使う

地図・動画・SNSの投稿などは、「埋め込み」の分類から配置します。Google Maps・YouTube・Vimeo・X(Twitter)・Instagramのほか、任意のコードを入れられるものもあります。公式ヘルプによると、Embedボックス自体は無料プランを含むすべてのプランで使えます（サイト全体やページ単位で自由にコードを追加する「カスタムコード」は有料プランの機能です）。

たとえば、Studioには決済やカートの機能が無いため、購入ボタンを外部サービスから埋め込む、といった使い方もできます。詳しくはStudioでECサイト・オンライン販売はできるか——標準機能と現実的な選択肢をご覧ください。

リスト・カルーセル・トグルなど、動きのあるボックス

• リスト：同じ形のアイテムを複数並べる。データと紐付けて動的に生成することもできる
• カルーセル：スライダー形式で複数のコンテンツを切り替えて見せる。自動再生も設定できる
• トグル：開閉式の部品。よくある質問のように、内容を折りたたんで見せたい場面で使える
• Loop Box：コンテンツを無限にループさせて見せる（マーキー表現）

ボックスを重ねすぎないために

どのボックスも、ほかのボックスの中に入れ子にして配置できますが、入れ子の深さには上限があります。Studioでは公式に11階層程度までが目安とされており、装飾のためだけに箱を重ねていくと、気づかないうちに深くなることがあります。詳しくはStudioのボックス入れ子構造には階層上限がある——11階層を目安に、深くなりすぎない工夫をご覧ください。

まとめ

Studioのボックスは、「追加」パネルの分類（基本・埋め込み・インタラクション・フォーム）で探すのが近道です。文字ならテキストとリッチテキスト、画像ならBoxモードとImgモード、と、似た部品の違いを押さえておくと、迷わずに選べるようになります。