HPデモ公開デプロイ 設計依頼書

これは「他メンバーのClaude Codeにそのまま貼って実行させる」ための依頼書です。
下の「 コピペ依頼文」ブロックを丸ごとコピーし、メンバーのClaude Codeに貼って、HTMLコードまたは参考HPのURLを添えて投げてください。大串のVault/CLAUDE.mdが無い環境でも同品質で完遂できるよう自己完結で書いています。

この依頼で得られるもの（成果物）

1. 公開URL（例 https://hp-demo-<案件名>.pages.dev/）— 誰でも開ける仮デモ
2. 作業ディレクトリ一式（index.html / _headers / _dist/）
3. 再デプロイ用ワンライナー
4. 検証ログ（HTTP 200・外部依存到達・スライダー初期化・実描画スクショ）

品質基準 = neie.jp等の元HPデザインを 100% 再現したまま、テキスト全ダミー・画像空スロットの「中身ゼロ公開デモ」が、検証付きで公開URL化されている状態。

絶対ルール（品質の核。破ると別物になる）

1. 原本HTMLをそのまま使う。簡略化・再実装・書き換えは厳禁。
   /hp-template 出力（または渡されたHTML）は「デザイン100%再現」が唯一の価値。"きれいに整理しよう"として独自レイアウトに書き直すと価値が消滅する。コピーして配置するだけが正解。
2. <base href="...">・外部JS（Splide/Lenis/jQuery等）・Webフォント・SVG・CSSグラデは消さない。 これらは「デザインの一部」。絶対URLのまま読み込ませる。
3. 画像は data-slot="img-N" のプレースホルダ（SVG data-URI）のまま。 中身は後日差替。今は触らない。
4. 既存デモを上書きしない。 新規の作業ディレクトリ＋新規Cloudflareプロジェクトで分離する。
5. 報告URLはハッシュ無しの本番URL（https://<project>.pages.dev/）。https://<hash>.<project>.pages.dev は送らない。
6. 検証せずに「完了」と報告しない。 下の検証ゲートを全通過させてから報告する。

前提環境

• wrangler（Cloudflare Pages CLI）が認証済みであること（wrangler whoami で確認。未認証なら wrangler login）
• python3（ローカル検証用簡易サーバ）
• ブラウザ実描画で検証できる手段（Claude Code のプレビュー/ブラウザツール等）。無ければ最低限 curl 検証は必須

手順

STEP 0. 入力を確定

• A: 元HPのURLが渡された場合 → まず /hp-template <URL> を実行し、生成された原本HTMLを取得する
• B: HTMLコード/ファイルが渡された場合 → それが原本。1文字も変えない

STEP 1. 作業ディレクトリ作成（分離）

案件名を決める（半角英数・ハイフン、例 neie kuroki）。

PROJ="hp-demo-<案件名>"            # 例: hp-demo-neie
DIR="$HOME/hp-demos/$PROJ"          # 既存デモと衝突しない新規パス
mkdir -p "$DIR"

STEP 2. 原本HTMLを index.html として配置（verbatim）

