【日本語版Webflow University】 Webflow CMSの概要

この投稿はWebflow社が提供する「Intro to Webflow CMS」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/intro-to-webflow-cms

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

WebflowのCMS機能を使用することで、ブログやお知らせ、メディアの記事投稿をノーコードで簡単に行えるサイト構築をすることができます。

これによって、デザインテンプレートさえ作ってしまえば、あとはCMSにデータを登録するだけで、サイト内のコンテンツを拡充できます。

この記事では、そんなWebflow CMSの機能概要について解説します。

‍

CMS（コンテンツ・マネジメント・システム）は、すべての動的コンテンツを保存・管理する場所です。

Webサイトは、さまざまなページでその動的コンテンツを使用します。動的コンテンツを使用したページでは、クライアントがCMSでコンテンツを作成または変更すると、そのコンテンツが参照されているすべての動的ページが即座に更新されます。

Webflowの「ビジュアル」コンテンツ管理システム（CMS）は、構造化されたコンテンツの作成、そのコンテンツに沿ったデザイン、そしてその更新を、ノーコードで高リス的に行うことができます。

‍

動的コンテンツの構築について

動的コンテンツの構築に際し、一番初めにすることは、掲載する情報を登録するデータベース作りです。ブログ記事、求人情報などに掲載する「タイトル」や「本文」などを登録するための「CMS Collection」作りの方法から見ていきましょう。

‍

フィールドを定義する

コレクションづくりでは、Excelの表をイメージしてください。投稿記事一覧の情報を下記画像の様にExcelにまとめたとします。その時に、青字になっている部分をWebflow CMSでは「フィールド」と呼び、赤字の1行1行をアイテムと言います。

CMS Collectionを作成するとき、そのコレクション内の各アイテム（投稿記事など）にどのような情報を持たせるか設定する必要があります。これをフィールドの定義と言います。

例えば、ブログなら、記事ごとに「タイトル」「アイキャッチ画像」「本文」「投稿日」などがフィールドの種類として必要になり、このフィールドの種類ごとに、登録する情報に適したフィールドをWebflow CMSコレクションに作ってあげる必要があります。

例えば、タイトルなら「プレーンテキスト」、アイキャッチ画像なら「イメージ」がぞれぞれ適したフィールドになります。

‍

コンテンツを作成する

フィールドを定義し、コレクションを作成したら、コレクションアイテムの作成を行います。例えば、「ブログ記事」コレクションを作成したら、投稿する記事の作成に取り掛かります。具体的には、先ほど作成したフィールドに必要情報を入力して、1つずつアイテムを作っていくことになります。

また、CSVファイルをインポートすることで、一度に大量のアイテムをWebflow CMS Collection上に生成したり、サンプルコンテンツでアイテムを作成したりすることも可能です。

‍

動的コンテンツの接続について

コレクションの構築をし、いくつかのアイテムが揃ったら、サイトに動的コンテンツを表示させることができます。コレクションリスト（一覧ページ）を作成する方法と、コレクションページ（詳細ページ）を作成する方法の2つがあります。

‍

コレクションリスト（一覧ページ）

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

コレクションページ（詳細ページ）

コレクションページは、コレクション内の各アイテムに登録された情報を元に自動的に作成されます。コレクションリストと同様に、各コレクションアイテムのページでは、任意のフィールドとページの要素を接続することができます。ある一つのコレクションページのデザインを変更すると、すべてのコレクションページが更新されます。

‍

動的コンテンツの編集について

コレクションは、いつでもコンテンツを編集したり追加したりすることができます。コンテンツの編集や追加は、デザイナー画面から行うこともできますし、エディター（Editor）を使うこともできます。エディターを使用すると、Webflowアカウントを持っていない人でも、コレクションの追加、編集、削除が可能になります。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。

‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

‍