← ブログ一覧へ戻る

編集可能な静的サイトをAstroとmicroCMSで作る

200stackブログの記事です。

編集可能な静的サイトをAstroとmicroCMSで作る のサムネイル

AIでLPをサッと作れるようになりましたが、納品したサイトの文言をクライアントが直接修正できないのなら改善のスピード感が落ちてしまいます。
そこで、静的サイトの文言をcodexを活用して、変更可能にできるようにする手順を紹介します!

前提

  • すでに静的サイトが作られている前提なので、適当なデモサイトを用意しています
  • Astro / Tailwindで作っていて、かつReactコンポーネントを組み立てる形でページを構成しています
テストサイト

全体の流れ

  1. テキストを抽出してjsonにする
  2. jsonから取得している部分をmicroCMSから取得するように修正する
  3. microCMSのオブジェクトでデータを設定する
  4. ローカルのスキーマを調整

1. テキストを抽出してjsonにする

さっそくcodexに頼んでテキストを抽出してjsonにしてもらいます。下記のプロンプトで良い感じにjsonにしてもらいます。

ヘッドレスCMSで取得したデータをコンポーネントに配る前提で、全てのテキストを抽出してjsonで設定するように修正してください

できたJSON

{
  "site": {
    "defaultTitle": "プレビューコープ",
    "pageTitle": "プレビューコープ | エンタープライズ向け知能型オペレーションクラウド",
    "demoNotice": "これは存在しない会社のデモ用のサイトです",
    "footerDescription": "知能型オペレーションクラウドを創る企業。",
    "footerLinks": [
      { "href": "#services", "label": "サービス" },
      { "href": "#pricing", "label": "料金" },
      { "href": "mailto:hello@previewcorp.com", "label": "お問い合わせ" }
    ],
    "copyright": "Preview Corp. All rights reserved."
  },
  "navigation": {
    "logoInitials": "PC",
    "tagline": "Preview Corp",
    "subtitle": "統合インテリジェント・オペレーション",
    "links": [
      { "href": "#services", "label": "サービス" },
      { "href": "#solutions", "label": "プラットフォーム" },
      { "href": "#case-studies", "label": "導入事例" },
      { "href": "#pricing", "label": "料金" },
      { "href": "#resources", "label": "リソース" }
    ],
    "contactLabel": "営業に問い合わせ",
    "ctaLabel": "デモを予約"
  },
  "hero": {
    "kicker": "Preview Corp Platform",
    "headline": "適応型オペレーションで自信ある顧客体験を届けましょう。",
    "body": "ワークフロー・インサイト・自動化を信頼できる1つのレイヤーに統合し、各チームを最新のガードレールで接続。プレビューコープならグローバル展開もスケジュール通りに進行できます。",
    "ctaPrimary": { "label": "導入効果を見る", "href": "#case-studies" },
    "ctaSecondary": { "label": "資料をダウンロード", "href": "#resources" },
    "highlights": [
      "AI支援の統合オペレーションコックピット",
      "ポリシー準拠の自動化を標準搭載",
      "エンタープライズ級のセキュリティとコンプライアンス"
    ],
    "highlightNote": "エンタープライズプランに標準搭載",
    "statusOverview": "運用ステータス",
    "statusRoadmap": "Q4ロードマップ",
    "incidentLabel": "インシデント許容量",
    "incidentValue": "健全性 96%",
    "metricCards": [
      { "label": "体験シグナル", "value": "前年比 +18%" },
      { "label": "自動化済みプレイブック", "value": "142件" },
      { "label": "リスクポスチャー", "value": "クリティカルギャップ 0" }
    ],
    "metricNote": "ライブテレメトリ",
    "nextActionLabel": "ネクストアクション",
    "nextActionValue": "地域展開ワークスペースを生成"
  },
  "metrics": [
    { "label": "カスタマーNPS", "value": "+72", "detail": "グローバルエンタープライズ案件" },
    { "label": "コンプライアンス対応範囲", "value": "28地域", "detail": "常時バリデーション済み" },
    { "label": "自動化ROI", "value": "182%", "detail": "平均7か月でペイバック" },
    { "label": "AIガードレール", "value": "100%", "detail": "全フローにポリシー紐付け" }
  ],
  "services": {
    "kicker": "プロフェッショナルサービス",
    "headline": "30日ごとに成果を届ける専任パートナーポッド。",
    "body": "ストラテジスト・デザイナー・信頼性リードがチームに常駐し、共同OKR・ライブダッシュボード・成功基準を明確化します。",
    "cards": [
      {
        "title": "エクスペリエンスデザインスタジオ",
        "copy": "モジュール型アクセラレーターと共創スプリントでエンドツーエンドの顧客体験を設計します。",
        "items": ["ジャーニーオーケストレーション", "サービスブループリント", "ペルソナ調査"],
        "ctaLabel": "プレイブックを見る →"
      },
      {
        "title": "オペレーショナルインテリジェンス",
        "copy": "テレメトリ・財務・リスクのシグナルを一元化し、各リリースの判断材料を提供します。",
        "items": ["統合データファブリック", "予測インサイト", "エグゼクティブスコアカード"],
        "ctaLabel": "プレイブックを見る →"
      },
      {
        "title": "ローンチオートメーションオフィス",
        "copy": "再利用可能なランブックで切替・コンプライアンス証跡・コミュニケーションを自動化します。",
        "items": ["アダプティブランブック", "承認と監査", "事業継続プラン"],
        "ctaLabel": "プレイブックを見る →"
      }
    ]
  },
  "solutions": {
    "kicker": "プラットフォームソリューション",
    "headline": "重要ジャーニーに合わせた即戦力プロダクト。",
    "body": "必要なモジュールを選択するだけで、統合データ・ID・ガバナンスモデルを共有し運用リスクを削減します。",
    "roadmapLabel": "ロードマップ先取り",
    "roadmapItems": ["EUデジタル市場規制対応", "AIオペレーション信頼レイヤー", "パートナーマーケット"],
    "roadmapStatus": "設計中",
    "cards": [
      {
        "category": "コマンドセンター",
        "title": "リアルタイムローンチルーム",
        "summary": "各マーケットの展開状況・承認・AIインサイトをひとつの画面で把握。",
        "benefits": ["双方向インテグレーション", "シナリオプランニング", "ライブ注釈スレッド"]
      },
      {
        "category": "ガバナンス",
        "title": "ポリシー連動オートメーション",
        "summary": "すべてのワークフローが状況に応じたガードレールを継承し、スピードと順守を両立。",
        "benefits": ["自動監査エビデンス", "地域別ポリシーパック", "適応型リスクスコア"]
      },
      {
        "category": "カスタマーケア",
        "title": "体験品質シグナル",
        "summary": "テレメトリと定性フィードバックを掛け合わせ、離脱ポイントを即検知。",
        "benefits": ["VOC AI", "セグメント別診断", "ガイド付き是正パック"]
      }
    ]
  },
  "caseStudies": {
    "kicker": "導入事例",
    "headline": "スピードとガバナンスの両立を証明。",
    "body": "テクノロジー・人・ポリシーを一列に揃え、毎回のローンチを再現性ある成功に変えた事例をご紹介します。",
    "stories": [
      {
        "logo": "ノースウィンドリテール",
        "impact": "ローンチサイクルを16週から6週に短縮",
        "summary": "14か国で統合プレイブックを展開し、能動的なポリシー通知と経営陣ダッシュボードを提供。",
        "metrics": ["承認リードタイム58%短縮", "クリティカルインシデント0件", "グローバルCSAT +12pt"]
      },
      {
        "logo": "テルスターモビリティ",
        "impact": "初年度で1,800万ドルのランレート効率化",
        "summary": "1,800名のエージェント業務をAIコパイロットで自動化し、ケア・財務・オペレーションを一体化。",
        "metrics": ["AIコパイロット30件以上導入", "エージェント育成期間40%短縮", "解約率9%改善"]
      }
    ]
  },
  "testimonials": {
    "kicker": "お客様の声",
    "headline": "変革を率いるリーダーに選ばれる理由。",
    "quotes": [
      {
        "quote": "プレビューコープは20以上の同時ローンチでもコンプライアンスを犠牲にしませんでした。全リーダーが同じ信頼できるシグナルを得ています。",
        "name": "前田 麻耶",
        "role": "最高顧客責任者 / ノヴァ航空"
      },
      {
        "quote": "AIガードレールがポリシーを実務フローへ自動反映してくれるので、法務・財務・プロダクトが一つのワークスペースで連携できます。",
        "name": "佐藤 健二",
        "role": "戦略担当SVP / 未来モバイル"
      },
      {
        "quote": "移行プログラム全体を自動化し、拡大期でも数百万ドル規模のOPEX削減を達成しました。",
        "name": "堂本 祐介",
        "role": "COO / ルミナス銀行"
      }
    ]
  },
  "pricing": {
    "kicker": "料金プラン",
    "headline": "成果と連動した透明なプログラム体系。",
    "body": "すべてのプランにエグゼクティブレビュー、ロードマップ計画、共同ROIモデル作成が含まれます。",
    "tiers": [
      {
        "name": "ローンチ",
        "price": "個別見積もり",
        "description": "3〜5の連携ワークフローと基本的なガバナンスを備えたパイロットに最適。",
        "features": ["最大50席", "コア自動化スタジオ", "規制テンプレート", "伴走型サクセスポッド"]
      },
      {
        "name": "スケール",
        "price": "月額 8,400ドル",
        "description": "複数地域で予測インサイトとプレミアムサポートを必要とするプログラム向け。",
        "features": ["無制限ワークスペース", "予測コマンドセンター", "24/7エグゼクティブデスク", "専任デザインスタジオ"]
      },
      {
        "name": "グローバルエンタープライズ",
        "price": "専用プラン",
        "description": "高規制産業や複雑なパートナーエコシステム向けの共同イノベーション。",
        "features": ["専用データプレーン", "AIポリシーツイン", "データレジデンシー制御", "戦略アドバイザリーボード"]
      }
    ],
    "contactCta": "営業に相談する"
  },
  "resources": {
    "kicker": "リソース",
    "headline": "関係者が求める根拠をすぐに提示。",
    "body": "厳選リサーチやテンプレートで投資対効果の裏付けを支援します。",
    "entries": [
      {
        "title": "グローバル展開チェックリスト",
        "type": "ガイド",
        "summary": "主要リリース前に法務・プロダクト・GTMを整合させる42項目フレームワーク。",
        "action": "PDFを入手"
      },
      {
        "title": "AIオペレーションガバナンス青写真",
        "type": "ブリーフィング",
        "summary": "プライバシー・倫理・信頼性のステークホルダーに跨ってモデル管理を定義。",
        "action": "ウェビナーを見る"
      },
      {
        "title": "カスタマー体験シグナルレポート 2025",
        "type": "リサーチ",
        "summary": "先進ブランドがテレメトリを経営KPIに紐付ける手法を30分以内で把握。",
        "action": "レポートを読む"
      }
    ]
  },
  "cta": {
    "kicker": "次のステップ",
    "headline": "初日から使えるローンチルームを共創しましょう。",
    "body": "現在のロードマップを共有いただければ、2週間以内に専用コマンドセンターをご用意します。",
    "primary": { "label": "チームに相談する", "href": "mailto:hello@previewcorp.com" },
    "secondary": { "label": "リソースを見る", "href": "#resources" }
  }
}

