Studio CMSはブログ以外にも使える
StudioのCMSというと、ブログやお知らせ記事の管理をイメージしがちですが、実際にはそれ以外の用途にも使えます。
たとえば、次のような「変わる前提の情報」はCMSと相性が良いです。
- 空室情報
- 店舗情報
- 料金表
- スタッフ情報
- キャンペーン情報
今回やったのは、施設ごとの空室情報をCMS側で持たせることです。
CMS側には、主に以下の項目を用意しました。
- 空室なし（ON/OFF）
- 空室の部屋タイプ
- 施設名
この情報をCMSで管理し、一覧ページや各施設の詳細ページに表示できるようにしていきます。
※記事内で使用しているStudioの画面は、実際のクライアントサイトではなく、説明用に作成したサンプル画面です。
実際のやり方
1. CMSモデルを追加する
まず、CMSの管理画面から新しいCMSモデルを追加します。
今回は空室情報を管理したいので、施設ごとの空室状況を登録できるモデル（カスタムタイプ）を作成しました。
2. 必要な項目を追加する
次に、管理したい項目をプロパティとして追加します。
今回は、空室なしのON/OFFや、空室の部屋タイプを選択できる項目を用意しました。テキスト、セレクト、マルチセレクトなど、管理したい情報に合わせてプロパティを選ぶのがポイントです。
また、タイトルとは別に「施設名」をセレクト項目として持たせておくと、あとで表示する施設ごとに絞り込みやすくなります。
3. エディター画面でCMSと紐付ける
ここから、Studioのエディター画面でCMSと表示箇所を紐付けます。
まずListレイヤーを作成し、右側のデータタブから表示したいCMSモデルを選択します。そのうえで、施設名のセレクト項目を使って、表示する情報を施設ごとに絞り込みます。
（Listに関してはこちら→https://help.studio.design/ja/articles/4129102-リスト ）
ここは少しややこしいですが、「どのCMSデータを」「どの施設に対して」「どこに表示するか」を整理しながら進めると理解しやすいです。
注意点として、レイヤー構造が深くなりすぎると、Studio側で入れ子構造の上限に引っかかることがあります。その場合は、不要なグループ化を解除するなどして、レイヤー階層を整理する必要があります。
4. 空室情報のプロパティを表示する
Listの中にテキストレイヤーを作成し、右側のデータ設定から空室情報のプロパティを選択します。
設定がうまくいくと、CMSで登録した空室状況や部屋タイプが、ページ上に表示されます。
もし表示がうまくいかない場合は、テキストレイヤーがCMSのtitleや対象プロパティと正しく紐付いているかを確認するとよさそうです。
5. デザインを整える
最後に、表示された情報のデザインを少し整えます。
今回は、一覧ページと各施設の詳細ページに同じ要領で空室情報を追加しました。CMS側を更新すれば、紐付いている表示箇所にも反映されるようになります。
６. 空室がない場合
空室なしのON/OFF に関しては、表示条件を使用して、置いてあるテキストレイヤーの表示/非表示を切り替えるかたちで行います。
やってみて気づいたこと
チームへの共有は軽くでも必要
CMS化すると、更新作業はかなり楽になります。
ただ、CMS機能に慣れていない人が見ると、「これはどこを触ればいいの？」となりやすいです。特に、エディター側とCMS側の関係がわからないと、逆に混乱する可能性があります。
そのため、チーム内には「空室情報はCMSで管理している」「この項目を変えるとサイトに反映される」という共有をしておくのが大事だと思いました。
なんでもCMS化すればいいわけではない
今回やってみて、CMS化は便利ですが、なんでもCMSにすればいいわけではないとも感じました。
たとえば、更新頻度が低い情報であれば、わざわざCMS化しなくてもよさそうです。逆に、デザインとの結びつきが強い情報は、CMSで管理しようとするとかえって扱いづらくなる場合があります。
個人的には、「また変わった…」と思うような定期更新の情報だけCMS化するのがちょうどいいと感じました。
まとめ
Studio CMSは、ブログやお知らせだけでなく、空室情報のような「頻繁に変わる情報」の管理にも使えます。
一度仕組みを作ってしまえば、その後の更新はかなり楽になります。特に、複数ページに同じ情報を表示している場合は、手作業で修正するよりもミスを減らしやすいです。
今回のように、更新頻度が高く、表示箇所が複数ある情報は、CMS化を検討してみる価値があると思いました。
