【解説】STUDIOのCMSとは | 仕組み、特徴、使い方のまとめ

STUDIOのゴールドエキスパートとして活動している「caroa」です。この記事では、STUDIO CMSの基本的な仕組みやその特徴、使い方をなるべく詳しく解説いたします。

これからSTUDIOを導入しようと考えている方、STUDIO触ってみたけどよくわからない、WordPressなどのCMSからSTUDIOへ移行を検討している方はぜひ参考にしてください。

基礎知識：そもそもCMSとは

Contents Management System（コンテンツ・マネジメント・システム）の略です。

Webサイトを構成するテキスト、画像などをコンテンツと呼びます。そのコンテンツを管理できるシステムのことをCMSと言います。

例えば、イメージしやすいのはブログ記事です。CMSの仕組みがないと、ブログを書くたびにHTMLでコーディングしてページを生成しないといけません。ブログ記事はほぼ同じデザインでアイキャッチや本文だけが変わっていることが多いかと思います。

そんな時に活躍するのがCMSです。CMSを活用することで簡単にブログ記事をはじめとしてコンテンツを追加、変更することができます。

STUDIO CMSの仕組み

STUDIO CMSは、アイテムとモデルの組み合わせでできています。ここが基本的な概念になりますので、詳しく解説していきます。

アイテムとは

記事、ユーザー、タグなど、コンテンツ一つひとつのことを指します。この最小単位のデータを「アイテム」と呼びます。

（引用：公式ヘルプページ）

アイテムは、どこかのモデルに必ず所属しています。所属するモデルごとに異なったUIやデータ構造になっています。

モデルとは

アイテムを入れる箱のような存在です。

（引用：公式ヘルプページ）

例えば、

・ブログモデル内の、記事アイテム1、記事アイテム2
・メンバーモデル内の、ユーザーアイテムA、ユーザーアイテムB

というように、モデルの箱があり、その中にアイテムを追加していく形になります。

ちらっと出てきましたが、モデルには複数のタイプが用意されています。

各タイプはどういった構成のモデルで、どのようなときに使用できそうなのかを解説していきます。

モデル1： 記事タイプ

「テキスト（タイトル）」と「リッチテキスト（本文）」で構成されたアイテムを作成できるモデルです。
例えば、記事の管理として使用できそうです。

（↑記事モデルのアイテム）

ちなみに、手動で削除することもできますが、Corverというイメージプロパティも自動で生成されるようです。（プロパティについては後述）

モデル2：ユーザータイプ

「画像」と「テキスト」で構成されたアイテムを作成できるモデルです。
例えば、ライターの管理として使用できそうです。

（↑ユーザーモデルのアイテム）

モデル3：カテゴリータイプ、カスタムタイプ

「テキストのみ」で構成されたアイテムを作成できるモデルです。
タイプとして２つ用意されていますが、どちらも同じようなので、基本はカスタムタイプを使用すればよいのかなと思います。
例えば、タグの管理として使用できそうです。」

（↑カスタムモデルのアイテム）

以上のように、どんなアイテムを作りたいのかに合わせてモデルを選択していきましょう。

実はアイテムには、あらかじめ決まっているもの以外に「プロパティ」として自由に情報を追加することもできます。

プロパティとは

各アイテムに、自由に付与できる情報のこと。
例えば、以下のように情報を付与していきます。

記事モデルに、「カバー画像」「タグ」などのプロパティを設定
↓
記事モデル内の各アイテムで、自由にカバー画像、タグを追加

文字だけでは分かりづらいかもしれないので、実際の画面で解説します。

プロパティの種類

大きく分けて「テキストプロパティ」「イメージプロパティ」「参照プロパティ」の3種類あります。

（↑記事モデルにプロパティを追加している様子）

プロパティ1：テキストプロパティ

アイテムに、テキストで自由に情報を追加したいときに使用します。
例えば、以下のような使い方ができます。

