FramerのCMS・コンテンツ管理

おかゆ

2024/12/16

Framer CMSでコンテンツ管理を簡単に

CMSとは、Webサイトのコンテンツを管理・更新するためのシステムです。例えばブログ記事、アップデート情報、求人ページなど、同じデザインのページやリストを増減・変更したりするような場合に使われます。
FramerのCMSでは専門知識やデザイン知識がなくても更新でき、マーケティングチームやコンテンツライターの方など誰でも簡単に内容を更新することができます。

また、ComponentのVariantsを活用することで、コンテンツの状態に応じて異なるデザインバリエーションを簡単に表示できます。

CMSの基本概念と設定

左上のツールバーのCMSボタンをクリックしアクセスすることができます。

コレクションとアイテム

コレクションは、関連するコンテンツをグループ化する仕組みです。例えばブログの場合：

複数の記事をまとめる「ブログ」コレクション
著者の情報をまとめる「著者」コレクション
記事のカテゴリに関する情報をまとめる「カテゴリー」コレクション

などを作成し、それぞれを紐づけながらブログページの情報を構成することができます。
アイテムは各コレクション内の個別のコンテンツを指します。（例：ブログ記事1件）

フィールド

各コレクション内でアイテムにどんな情報を持たせるか決める場所をフィールドと言います。（タイトル、日付、本文など）上部メニューのEdit Fieldsから編集できます。

フィールドの要素の詳細について

Plain Text（プレーンテキスト）：見出しやタイトルなど、シンプルなテキスト入力
Formatted Text（フォーマットテキスト）：記事の本文など、リッチテキストエディタでの編集が必要なコンテンツ
Date（日付）：投稿日、イベント日程などの日付情報
Link（リンク）：外部URLや内部ページへのリンク
Image（画像）：サムネイル、バナー、ギャラリーなどの画像
Color（カラー）：要素の色指定に使用
Toggle（切り替え）：公開/非公開の設定や特集記事のフラグなど、Yes/No の値
Number（数値）：価格、在庫数、順序など、数値データの入力
Option（オプション）：カテゴリーや状態など、予め定義された選択肢から単一選択した値を設定
File（ファイル）：拡張子を指定したファイルをアップロードできる
Reference（参照）：他のコレクションのアイテムを参照する場合に使用（例：記事の著者情報）
Multi-Reference（複数参照）：複数のアイテムを参照する必要がある場合に使用（例：記事のタグ付け）
Divider（区切り線）：関連するフィールドをグループ化し、視認性を高めるために使用する

CMSを使ったパーツ・ページの作成方法

コレクションリスト

挿入方法：

コレクションリストは、任意のページにCMSのコンテンツを一覧表示するための機能です。Insert＞CMS＞Collectionsから入れたいコレクションを選択し挿入できます。ブログ記事一覧などによく使われます。

デザイン調整・コンテンツ適用：

レイヤーにはこのようにCMSアイコンが表示されます。アイテム1つ分の要素が表示され、編集すると全てのアイテムに反映されます。

CMSの内容を要素に適用するには、+マークを押して該当のフィールドを選択します。

また、CMSの状態に応じたデザインバリエーションを簡単に作ることができます。例えば、記事が完成しているかの値がNoの時は、カードを半透明にしクリックできないようにするなどです。
コレクションリストの中にComponentを入れ、プロパティパネルでVariantをCMSの値によって変える設定を行います。