【Studio初心者ガイド】プロパティ(CMS)の使い方|種類・設定・活用事例

CMSと聞くと難しそう…そんなふうに感じていませんか?

この記事では、Studio初心者の方にもわかりやすく、プロパティの基本から設定方法、便利な使い方まで丁寧にご紹介します。

プロパティを理解することでサイト制作がより円滑に進みます。

Studio CMS プロパティとは?

プロパティは、記事や商品など、さまざまなコンテンツに情報を付け加えるための便利な機能です。

ここではまず、Studio CMSの全体的な構造とプロパティの位置づけ、そしてその役割や活用方法について分かりやすく解説していきます。

Studio CMSの構成要素（モデル・アイテム・プロパティ）

StudioのCMSは、「モデル」「アイテム」「プロパティ」という3つの要素で構成されています。

モデル|情報のグループをつくる

たとえば「ブログ記事」や「メンバー紹介」など、それぞれ異なる種類のコンテンツをまとめるためにモデルを使います。

モデルは、サイトの中でどんな情報を管理するかを分類する役割を果たします。

アイテム|モデルの中にあるひとつひとつのデータ

モデルの中にある具体的な記事や紹介文などが「アイテム」です。

1つのブログ記事、1人のスタッフ紹介、それぞれが1つのアイテムとして扱われます。

プロパティ|アイテムに付け加える情報

タイトル、画像、説明文など、アイテムに紐づける具体的な情報が「プロパティ」です。

アイテムの情報をより充実させるために活用でき、自由に追加できます。

CMSで情報を管理する際、プロパティはコンテンツの柔軟性と効率を高めるために欠かせない存在です。

単なる「付属情報」ではなく、更新作業の手間を減らし、デザインとデータの管理を分けるための大切なしくみです。

Studio CMS プロパティの追加・編集・削除方法

ここでは、プロパティの追加方法から、編集・削除の注意点、画面ごとの操作の違いまで順を追ってご紹介します。

プロパティの追加

1）CMSダッシュボードをひらきます。

2）モデル（ピンク四角）からプロパティを追加したいアイテムを選びます。

次に、アイテムの一覧画面にある「＋」ボタン（黄色四角）をクリックすると、追加できるプロパティの一覧が表示されます。

プロパティを追加（ブルー四角）をクリックします。

必要なプロパティの種類（テキスト、画像、カラーなど）を選び、ラベル名を入力して「追加」をクリックするだけで完了です。

なお、これらの操作はアイテムの詳細画面からも同様に行うことができます。

ラベル編集・削除

追加したプロパティは、後からラベル（名前）を変更したり、削除することも可能です。

ラベルの編集は、プロパティの名前部分（ピンク四角）をクリックして、鉛筆アイコン（黄色四角）をクリックするとすぐに変更できます。

削除と非表示は、プロパティの名前部分（ピンク四角）をクリックしてから「非表示にする」or「削除」（ブルー四角）で可能です。

「非表示にする」を選んだ場合は、一覧画面には表示されなくなりますが、アイテムの詳細画面では引き続き表示されていますのでご注意ください。

プロパティは、一度削除してしまうと、そこに登録されていたデータも同時に消えてしまい、元に戻すことはできません。

プロパティとボックスの紐づけ手順

プロパティをエディタに表示するには、「ハンドル」と呼ばれるデータ接続線のようなものを使って、データとボックスを結びます。

追加したプロパティをページ上に表示するには、エディタ内でボックスとデータを関連付ける必要があります。

レイヤーパネル内に表示されている、追加したプロパティ名の横にある「丸い点」（ピンク四角）をドラッグし、表示させたい要素にドロップ&ドラッグするだけで紐づけが完了します。

・テキストプロパティはテキストボックスに
・画像プロパティは画像ボックスに
・カラープロパティはボックスの背景や文字色に

といった具合に、種類ごとに対応する場所へ接続することで、CMSの情報がリアルタイムにデザインへ反映されます。

詳細画面と一覧画面の操作の違い