・記事モデルに概要つける
・ユーザーモデルにTwitter、InstagramなどのSNSアカウントをつける
...etc

今回は、記事モデルに「概要」というプロパティを追加してみます。

追加できたら「保存」ボタンを押してください。押さないと、追加したデータがリセットされてしまいます。

記事モデルのリストに「概要」という項目が追加されました。

追加されたことが確認できたら、次はアイテム内に情報を書いていきます。

ちなみに、アイテムからもモデルにプロパティを追加することもできます。

プロパティ2：イメージプロパティ

アイテムに自由に画像を設定したいときに使用します。

例えば、以下のような使い方ができます。

・記事モデルにカバー画像をつける
・ユーザーモデルに複数のアイコンをつける
...etc

設定方法はテキストプロパティとほぼ同じなので、省略します。

プロパティ3：参照プロパティ

アイテムを他のアイテムと紐付かせたい（関連をつけたい）ときに使用します。

例えば、以下のような使い方ができます。

・記事モデルに、ユーザーモデルを「著者」プロパティとして紐付けさせる
・ユーザーモデルに、会社モデル（事前作成）を「所属」プロパティとして紐付けさせる

など、工夫次第で使い方はいろいろありそうです。

今回は、記事モデルにライター（ユーザーモデル）を紐付けてみます。
設定のときに、シングルセレクトかマルチセレクトかを選ぶことができます。

ライターが１人であればシングルセレクト、複数人で書いているのであれば、マルチセレクトを選ぶといいと思います。（※一度設定すると、あとで変更不可です）
今回はシングルセレクトにします。

事前に作成した、ライターのアイテムが表示されます。選択するか、まだ作成していなければ、新しくアイテムを追加しましょう。

以上がプロパティについての解説です。
今回紹介したのはあくまで一例なので、アイディアしだいでいろいろな使い方ができそうです。

必須のプロパティ：Slug（スラッグ）

実は、画像のなかでも少し登場していましたが、どのモデルにも「Slug（スラッグ）」がついています。

Slugとは、識別するための記号のことを指します。このSlugは最終的に公開したもののパスになります。

例えば、この記事のURLは「https://caroa.jp/article/IDeIXRvIAaraga」です。この中の「IDeIXRvIAaraga」がSlugになります。

Slugは必須なので、消すことはできないですが、自由に設定することができます。

コレクションとは

任意のアイテムを自由にまとめることのできるリストのことです。例えば、人気記事、特集記事、おすすめ記事だったりを自由にまとめることができます。

コレクションの作り方

ますは、左のメニューの「コレクション」の横のプラスボタンを押してください。

コレクション名、対象モデルを選択

新しいコレクションを作成するためのモーダルが出現します。コレクション名、対象モデルを選択します。

今回はモデル名を「おすすめ記事」に、対象モデルを「記事」にします。

コレクションに追加するアイテムを選択

「おすすめ記事」というコレクションに追加したい記事モデルのアイテムを選択していきます。

追加したアイテムは自由に表示順を変更することができます。

最後に公開したら完成です。

コレクションの使用例

表示したいアイテムを自由に設定できるコレクションをサイト内のサイドバーや記事の終わりに表示することで、サイト内回遊率を上げることができます。

noteだと、この記事の最下部に表示されるこちらもおすすめのような記事の集合体がコレクションに該当します。（自動でレコメンドされませんが...）

以上で、CMSを使用するための準備は完了です。
STUDIO CMSはとてもシンプルで直感的なので、すぐにCMSを始めることができます。

料金について

引用：公式サイト

プランによってCMSに関して大きく変わるのは、公開アイテム数です。

Starterは10アイテムまで、CMSプランは2000アイテムまで、Businessは10,000アイテムまで公開することができます。

上記の画像には書いていませんが、無料プランでは100アイテムまで公開することができます。

しっかりとCMSを使うのであれば、CMSプランがおすすめです。