はじめに
Framerを使用した案件でCMSを使用することになりました。FramerのCMSを使用するのは初めてでしたので、実際に使用した感想などを記事にしました。
Framer/CMSを使用して作成したサイトは下記になります。CMSは各シリーズとシリーズに含まれる動画の管理に使用しています。
前提
ノーコード・ローコードのWEBサイト制作サービスFramerを使用しました。
Framerについては下記の記事をご確認下さい。
Framerには全てのプランでCMSが付属しています。プランごとに使用できるCMSの数（例：テーブルの数）に制限があります。今回はCMSに絞ったご紹介をしたいと思います。
料金について（公式）：
対象読者
- Framerに興味がある方
- ノーコードツールでのサイト作成に興味がある方
- ノーコードツールの使用経験がある方
FramerのCMSについて
FramerのCMSはCollections（コレクション）にコンテンツを追加していきます。各コンテンツは任意のFields（フィールド）を持っています。フィールドを目的に合わせて設計・設定します。
保存したフィールドの値を、ページやコンポーネントで使用します。また、コンテンツ内にコレクションへの参照（リレーション）を設定することが可能です。
公式のCMS解説ページ
🗄️ CMS管理
CMS管理はデザイン画面とは別のCMSページで行います。
上部のメニューからCMSページへ
FramerのCMS管理画面
フィールドについて
各コンテンツは任意のType（型）を持ったフィールドを設定することが可能です。
フィールドの型はコンポーネントの変数（Variables）と同じものとCMS独自の値があります。
型の種類はWordpressなどのCMSを使用・構築したことがあれば、迷うことも無いと思います。
 |
|---|
リレーション
FramerのCMSは、コレクション同士をつなげるReference（リレーション）が使えます。リレーションを使うと、カテゴリーやタグといった仕組みが実現できます。
簡単に触れますが、例えば写真のギャラリーサイトであれば作品のコレクションとカテゴリーのコレクションを作成します。作品のフィールドにカテゴリーへのリレーションを追加すれば、作品ページとカテゴリーで絞り込んだ作品の一覧ページを作れます。
LONG SHOTのシリーズコレクション。シリーズはFilmsコレクションのコンテンツを参照しています。
（先ほど説明した参照とは逆にしていますが、どちらでも同じ結果を得ることが可能です）
 |
|---|
プラグイン
Framerにはプラグインという機能があり、この中にはCMSのプラグインもあります。
Notionと接続できるプラグインがあったので試してみました。FramerでCMSを設定すると、Notion側からの投稿が可能でした。
ただし、プレビューやパブリッシュもFramerで行うので併用することになるので、Notionを使用するメリットは感じませんでした。現状はFramerのCMS画面で十分かと思います。
プラグインのマーケットプレイス
試してないこと
データのimportとexportは試していません。データ量の多いサイトも作成中ですので、いずれはバックアップを取得する目的でimport/exportを使用したいと思います。
🖼️ レイアウト（実装）時
CMSの情報を表示するには、入力したデータをVariables（変数）に紐づけます。変数はコンポーネントの＋マークがついているプロパティ値に使えます。
カスタムコンポーネントを作ると理解が進みやすいと思います。
任意のコレクションの使用
Homeや一覧ページに任意のコレクションを追加してCMSのデータを表示することが可能です。
左上のInsertから追加したいコレクションを選択します。一覧ページはPagesのNew CMS Pageから追加することもできます。
 |
|---|
コレクション（CMS） > アイテム（CMS） > コンポーネント の形でネストしています
コレクションの中に配置したコンポーネントやテキストのSet Variableに、CMSのフィールドの値が表示され選択できるようになります。
ページへの任意のコレクション配置の場合は、TitleやDescriptionにコレクションの値は使用できません。
CMS詳細ページ
CMSのコンテンツに紐づいたページを作成します。
PagesからNew CMS Page > コレクション > Detail Pageで追加します。ページがコレクション・コンテンツに包まれるので、配置したコンポーネントはコンテンツの値を参照することが可能です。
ページにコンテンツが紐づけられるので、設定画面でTitle,DescriptionなどにCMSのテキストデータ[1]を使用することが可能です。
リレーション・フィルター
リレーションの値はそのまま、プロパティ値として参照可能です。
より高度な方法として、フィルターを使用しリレーション先のプロパティ値を取得できます。
例えば、作品とカテゴリーの関係ですと、作品にカテゴリを設定した場合を考えます。
作品側から設定されたカテゴリーの参照はそのままで可能です。作品ページ内に設定したカテゴリ名＋個別リンクを設定することが可能です。
次にカテゴリーから作品を参照するにはどうするでしょう。カテゴリーに作品への参照を持つのも良いですが、全ての作品から指定したカテゴリーを持つ作品をフィルタリングする方が合理的です。
作品コレクションをカテゴリーコレクションの配下に配置します。次に作品コレクションのフィルターにカテゴリーでの絞り込みを設定します。これでカテゴリーにマッチした作品のみが表示されます。
（言葉での説明が難しいですが、使えると CMSの使用範囲が広がります）
 |
|---|
| 案件での実際の画面：１つのコレクションの中に別のコレクションをネストしています |
ページタイトルやmetaでの使用
CMSが紐づけられたページでは設定画面でページタイトル、DescriptionにCMSの値を使えます。
OGP画像にもCMSの値を指定できるので、URLをシェアする時のOGP画像も柔軟に指定できます。
 |
|---|
| "CMS Variables"が使用できる値です |
🚧 まだ不便なところ
繰り返しフィールドが無い
CMSのエディタに繰り返しフィールドが無いので、「同じようなブロックを繰り返す」ような事ができません。また、n個の画像を登録もできません。
記事数を取得できない
コレクションやフィルターをした時の全体数を取得できません。
したがってフィルターした結果が０件の場合などは工夫が必要になります。
コミュニティでの要望も出ていますが、まだ実装されていません[2]。
💡 まとめ
足りない部分はもちろんありますが、個人的にはかなり充実したCMS機能だと思います。
Proプランでは10個[3]のCMSが使用できるので、これだけあればかなりの事ができると思います。
これからも機能の追加や改善がされると思うので使っていこうと思っています。
制作したサイト
今回紹介した機能は https://long-shot.tv を制作する際に使用しました。
映像作品を紹介するシンプルなサイトなので、Framerに向いていると考え採用しました。CMSも実務では初めての使用でしたが使いやすくとても良かったです。
制作したサイトをぜひ見ていただけると嬉しいです。
日々の愛おしい無駄な時間を、
少しのブラックな視点とたっぷりのユーモアで描いた連作短編集。
ASTRSK(astrsk.co.jp)は、スタートアップ・新規事業開発に強いシステム開発会社です。サービスやシステムの構築を得意としており、開発をはじめデザインやUXにおいても優れた経験と技術を有しています。
Discussion