• 渡されたHTML（またはVaultの 41_制作事業部/HPデモコード/HPデモ_*.md の ``html ブロック原本）を、**そのまま**$DIR/index.html` に書き出す。
• 巨大ファイル（1MB超のことが多い）。手で再入力せず、ファイル/コードブロックを丸ごとコピーする。書き出し後にバイト数・行数・data-slot 個数を確認:

wc -c "$DIR/index.html"; wc -l "$DIR/index.html"; grep -c 'data-slot=' "$DIR/index.html"

STEP 3. キャッシュ無効化ヘッダ

printf '/*\n  Cache-Control: no-store\n' > "$DIR/_headers"

STEP 4. デプロイ（プロジェクトは先に作る）

cd "$DIR"
rm -rf _dist && mkdir _dist && cp index.html _headers _dist/
# 初回のみ: プロジェクトが無いと deploy が "Project not found" で落ちる
wrangler pages project create "$PROJ" --production-branch main || true
wrangler pages deploy _dist --project-name "$PROJ" --branch main --commit-dirty=true

→ 出力の https://<hash>.<proj>.pages.dev は確認用。本番URLは https://<proj>.pages.dev/。

STEP 5. 検証ゲート（全項目クリア必須）

# 5-1 本番URLが 200
curl -s -o /dev/null -w "%{http_code}\n" -A "Mozilla/5.0" "https://$PROJ.pages.dev/"
# 5-2 外部JS依存が cross-origin 200（元HPのscript.js / jQuery のURLを原本から拾って叩く）
curl -s -o /dev/null -w "%{http_code}\n" -A "Mozilla/5.0" -e "https://$PROJ.pages.dev/" "<原本内の script.js 絶対URL>"
curl -s -o /dev/null -w "%{http_code}\n" -A "Mozilla/5.0" -e "https://$PROJ.pages.dev/" "<原本内の jquery.min.js 絶対URL>"

さらに実ブラウザで描画確認（プレビュー/ブラウザツール）:
- ローディング画面が消える（黒/単色の全画面オーバーレイで固まっていない）
- スライダー（Splide等）が初期化されている（.splide.is-initialized / .is-active を確認）
- ヘッダー・フッター・元HPのデザインが再現されている
- テキストが「サンプル…」等のダミー、画像がプレースホルダになっている
- スクリーンショットを1枚取得して目視

ヒーローが単色で寂しく見えても、それは背景動画スロットが空のための正常挙動（中身は後日差替）。デザイン崩れと混同しない。

STEP 6. 記録（再現性のため必須）

• Vaultがある環境: 41_制作事業部/HPデモ制作用コードまとめ.md の表に公開URLを追記＋デプロイ手順をメモ
• Vaultが無い環境: $DIR/DEPLOY.md を作り「本番URL / Cloudflare project名 / 作業ディレクトリ / 再デプロイワンライナー / 検証結果」を残す

STEP 7. 報告フォーマット

• 公開URL（ハッシュ無し）
• 何のデモか（元HP・デザイン100%再現・全ダミー・画像N個空スロット・後日差替前提）
• 検証結果（本番200／外部依存200／スライダー初期化OK／ローディング詰まりなし）
• 作業ディレクトリと再デプロイワンライナー

よくある失敗と対策

コピペ依頼文（メンバーのClaude Codeに貼る）

【依頼】HPデモ公開デプロイ（設計依頼書に従って実行）

手順書: SCALE-Brain `41_制作事業部/HPデモ公開デプロイ_設計依頼書.md` の通りに実行してください。
Vaultが無い環境なら、この依頼文に書かれた要点だけで完遂してください。

# 入力（どちらか）
- 参考HPのURL: <ここにURL。あれば最初に /hp-template <URL> を実行>
- もしくは添付/貼付のHTML原本: <ここにHTML or ファイルパス>

# 絶対ルール
1. 原本HTMLは1文字も変えずそのまま index.html に配置（簡略化・再実装・書き換え厳禁＝デザイン100%再現が唯一の価値）
2. <base href> / 外部JS(Splide/Lenis/jQuery) / Webフォント / SVG / data-slot 画像プレースホルダ は消さない・触らない
3. 既存デモを上書きしない。新規 hp-demo-<案件名> ディレクトリ＋新規Cloudflare Pagesプロジェクトで分離
4. wrangler は「先に pages project create → 次に deploy」
5. 報告URLはハッシュ無し本番 https://<project>.pages.dev/
6. 検証ゲート全通過まで「完了」と言わない

# やること
1. 作業ディレクトリ作成
2. 原本HTMLを verbatim で index.html 配置（バイト数/行数/data-slot数を確認）
3. _headers に Cache-Control: no-store
4. wrangler pages project create <project> --production-branch main
5. cp index.html _headers _dist/ → wrangler pages deploy _dist --project-name <project> --branch main --commit-dirty=true
6. 検証: ①本番URL 200 ②原本内の script.js/jQuery 絶対URLが cross-origin 200 ③実ブラウザ描画でローディング解除・スライダー初期化・元HPデザイン再現・ダミーテキスト/空スロット・スクショ取得
7. 記録: Vaultあれば 41_制作事業部/HPデモ制作用コードまとめ.md に追記、無ければ作業ディレクトリに DEPLOY.md
8. 報告: 公開URL / デモ内容 / 検証結果 / 作業ディレクトリ / 再デプロイワンライナー

# 完了条件
公開URLが HTTP 200 で、元HPのデザインが再現された状態でブラウザに表示され（ローディング詰まり無し・スライダー動作）、テキスト全ダミー・画像空スロットになっており、検証ログと再デプロイ手順が残っていること。

参考実績

• 2026-05-18 neie.jp 版: 本番 https://hp-demo-neie.pages.dev/ / project hp-demo-neie / 原本=HPデモ_neie.jp_20260518-1425（1.33MB・画像スロット132）。検証=本番200／外部JS cross-origin 200／Splide 3種初期化OK／ローディング詰まり無し。詳細→ HPデモ制作用コードまとめ