2. jsonから取得している部分をmicroCMSから取得するように修正する

次にjsonを読み込む部分をmicroCMSから取得するように修正してもらいます。
めちゃくちゃ凝ったプロンプトを考えなくても、この一言で修正してくれて助かります。いつも、ありがとうございます。

jsonを読み込む部分をmicroCMSから取得するように修正して

3. microCMSのオブジェクトでデータを設定する

取得できるようにしたら、次にmicroCMSでAPIスキーマを設定します。フィールドIDと表示名を考えるのがめんどくさいのでここでもcodexを頼ります。

microCMSのスキーマを作成するために、 copy.json をもとにフィールドID, 表示名, 種類 をテーブル形式で出力してください

これで下記のテーブルが出力されます。これをコツコツ手動で設定していきます。カスタムフィールドを設定しないといけなかったり、リッチテキストの設定を初めに考えておくべきだったと後悔したり、microCMSのAPIスキーマ設定に関する知識が増え、小指が痛くなるけど頑張ってやり切ります。今回は大変すぎたのでやってません。

microCMS Copy Schema

Field ID

表示名

種類

備考

site

サイト設定

オブジェクト

全体のメタ/フッター情報

site.defaultTitle

既定タイトル

テキスト (1行)

例: “プレビューコープ”

site.pageTitle

