待っていたよ、CMS。

シンプルにコンテンツを管理できるのはありがたいよね、と思うのである。

今更だけど、CMSとは「コンテンツマネージメントシステム」の略で、コンテンツを管理する機能。

レンタルブログとか、WordPressとか思い浮かべるとわかりやすいのかもしれない。

ではFigma SitesのCMSは、どんな事ができて、どうやって使えばいいのか。

ここからは解説していく。書籍を書いていた時を思い出すぜ。

使い方

データを用意しよう

今回用意したデータは「よくありそうなブログ」というてい。

テーマ：様々な街の気に入ったところを紹介するブログ

作者人物像：

• 34歳の女性
• 仕事はアパレル会社の広報
• 独身だが7年間つきあっているパートナーあり
• 川辺や緑のある街並みなどを散歩しながら、カフェを巡るのが好き
• 日本の昔ながらの街もすき
• スウェーデンのポップロックが好き
• フランス映画が好き
• 寺山修司や中原中也も実は好きだがあまり表には出していない
• 文体は丁寧だが堅苦しくない、ウィットに富んでいる

というような設定で、3記事程用意。

テストデータなのでそこはそれGemini3Proちゃんに書いてもらってそのまま。

使用画像ももちろんAI生成。

こんな感じで作成していく。

コレクション

Figma Sites CMSではデータの塊りの1つを「コレクション」と呼んでいる。

ブログの記事の集まりが1つのコレクションというイメージである。

DBであれば、1つのテーブルがコレクションである。

記事の1つ1つはアイテムと呼ぶ。

記事の中にあるデータ、タイトルや本文などはフィールドである。

CMSのデータを用意するには、このコレクションを作成するのが最初の一歩となる。

コレクションが何もない状態であれば、このようにテンプレートも用意されている。

そして、CSVでインポートすることもできるが今回は解説しない。インポートの仕方は公式ドキュメントを見てほしい

今回は分かりやすくするために新たに自分でコレクションを作っていく。

青い「新規作成」のボタンをクリックしよう。

すると、このように”Collection1”という名前の空のコレクションが作成される。

初期にあるフィールドは

Title

Slug

Rich txet

の3つである

”Created at”と”Last edited at”というフィールドも作成されるが、ここに関しては自分で呼び出して表示することができないようなので、あくまで管理用ということだろう。

これだけでは、ブログの記事としては項目が足りないので、コレクションのフィールドを自分で設定していこう。

まずは”Collection1”だと何のコレクションか分かりにくいので、名称部分をダブルクリックして、”記事”に変更。

こういった細かいことを常々やっていくのがFigma Sitesでは大事であるよ。設計が大事と言っている部分につながる。

次に、画面右上にある「フィールドを編集」のボタンを押すことで、フィールドを自分好みに作っていける。

ポップアップが開くので、「フィールドを追加」したり名前を変更したり、適宜行う。

今回は画像のように設定した。

Title：アイテム自体の名称。今回はブログ記事のタイトルとして使う

Slug：アイテムのURLになるもの。ブログ記事の詳細を表示するときのURLになる

この2つは名前の変更もできず削除もできず、強制的に必須項目とされる、のでそのまま使うしかない。（この2つのフィールド以外に自分で自由に必須のフィールドは作成できない）

本文：Rich txetのフィールドが最初から作られるので、これは名前をと変えて、ブログの記事本文とした

画像：アイキャッチ的に画像を使用したいので、画像という名前で画像用のフィールドを1つ

投稿日：投稿日を表示するために日付のフィールド

テストデータとしてはこの程度でよいだろう。

あとはそれぞれのアイテムに必要なものを、AIが作成したデータをペタペタと入力していけば、記事というコレクションが完成である。

今回は”記事”コレクション以外にも”トップページ”というコレクションも用意したのだが、それについては、後ほど解説する。

サイトのデザインを用意しよう

データの用意ができたので、表示するためのページを作成する。

できたのはこんな感じで、必要最低限。

ページは3つ。

• ホーム
• 一覧
• 詳細

である。

