【Studio初心者ガイド】CMSの仕組みを完全解説|モデル、アイテム、コレクション、プロパティ｜Editor 5.0対応

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

CMSの仕組みを理解すれば、Webサイトの運用が劇的にスムーズに!

モデル・アイテム・プロパティといった基本概念を押さえ、効率的なコンテンツ管理を実現しましょう。

初心者でも直感的に使える仕組みを徹底解説します。

この記事で、CMSの基礎から応用までしっかりマスターできます。ぜひ最後までご覧ください。

CMSとは?

CMS(コンテンツ・マネジメント・システム)とは、Webサイトの内容を簡単に管理・更新できる仕組みのことです。

通常、Webサイトを作るにはHTMLやCSSなどの専門知識が必要ですが、CMSを使えば、コードを書かなくてもブログ記事や画像の追加・編集ができるようになります。

Studio CMS

ダッシュボード(ピンク四角)に出現している通り、Studio CMSの仕組みの中心となるのは、「モデル」(黄色四角)、「アイテム」(ブルー四角)、「コレクション」(グリーン四角)、そして「プロパティ」です。

モデル

モデルは、同じ種類のアイテムをまとめて管理するための箱のようなものです。

Studio CMSでは、最初にモデルを作成し、その中にアイテムを追加して管理します。

例えば、記事タイプのモデルには記事のアイテムを、ユーザータイプのモデルにはライター紹介のアイテムを登録します。

モデルの追加

新しいモデルを追加するには、CMSダッシュボードの左側にあるモデル一覧パネルで、「＋」ボタン(ピンク四角)をクリックします。

すると、モデルの新規作成画面が表示されます。

作成するモデルの名前(例:「ニュース」など)を入力し、適切なモデルタイプを選択したら、「作成する」ボタンを押せば、新しいモデルが追加されます。

※モデル名は後から変更できますが、一度設定したモデルタイプは後から変更できないので注意が必要です。