ページタイトル

テキスト (1行)

例: “プレビューコープ | …”

site.demoNotice

デモ注意文言

テキスト (複数行)

ヘッダー帯用

site.footerDescription

フッター説明

テキスト (複数行)

site.footerLinks

フッターリンクリスト

繰り返し (オブジェクト)

site.footerLinks[].href

リンク先

テキスト (1行)

URL or アンカー

site.footerLinks[].label

リンクラベル

テキスト (1行)

site.copyright

コピーライト表記

テキスト (1行)

Field ID

表示名

種類

備考

navigation

ナビゲーション

オブジェクト

navigation.logoInitials

ロゴ頭文字

テキスト (1行)

例: “PC”

navigation.tagline

タグライン

テキスト (1行)

navigation.subtitle

サブタイトル

テキスト (1行)

navigation.links

ナビリンク

繰り返し (オブジェクト)

navigation.links[].href

リンク先

テキスト (1行)

navigation.links[].label

表示名

テキスト (1行)

navigation.contactLabel

営業問い合わせボタン

テキスト (1行)

navigation.ctaLabel

メインCTAボタン

テキスト (1行)

Field ID

表示名

種類

備考

hero

ヒーロー

オブジェクト

hero.kicker

キッカー

テキスト (1行)

hero.headline

