目次
目次
このドキュメントは、Framerを学ぶ国内ユーザーが韓国語資料の不足で感じる困難を解決するために、公式ブログの内容を日本語に翻訳し、実務に役立つ情報を追加しました。Framerを使用される皆さまに少しでもお役に立てれば幸いです。
CMSページとは？
CMS機能を活用してブログやニュースのように複数のコンテンツが繰り返されるページを自動で作成できるページです。1つのデザインを基に複数の項目を迅速に構成できるため、大規模なコンテンツを管理する際に非常に便利です。
CMSとは？
Content Management System（コンテンツ管理システム）の略です。
デザイナーなしで文章を入力するだけで既に指定されたデザインでページが作成されるため、ブログ、ニュース、製品リストのようにコンテンツが多く、または頻繁に更新される場合に役立ちます。
CMSコレクションの作成
CMSページを使用するためには、まずコンテンツの枠組みとなるコレクション（Collection）を作成する必要があります。Note : CMSコレクションとは、似たタイプのコンテンツを集めたフォルダーです。簡単に言えばコンテンツグループと呼べます。
CMSコレクションの作り方
Framerの上部メニューで
CMSをクリックサイドバーで
+ボタンを押して新しいコレクションを作成コレクション名を入力（例：Articles、Productsなど）
フィールド（Fields）の設定
フィールド（field）は各CMSコンテンツアイテムに入るデータの種類と構造です。
フィールドの設定方法
上部バーの
Edit Fieldsをクリック必要なフィールドを追加
フィールドタイプ:
Plain Text: タイトルのような短いテキストFormatted Text: 本文のような長いテキストImage: バナーやサムネイルDate: 掲載日各フィールドは名前の変更、説明の追加、必須項目（Required）の設定が可能
Note : チームとの共同作業時にフィールドに説明を追加すると、明確に伝えることができます。
項目（Item）の追加
コレクション（Collection）内にあるそれぞれのコンテンツがまさに項目（Item）です。
項目（Item）の追加方法
作成したコレクションをクリック
上部バーの
New Itemを選択各フィールドにブログ記事のタイトル、日付、画像、本文の内容などを入力
このように追加した各項目は1つのCMSページに繋がります。
CMS詳細ページのデザイン
サイドタブのページで
+ボタンをクリック →New CMS Pageを選択接続するコレクション（Collection）を選択（例：Articles）
詳細ページを選択
Index Page: 項目リスト（ブログリスト、カードビューなど）Detail Page: 単一の項目内容ページ
選択したコレクションのフィールドが自動的にページに接続
[+]insert>Fieldsタブにある要素を活用してデザイン
Q. CMS詳細ページを作成した後、新しいフィールドを追加できますか？
CMSコレクションに戻り、
Edit Fieldsを選択新しいフィールドを追加（例：
Linkフィールド）CMS項目に該当フィールドの内容を入力
変数（Variables）を使用してCMSページにLinkフィールドを接続する方法
Q. ページごとに存在するフィールド項目が異なる場合はどうしたらいいですか？
ある記事にはLinkフィールドがあり、ある記事にはないと仮定しましょう。Linkがない記事にボタンが常時表示されていると無意味ですし、デザインも不自然です。こうした場合、CMS項目にデータがある時だけ要素を表示する方法である条件付き表示（Conditional Visibility）機能を使用することをお勧めします。
要素（例：ボタン）を選択
プロパティパネルでVisible項目
+ボタンをクリックSet Variable>Linkフィールドを選択is setをクリック
is set項目を選択すると、そのフィールドがある時だけ表示され、なければ自動的に隠れます。
本記事はFramer公式ビデオ‘Understanding CMS Collections, Items & Fields in Framer’を参考にして翻訳・アレンジしたコンテンツです。