モデルの種類(タイプ）

Studio CMSでは、管理したいコンテンツの種類に応じて4つのモデルタイプを選べます。

モデルの詳細は「【Studio初心者ガイド】モデルとは?CMSアイテムの管理」をご覧ください。

1. 記事タイプ（ブログ・ニュース向け）

ブログやニュース記事の管理に適したモデルです。

リッチテキストを使えるため、本文の装飾や画像・リンクの挿入も簡単にできます。

さらに、リアルタイムでの共同編集やコメント機能も搭載されており、スムーズなチーム作業が可能です。

2. ユーザータイプ（ライター・メンバー管理）

ライターやメンバーなど、個人のプロフィール情報を管理するためのモデルです。

アバター画像を登録できるのが特徴で、他のモデル（記事モデルなど）と紐づけて活用できます。

3. カテゴリータイプ（カテゴリ・タグ管理）

カテゴリータイプは、記事や商品を分類するためのモデルで、カテゴリやタグの管理に適しています。

カテゴリを作成しておくと、コンテンツを整理し、検索しやすくすることが可能です。

4.カスタムタイプ（自由なカスタマイズ）

カスタムタイプは、特定の用途に縛られず、自由にプロパティを追加して使えるモデルです。記事やメンバー情報以外のコンテンツを管理したいときに役立ちます。

アイテム

モデルの中に格納される1つ1つのデータが「アイテム」です。記事やライターのプロフィールなどを指します。

アイテムの追加

Studio CMSの管理画面を開き、アイテムを追加したいモデル(ピンク四角)を選択します。
※モデルが未作成の場合は、まずモデルを作成し、その後アイテムを追加しましょう。

アイテムを追加すると、すぐに編集画面が表示され、内容を入力・設定できる状態になります。

アイテムの編集

アイテムの編集画面のレイアウトや編集できる項目は、所属するモデルの種類によって異なります。

アイテム一覧で特定のアイテムにカーソルを合わせると矢印ボタン(ピンク四角)が表示され、それをクリックすると詳細画面へアクセスできます。

編集の基本的な仕様は、どのモデルでも共通の仕組みになっていますが、記事モデルのアイテムでは、リッチテキストエディタを使って本文を編集できます。

文章の装飾や画像の挿入、リンクの追加などが可能で、ブログ記事やニュース記事の執筆に適したUIが用意されています。

以下にそれぞれの項目の編集方法を説明します。

【タイトル】

以下(ピンク四角)がそれぞれのモデルにおけるタイトル編集の場所です。

・記事タイプ

・ユーザータイプ

・カテゴリータイプ、カスタムタイプ

【本文(記事モデルのみ)】

記事コンテンツの入力・編集用の専用フィールド(ピンク四角)です。主に本文の作成に使用します。

・文章

テキストを入力すると、デフォルトで段落スタイルが適用されます。書式の変更は、左端にある「P」マーク(ピンク四角)をクリックすることで他の書式(黄色四角)へ簡単に変更できます。

・装飾

テキストを選んで装飾を加えることで、読みやすく魅力的な記事を作ることができます。

太字(ピンク四角)は重要なポイントの強調に、斜体(黄色四角)は補足説明に使うと効果的です。打ち消し線(ブルー四角)は訂正や変更を、コード(紫四角)は特殊な表記を示すのに便利です。

リンク(オレンジ四角)を設定すれば、関連情報へと読者を誘導することもできます。コメント(グレー四角)は、プロジェクトのメンバーのみ閲覧可能で、例えば仲間に修正をお願いしたい内容があったときなど、共有するのに便利です。

これらの装飾は、マークダウン記法でも可能です。使いすぎず、必要な箇所に絞って活用しましょう。

・その他の要素

入力前に「＋」ボタン(ピンク四角)をクリックすると開くメニューで、以下のような要素(黄色四角)を記事に挿入できます。

1. 画像

   記事内に画像を挿入できます。

2. 埋め込みコード

   HTMLや外部サービスの埋め込みコードを追加可能です。

3. テーブル

   表（テーブル）を作成できます。

4. 箇条書きリスト

   項目を「・」で並べたリスト形式で表示できます。

5. 番号付きリスト

   順序があるリストを作成できます（1. 2. 3. …）。

6. 見出し 2（H2）

   大見出し（H2）を指定できます。

7. 見出し 3（H3）

   中見出し（H3）を指定できます。

8. 引用

   文章を引用形式で表示できます。

9. 区切り線

   記事内に横線を入れて、セクションを分けることができます。

10. 目次

• 記事内の見出しを基に、自動生成される目次を挿入できます。

※ここでは見出し3までの指定ができますが、見出し4は、文章の先頭に半角シャープを4つ「####」入力してエンターを押すことで指定できます。同じように、半角シャープ5つで見出し5、6つで見出し6、といった指定が可能です。

・外部の画像

外部の画像を記事に貼り付けるときの注意をご説明します。

画像が外部のサーバーを参照している場合、編集画面に「外部サーバーを参照しています」(赤線）という表示が出ます。

外部からの画像は、次のような理由で表示できなくなるリスクがあります。

• 参照元のサーバーがダウンした場合

• 元の画像が削除された場合

• 画像のURLが変更された場合

特に以下のケースで発生しやすいので注意しましょう。

• WordPressからコンテンツをインポートしたとき

• 他のウェブサイトから画像をコピー&ペーストしたとき

• Word等のドキュメントから画像を貼り付けたとき

【スラッグ】

スラッグ(ピンク四角)は、CMSアイテムを識別するための「ID」であり、公開サイトのページURLの末尾に設定される文字列です。

初期設定ではランダムな文字列が割り当てられますが、公開URLに直接反映されるため、記事の内容に合ったわかりやすい名称に変更することをおすすめします。

一度公開した後に記事のスラッグを変更すると、そのページのURLが変わり、それまでの成績(SEO)が落ちてしまうため、変更は慎重に行いましょう。

CMSアイテムごとのスラッグは、エディターで作成した動的ページのURLとして使用されます。

動的ページのURLは2つの部分で構成されます。

• 基本パス、例：posts/

• スラッグ:slug

例えば、動的ページのパスが blog/:slug の場合は、

基本パスがblog/で、アイテムのスラッグがaboutのとき→ blog/about
基本パスがblog/で、アイテムのスラッグがservicesのとき→ blog/services
基本パスが pass/で、アイテムのスラッグがcontactのとき→ pass/contact

となります。

つまり、URL(スラッグ)を変更したい場合は、

1. 基本パスの変更 → エディターの動的ページ設定で編集

2. 個別のスラッグの変更 → CMS各ダッシュボードで編集

以上の2か所で編集が必要です。

次に、スラッグに使える文字には制限があります。

スラッグに使用できる文字

• ハイフン（-）

• アンダーバー（_）

• 半角英数字（a-z、0-9）

最後に、同じモデル内で、同じスラッグを複数の記事に設定することはできません。例えば、「お知らせ」モデルの中でnews-2024というスラッグを2つの記事に使うことはできません。

もし以下のような操作をした場合、エラーメッセージが表示され、保存できません。

• 使用できない文字(日本語や特殊文字など)入力

• 既に使用されているスラッグを設定

コレクション

コレクション(ピンク四角)とは、Studio CMS内の特定のアイテムを選び、まとめて管理・表示できる機能です。 例えば、ブログ記事の中から「おすすめ記事一覧」を作成したり、特定のカテゴリのアイテムを並び替えて掲載する際に役立ちます。

コレクションの便利な特徴の一つは、アイテムの表示順を自由自在に変更できる点です。

通常、記事タイプのモデルでは公開日時順に自動的に並び替えられますが、コレクションを使えば、以下のように好きな順序でコンテンツを並べることができます。

• 人気記事を上位に表示

• おすすめ商品を季節に合わせて並び替え

• 重要なお知らせを最上部に固定

作成したコレクションは、CMSダッシュボードのコレクション一覧から簡単に確認・編集できます。

コレクションの追加

CMSダッシュボード左側のメニューから「コレクション」を選択し、「+」ボタン(ピンク四角)をクリックします。

コレクション名を入力し、参照するモデルを選択します。例えば「おすすめ記事」「人気商品」など、用途が分かりやすい名前を付けましょう。

「＋アイテムを追加」ボタン(ピンク四角)をクリックして、コレクションに表示したいアイテムを選びます。複数のアイテムを自由に追加できます。

コレクションアイテムの並び替え

アイテムの順序変更は、ドラッグ&ドロップで簡単にできます。

各アイテムにマウスを合わせると表示される移動用アイコンをつかんで、好きな位置に動かすだけです。

これにより、重要な情報を上位に表示するなど、効果的な並び順に調整できます。

コレクションアイテムの削除

コレクションからアイテムを外したい場合は、該当アイテムにマウスを合わせると右上に表示される「×」マークをクリックします。

削除してもアイテム自体は残りますので、必要に応じて後から再度追加することもできます。

コレクションのステータス変更

コレクションにも記事と同じように公開ステータスがあります。

「下書き」状態のコレクションは、サイト上のCMSリストには表示されません。

サイトに表示するためには、必ずステータスを「公開」に変更しましょう。これにより、意図したタイミングでコンテンツを公開できます。

コレクション名の編集

コレクション一覧から、変更したいアイテムをクリックし、設定画面でコレクション名(ピンク四角)をクリックすると、名前を変更できます。

コレクションの削除

コレクション一覧から、削除したいアイテムをクリックし、設定画面の3点メニューをクリックすると出現する削除ボタン(ピンク四角)をクリックすればできます。

削除しても、コレクション内のアイテム自体は残りますので、安心して整理できます。

コレクションの注意事項

コレクションリストを使用する場合、以下の機能は利用できません。

• フィルター機能

• もっとみるボタン

これらの機能が必要な場合は、コレクションではなく通常のモデルを使用した動的リストの活用をご検討ください。

コレクションも「CMSアイテム」の一種であり、公開状態になると「公開アイテム数」に含まれます。

また、コレクションは1つのモデルのみを対象に作成でき、複数のモデルをまとめることはできません。

コレクション内に追加できるアイテムの数に制限はありませんが、リストとして表示できるのは最大50件までとなります。

プロパティ

CMSプロパティは、記事や商品などのコンテンツに付加できる情報です。各アイテムの特徴や属性を効果的に管理できる便利な機能です。

CMSプロパティの種類

CMSプロパティには、基本情報を管理するものから、選択式で分類できるもの、他のデータと紐づけられるものまでさまざまな種類があります。

基本プロパティ(情報の登録)

• テキスト：タイトル、サブタイトル、説明文などの文章情報

• 数値：価格、在庫数、記事の閲覧数など数値データの管理

• カラー：カテゴリーの色分けやデザイン要素の統一

• 画像：アイキャッチ画像、商品写真、プロフィール画像

選択プロパティ(分類・フィルタリング)

• セレクト(単一選択)：記事のステータス
  (例：「公開」「下書き」)や商品サイズ（例：「S」「M」「L」）など、1つだけ選べる情報を管理

• マルチセレクト（複数選択)：タグや特徴
  (例：「オーガニック」「送料無料」など)、複数の項目を選択可能で、柔軟な分類に対応

特殊プロパティ(条件付き表示・連携)

• ブール値(オン/オフ)：特定条件で表示を変えられる(例：「新着マーク」「おすすめ商品」）

• 参照(シングル/マルチ)：他のモデル（カテゴリ、ライター情報、関連商品など)を参照し、アイテム同士を関連付け

プロパティを適切に設定すると、サイトの管理が格段にしやすくなり、運用コストを抑えながらスムーズにコンテンツを更新できます。活用方法を理解し、適切に組み込むことで、見

CMSプロパティの追加

プロパティの追加は、CMSダッシュボードから簡単に行えます。以下の手順で設定していきましょう。

対象のモデル(ピンク四角)を選択します。

そして、[+]ボタン(黄色四角)をクリックし、プロパティを追加(ブルー四角)をクリックします。そうすればプロパティが追加されるので、あとは適宜、値を編集します。

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

追加したいボックスを選択し、右側パネルの「データ」タブの「丸い点」(赤四角)をドラッグ&ドロップして、対象の要素につなげて完了です。

ラベル編集とプロパティの削除

CMSダッシュボードにアクセスし、対象のモデルを選択します。

プロパティのラベル(ピンク四角)をクリックすると、ラベルの編集(ブルー四角)やプロパティの削除(黄色四角)が可能です。
※プロパティを削除すると元に戻すことができません。

Studio CMSの特徴

Studio CMSは、Webサイトの運営を効率的にする様々な機能を備えています。特に以下の特徴が、日々のコンテンツ管理を快適にします。

リアルタイム共同編集

複数のメンバーが同時に作業でき、コメント機能で即座にフィードバックを共有できます。校正作業がスムーズになり、チームの生産性が向上します。

使いやすいインターフェース

• 直感的な操作画面

• ドラッグ＆ドロップでの簡単編集

• マークダウン対応エディタ

公開管理

予約投稿機能により、決まった時間に自動で記事を公開できます。キャンペーンやイベント情報の発信に便利です。

WordPressからの移行

XMLファイルでのインポートに対応しており、既存のWordPressサイトからスムーズに移行できます。記事やタグなどを簡単に引き継げます。

コンテンツの整理

コレクション機能を使えば、おすすめ記事や特集記事をまとめて表示できます。サイトの見せ方を工夫できます。

SEO対策

基本的なSEO設定が簡単にできます。メタタグの設定やURL構造の最適化も可能です。

権限管理（Businessプラン以上のみ）

Businessプラン以上のプロジェクトでは、編集者ごとに特定の操作を制限できる機能があります。

これらの機能を組み合わせることで、効率的なサイト運営が実現できます。サイトの規模や目的に合わせて、必要な機能を選んでご活用ください!

まとめ

Studio CMSの基本であるモデル・アイテム・コレクション・プロパティの仕組みを理解することで、効率的なサイト管理が可能になります。

初心者の方でも直感的に操作できるのが魅力です。記事で紹介した機能を活用しながら、より快適なWebサイト運用を目指しましょう。

「どこから始めたらいいかわからない…」と感じたら、まずは小さく試してみるのがおすすめです。

少しずつ触れていくうちに、自然と使いこなせるようになります。Studio CMSを活用して、自分だけの素敵なサイトを作り上げてください。