Studio CMSの仕組み攻略ガイド
いっちゃ
2023.10.20
Updated:2024.12.24
CMSを理解して、使い倒したいあなたへ
こんばんは！STUDIO プロダクトスペシャリストのいっちゃです。
今回の記事では、STUDIO CMSの仕組みと基礎知識をご紹介します。
洗練されたデザインエディタは、STUDIOの大きな魅力です。
エディタ上にボックスを配置し、直接コンテンツを流し込んだり、デザインを施した上で、作成したWebサイトをワンクリックで公開することができます。
しかし、ポートフォリオサイトやマガジン、コーポレートサイトのニュースセクションなど、一定以上の更新頻度で運用する場合、デザインエディタに直接コンテンツを追加する作業は、大きな手間となります。
そこで使ってほしい機能が、STUDIO CMS。
今回の記事では、初めてSTUDIO CMSを触る方にも伝わるように、基礎的な仕組みの理解を後押しする情報と、参照ドキュメントをまとめました。
これを読めば、一歩理解が深まること間違いなし。
10分ほどで読み切ることができますので、ぜひ最後までご覧ください。
CMSの概念
CMSとは？
Webサイトを構成する要素は、ビジュアルデザインとコンテンツに大別することができます。
CMSとはContents Management Systemの略。つまり、コンテンツのみをデータベースに登録して管理する仕組みです。ビジュアルデザインに直接コンテンツを適用する必要がないため、専門知識がなくても、コンテンツの編集や追加が容易な仕組みであることが大きな魅力です。
CMSと相性がいいユースケース
CMSを活用することで、コンテンツ管理にかかる工数を抑えることが可能です。
例えば、以下のようなケースで利用されています。
コーポレートサイトのニュースセクション
ポートフォリオサイトの実績
マガジン/ブログサイトの記事
採用情報サイトのインタビュー記事
これらのWebサイトに共通していることは、ビジュアルデザインを共通化させた上で、テキスト、画像などのコンテンツのみを差し替える必要があること。そして、更新運用が必要であることです。
代表的な利用例として、STUDIOが展開しているSTUDIO ShowcaseやSTUDIO Partners。今閲覧しているSTUDIO Blogも、CMSでコンテンツを作成し、Webページとして公開しています！
STUDIOにおけるCMS
STUDIO CMSは、デザインエディタとCMSを同一のプロジェクト内で管理することが可能です。無料のFreeプランをはじめ、CMS・Businessプランのプロジェクトで利用できます。
Webサイト制作手順を比較してみましょう。
初めに、デザインエディタのみを利用する場合は、コンテンツを直接エディタ上に配置してビジュアルデザインを行います。
STUDIO CMSを利用する場合。コンテンツをCMSで管理し、デザインエディタで作成したボックスにプロパティとして紐付けます。
CMSの構造
STUDIO CMSは、モデル・アイテム・プロパティの3つの要素で構成されています。
モデル
モデルは、アイテムを束ねるグループ。 ブログ記事に適した記事タイプや自由度の高いカスタムタイプなど、4つのタイプから選択し、追加することが可能です。
アイテム
アイテムはモデルに内包された単一のデータです。 デザインエディタ上で、動的リストの1アイテムや、動的ページの個別ページとして展開することができます。 アイテムごとに、公開ステータスを制御することが可能です。
プロパティ
アイテムに追加することができる関連情報です。 初期設定時はタイトル、slugなど最低限のプロパティが設定されています。 モデルごとにプロパティを追加することができ、各アイテムごとに個別の値を登録します。
プロパティは3種類に大別することができます。
すべてのモデルにあらかじめ設定されている、必須プロパティ
タイトル
アイテムのタイトルを設定することができます。
slug
アイテムに一意のIDを設定することができます。 ランダムな初期値が設定されますが、変更することが可能です。 アイテムを動的ページに適用した場合、slugがurlの末尾に表記されます。
公開/更新日
公開日/更新日が自動的に登録されるプロパティです。 記事モデルでは、アイテムが公開日順にソートして表示されます。
この3つのプロパティは削除したり、タイトルを変更することはできません。
すべてのモデルに追加することができるプロパティ
テキスト
マークダウン記法ではないテキストを記載することができます。プロパティ追加時に改行の有無を選択することが可能です。 改行ありの場合、入力時にshiftもしくはoption、または ⌘（WindowsではShiftまたはAlt）を押しながらReturn（Enter）を押すことで改行することができます。
また、要素のリンク先となるURLを記入することも可能です。
数値
数値を持たせることができます。登録した数値は、デザインエディタ上でBoxの横幅などのプロパティに紐づけることが可能です。
ブール値
条件分岐を持たせることができます。 真理値と同様の仕組みでtrue/falseを切り替えることができ、条件付きスタイルや表示設定を使った差分設定が可能です。
カラー
カラーコードを登録することが可能です。新規のカラー設定や、デザインエディタ上と共通のカラーパレットから選択することができます。
画像
画像をアップロードすることができるプロパティです。デザインエディタ上の画像ボックスに紐づけることで、画像を表示することができます。
参照（シングルセレクト/マルチセレクト）
同一プロジェクトのCMSに設定したモデルを参照し、含まれるアイテムをプロパティとして紐づけることができます。 シングルセレクトでは1アイテムのみ、マルチセレクトでは複数アイテムを紐づけることが可能です。
プロパティ追加後に、シングルセレクト/マルチセレクトを変更することはできません。
特定のモデルのみ、あらかじめ設定されているプロパティ
Body
記事モデルのアイテムでのみ使用することができるプロパティです。マークダウン記法を使用しコンテンツを記述することができます。
コンテンツ、プロパティをデザインエディタに紐づける
CMSに登録したコンテンツは、動的ページ・動的リストのいずれかを通じて、デザインエディタに紐づけることが可能です。
動的ページ
動的ページは、CMSに登録した単一のアイテムを紐づけて表示することが可能です。
通常ページと同様にデザインを施し、CMSアイテムに登録したプロパティを紐づけます。1つの動的ページにつき、1つのCMSモデルを紐づけることができます。
動的ページは、リスト最上位のアイテムが紐づけられた状態でプレビューされますが、デザインエディタ左上のアイテム選択リストから、プレビューするアイテムを切り替えることができます。
動的リスト
動的リストは、CMSアイテムを一覧化したリストです。
モデルを紐づけることで、含まれるアイテムが表示されます。 リスト内のアイテム表示数は1件から50件まで変更することができ、追加読み込みボタンを設置することも可能です。
エディタ上では、<ul>にリスト、<li>にアイテムが紐づけられます。
また、リストにはフィルターを設けることができます。
ダイナミックフィルター
ブログなどを作成する際、カテゴリー別の記事一覧ページを作成するケースがあります。そんな時はダイナミックフィルターの出番です。
以下の条件を満たすと、表示されているページと連動した動的なフィルタリングを適用することができます。
モデルに対して参照されているシングルプロパティのモデルが、配置先の動的ページに紐づけられたモデルと共通である場合
動的リストを動的ページ内に配置し、ダイナミックフィルターを設定する
カテゴリー（参照アイテム）別記事一覧ページを作成する：STUDIO U
動的カルーセル
動的リストの仲間に、動的カルーセルが存在します。
CMSリストと同様に、モデル単位でカルーセルを作成しアイテムを表示することができます。
少ない面積で、より多くの情報を表示したいケースにおいて有用です。
CMSの使い方
CMSに登録したコンテンツを、エディタ上に紐づける
CMSに登録したコンテンツをデザインエディタ上に表示するためには、受け皿となるボックスが欠かせません。テキストプロパティはテキストボックスに、画像プロパティには画像ボックスなど、対応したボックスに紐づけて表示することが可能です。
CMSに登録したデータは、左パネル内のレイヤーパネル/データに表示されます。 ボックスに紐づける際は、ハンドルをビヨーンと伸ばしてボックスと接続します。
プロパティと、対応する紐付け先
CMSに登録したコンテンツは、それぞれ対応したボックスに紐づけて表示することができます。
また、テキストなど一部の値はデザインエディタ側で加工を施すことが可能です。
Body
リッチテキストボックス / テキストボックス に紐づけることが可能。
リッチテキストボックスに紐づけた場合は、マークダウン記法を反映した内容で表示されます。テキストボックスに紐づけた場合は<p>のテキストとして表示されます。body内に含まれるテキスト以外の要素は記載されません。
データに対して加工することで、文字列を短縮したりタグを削除することが可能です。一例として、「一覧リストでは本文を頭から100文字だけ表示したい。」といった加工が可能です。
テキスト / タイトル
テキストボックスに紐づけることができます。 前述のbodyと同様にフィルターをかけ、文字列を加工することが可能です。
また、テキストプロパティにURLを記載した場合。ボックスのリンク要素として紐づけることができます。
画像
画像ボックスに紐づけることが可能です。 用途に応じて、Boxモード・imgモードを切り替えることができます。
カラー
ボックスカラーとテキストカラーに紐づけることが可能です。
数値
ボックスの余白・縦横幅・文字サイズなど、一部の値に紐付けることが可能です。
また、テキストボックスに紐付けることで、文字列として出力することもできます。
公開日時
テキストボックスに紐付け文字列として表示することができるプロパティです。前述のbodyと同様に、フィルターをかけ加工することが可能です。
一例として、日付をフォーマットすることで、Webサイトの様式に合わせた任意の形式に加工することも可能です。 フィルターを「YYYY/MM/DD」とすると「2023/01/31」(西暦/月/日)。「D MMMM YYYY」とすると「1 January 2023」(日/月/西暦)となります。
ブール値
条件付きスタイル・表示条件の切り替えトリガーとして使用することで、デザインに差分を設けることができます。 また、ボックスに直接紐づけることで、true/falseに基づきボックスを非表示にすることが可能です。
CMSアイテム毎の表示をカスタマイズする方法：STUDIO U
参照
参照したCMSアイテム内に含まれるプロパティを呼び出すことが可能です。紐付け可能なボックスは、設定されているプロパティの種類に依存します。
マルチセレクトのみ、参照したアイテム自体をCMSリストとしてエディタに表示することが可能です。
カテゴリー（参照アイテム）別記事一覧ページを作成する：STUDIO U
CMSの公開ステータス
CMSの各アイテムには個別の公開ステータスが存在します。 サイトの公開/非公開とは連動しておらず、アイテムごとに切り替える仕組みです。 これにより、サイトを公開した状態でコンテンツを下書きし、しかるべきタイミングで反映することが可能です。
公開ステータスは4種類存在し、アイテムリストに表示されるドットで示されています。 また、各アイテムのステータスは必ず下書きから始まり、公開中、変更ありを繰り返して運用します。
下書き
デフォルトのステータスである下書きは、コンテンツ制作中に適したステータス。 ライブプレビューで閲覧することができますが、公開サイトに表示されることはありませんので、安心して作業に取り組むことが可能です。ステータスカラーはグレー。
公開予約中
ステータス：公開予約中は、公開日時を指定しているものの、現在は非公開状態であることを示しています。
公開予約中の記事に編集を加えると、ステータスを下書きに戻すか、変更を破棄するか確認するポップアップが出現します。
記事タイプだけではなく、すべてのCMSアイテムで使用することが可能です。 公開日時を迎えると、自動的に公開ステータスへと切り替わります。決まった時間に発信したい記事などでの使用がおすすめです。 ステータスカラーはイエロー。
公開中
ステータス：公開中は、アイテムが公開されている状態であることを示しています。
もちろん、コンテンツを紐づける要素やページが存在しない限り、公開状態であってもWebサイト上に露出することはありません。 ステータスカラーはグリーン。
変更あり
ステータス：変更ありは、公開状態でありつつ、公開後に編集された差分が存在することを示しています。ステータスを公開に切り替えると、変更を公開サイトに反映することが可能です。 ステータスカラーはブルー。
CMSをもっと深く学ぶために
ここまで、STUDIO CMSの基礎的な概念と仕組みを紹介しました。もっと深く知識を得たいあなたに、おすすめのリソースを紹介します。
CMSの仕様を確認したい方へ
STUDIO U：公式仕様を記したドキュメントであるSTUDIO Uでは、操作方法など使い方や概念に関する情報をより深く理解することが可能です。 CMSに関するすべてのドキュメントは、カテゴリー、CMS：STUDIO Uをご覧ください。
実際にWebサイトを作りCMSを触る流れを体験したい方へ
Youtube：STUDIO CMS 2.0 でメディアサイトをゼロから作ってみよう【前編/後編】
前後編合わせて1時間ほどの動画で、STUDIO CMSの仕組みから操作の流れを体験することができます。メディアサイトの仕組みはブログやコーポレートサイトのニュース記事にも応用することができるので、CMSを使ってみたい！という方におすすめしています。
※動画中で操作しているSTUDIOは動画公開時点の仕様であり、カイゼンが実施されている場合があります。
不明点が出てきたら
CMSについて疑問が生じたら、STUDIO CommunityのCMSスペースで質問してみましょう。CMSの豊富な知識を持つユーザーが、あなたの疑問解決をサポートしてくれるはずです。
最後に
今回の記事では、初めてSTUDIO CMSを使う方でもわかりやすい、基礎的な仕組みの理解を後押しする情報とドキュメントをご紹介しました。個別事例に基づく使い方は省略しましたが、今後、一緒に体験できる記事を公開できるよう準備しています。
CMSを使用したコンテンツ管理は、紹介例以外のWebサイトにおいても非常に有用です。 私自身、採用情報サイトのコンテンツを丸々CMS化したことがあり、とても沼が深い仕組みであることを知っています。ぜひ使い倒してください。
この記事に対する感想も、Xなどでシェアいただけると嬉しいです。
それではまたお会いしましょう！いっちゃでした。
