Studioのコンポーネント機能の基本——ヘッダー・フッターを1箇所で管理する

サイトのページ数が増えてくると、どのページにも同じヘッダーやフッターを配置することになります。あとから「ボタンの色を変えたい」「リンクを1つ増やしたい」と思ったとき、ページの数だけ同じ修正を繰り返すのは大変です。

Studioのコンポーネント機能を使うと、複数箇所に配置した要素を「1つの実体」として扱えるようになり、1箇所を直すだけで配置先すべてに反映されます。この記事では、基本の使い方を整理します。

コンポーネントとは

コンポーネントは、プロジェクト内で繰り返し使う要素を「共通パーツ」として登録し、再利用・一括管理できる機能です。コンポーネントに編集を加えると、同じコンポーネントを配置したすべての場所に自動で反映されます。

代表的な活用例は、ヘッダー・フッター・ナビゲーションなど、サイト全体で使う要素です。1つのコンポーネントとして登録しておけば、デザインの一貫性を保ちながら、修正の手間も1回で済みます。

作り方の流れ

コンポーネント化したい要素を選択し、右クリックメニューから設定するだけで作成できます。

• スクリーンまたはレイヤーパネル上で、コンポーネント化したい要素を選択する
• 右クリックメニューから「コンポーネント化」を選ぶ（ショートカットも用意されています）
• コンポーネント名を入力し、作成する
• 以降は左側のコンポーネントパネルから、いつでも同じ要素をドラッグ＆ドロップで配置できる

配置ごとに違う中身を出したいとき——プロパティ

通常、同じコンポーネントは配置場所ごとに個別の内容へ変えることはできませんが、プロパティという機能を使うと、配置箇所ごとに画像・テキスト・色・表示の有無を切り替えられます。

「ヘッダーの構造は共通だが、ページごとにパンくずの文言だけ変えたい」というような場面で活用できます。

通常のボックスに戻したいとき——デタッチ

コンポーネント化を取りやめて、普通のボックスとして扱いたい場合は、デタッチ（解除）という操作で戻せます。デタッチした要素は、その配置箇所だけが通常のボックスになり、コンポーネント本体や他の配置箇所には影響しません。

データ容量の面でも効率的

同じヘッダーを10ページに配置する場合、通常であれば10ページぶんのデータ量になりますが、コンポーネントとして共通化しておくと、複数箇所に配置してもデータ量は1つぶんで済みます。ページ数の多いサイトほど、この違いが効いてきます。

まとめ

ヘッダー・フッターのように全ページで繰り返し使う要素は、コンポーネント化しておくと、修正のたびに1ページずつ直して回る手間から解放されます。ページ数が増える前の、早い段階で使い始めておくと効果を実感しやすい機能です。

生成AIに複数ページを作らせた際にヘッダー・フッターがページごとに微妙にずれてしまう問題は、生成AIに複数ページのサイトを作らせると、ヘッダー・フッターが微妙にずれる理由と揃え方で扱っています。Studioに取り込んだあとはコンポーネント化しておくと、その後のずれを防げます。ブログ・お知らせのように内容そのものが増えていくコンテンツには、StudioのCMS機能の基本という別の機能が向いています。