見出し

テキスト (複数行)

hero.body

説明テキスト

テキスト (複数行)

hero.ctaPrimary / ctaSecondary

CTA (主要/サブ)

オブジェクト

各オブジェクトに label(テキスト1行) と href(テキスト1行)

hero.highlights

ハイライト一覧

繰り返し (テキスト1行)

hero.highlightNote

ハイライト注釈

テキスト (1行)

hero.statusOverview

ステータスタイトル

テキスト (1行)

hero.statusRoadmap

ロードマップタイトル

テキスト (1行)

hero.incidentLabel / incidentValue

インシデント計測

テキスト (1行)

hero.metricCards

メトリックカード

繰り返し (オブジェクト)

各カードに label(テキスト1行) と value(テキスト1行)

hero.metricNote

メトリック注釈

テキスト (1行)

hero.nextActionLabel / nextActionValue

次のアクション

テキスト (1行)

Field ID

表示名

種類

metrics

KPIカード

繰り返し (オブジェクト)

metrics[].label / value / detail

指標名 / 値 / 補足

テキスト (1行)

Field ID

表示名

種類

services

サービス紹介

オブジェクト

services.kicker / headline / body

キッカー / 見出し / 説明

テキスト

services.cards

サービスカード

繰り返し (オブジェクト)

services.cards[].title

カードタイトル

テキスト (1行)

services.cards[].copy

説明文

テキスト (複数行)

services.cards[].items

箇条書き

繰り返し (テキスト1行)

services.cards[].ctaLabel

ボタンラベル

テキスト (1行)

Field ID

表示名

種類

solutions

ソリューション

オブジェクト

solutions.kicker / headline / body

テキスト

solutions.roadmapLabel / roadmapStatus

テキスト (1行)

solutions.roadmapItems

ロードマップ項目

繰り返し (テキスト1行)

solutions.cards

ソリューションカード

繰り返し (オブジェクト)

solutions.cards[].category / title / summary

テキスト

solutions.cards[].benefits

ベネフィット

繰り返し (テキスト1行)

Field ID

表示名

種類

caseStudies

導入事例

オブジェクト

caseStudies.kicker / headline / body

テキスト

caseStudies.stories

事例カード

繰り返し (オブジェクト)

stories[].logo / impact / summary

テキスト

stories[].metrics

成果指標

繰り返し (テキスト1行)

Field ID

表示名

種類

testimonials

お客様の声

オブジェクト

testimonials.kicker / headline

テキスト

testimonials.quotes

引用リスト

繰り返し (オブジェクト)

quotes[].quote

コメント

テキスト (複数行)

quotes[].name

氏名

テキスト (1行)

quotes[].role

役職

テキスト (1行)

Field ID

表示名

種類

pricing

料金プラン

オブジェクト

pricing.kicker / headline / body

テキスト

pricing.tiers

プランカード

繰り返し (オブジェクト)

tiers[].name / price / description

テキスト

tiers[].features

特徴リスト

繰り返し (テキスト1行)

pricing.contactCta

お問い合わせボタン文言

テキスト (1行)

Field ID

表示名

種類

resources

リソース

オブジェクト

resources.kicker / headline / body

テキスト

resources.entries

リソースカード

繰り返し (オブジェクト)

entries[].title / type / summary / action

テキスト

Field ID

表示名

種類

cta

最終CTA

オブジェクト

cta.kicker / headline / body

テキスト

cta.primary / cta.secondary

CTAボタン

オブジェクト(label/href はテキスト1行)

4. ローカルのスキーマを調整

jsonで出力した通りにmicroCMSのレスポンスを設定することは無理なので、レスポンスをもとにローカルの前提となるスキーマを調整します。
まずはログに出力してもらいます。

microCMSのレスポンス形式とローカルの前提としているjson形式の整合性を整える材料とするために、レスポンスをログに出力してください。
後ほど、この出力を使って修正を依頼するのでその前提でレスポンスの全体が明確に確認できる形でログを出力してください。

出力されたjsonをプロンプトに貼ってスキーマを調整してもらいます。

下記のjsonが実際にmicroCMSからレスポンスされる形式のjsonです。これをもとに、jsonのスキーマとjsonのデータを適用している部分も修正してmicroCMSに入力したデータが正しく表示されるようにしてください。

[貼り付けたjson]

こちらで修正されたページを確認して正しく表示されたら成功です。
経験的には2,3箇所くらい調整が必要だし、 <br class="md:hidden" /> みたいに書いたところをどのように扱うかなどを決める必要があるなど、個別の調整が必要になります。