【手順】Studioのコンポーネントの使い方｜共通パーツ化・プロパティ・解除まで

「ヘッダーの電話番号を直すのに、全ページを1枚ずつ開いた」。「テンプレートのボックスが紫色で、クリックしても編集できない」。どちらも、Studioのコンポーネントを知ると解決します。この記事では、コンポーネントの作り方から、編集が反映される範囲、プロパティと表示条件、解除と削除の違いまでを順に説明します。国内最大級のStudio学習コミュニティ「ノーコードサロン」の運営者として書いています。仕様は、2026年9月時点のStudio公式ヘルプで確かめたものだけを載せました。

結論：共通パーツは「コンポーネント化」して、違いはプロパティで出す

コンポーネントは、サイト内で繰り返し使う要素を「共通パーツ」として登録する機能です。1つのコンポーネントを編集すると、他のページを含むすべての配置箇所に自動で反映されます。ヘッダー、フッター、ナビゲーションのように全ページに置く要素に向いています。

ただし、そのままだと中身はすべての配置箇所で同じになります。カードの見出しや画像だけを場所ごとに変えたいときは、プロパティを使います。まとめると、使い方は次の3つに分かれます。

• 全ページで同じ見た目・同じ中身にしたい：コンポーネント化するだけでよい
• 見た目は同じで、文字や画像やリンクだけ変えたい：テキスト・画像・URLのプロパティを使う
• 場所によって色や表示する要素を変えたい：カラー・ブール値のプロパティと表示条件を使う

色の一括管理にはカラースタイルという別の機能もあります。サイト全体の配色をまとめて変えたいときはカラースタイルの使い方もあわせて読むと、役割の違いが分かります。

コンポーネントの作り方と配置の手順

手順1：共通パーツにしたい要素を選ぶ

スクリーンかレイヤーパネルで、コンポーネントにしたい要素を選びます。ヘッダーなら、ロゴやメニューを包んでいるいちばん外側のボックスを選ぶのが基本です。

手順2：コンポーネント化する

右クリックメニューから[コンポーネント化]を選びます。ショートカットは ⌘＋J（Windowsは Ctrl＋J）です。

コンポーネント名を入力する画面が出ます。ここで、場所ごとに変えたい要素にチェックを入れると、その要素がプロパティになります。最後に[コンポーネントを作成]をクリックします。

手順3：別のページに配置する

デザインエディタ左のナビゲーションで、コンポーネントのアイコンを選びます。左パネルに作成済みのコンポーネントが一覧で出ます。置きたいものをドラッグ＆ドロップするか、クリックしてスクリーンに配置します。

コンポーネントを編集する：反映される範囲に注意

選んだだけでは編集できない

コンポーネントを選ぶと、枠線やボックス全体が紫色で表示されます。レイヤーパネルのレイヤー名の先頭にも、コンポーネントのアイコンが付きます。誤って編集しないよう、選んだだけでは中身を触れない作りです。

編集するときは、ダブルクリックするか、選んだあとにEnterキーを押して編集モードに入ります。編集モードでは、ボックスの追加・削除、レイアウトや外観の変更、プロパティの追加ができます。テンプレートで紫色のボックスが直せないときも同じ操作です。テンプレート全体の編集の流れはStudioテンプレートの使い方と編集方法で紹介しています。

編集はすべての配置箇所に反映される

編集モードで加えた変更は、他のページも含めたすべての配置箇所に反映されます。「このページだけ文字を変えたい」つもりで編集モードに入ると、全ページの文字が変わってしまいます。場所ごとに変えたい部分は、次の章のプロパティにしておきます。

なお、プロパティにした箇所は、編集モードに入らなくても配置先で直接書き換えられます。また、エディタでの変更は、公開パネルでサイトを更新するまで公開中のサイトには出ません。

プロパティで配置箇所ごとに中身を変える

公式ヘルプによると、コンポーネントでは次の6種類のプロパティが使えます。

プロパティ	できること
テキスト	テキストボックスやリッチテキストボックスの文字を、場所ごとに変える
画像	画像ボックスの画像を、場所ごとに差し替える
URL	サイト内のページや外部サイトへのリンク先を、場所ごとに変える
数値	数値を登録して使う
ブール値	オン／オフを持たせる。要素の表示・非表示の切り替えに使える
カラー	色（カラーコード）を登録して、場所ごとに色を変える

プロパティを追加して、ボックスに紐付ける

1. コンポーネントをダブルクリックするか、Enterキーで編集モードにします。
2. 右パネルで[データ]タブを開き、タブ右上の編集アイコンをクリックします。
3. [プロパティ]の横にある[+]で、種類と名前を決めて追加します。
4. プロパティの左にある青い丸からコネクタをドラッグし、対象のボックスに紐付けます。右パネルの各要素の設定タブから選んで紐付けることもできます。

編集モード中にテキストや画像のボックスを追加すると、そのままプロパティにするかを選ぶ表示も出ます。プロパティの名前は、[データ]タブでプロパティ名をクリックすると変えられます。不要になったら、プロパティ名をクリックして[Delete]で削除します。

値は配置した場所ごとに入れる

