CMS(コンテンツ・マネジメント・システム)は、すべての動的コンテンツを保存・管理する場所です。クライアントがCMSでコンテンツを作成または編集・変更すると、そのコンテンツが参照されているすべてのページが即座に更新されます。

ウェブフローCMSは、構造化されたコンテンツの作成、そのコンテンツに沿ったデザイン、そしてその更新を、一行のコードにも触れることなく行うことを可能にします。

The CMS collection settings panel displays six collections. The team members collection is selected which displays ten team members with their status, department, favorite color, created, modified and published columns. The select, export, import, settings and new team member buttons are displayed n the top right corner.

1. ダイナミックコンテンツの構造化

すべては「コレクション(Collection)」の作成から始まります。ブログ記事、チームメンバー、求人情報など、どんなものでもコレクションにして定型化することができます。

2. フィールドの定義

コレクションを作成するとき、そのコレクション内の各アイテムがどのような構造を持つかを決定します。たとえば、「チームメンバー」のコレクションを作成する場合、各チームメンバーの名前、画像、電子メールが必要になることがあります。この場合、コンテンツの種類ごとにフィールドを作成することができます(プレーンテキストフィールド、画像フィールド、メールフィールド)。

3. コンテンツの作成

フィールドを配置し、コレクションを作成したら、コレクションアイテムの作成を開始できます。例えば、「チームメンバー」コレクションを作成したら、各チームメンバーの作成に取りかかることができます。各チームメンバーには、先ほど定義したフィールドを入力します。 

また、CSVファイルをインポートして一度に大量のアイテムをインポートしたり、ダミーのコンテンツでアイテムを作成することも可能です。

A team member named Hazle Mclaughlin is selected from the CMS collection. The team members settings panel displays a basic info section including fields for their name and slug. Also included is a custom fields section displaying fields for department, favorite color and email to be filled out.

4. ダイナミックコンテンツの参照

コレクションを構成し、その中にいくつかのアイテムがある場合、プロジェクトにダイナミックコンテンツを追加することができます。これを行うには、Collection リストを作成する方法と、Collection ページを作成する方法の 2 つがあります。


A diagram displays the two ways to add dynamic content to your Webflow project. The two main elements from which Profile cards stem from are A Collection List or a Collection Page.

5. コレクションリスト

コレクションリスト要素を使用すると、任意のコレクションからコンテンツを追加することができます。コレクションリスト要素を任意のページにドロップし、コレクションに接続すると、そのコレクション内のすべてのコンテンツが利用可能になります。フィールドの値に基づいて特定のアイテムを表示したり、コンテンツを並べ替えたりすることができます。

Collection list icon thumbnail

6. コレクションページ

コレクションページは、コレクション内の各アイテムに対して自動的に作成されます。コレクションリストと同様に、各コレクションアイテムのページで任意のフィールドを参照することができます。あるコレクションのコレクションページの一つを編集すると、すべてのコレクションページが更新されますが、それぞれのコンテンツが更新されます。

7. ダイナミックコンテンツの編集

コレクションには、いつでもコンテンツを編集したり追加したりすることができます。コンテンツの編集や追加は、Designerから行うこともできますし、Editorを使うこともできます。Editorを使用すると、共同作業者がこれらのCollectionにログインしてアクセスすることができます。Editorを使用すると、クライアントがウェブサイト上で直接コンテンツをすばやく追加・編集することができます。