<h2 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" data-line="0" class="code-line">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h2>
<p data-line="1" class="code-line">全然気づかなかったのですが、Figma Sites CMSが登場していたので今回は簡単に試してみたいと思います<br style="display:none">
<span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__414a662fe79ba" src="https://embed.zenn.studio/card#zenn-embedded__414a662fe79ba" data-content="https%3A%2F%2Fhelp.figma.com%2Fhc%2Fen-us%2Farticles%2F35995403973783-Guide-to-Figma-Sites-CMS" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://help.figma.com/hc/en-us/articles/35995403973783-Guide-to-Figma-Sites-CMS" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://help.figma.com/hc/en-us/articles/35995403973783-Guide-to-Figma-Sites-CMS</a></p>
<h2 id="figma-sites%E3%81%AE%E6%BA%96%E5%82%99" data-line="4" class="code-line">
<a class="header-anchor-link" href="#figma-sites%E3%81%AE%E6%BA%96%E5%82%99" aria-hidden="true"></a> Figma Sitesの準備</h2>
<h3 id="%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" data-line="5" class="code-line">
<a class="header-anchor-link" href="#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> プロジェクトの作成</h3>
<p data-line="6" class="code-line">まずはFigma Sitesにアクセスして、空のプロジェクトを作成します<br>
<img src="https://storage.googleapis.com/zenn-user-upload/511f35c6cc8a-20251128.png" alt="" class="md-img" loading="lazy"></p>
<h3 id="card-list%E3%81%AE%E9%85%8D%E7%BD%AE" data-line="9" class="code-line">
<a class="header-anchor-link" href="#card-list%E3%81%AE%E9%85%8D%E7%BD%AE" aria-hidden="true"></a> Card Listの配置</h3>
<p data-line="10" class="code-line">今回は例題として以下のようなカードリストを用いたいと思います<br>
<img src="https://storage.googleapis.com/zenn-user-upload/beedc439ab57-20251128.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="13" class="code-line">テンプレートとしてあらかじめ用意されている(<code>機能</code> &gt; <code>Cards Pattern</code>)のでそちらを使用します<br>
<img src="https://storage.googleapis.com/zenn-user-upload/8538a2423106-20251128.png" alt="" class="md-img" loading="lazy"></p>
<h3 id="%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E7%94%BB%E5%83%8F%E3%81%AE%E7%94%9F%E6%88%90" data-line="17" class="code-line">
<a class="header-anchor-link" href="#%E4%BD%BF%E7%94%A8%E3%81%99%E3%82%8B%E7%94%BB%E5%83%8F%E3%81%AE%E7%94%9F%E6%88%90" aria-hidden="true"></a> 使用する画像の生成</h3>
<p data-line="18" class="code-line">本題と少しそれますが、今回使用する画像もFigmaを使って用意しておきます<br>
早くもFigmaではGemini 3 Pro(Nano Banana)を使用して画像を生成することができます<br>
意外と知られていないので軽く紹介していきます<br>
(もしかしたら有料プランでしか使えないかもです...)</p>
<p data-line="23" class="code-line">画面下のメニューバーから<code>アクション</code>(⌘K)から、<code>画像を作成</code>を選択<br>
<img src="https://storage.googleapis.com/zenn-user-upload/7770131fbb48-20251128.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="26" class="code-line">モデルをGemini 3 Pro(Nano Banana搭載)を選択<br>
<img src="https://storage.googleapis.com/zenn-user-upload/95ca146d8ae9-20251128.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="29" class="code-line">あとは好きなように画像を生成してエクスポートしてください</p>
<h2 id="cms%E3%81%AE%E6%BA%96%E5%82%99" data-line="32" class="code-line">
<a class="header-anchor-link" href="#cms%E3%81%AE%E6%BA%96%E5%82%99" aria-hidden="true"></a> CMSの準備</h2>
<h3 id="%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%BF%BD%E5%8A%A0" data-line="33" class="code-line">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%AC%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%BF%BD%E5%8A%A0" aria-hidden="true"></a> コレクションの追加</h3>
<p data-line="34" class="code-line">画面左側のメニューにCMSが追加されてるのでそちらをクリックします<br>
<img src="https://storage.googleapis.com/zenn-user-upload/f2dc9469dad2-20251128.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="37" class="code-line">その後コレクションを作成します<br>
<img src="https://storage.googleapis.com/zenn-user-upload/9956bb3af18d-20251128.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="40" class="code-line">今回は新しく作成しましたが、CSVからインポートすることもできるみたいです</p>
<h3 id="%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E7%B7%A8%E9%9B%86" data-line="42" class="code-line">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A3%E3%83%BC%E3%83%AB%E3%83%89%E3%81%AE%E7%B7%A8%E9%9B%86" aria-hidden="true"></a> フィールドの編集</h3>
<p data-line="43" class="code-line">続いてフィールドを編集していきます<br>
画面右上あたりに<code>フィールドを編集</code>ボタンがあるのでそちらをクリックします<br>
<img src="https://storage.googleapis.com/zenn-user-upload/2dfac72101cd-20251128.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="47" class="code-line">今回は画像をいれたいので、画像フィールドを追加します<br>
<img src="https://storage.googleapis.com/zenn-user-upload/668664c3bf9b-20251128.png" alt="" class="md-img" loading="lazy"></p>
<h3 id="%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E8%BF%BD%E5%8A%A0" data-line="50" class="code-line">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AE%E8%BF%BD%E5%8A%A0" aria-hidden="true"></a> データの追加</h3>
<p data-line="51" class="code-line">フィールドの準備までできたので、実際にデータを入れていきます<br>
<code>新規アイテム</code>をクリックすると右側にアイテム編集の画面が出てくるのでそこでデータを入力します<br>
<img src="https://storage.googleapis.com/zenn-user-upload/a73a374697ad-20251128.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="55" class="code-line">一旦３つほどデータを入れておきます<br>
<img src="https://storage.googleapis.com/zenn-user-upload/867875f4f801-20251128.png" alt="" class="md-img" loading="lazy"></p>
<h2 id="%E6%8E%A5%E7%B6%9A" data-line="59" class="code-line">
<a class="header-anchor-link" href="#%E6%8E%A5%E7%B6%9A" aria-hidden="true"></a> 接続</h2>
<p data-line="60" class="code-line">データまで追加できたら、あらかじめ準備しておいたCard Listと接続していきます<br>
接続タブに移動し、今回は<code>ページの一部</code>を選択します<br>
<img src="https://storage.googleapis.com/zenn-user-upload/25f1866541fb-20251128.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="64" class="code-line">ページのどのエリアと接続するか選択できるようになるので、任意の部分を選択します<br>
今回はCard Listエリアしかないので、そちらを選択します</p>
<p data-line="67" class="code-line">続いて、フィールドとどの部分を接続させるかを選択していきます<br>
<img src="https://storage.googleapis.com/zenn-user-upload/5aa3dc170fe3-20251128.png" alt="" class="md-img" loading="lazy"></p>
<p data-line="70" class="code-line">接続が成功するとCMS内のデータを元にCard Listが表示されるはずです<br>
後にCMS側でデータを追加した場合もそれに伴って自動でCardも追加されます<br>
<img src="https://storage.googleapis.com/zenn-user-upload/732a7d412c1f-20251128.png" alt="" class="md-img" loading="lazy"></p>
<h2 id="%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" data-line="75" class="code-line">
<a class="header-anchor-link" href="#%E3%81%8A%E3%82%8F%E3%82%8A%E3%81%AB" aria-hidden="true"></a> おわりに</h2>
<p data-line="76" class="code-line">画像と文字だけではわかりづらい部分もあると思うので、気になった方はぜひ触ってみて下さい</p>


Figma Sites CMS機能が登場してたので触ってみた

Discussion