【Studio初心者ガイド】コンポーネント機能の基本的な使い方 ｜Editor 5.0対応

※本記事は Studioの「Editor 5.0」に対応しています。

今回は、Studioで効率的にWebページを制作するために欠かせないコンポーネント機能について解説します。

コンポーネントの基本的な使い方や、カスタマイズのコツをわかりやすく説明していきますので、初心者の方でもすぐにご活用できるようになります。

コンポーネント機能とは？

コンポーネントとは、「共通パーツ」としてプロジェクト内で再利用・一括管理したい要素を登録・管理する機能です。

たとえば、複数ページにわたるWebサイトのヘッダーやフッターなど、サイト全体で共通して使う要素は、デザインの統一が求められます。

毎回コピー＆ペーストで対応すると手間がかかるため、共通パーツはコンポーネントとして登録しておくと効率的です。

コンポーネントに編集を加えると、同じコンポーネントを配置しているすべての場所に自動で反映されるため、デザインを一貫して管理しやすくなります。

コンポーネントの作成方法

1.コンポーネント化したい要素（ボックスなど）を選択し、右クリックして「コンポーネント化」を選びます。

ショートカットでは、⌘＋J (Windowsでは Ctrl+J)で呼び出せます。

※右パネル上部のセクション名からも設定が可能です。

2.表示される画面でコンポーネント名（管理名）を入力し、必要に応じてプロパティとして登録したい項目を選択してから、作成を確定します。

※1 コンポーネントのプロパティとは

通常、同一コンポーネントのデータやデザインは共通化され、設置場所ごとに個別設定することはできません。

しかし、コンポーネントのプロパティ機能を利用すると、設置場所ごとにデータやデザインを切り替えられるようになります。

また、プロパティとして登録されている箇所は、編集モードに入らずに直接編集できます。

利用できるプロパティは6種類です。

• テキストプロパティ

• 画像プロパティ

• URLプロパティ

• 数値プロパティ

• ブール値プロパティ

• カラープロパティ

これにより、例えば会社概要などの共通パーツを多用するセクションでも、特定の箇所だけ電話番号リンクを追加するなど、リスト機能では難しかった細かなカスタマイズが可能になります。

3.作成したコンポーネントは、エディター左側の[コンポーネント]（赤四角）に表示されます。

このようにしてつくられたコンポーネントは、プロパティ設定していない箇所を編集すると、全てのコンポーネントが自動で同じ編集ができるようになります。

例えば、コンポーネントの背景色を変えると、、、

下の様に同じく他のコンポーネントの背景色も変わるのです。

コンポーネントのプロパティ追加

コンポーネント作成後にプロパティを追加したい場合は、右パネルの[データ]タブ（赤四角）からコンポーネントにプロパティを追加し、各データを紐づけることで追加が可能です。

コンポーネントの配置（設置）と編集

コンポーネントタブ（赤四角）から、配置したいコンポーネントをドラッグ＆ドロップまたは、クリックでページに配置します。

コンポーネントの解除（デタッチ）

配置したコンポーネントを通常のボックスとして扱いたい場合は、コンポーネント化を解除（デタッチ）します。

ショートカットキー ⌘＋Shift＋J（Windowsでは Ctrl+Shift+J）で、コンポーネント化を解除します。もしくは、右クリックメニューからコンポーネント解除（赤四角）を選択します。

コンポーネントを解除すると、その要素はスクリーン上に通常のボックスとして残り、元のコンポーネント本体や他の配置箇所には影響しません。

コンポーネントの削除

コンポーネントを削除するには、左パネルでコンポーネントパネルから削除したいコンポーネントを選択し、コンポーネント名の右下にある「×」（赤四角）をクリックします。

コンポーネント削除の注意点

コンポーネントを削除すると、紐づいていたボックスが全て元の通常のボックスに戻ります。

複数箇所で使っていた際は一括で編集することができなくなってしまうため、削除前に内容を確認することをおすすめします。

まとめ

コンポーネント機能は、Webページ制作において、要素をまとめて保存し、効率的に再利用できる便利なツールです。

ヘッダーやフッターのような共通部分を一度コンポーネント化すれば、他のページでも簡単に呼び出して使用でき、編集内容は全てのページに反映されます。

また、プロパティを活用することで、個別にカスタマイズすることも可能です。

一方、注意点として、コンポーネントを解除するとその内容が消える点も踏まえた上で、適切に活用することが大切です。

コンポーネント機能を使うことで、効率的で一貫性のあるデザインを実現し、プロジェクト全体の制作作業がスムーズに進むようになります。