AIでLPをサッと作れるようになりましたが、納品したサイトの文言をクライアントが直接修正できないのなら改善のスピード感が落ちてしまいます。
そこで、静的サイトの文言をcodexを活用して、変更可能にできるようにする手順を紹介します!
前提
- すでに静的サイトが作られている前提なので、適当なデモサイトを用意しています
- Astro / Tailwindで作っていて、かつReactコンポーネントを組み立てる形でページを構成しています

全体の流れ
- テキストを抽出してjsonにする
- jsonから取得している部分をmicroCMSから取得するように修正する
- microCMSのオブジェクトでデータを設定する
- ローカルのスキーマを調整
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[].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[].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" /> みたいに書いたところをどのように扱うかなどを決める必要があるなど、個別の調整が必要になります。