前述の通り、「CMS」 とは、ブログページや実績紹介ページなど、同じデザインフォーマットのページを効率的に作成・管理できるシステムのことですが、ここでは、その仕組みについて、もう少し詳しく解説します。

例えば、ブログと実績紹介、それぞれの記事ページ（詳細ページ）をCMSで管理したい場合、まず2つの「Collection（コレクション）」を作成します。コレクションとは、箱のようなもので、ブログのコレクションの中には、ブログの記事を「Item（アイテム）」として登録していきます。アイテムにはコレクションごとに共通した設定項目があり、これを「Field（フィールド）」と呼びます。ブログであれば、タイトル、本文、アイキャッチ画像などがフィールドとして設定されます。

ブログでいえば、ブログのトップページなどに表示する記事一覧を「CMSリスト」と呼び、ブログの記事ページを「CMSページ」と呼びます。どちらも、CMSに登録されているアイテムが表示されます。CMSページでは、1アイテムが1ページになります。

実際のCMS画面では、左側にコレクションの一覧が表示されます。コレクションを選択すると、そのコレクションのアイテムが右側に表示されます。

ちなみに、上図のように、他のコレクションのアイテムを選択肢とするフィールドもあります。例えば、ブログのカテゴリー別の一覧ページを作りたい場合などに使用します。

アイテムの作成・編集

CMSのアイテムを新たに作成して公開したい場合の手順は下記の通りです。

1. コレクションの選択

2. 「New Item」をクリック

3. 右側に表示される編集画面で必要項目を入力

4. 「Save」をクリック

5. 「Publish」から公開

新規ではなく、既存のアイテムを編集したい場合は、「New Item」をクリックする代わりに、編集したいアイテムをクリックしてください。

下書きとして保存

新しく作成したアイテムは、「Publish」ボタンから公開するまで、公開サイトには反映されません。例えば、複数のアイテムを作成し、そのうち一部のみを公開したい（それ以外はまだ公開したくない）場合は、まだ公開したくないアイテムを選択し、「…」から「Draft Item」をクリックします。

そうすると、上記のように、Drafts（下書き）として保存されます。

下書きを公開

下書きのアイテムを公開したい場合は、アイテムの左端をクリックして選択し、上部の「Undraft」をクリックすると下書き状態が解除されます。

プロジェクトの設定によっては、新しいアイテム作成時の「Save」ボタンが「Save Draft」になっている場合もあります。この場合は、一度下書きとして保存されますので、公開したい場合は、「Undraft」をしてから公開してください。

アイテムを削除

アイテムを削除したい場合は、アイテムの左端をクリックして「Delete」をクリックしてください。右クリックから「Delete」を選択することも可能です。

Framerのフィールドには以下のようなものがあります。

Slug

Slug（スラッグ）は、そのアイテムによって生成されるCMSページのURLの末尾にくる文字列です。基本的には、そのアイテムの内容を端的に表す英語にするのがおすすめです。

例えば、「Webサイトをリニューアルしました！」というタイトルのブログ記事であれば、Slugを「website-renewal」とします。そうすると、この記事ページのURLは、「https://example.com/blog/website-renewal」のようになります。

Plain Text（テキスト）

装飾がない、通常のテキストを入力できます。見出しや簡単な説明文などで使用されます。改行できるタイプとできないタイプがあります。

Formatted Text（リッチテキスト）

ブログなどの記事部分に使用されます。文字の一部を太字やリンクにしたり、画像やYouTube動画、表などを挿入したりできます。詳しい使い方は、次項で解説します。

Date（日付）

日付を入力できます。直接数字を入力できるほか、右端のアイコンをクリックするとカレンダーが表示され、日付を選択できます。ブログの公開日やイベントの開催日などで使用されます。

Link（リンク）

リンクを設定できます。サイト内のリンクであれば、選択肢の中から選択でき、サイト外のリンクであれば、URLを入力します。

Image（画像）

画像を設定できます。クリックすると、画像の編集パネルが開き、「Choose Image」をクリックすると、パソコン内の画像を選択する画面が表示されます。

Gallery（ギャラリー）

「+」をクリックすることで、複数の画像を設定できます。ドラッグで画像の順番を入れ替えることも可能です。

Color（カラー）

色を設定できます。クリックすると色の編集画面が表示されます。

Toggle（トグル）

「Yes」/「No」を選択できます。

Number（数値）

数値を入力できます。

Option（オプション）

選択肢の中から項目を選択できます。

File（ファイル）

クリックすると、パソコン内のファイルをアップロードできます。アップロードできるのは、設定した拡張子のファイルのみです。

Vector Set（アイコン）

Canvasで使用しているVector Set（ベクター画像のセット）の中からベクター画像を選択できます。主に、アイコンの選択項目として使用されます。クリックすると選択肢が表示されます。

Reference・Multi-Reference（参照）

別のコレクションのアイテムを選択できます。ブログのカテゴリーや執筆者の選択項目などとして使用されます。単一選択のものと、複数選択可能なものがあります。Referenceの場合は鉛筆アイコン、Multi-Referenceの場合は選択したアイテムをクリックすると、アイテムの編集が可能です。「+」アイコンをクリックすると、アイテムを追加できます。

見出しと段落について

Formatted Text内のテキストは、大別すると「Heading（見出し）」と「Paragraph（段落）」に分けられます。「Heading（見出し）」は、「Heading 1」から「Heading 6」まであり、数字は、その階層を意味します。例えばブログ記事で、階層が1番上の見出し（Heading 1）は、その記事のタイトルになります。通常、記事タイトルは、Formatted Text内ではなく、別のPlain Textフィールドで指定しますので、Formatted Text内では、「Heading 2」以下を使用するのが一般的です。

見出しと段落の入力方法

Formatted Text の枠内で文字を入力すると、デフォルトでは「Paragraph（段落）」になっています。「Heading（見出し）」を入力したい場合は、上記矢印の部分をクリックして、Headingを選択してから文字を入力します。Paragraphのまま文字を入力したあとに、それらの文字を選択して上記矢印の部分からHeadingに変更することも可能です。

文字装飾や画像などの挿入

上記の赤色の吹き出しで指したボタンから、文字の一部を「リンク」「太字」「斜体」「コード」にしたり、「引用」「箇条書き」「番号付きリスト」を挿入できます。

青色の吹き出しで指したボタンからは、「画像・動画」「YouTube」「コードブロック」「表（テーブル）」を挿入できます。

画像の設定

画像を挿入してクリックすると、画像の編集パネルが開きます。編集パネル内にある「Alt Text（代替テキスト）」は、インターネット接続が不安定な場合や、画像ファイルの読み込みに失敗した場合など、画像が表示されない場合に表示されるテキストです。視覚に障がいのある方がスクリーンリーダーを使用する場合にも活用されるほか、検索エンジンに画像の内容を伝える役割もあります。そのため、その画像の内容や意味がわかる簡潔な言葉を入力してください。装飾目的の画像には不要です。

「Resolution」は画像の解像度を指定でき、「Crop」は画像のトリミングが可能です。

YouTube動画の設定

YouTubeを挿入してクリックすると、YouTubeの編集パネルが開きます。「Video」の欄に埋め込みたいYouTube動画のURLを入力してください。「Autoplay」をOnにすると、動画は自動再生され、Loopを選択するとループ再生されます。「Thumbnail」はサムネイル画像の画質を選択でき、「Mute」はデフォルトの音声をミュートにするかどうかを選択できます。