メインコンテンツにスキップ
7. CMSの使い方

記事などのコンテンツを管理するCMSの基本について解説します。

Saika avatar
対応者:Saika
2か月以上前に更新

StudioのCMS機能

CMS(コンテンツ管理システム)は、技術的な知識がなくても簡単にWebサイトのコンテンツ(テキスト、画像、動画など)を作成・管理できるシステムです。

ユースケース

StudioのCMS機能は、定期的に更新や追加が必要なコンテンツの管理に便利な機能となっています。

  • 企業や個人サイトのブログ記事、お知らせ、新着情報

  • ポートフォリオサイトの作品情報

  • メディアサイトの記事

  • イベントの出展者情報

押さえておきたいポイント

CMS機能を使うとデザインとコンテンツを分けて管理できるため、同じデザインでコンテンツが違う複数のページを簡単に作成できます。

例えば、企業サイトのお知らせページを作る場合の管理画面と操作内容は下記の通りです。

管理画面

操作内容

CMSダッシュボード

ページに表示する具体的なコンテンツ(日付、タイトル、本文、画像など)の管理

デザインエディタ

ページのレイアウト(見出し、本文、画像の配置など)およびデザイン作成

デザインエディタで作ったレイアウトに、CMSダッシュボードで管理しているコンテンツを流し込むことで、同じ構成で内容の異なる複数のページを作成できるのです。

スクリーンショット:CMSの仕組み

次のセクションでは各画面での操作について詳しく解説します。

コンテンツを管理する画面

CMSダッシュボードでは、コンテンツを4種類に分けて管理します。

例えばWebサイトでお知らせ記事と作品をCMS機能を使って掲載する場合、次のように管理します。

  • モデル:「お知らせ」や「作品」といったまとまり

  • アイテム:「お知らせ」や「作品」内の記事1つ1つ

  • プロパティ:記事公開日、著者情報やカバー画像など記事に付随する情報

  • コレクション:モデル内の特定のアイテムを選んでキュレーションする機能

スクリーンショット:CMSダッシュボードの様子。

レイアウトやデザインを管理する画面

レイアウトやデザインはデザインエディタで作ります。作成したデザインに、CMSダッシュボードで管理するデータを紐付けて表示します。

デザインエディタを操作する様子。

データ紐付けた後に画面左上のトグルを切り替えると他のページ(アイテム)を表示することができます。

このように、レイアウトは同じでテキストや画像のみが異なるページが一括で作成できます。

動的ページを切り替える様子。

CMS機能が学べるコンテンツ

紹介する動画は公開時点のStudio仕様に基づくため、一部古い画面や情報がある可能性があります。あらかじめご了承ください。

学習コース動画「CMSの基礎」(初心者向け)

9つのレッスン動画でCMSの基礎が学習できます。テンプレートを利用して操作を一緒にすることでCMSが理解できます。

Studio CMS 2.0 でメディアサイトをゼロから作ってみよう(初心者向け)

メディアサイトをゼロからつくりながら、Studio CMSの仕組みと実装方法が学習できます。

公式ヘルプサイトのCMSカテゴリ(全レベル向け)

CMSカテゴリには、基本操作や概念などについて記事がまとまっています。CMS記事作成から公開までの流れを見て手元で一緒に操作すると理解が深まります。

CMS機能付きテンプレートで操作する(中級者向け)

Studioテンプレートが売買できる「Studio Store」では、CMS機能が組み込まれた多種多様なデザインテンプレートがあります。

CMS機能が組み込まれたテンプレートは、CMSデータとデザインがすでに紐づけされているため、紐付け方などが参考になります。無料テンプレートも充実しているので、実際にテンプレートを編集してCMSの使い方を学ぶことができます。

スクリーンショット:CMSを使ったテンプレート

以上CMSの基本とリソースです。次の記事では、いよいよサイト公開の方法とSEO対策についてご紹介します。


コレクション目次

こちらの回答で解決しましたか?