コンポーネントとは
コンポーネントは、プロジェクト内で繰り返し使用するデザイン要素を効率的に管理・再利用するための機能です。この機能を活用することで、デザインの一貫性を保ちながら効率的なウェブサイト制作が可能になります。
コンポーネントの主な特徴
再利用: 一度作成したコンポーネントを複数箇所に配置できます
一括編集: 1つのコンポーネントを編集すると、全ての配置箇所に自動反映されます
カスタマイズ: プロパティ機能を使用して、配置したコンポーネントパーツを個別にカスタマイズできます
コンポーネントの活用シーン
ヘッダー、フッター、ナビゲーションなど、サイト全体で使用する要素をコンポーネント化します。
変更が必要な部分のみをプロパティ化し、メンテナンス性を高めます。
コンポーネントの作成手順
コンポーネント化したい要素を選択します。
以下のいずれかの方法でコンポーネント化します：
右クリックメニューから「コンポーネント化」を選択
ショートカットキー ⌘＋J (Windowsでは Ctrl+J) を使用
コンポーネント名を入力します。
プロパティとして登録したいデータにチェックを入れます。
「コンポーネントを作成」をクリックします。
作成されたコンポーネントは、エディタ左側の追加パネル内コンポーネントタブに追加されます。
コンポーネントの配置と編集
コンポーネントを作成したら、プロジェクト内で活用しましょう。
コンポーネントの配置方法
エディタ左側の追加パネル内コンポーネントタブを開きます。
配置したいコンポーネントを選択し、以下のいずれかの方法で配置します：
ドラッグ＆ドロップでページ上に配置
クリックしてページ上に配置
コンポーネントの編集方法
下記手順でコンポーネントを編集できます。なお、プロパティ登録されている箇所は、編集モードに入らずに直接編集できます。
配置したコンポーネントを選択します
ダブルクリックして編集モードに入ります
編集モードでは以下の操作が可能です：
ボックスの追加
スタイルの編集
プロパティの追加・編集
コンポーネントのプロパティとは
プロパティを使用すると、同じコンポーネントでも個別にデータやデザインを変更できます。方法については、コンポーネントごとにデザインやデータの表示を変える方法をご覧ください。
プロパティの種類
STUDIOでは、以下6種類のプロパティを扱えます：
テキスト
画像
URL
数値
ブール値（オン・オフ）
カラー
プロパティの追加
コンポーネントをダブルクリックして編集モードに入ります。
「+」ボタンをクリックしてプロパティを追加します。
プロパティの種類と名前を設定します。
また、テキストや画像ボックスをコンポーネント内に追加すると、自動的にプロパティとして追加するオプションが表示されます。
プロパティ編集
コンポーネントを選択します
レイヤーパネルを開き、プロパティ管理欄を表示します
各プロパティの値を編集します
プロパティの紐付け
追加したプロパティの右横にある青い丸を選択します。
コネクタをドラッグし、対象のボックスに紐付けます。
Tips：数値プロパティは、パディングや横幅などのスタイルにも紐付けできますが、マージンや枠線には紐付けできません。
プロパティ名の編集とプロパティ削除
プロパティ名をクリックすると、プロパティ名の編集とプロパティの削除が選択できます。
コンポーネントの解除（デタッチ）
コンポーネントを通常のボックスとして扱いたい場合は、以下の手順で解除（デタッチ）できます。
解除したいコンポーネントを選択します。
ショートカットキー ⌘＋Shift＋J (Windowsでは Ctrl+Shift+J) を押します。
Tips：
デタッチ後は、コンポーネント化直前の状態で通常ボックスとして残ります。
元のコンポーネントや他に配置されているコンポーネントには影響しません。
コンポーネントの削除
プロジェクトからコンポーネントを完全に削除する場合は、以下の手順で行います。
コンポーネント一覧から削除したいコンポーネントを見つけます
コンポーネント名の右側にある「×」をクリックします
Tips：コンポーネントを削除すると、ページに配置されたそのコンポーネントは自動的に解除（デタッチ）され、通常のボックスとして残ります。
component