プロパティを作ったら、コンポーネントを置いた場所ごとに値を入れます。たとえば「実績カード」をコンポーネントにして、見出しと画像とリンク先をプロパティにします。すると、デザインは1か所で管理したまま、カードごとに違う実績を載せられます。

表示条件で、場所によって要素を出し分ける

表示条件を使うと、プロパティの値に応じて、コンポーネント内の要素を表示・非表示にできます。条件は次の4つです。

• is set：テキスト・画像・URL・数値のプロパティに値が入っているときに表示
• is empty：同じく、値が入っていないときに表示
• is True：ブール値のプロパティがオンのときに表示
• is False：ブール値のプロパティがオフのときに表示

設定は、出し分けたい要素を選び、右パネルの[設定]タブで行います。[表示条件を設定]の欄で使うプロパティを選び、条件を選びます。解除するときは、表示条件の右にある「×」をクリックします。

たとえば、ブール値のプロパティに紐付けた「おすすめ」のラベルは、オンにしたカードにだけ出せます。画像プロパティに is set を付けておけば、画像を入れなかったカードで空の枠が残るのも防げます。

Figmaにある「バリアント」のような切り替え機能は、2026年9月時点の公式ヘルプのコンポーネントの記事には載っていません。Studioでは、場所ごとの見た目の違いをカラー・ブール値のプロパティと表示条件で作る、と考えておくと迷いません。

ヘッダー・フッターを共通パーツにする使い方

公式ヘルプでも、使いどころとしてヘッダー、フッター、ナビゲーションが挙げられています。全ページに同じものを置くので、1か所の修正で全ページが直る効果がいちばん大きい場所です。

中身が全ページ共通なら、そのままでよい

ロゴ、メニュー、問い合わせボタン、コピーライトのように、どのページでも同じ中身なら、プロパティは作らなくて構いません。メニュー項目を1つ足すときも、1か所の編集で全ページに反映されます。

ページによって変えたい部分だけプロパティにする

たとえば、トップページだけ背景の色を変えたいならカラープロパティにします。特定のページでだけお知らせの帯を出したいなら、ブール値のプロパティと表示条件で出し分けられます。スマホ用のメニューの組み方はハンバーガーメニューの作り方で解説しています。

コンポーネントの解除と削除の違い

1か所だけ普通のボックスに戻す：解除（デタッチ）

配置した1か所を選び、⌘＋Shift＋J（Windowsは Ctrl＋Shift＋J）を押します。これでコンポーネントが解除されます。その要素は通常のボックスとしてスクリーンに残ります。元のコンポーネント本体や、他の配置箇所には影響しません。

解除したボックスは、その後コンポーネントを編集しても変わらなくなります。「このページだけまったく別のデザインにしたい」ときの手段です。

コンポーネントそのものをなくす：削除

左のナビゲーションからコンポーネントパネルを開き、削除したいコンポーネント名の右にある「×」をクリックします。削除すると、ページに配置していたものはすべて自動で解除され、通常のボックスとして残ります。画面から要素が消えるわけではありませんが、以後は一括で直せなくなります。

よくある質問

Q11ページだけ文字を変えたいのに、全ページが変わってしまいます

編集モードに入って文字を直すと、すべての配置箇所に反映されます。場所ごとに変えたい文字は、テキストプロパティにしてボックスに紐付けてください。プロパティにした箇所は、配置先で編集モードに入らずに書き換えられます。

Q2ボックスが紫色になっていて、クリックしても編集できません

そのボックスはコンポーネントです。選んだだけでは編集できない作りなので、ダブルクリックするか、選んでからEnterキーを押して編集モードに入ります。ただし編集モードでの変更は、他のページの配置箇所にも反映されます。

Q3コンテンツ編集モードでコンポーネントの中の文字を直せますか？

公式ヘルプでは、コンテンツ編集モード中はコンポーネントの編集ができないとされています。ヘッダーやフッターの文字を直すときは、コンテンツ編集モードを解除してから、通常の手順でコンポーネントを編集します。

Q4リストとコンポーネントはどう使い分けますか？

リストは、カード型の一覧のように、構造やレイアウトが共通で内容だけ違うボックスをまとめて扱う機能です。コンポーネントは、ページをまたいで同じパーツを再利用し、一括で管理する機能です。1つの一覧の中で並べるならリスト、複数のページに同じパーツを置くならコンポーネント、と分けると整理しやすくなります。

まとめ

Studioのコンポーネントは、⌘＋J で作り、1か所の編集をすべての配置箇所に反映させる機能です。場所ごとの違いは、6種類のプロパティと表示条件で出します。1か所だけ切り離すなら解除、コンポーネントそのものをなくすなら削除です。削除しても、配置済みの要素は通常のボックスとして残ります。まずはヘッダーとフッターをコンポーネントにするところから始めると、修正の手間が減るのを実感しやすいはずです。基本操作から確かめたい方はStudioの使い方と基本の仕組みもあわせてご覧ください。

ノーコードサロンでは、Studioの実装で迷ったときにチャットで質問・相談できます。コンポーネントのような仕組みは、最初にきちんと組んでおくと、その後の修正がずっと楽になります。基本の組み方から固めたい方の学び場として使ってみてください。