プロパティの編集や削除は、アイテムの「一覧画面」と「詳細画面」の両方から行うことができますが、それぞれ少し操作感が異なります。

一覧画面では、複数のアイテムの状態をまとめて確認しながら操作できます。

たとえば、全体の入力状況を見比べたり、一括で調整したいときに便利です。

一方、詳細画面は1つのアイテムに集中して編集する場面に向いています。

入力フォームが見やすく、複数のプロパティをじっくり確認しながら編集したいときにおすすめです。

状況に応じて使い分けることで、より効率よくCMSを管理できるようになります。

Studio CMS プロパティの種類

Studio CMSでは、記事や商品ページなど、さまざまなコンテンツに必要な情報を細かく管理するために、複数の種類のプロパティが用意されています。

それぞれのプロパティには異なる役割があり、使い方を理解することでCMSの活用の幅が広がります。

ここからは、代表的なプロパティをひとつずつ取り上げて、使い方や注意点を詳しくご紹介していきます。

1. テキストプロパティ

テキストプロパティは、記事のサブタイトルや商品説明、リンク先のURLなど、自由な文字情報を登録したいときに使えるプロパティです。

設定時には「改行なし：1行表示」か「改行あり：複数行表示」を選ぶことができ、それぞれの特徴を理解しておくと、より目的に合った使い方ができます。

ユースケース
・記事のサブタイトル
・商品の説明文
・SNSリンクや外部URLの登録など

設定方法

追加後、ラベル（ピンク四角）をクリックして、「改行」（黄色四角）をクリック、そして「改行あり」または「改行なし」（ブルー四角）を選択します。

「改行あり」に設定した場合、改行を入れるには「Shift」または「Option（WindowsではShiftまたはAlt）」キーを押しながらEnterを押してください。

あとから変更も可能ですが、「改行あり」から「改行なし」に切り替えると、改行部分に「<br>」という文字がCMS上に残ってしまうことがあるため、その際は手動で削除する必要があります。

「改行なし：1行表示」は、短い文やタイトル、リンク先のURLなど、シンプルなテキストを入れるのに適しています。
「改行あり：複数行表示」は、商品の説明文や記事の概要など、ある程度まとまった文章を入力したいときに便利です。

2. 数値プロパティ

数値プロパティは、その名の通り「数字」を入力して管理できるプロパティです。

デザインや表示に関わる細かな数値をCMSから直接コントロールできるため、見た目をそろえたいときや、柔軟にスタイルを調整したいときに役立ちます。

ユースケース

・余白や文字サイズなどのデザイン調整

設定方法

プロパティ追加時に「数値」を選び、各アイテムに値を入力します。

数値プロパティは、スタイルバー上に青い枠で表示されるパディングや文字サイズなどの数値部分に紐づけて使用することができます。

3. ブール値プロパティ

ブール値プロパティは、オンかオフか、つまり「はい・いいえ」「表示する・表示しない」といった2択の状態を設定できるプロパティです。

表示の切り替えや、特定の条件に応じたデザイン変更などに便利です。

ユースケース

・「新着」や「おすすめ」の表示制御
・特定のパーツの表示・非表示設定
・表示スタイルの切り替え（強調・通常など）

設定方法

「ブール値」プロパティを追加し、わかりやすいラベル（例：「おすすめ表示」など）を設定してアイテムに紐づけます。アイテムごとにオン／オフを選択します。

4. カラープロパティ

カラー（色）プロパティは、アイテムごとに色を設定できるプロパティです。

背景色や文字色などに使うことで、コンテンツの印象を変えたり、カテゴリーごとにデザインを分けたりと、見た目のバリエーションを広げることができます。

色を設定できるプロパティです。カラーコードで直接入力するか、カラーピッカーで選択できます。背景色や文字色として利用可能です。

【注意】
・グラデーションは使用できません。
・CMSダッシュボード上では、お気に入りパレットへの色の追加や削除は行えません。

ユースケース

