はじめに：リッチエディタ1つでは「運用」で詰む

microCMSなどのヘッドレスCMSでブログを作る際、最初は「タイトル」と「本文（リッチエディタ）」だけで始めがちです。しかし、運用を続けるとすぐに壁にぶつかります。

• 「もしもアフィリエイトのかんたんリンク（scriptタグ）がエディタで消される」
• 「Amazonと楽天のリンクを並べたきれいな商品カードを作りたいが、HTML直書きは辛い」
• 「コードブロックのシンタックスハイライトを効かせたい」

これらを解決するためにたどり着いた答えが、記事本文の「繰り返しフィールド（Repeated Field）」化でした。

今回は、私のブログで実際に稼働している**body_blocks**という繰り返しフィールドの全貌と、そのスキーマ設計（キモ）を公開します。

解決策：記事全体をbody_blocks（繰り返しフィールド）にする

私のブログでは、記事本文にあたる部分を**body_blocks**という1つの繰り返しフィールドで定義しています。 執筆者は、必要なパーツ（ブロック）を上から順に積み上げていく感覚で記事を作成します。これはNotionやWordPressのGutenbergと同じ「ブロックエディタ」の思想です。

キモとなるスキーマ設計：全11種のブロック定義

実際にmicroCMSで定義しているカスタムフィールドの内訳です。用途ごとに明確に役割を分けています。

1. ベースとなる「文章」と「広告」

記事の基本骨格を作る部分です。

rich_text (文章ブロック)

通常の文章を書くためのリッチエディタです。

• フィールド: text_fields (リッチエディタ)
• 役割: 見出し（H2, H3）や通常の段落、太字などの基本的な執筆を担当。

affiliate_html (広告ブロック)

ここが収益化の重要ポイントです。リッチエディタのサニタイズを回避します。

• フィールド: notes (テキストエリア)
• 役割: もしもアフィリエイトやA8.netのバナー用HTMLコード、scriptタグをそのまま貼り付けます。テキストエリアにすることでCMS側の加工が入らず、そのままNext.js側で出力できます。

2. 収益化を加速させる「コンバージョン」系

単にリンクを貼るのではなく、構造化データとして管理することで、フロントエンド側でリッチなUI（カード型など）に変換します。

product_card (商品カード)

「Moshimoかんたんリンク」や独自の物販リンクを管理します。

• フィールド:
  • notes (Moshimoかんたんリンクコード)
  • title (Amazonリンク, 楽天リンク, Yahooリンク) ※各URL
  • title (商品名)
  • insert_photo (商品画像URL)
• メリット: HTMLを保存するのではなく「URL」や「商品名」をデータとして持たせることで、デザイン変更時に過去記事すべての見た目を一括で変更できます。

cta_button (CTAボタン)

記事の最後に置く「お問い合わせ」や「公式サイトへ」などのボタンです。

• フィールド:
  • title (ボタンのラベル)
  • title (リンク先URL)
  • list (ボタンのスタイル選択: Primary / Secondary / Outline etc.)
  • toggle_on (外部URL判定: trueならtarget="_blank")
  • toggle_on (アフィリエイト判定: trueならrel="sponsored")
  • title (補足テキスト: "※3分で登録できます" など)

3. 技術ブログに必須の「機能」系

codeBlock (コードブロック)

エンジニアブログには欠かせません。

• フィールド:
  • notes (コード本体)
  • title (言語: js, css, python etc.)
  • title (ファイル名/タイトル)

linkCard (外部リンクカード)

ZennやQiitaのような、OGPを取得して表示するリンクカード用です。

• フィールド: title (URL), notes (メモ)

4. 記事をリッチにする「装飾」系

• quotePanel (引用): 引用内容と出典情報を分けて管理。漫画のセリフ引用などにも対応。
• infoBox (注意書き): 「警告」「Info」「Success」などをセレクトボックスで選択し、アラート表示。
• figureImage (単体画像): 画像、キャプション、代替テキスト（alt）をセットで管理。
• videoEmbed (動画): YouTubeなどのURLを入力。
• dataTable (表): リッチエディタのテーブル機能より高機能な表が必要な場合に利用。

Next.js側での実装イメージ

フロントエンドでは、受け取ったbody_blocks配列をmap関数で回し、fieldIdを見てコンポーネントを出し分けるだけです。

この設計にする3つのメリット

1. 広告タグ（script）が安全に動く

affiliate_htmlを「テキストエリア」として定義し、Next.js側で適切に処理（dangerouslySetInnerHTMLなど）することで、microCMSのエディタ仕様に邪魔されることなく、ASPのタグをそのまま利用できます。

2. デザイン変更に強い（データと見た目の分離）

例えば「ボタンのデザインを変えたい」と思った時、HTML直書きだと全記事の修正が必要ですが、この設計ならCtaButtonコンポーネントのCSSを1行変えるだけで、過去記事も含めて一瞬で反映されます。

3. 執筆体験が向上する

「次はコード」「次は商品紹介」とブロックを選んでフォームを埋めるだけなので、HTMLタグを意識する必要がありません。執筆者はコンテンツの中身だけに集中できます。

まとめ：ヘッドレスCMSこそ「設計」が命

「繰り返しフィールド」を活用したこのコンポーネント指向の設計は、初期構築の手間こそかかりますが、長期的な運用コストを劇的に下げてくれます。

特に、「商品カード」や「CTA」のようなCVに関わる部分を構造化データとして持っておくことは、将来的なブログの資産価値を大きく高めてくれるはずです。

もし現在、リッチエディタの不自由さに悩んでいるなら、ぜひbody_blocksへの移行を検討してみてください。