コンポーネントも編集しやすくするために作っているが、CMSの紹介とはずれるため特に解説はしないこととしちゃう。

ホーム

ブログのトップページ。

• ブログ専用のメインビジュアル
• ブログの紹介文
• 最新記事1件と一覧へのリンク

というミニマム構成

一覧

”記事”コレクションを一覧表示するためのページ

詳細

”記事”コレクションのアイテムを1ずつ掲載して、ブログの詳細記事にするためのページ。

このページがある意味CMSの肝の1つともいえる。

CMSがなかったFigma Sitesでは、詳細記事をを作りたければ、記事分のページを作成する必要があった。 一覧ページからリンクするにも、一覧にも手作業で項目を増やしリンクも自分でしないといけなかった。

が、CMSを使えば同じ表示形式であれば、ページは1つ作成するだけでよいのであるし、一覧もリンクも自動で更新される。そのあたりはこの後のデータの接続でも感じてほしい。

デザインとデータをつなげよう

ここからはページにデータを表示していくために、コレクションの必要なデータをページに紐づけていく。

ホーム、一覧、詳細と3つページが用意されている、と、ホームからやっていくかなと思うのが世の常であるが、今回は詳細から逆順でやっていく。

なんでって？そのほうが分かりやすいからだよ！

詳細

最初に、画面一番左のアイコンが並ぶ「ナビゲーションバー」からCMSを選択。

となりの左サイドバーに「コレクション」セクションが表示される。その中で「接続」タブを選択。

すると、作成されているコレクションが表示され、その名称の右側に「接続」ボタンが出てくるのでクリック。

ポップアップで「フルページ」と「ページの一部」という選択肢が表示されるの。

詳細ページでは1つのアイテムだけを繰り返したりせず表示したいので、「フルページ」を選択。

キャンバス上で接続できるページに色がつくので、「詳細」を選択。

コレクションとページが接続されると、ページの左上に青くコレクション名が表示される（接続を解除したいときもここでできる）

ページの左上のページ名称の部分には自動で、なにやら階層URLが表示されるようにもなる。

これはアイテムのSlugのフィールドを自動に所得してきて、3階層目を自動で作成してくれるのである。

Figma Sitesでは2階層までしかURLが作成できなかったが、このときだけ自動で3階層目が作成されるようになったのである。

この部分はトグル出来て、選択に合わせて表示内容もキャンバス内でも変わる。

あとは、ページの項目に、フィールドを紐づけていけば完成である。

接続方法は簡単で、左サイドバーに表示されている「コレクション」の中の「フィルード」にカーソルをあててクリックするか、「接続」というボタンが表示されるのでクリック。

そのままページの紐づけたい要素、クリック。

これだけである。

接続がなされ、紐づくと。ページの要素に紐づいている「フィールド」名が表示される、という寸法なのである。

あとは必要な分ページの要素と「フィールド」をつなげていけばいい。

詳細ページの設定はこれで完成となる。

ちなみに、このときページの要素をダブルクリックすると、画面右にデータの更新画面がでるのだが、記事ひとつに対してなのであまり現状では使わなかなとおもったり。

一覧

詳細が作れたら、次は一覧である。

さて、ここで少し考えてほしい。

詳細ページを設定したとき、「アイテム」のSlugを使って、自動で3階層目が作られるといった。

今回であれば

/詳細/myfavoritecity

などである。

このURLが詳細それぞれのURLならば、一覧ページのURLは

/詳細

ってなるんじゃ？と思う諸兄諸姉も多いのではないか。

少なくと僕はそう思う。

なのであるが、Figma Sitesでは悲しいかな現状そのようにはならない。

なので別途一覧用のページを作成しなけばいけないし、今回であれば

/一覧

のようにURLも正確な階層構造にはならない。

とはいえ、やはりCMSがなかった時よりも一覧だって効率的で機能的になっているので、今は甘んじてこの仕様を受け入れるとするしかない。

よし、設定していこう。

方法は詳細ページの時と同じような感じである。

違うのは今回は「フルページ」と「ページの一部」の選択で、「ページの一部」を選ぶことである。

