🤖 AI運用ルール

/hp-flow コマンドメタ情報

著者

作成者: 大串勇輝（株式会社SCALE 代表）
AI作業: Claude Code
対象: HP制作の4ステップフロー（参考HP→中身ゼロ化→公開→流し込み）

改善履歴

日付	内容	設計思想
2026-05-25 v1	初版: 4ステップ順次推進型	毎回4つのプロンプトを手動コピペしてた → 1コマンドで自動進行
2026-05-30 v1.1	TERASUオリジナル化（A案）追加	コード裏側を見られても元参考HPと判別できない状態にする「コード指紋ゼロ化」処理をStep 1/2に統合。クラス名 `t-` プレフィックス・CSS変数 `--t-`・data属性独自化・コメント削除・Prettier整形を必須化。納品サイトの法的リスク・ブランドリスクを実質ゼロに
2026-05-30 v2.0	セルフ進化プロトコル（自動学習）追加	「使うほど賢くなる」コマンドへ。フロー実行中・セッション内のどこでFBが出ても検知し、恒久ルールは Claude が自分で `hp-flow.md` 本体を書き換えて永続化。`learning.md`（学習ログ）を新設し、起動時に必読で過去の学びを継承。Vault共有＋シンボリックリンク方式のため、誰のFBも全メンバーの `/hp-flow` に伝播する
2026-05-30 v3.0	6ステップに再構成（オリジナル化を分離・置換漏れゼロ・Cloudflare枠不使用）	「オリジナル化で置換漏れ→ボタン押せない/スタイル消える」事故を解決。①完全再現を先に確定→確認①→②オリジナル化→確認②、と分離。置換漏れゼロ方式（リネームマッピング→全ファイル横断同時置換→grep整合性検証→前後プレビュー比較）を導入。プレビューはCloudflare枠を使わずローカル（python http.server/live-server）。Step6に改良ループ追加。4ステップ→6ステップ
2026-05-30 v4.0	10ステップに拡張（最初〜公式公開まで全部入り）	「制作だけ」から「集客できる状態まで」へ。Step7=著作権最終監査ゲート（grep指紋監査+8項目チェック、クリアしないと公開不可）、Step8=公開準備（プリフライト+SEO内部対策+公開前NG最終チェック）、Step9=本番公開（公式ドメイン・DNS・SSL・MXレコード保護）、Step10=公開後SEO設定（Search Console・GA4・sitemap・Bing・権限付与）。manual-terasuの知識を実行フローに統合。これ通りやれば制作→著作権クリア→公開→集客土台まで全部完了。6→10ステップ
2026-05-30 v5.0	11ステップに拡張（スマホ最適化 + 改良フェーズ運用プロトコル追加）	Step7にスマホ最適化（PCを崩さずレスポンシブ仕上げ→スマホ実機FB依頼）を新規挿入し以降を1つずつ繰り下げ。改良ループに ver管理＋複数パターンpreview＋リンク事故防止プロトコルを統合（本体ローカルホスト=正本／専用プレビュー=選定用使い捨て、ver+1とtar.gzバックアップ、URLパラメータ方式での1デプロイ複数パターン、反映漏れ防止5チェックを必須化）。「修正→確認→違う→次」のラリー無限ループを構造的に禁止。Step 1/全ページ一括方式（TOP＋全下層を一度に処理し共通アセット補完を1回で完結／品質低下懸念はSTEP0完全mirror手順で解決）を恒久ルール化。10→11ステップ

解決した課題

Before（毎回の苦労）

HP制作のたびに以下4つのプロンプトを順番に手動コピペしてた:
1. 参考HPトップページの中身ゼロ化依頼
2. 下層ページの中身ゼロ化依頼
3. ローカル公開依頼
4. 案件依頼書の流し込み依頼

問題点:
- 毎回コピペが面倒
- どこまで進んだか管理しづらい
- 4ステップの中身を忘れがち
- 新規メンバーに伝授しづらい

After

/hp-flow 1発で全フロー進行:
- Claudeが順次推進
- 各ステップで素材を要求 → 処理 → 完了確認 → 次へ
- 番号回答だけで完結
- やり直し/戻る/スキップで柔軟運用
- 既存スキル hp-template も内部で活用

設計の核心

原則	実装
順次推進	4ステップを1つずつ進める。一気にやらない
ステップガイド	各ステップで素材入力を待つ
番号回答	各選択肢に [a][b][c][d] / 進行制御に [1][2][3][4]
修正介入余地	やり直し/戻る/スキップ可能
レイアウト保護	元のCSS・フォント・アニメを絶対変更しない
文字数事前報告	レイアウト崩れる前に判断仰ぐ
既存スキル活用	`hp-template` を Step 1, 2 で内部呼び出し

依存

既存スキル: hp-template（同名スキル / URL→中身ゼロテンプレ出力）
シェル環境: macOS / zsh
ローカル公開ツール:
python3（基本同梱）
npx live-server（オプション）
npx wrangler（Cloudflare Pages使用時）
Vault構造: 30_HP制作部/{案件名}/ フォルダ運用想定

カスタマイズポイント

社内メンバーが自分用にしたい場合:

Vault パス を自分の環境に置換
- ~/Obsidian/SCALE-Brain/ → 各自のVault パス
Vault保存先 を自分の運用に合わせる
- 30_HP制作部/{案件名}/ → 各自のフォルダ構造
ローカル公開方法 の選択肢を環境に合わせて削減・追加
- 例: live-server入れてない人は [b] 削除
過去のHP案件 リンクは各自の案件履歴に書き換え

過去のHP案件（リファレンスデータ）

このコマンドが想定する案件タイプ:
- project_scale_hp_demo — SCALE新コーポHPデモ
- project_hp_demo_neie — neie.jp HPデモ
- project_hp_demo_tetetoco — tetetoco.jp HPデモ
- project_hp_demo_hubble — newgrads.hubble-docs.com（Nuxt3）
- project_hp_demo_seigaku_kase — seigaku.jp/kase HPデモ

これらの案件で4ステップを実証済み。

トラブル時

テンプレ化後にレイアウト崩れる → reference_minified_html_surgery 参照（単一行minified HTML編集ノウハウ）
画像最適化で白チカ → feedback_terasu_fv_whiteflash 参照（hp*.jpg 420w/q55 軽量化が正解）
gdrive 配下で stat 古い値 → reference_gdrive_stale_stat 参照（python open().read() で確認）

meta

/hp-flow コマンドメタ情報

著者

改善履歴

解決した課題

Before（毎回の苦労）

After

設計の核心

依存

カスタマイズポイント

過去のHP案件（リファレンスデータ）

トラブル時

関連

meta

/hp-flow コマンド メタ情報

著者

改善履歴

解決した課題

Before（毎回の苦労）

After

設計の核心

依存

カスタマイズポイント

過去のHP案件（リファレンスデータ）

トラブル時

関連

/hp-flow コマンドメタ情報