Development Request
Sanity HTML入稿 + Googleフォーム設置
作成日: 2026-03-12 / 依頼者: kota
pink-labo.com に対して2つの機能追加を依頼します。
① Sanity HTML入稿
記事をHTMLで直接入稿できるフィールドを Sanity Studio に追加
② Googleフォーム設置
サイト内に読者アンケート用のGoogleフォームを埋め込み
対象サイト
| サイト | pink-labo.com（ピンク研究所） |
| フレームワーク | Next.js（App Router） |
| CMS | Sanity |
| ホスティング | Cloudflare Pages |
現状: 入稿に時間がかかりすぎている
記事はHTML形式（JSON-LD付き）で完成稿を作成しています。しかしSanityにはRich Text Editor（Portable Text）しかないため、HTMLを手作業で分解して再入力しています。1記事あたり30〜60分の入稿作業が発生し、テーブル・引用枠・FAQ構造などが再現しきれずに品質も落ちます。
解決: HTMLをそのまま貼り付けて入稿したい
SanityにHTMLフィールドを追加すれば、完成稿をコピペするだけで入稿が完了します。入稿時間は1記事5分以下になり、構造の再現性も100%になります。現在59本の入稿済み記事に加え、今後も月20〜30本ペースで記事を投下する計画なので、この効率化のインパクトは大きいです。
ボトルネックの数字
30-60分/本
現在の入稿時間
5分/本
HTML入稿後
90%削減
入稿時間
現状: 読者の声を集める手段がない
GA4でPV・滞在時間はわかりますが、「読者が何を求めているのか」「どんな悩みを抱えているのか」を直接聞く手段がありません。SEO記事を書いていても、読者の実態がわからないままコンテンツを作っている状態です。
解決: サイト内でアンケートを取りたい
Googleフォームを記事ページやサイドバーに埋め込み、読者の属性・悩み・求めている情報を収集します。この一次データは記事の質を上げるだけでなく、SEOのKW選定やペルソナ精度の向上にも直結します。外部アンケートツールへの誘導では回答率が下がるため、サイト内に自然に溶け込む形で設置したいです。
期待する効果
ブログ記事のスキーマに htmlBody フィールドを追加してください。
{
name: 'htmlBody',
title: 'HTML本文',
type: 'text',
description: 'HTML形式で記事を貼り付け。値がある場合はPortable Textより優先表示されます。',
}案A: code-input プラグイン
@sanity/code-input をインストール{ _type: 'code', language: 'html', code: '...' }htmlBody.code を参照案B: カスタムコンポーネント
type: 'text'）まず案Aで動くものを作って、使い勝手を見てから案Bに進めるのがよいです。
htmlBody が存在する場合はそちらを優先表示。ない場合は従来の Portable Text をレンダリング。
// 記事ページのコンポーネント（イメージ）
{article.htmlBody ? (
<div
className="article-body"
dangerouslySetInnerHTML={{
__html: typeof article.htmlBody === 'string'
? article.htmlBody
: article.htmlBody.code // code-inputの場合
}}
/>
) : (
<PortableText value={article.body} />
)}記事取得のGROQクエリに htmlBody を追加。
*[_type == "blog" && slug.current == $slug][0] {
title,
slug,
body,
htmlBody, // ← 追加
// ...
}.article-body に基本タイポグラフィ（font-size, line-height等）が適用されること。テーブル・引用枠・FAQの構造が崩れないこと <script type="application/ld+json"> はそのまま出力でOK（body内でもGoogleは認識します） Before（現状）
→ 30〜60分 / 構造の再現性 △
After（HTML入稿後）
→ 5分以下 / 構造の再現性 100%
記事ページ下部（本文の後、関連記事の前）
記事を読み終えたタイミングで表示。最も回答率が高いと想定される位置。
専用ページ（/survey）
詳細なアンケートは専用ページに設置。記事ページからリンクで誘導。
Googleフォームの iframe 埋め込みを使用します。
<!-- 記事ページ下部に設置するコンポーネント -->
<section class="survey-section">
<h2>あなたの声を聞かせてください</h2>
<p>回答は記事改善に使用します（1分で完了）</p>
<iframe
src="https://docs.google.com/forms/d/e/FORM_ID/viewform?embedded=true"
width="100%"
height="800"
frameborder="0"
marginheight="0"
marginwidth="0"
loading="lazy"
>
読み込んでいます…
</iframe>
</section>案A: 全記事に一律表示
案B: Sanityで記事別に制御
surveyFormUrl フィールドを追加まずは案Aで設置し、フォームの運用が安定してから案Bに拡張するのがよいです。
Googleフォーム自体はこちらで作成します。以下は設問の方向性です。
あなたの年代は？
選択式: 10代 / 20代前半 / 20代後半 / 30代 / 40代以上
この記事は役に立ちましたか？
5段階: とても役立った〜全く役に立たなかった
他にどんな情報が知りたいですか？
自由記述（任意）
既存記事のPortable Text → HTMLへのデータ移行
既存記事はそのまま。新規記事からHTMLフィールドを使う
Rich Text Editor（Portable Text）の削除
従来の入稿方法も残す。併用できる状態にする
HTML入力のバリデーション・サニタイズ
入稿者は社内メンバーのみ。セキュリティリスクは低い
Googleフォームの回答集計・ダッシュボード
集計はGoogleスプレッドシート側で行う
独自アンケートフォームの開発
Googleフォームの iframe 埋め込みで十分。自前開発は不要
Sanity HTML入稿（案A）
スキーマ追加 + フロント修正
1〜2時間Googleフォーム設置（案A）
テンプレートにiframe追加 + スタイル調整
30分動作確認・デプロイ
テスト記事でHTML入稿を確認 + フォーム表示確認
30分合計見積り
2〜4時間
案Aベース。案Bにする場合は +1〜2時間
実装前に確認させてください。
Sanity関連
schemas/blog.ts）
@sanity/code-input プラグインは案Aで問題ないですか？
Googleフォーム関連
Pink Research Institute / Development Request / 2026-03-12