これは「コレクション」の「アイテム」を繰り返し表示して一覧を作るための機能である。

接続の方法は詳細の時と同じだが、接続先として選べるのが「ページ」単位ではなく、ページ内の要素になっていることである。

ここでは、記事一覧の要素を選ぶ。（今回でいうと各アイテムを囲っているフレーム）

接続ができると、ページではなく要素の部分にどの「コレクション」と接続しているかの表記がなされる

あとは詳細ページ同様、ページの要素に「フィールド」を紐づけていけばいい。

いはずなのである…あるが…おや？

本文の一部を表示したかった部分が、ぜんぶでてるやないかーい！

これはいただけない。

文字の切り捨てだって、この部分には設定してあるのに。

…

…

…

そう、これの散文を読んでいる諸兄諸姉であれば既に気が付いているかたもいるのではないか。

「本文」はリッチテキストなのである。ということは出力はテキストではなく、HTMLと思えばいよい。

そりゃ、動作おかしくなるよな。

ということで、急遽、「コレクション」に”簡易説明”という書式なしのフィールドを追加した。

１つ入力項目が増えるわけだが、こんな時こそ本番でもAIの使いどころだろう。記事を投げて文字数〇〇に要約して、とかすればいい。賢く正しいAIの使い方である。

ちなみに、公式が提供しているFigma SitesのテンプレートでCMSに対応したもののデータを見ても、同じようなやり方なので現状はこのやり方が一番やりやすいと思う。

とまぁ、これ最初からやっておいてもよかったんですが、臨場感の演出と、読者諸兄諸姉への問いかけをしたく、このような形式にした次第なのである。

なにはともあれ、無事に簡易説明が表示でき、これは書式なしテキストなので、文字のまるめも問題なくできたのである。

最後にリンクの設定である。いちいち記事毎にそれぞれにリンクしていたのでは面倒極まりなし。

しかし、「コレクション」の「フィールド」にはSlugはあるものの接続には出こないのでつかない。

そんな時は、右サイドバーのリンク設定。通常と同じである。

ここに記事という分類が追加され、/詳細/Slugというリンク先ができているので、これを選べばあとは自動でやってくれるのである。

ということで、一覧ページ完成！である。

※実はタイトル部分や日付部分もちょいと調整したので、記事の最初のほうのスクショとは変わっているのだがご愛嬌である。

ホーム

最後はホーム、トップページの設定である。

なぜ、最後にしたのか。それはここだけ事情がちょっと特殊だから。

トップページはトップのみで表示する内容があるため、今までの”記事”とはちがう、”トップページ”という「コレクション」を作成してある。

今回必要なデータは、ファーストビューに使う画像と”このサイトについて”のテキストの2つ。

これだけの「コレクション」である。

では表示できるように接続していこう。

接続方法は「フルページ」だろう。

詳細ページと同じく、ページ一つで全部のデータを使うから。

と思って接続してみようとすると…

ホームは選択できない…色が変わらない。ということは接続できない…どうしよう。

そうだ！トップページの「コレクション」を「ページの一部」で必要な要素に接続して、しまえばいいだろう。

とはいえ、一覧ページのようにそれぞれの要素をまとめてくるんではいないので、”FV”部分、”このサイトについて”の部分、それぞれにまずは「コレクション」を接続。

そのうえで、”FV”にはFV画像を、”このサイトについて”には対応するテキストを接続。

これで、問題なく表示された。

このように同一のコレクションであっても、１つのページに何か所も接続することもできるというのは発見である。

次は最新記事である。

ここは今回１件だけ”記事”の「コレクション」から「アイテム」を持ってきたい。

ページのデザインも１件だけにしている。

持ってくるアイテム数が違うだけで、やることは一覧ページとかわらない。

ので、「ページの一部」を選んで接続、してみると、オーノー、オノヨウコ。

３件出てくるじゃねーか。

そんな時も安心してください！できますよっ！

接続している要素を選んで、右サイドバーを見てみる。

CMSリストというセクションがあり、接続している要素、接続しているコレクションが表示されている。