・カテゴリごとの色分け
・タグやラベルの背景色
・セクションのアクセントカラー設定

設定方法

「カラー」プロパティを追加し、任意の色を選び該当のアイテムへ紐づけます。

グラデーションは使用できません。そしてCMSダッシュボード上では、お気に入りパレットへの色の追加や削除は行えません。

5. 画像プロパティ

画像プロパティは、各アイテムに画像を紐づけるためのプロパティです。

商品写真や記事のサムネイル、スタッフのプロフィール画像など、コンテンツに視覚的な情報を加えたいときに活躍します。

アップロードできる画像の形式やサイズについては、「Studioエディタにアップロード可能なファイル形式とサイズ」をご確認ください。

ユースケース

・ブログのアイキャッチ画像
・商品の写真表示
・スタッフのプロフィール画像

設定方法

「画像」プロパティを追加し、画像ボックス（追加パネルにあります）に紐づけて表示します。

6. セレクトプロパティ

セレクトプロパティは、あらかじめ登録した選択肢の中から1つだけを選べるプロパティです。

アイテムにラベルやカテゴリを付けたいときに役立ち、一覧表示の整列や絞り込みにも使われます。

たとえば「要予約」「予約不要」など、イベントの参加方法を表すラベルを1つだけ表示したい場合に使います。

【注意】
・独立したページパスを作成することはできません。
・ダイナミックフィルターには対応していません。

カテゴリやタグなどで自動的にフィルターされた一覧ページを表示したい場合は、参照プロパティの活用をご検討ください。

ユースケース

・「要予約」「予約不要」などイベントの参加条件
・商品の販売ステータス（販売中／終了など）
・お知らせ記事の分類など

設定方法

「セレクト」プロパティを追加し、選択肢を登録します。アイテムごとに1つを選択します。

7. マルチセレクトプロパティ

マルチセレクトプロパティは、セレクトプロパティと違い、1つのアイテムに対して複数の項目を選ぶことができます。

1つのコンテンツに複数のタグをつけたいときなどに便利です。

たとえば、採用情報ページで「人事」「広報」「経理」といった複数の業務ラベルを設定したい場合、マルチセレクトプロパティを使えば、1人のスタッフに複数の担当を表示できます。

条件は最大5つまで指定できるため、細かい情報整理に向いています。

【注意】
・独立したページパスを作成することはできません。
・ダイナミックフィルターには対応していません。

カテゴリやタグなどで自動的にフィルターされた一覧ページを表示したい場合は、参照プロパティの活用をご検討ください。

ユースケース

・「経理」「人事」「広報」などの業務ラベルの複数表示
・作品ジャンル（「Web」「アート」など）のタグ管理
・記事のテーマを複数登録したいとき

設定方法

「マルチセレクト」プロパティを追加し、選択肢を登録します。表示順はドラッグ＆ドロップで調整できます。最大5つまでフィルター条件に利用できます。

8. 参照プロパティ

参照プロパティは、他のモデル（たとえば「ライター」や「カテゴリー」）とアイテムをつなげることができるプロパティです。

より詳細な情報の表示や、動的なページの作成が可能です。

たとえば「タグごとの記事一覧ページ」や「カテゴリー別の動的ページ」を自動で生成できるようになります。

さらに、タグやカテゴリーごとに説明文やアイコン画像などを持たせられるのも大きな特徴です。

ユースケース

・記事にライター情報（画像・名前など）を表示
・タグやカテゴリーの設定と一覧ページの作成
・コラボメンバーや関連アイテムの表示

設定方法

「参照」プロパティを追加する際に、対象となるモデル（ピンク四角）を選び、シングルセレクトまたはマルチセレクトのどちらか（黄色四角）を選択します。後から変更はできません。

まとめ

Studio CMSのプロパティは、コンテンツ管理を効率化するための有用な機能です。

本記事を通じて、活用に向けたイメージを具体的に描いていただけたなら幸いです。

ぜひご自身のサイトにも、少しずつ取り入れてみてください。