その下、制限という項目がある。

こいつの値を”1”にすることで、表示される記事を1件にできる、という仕組みが用意されている。

ということで、無事に１件だけ表示させることができたのである。

あとは「全ての記事を見る」ボタンに、一覧ページへのリンクを設定すれば、一通りの設定が終了！バンザイ！なのである。

これにて、FigmaSitesのCMSを利用してブログができた。

もう少しだけCMSの使い方を補足

長かった記事の後に、もう少し。画像のaltについて、少しだけ。

ちゃんとつけましょうね、alt。

alt、代替テキストも、コレクションで持っておけたら楽なのに、と思いつつ、設定しようとしたら、こんなのを見つけた。

「CMSでaltテキストを編集」ボタン。

を、やっぱりあったかと思って即クリックしてみる、僕。

すると、先にも紹介した記事の編集画面が右サイドバーに表示された。

ん？altなんて項目ないぞ？

おう？

なんだよー、もう、って、思いながら画像をクリックしたら、やったー！でてきたじゃない。

と、こんな感じで設定できる。

これはカンバス側の画面での話ですが、もちろんコレクションの編集画面でもできる！のであればこれも最初から設定しておくのがよいね、というお話でした。

ユーザービリティー、アクセシビリティーのためにもこういった細かいことも気を配って制作してくださいと思う僕なのでした。

FigmaSitesのCMSに関する、ま・と・め

ここまでの極悪的に長い散文を、読んでいただいてありがとう。 読み切ってもらうと、最低限の使い方は理解してもらえたんではないだろうか。

独特な仕組みもあるので、複数回試して是非使いこなしてほしい。

FigmaSitesに新しく実装された、そして今後のFigmaSitesの方向性を決めるであろうCMS機能について、今現在のできるだけを解説させていただいた。

そもそもベータのサービスに追加された新機能なので、ここから発展ブラッシュアップしていくと思うが根幹は変わらないと思うので、やって損はない。

CMSの気になった点なども、ね

ベータの新機能といっても、やはり気になったことはある。長い使い方の部分を飛ばして、いきなりこのあたりを見たい方もいると思うのでまとめてみる。

• コレクション同士のリレーション的なことはできない。 例えば
  • 記事を書いているユーザーのコレクション
  • 記事そのもののコレクション
  この2つがあったとして、記事のほうでユーザーを呼び出す（例えばドロップダウンで選択できるようにする）といったことはできない。
• 1つのコレクションに登録できるのは200件まで。（ベータではの注釈付で公式には記載。将来的にはプランによって変わったりする？）
• コレクションのフィールドの柔軟さがない。数値型などの方の種類もないし、現在は日付を選ぶと2025年11月30日であれば「November 4, 2025」という表記しかできない、など 必須フィールドも自分で指定できない
• コレクションとページの接続の仕方が2つだけ
• 記事の一覧では、表示する件数を”制限なし”もしくは最大件数までのMAXまでの1つ刻みでしか指定できないし、ページングもできない。 10件のデータのあるコレクションの一覧の場合 全件 コレクションの上から1件だけ、2件だけ、3件だけ…10件 のような選択しかできない。
• コレクションのソートなどができないので、基本登録した順番での表示にするしかない
• 日本語入力モードでSlugなどの英数のフィールドにフォーカスして入力しようとすると正しく動作しない
• Figma Sitesにアクセスできるユーザーごとに権限を設定できない。CMSだけ編集できるユーザーのような。

ここに挙げたことは、「これじゃまだ使えないな、FigmaSitesのCMS」と思わせてしまうものもあるのではないだろうか。

僕自身、そう感じることもある。

が、そんなことはそもそもFigmaサイドも織り込み済みだろう。近いうちに多くのことが改善されると考えられる。

改善してからやってみよう、とすると、覚えることも増ええてしまうと思うので、今の段階でぜひ使ってみて可能性を感じてほしい。

こちらの記事もおすすめです！

【速報】本日Figma Sites にCMSが登場 ！ デザインから公開へ、さらにワンストップに？？