🌊 制作事業（TERASU）

HPデモ制作用コードまとめ

最終更新 2026年05月19日 ／ 41_制作事業部/HPデモ制作用コードまとめ.md

HPデモ制作用コードまとめ

/hp-template <URL> で生成した「中身ゼロのHPテンプレ」をここに蓄積していくハブ。

  • デザイン / レイアウト / フォント / 配色 / アニメ = 100%再現
  • テキスト = 元文言ゼロ（ダミー化）
  • 画像 = 空スロット化（data-slot 検索で差し替え）

各エントリの本体コードは 41_制作事業部/HPデモコード/ 配下の個別ノートに html コードブロックで保存。下表からたどる。

テンプレ一覧

取得日 元HP テンプレノート テキスト置換 画像スロット 取得方式 公開デモ
2026-05-19 TOKORU（株式会社トコル空間設計・架空案件／hitoba構造へ流し込み） HPデモ_TOKORU_hitoba流し込み_20260519 278流し込み 26中立スロット fill https://hp-demo-hitoba.pages.dev/
2026-05-19 seigaku.jp/kase 構造に そらの森こども園 流し込み HPデモ_そらの森こども園_流し込み_20260519 137流込(元内容ゼロ) 109グレースロット 配色:緑反映 -
2026-05-19 然 -SHIZEN- 蓼科（ki-e-to.jpテンプレ流し込み） HPデモ_shizen-tateshina_20260519-1043 286流し込み 26 背景15 他4 (空のまま) fill -
2026-05-18 https://hitoba-office.com/ HPデモ_hitoba-office.com_20260518-2059 278(KEY式) 18パス(元構造維持) 計30箇所 / フォント9 chrome-headless https://hp-demo-hitoba.pages.dev/
2026-05-18 https://ki-e-to.jp/ HPデモ_ki-e-to.jp_20260518-2114 276(KEY式) 26 背景15 他4 (計45) chrome-headless -
2026-05-18 https://newgrads.hubble-docs.com/ HPデモ_newgrads.hubble-docs.com_20260518-2112 177(KEY式) 90 背景0 他0 (計90) chrome-headless -
2026-05-18 https://seigaku.jp/kase/ HPデモ_seigaku.jp-kase_20260518-2100 134(KEY式)+属性6 109パス(元構造維持) chrome-headless https://hp-demo-seigaku-kase.pages.dev/
2026-05-18 https://tetetoco.jp/ HPデモ_tetetoco.jp_20260518-2027 156(KEY式)/115(見た目維持) +背景+icon 計61 chrome-headless https://hp-demo-tetetoco.pages.dev/
2026-05-18 https://neie.jp/ HPデモ_neie.jp_20260518-1425 395 130 背景3 他2 (計135) chrome-headless https://hp-demo-neie.pages.dev/
> /hp-template 実行のたびにこの表へ1行自動追記され、本体コードノートが HPデモコード/ に作成される。

公開デモ（Cloudflare Pages）

デモ 公開URL Cloudflare project 作業ディレクトリ
hitoba-office.com 再現 https://hp-demo-hitoba.pages.dev/ hp-demo-hitoba /Users/oogushiyuuki/株式会社SCALE/hp-demo-hitoba/
tetetoco.jp 再現 https://hp-demo-tetetoco.pages.dev/ hp-demo-tetetoco /Users/oogushiyuuki/株式会社SCALE/hp-demo-tetetoco/
neie.jp 再現 https://hp-demo-neie.pages.dev/ hp-demo-neie /Users/oogushiyuuki/株式会社SCALE/hp-demo-neie/
嘉瀬こどもの森(seigaku.jp/kase) 再現 https://hp-demo-seigaku-kase.pages.dev/ hp-demo-seigaku-kase /Users/oogushiyuuki/株式会社SCALE/hp-demo-seigaku-kase/

hitoba-office.com デモ（KEY式・元パス構造維持）

  • 構成: マルチファイル（index.html + css/ + js/ + 空 images/ fonts/）。<base>除去済でローカル相対解決。
  • テキスト={{KEY}}（278・PLACEHOLDERS.md対応表で原文復元）／画像=元サイトと同パスに置くだけ／フォント=@font-face宣言保持しsrc空化（TWK Lausanne自社配信6＝差替可、FOT-ニューセザンヌ=FONTPLUS proprietary）。
  • 再デプロイ: cd /Users/oogushiyuuki/株式会社SCALE/hp-demo-hitoba && rm -rf _dist && mkdir _dist && cp -R index.html css js images fonts _headers PLACEHOLDERS.md _dist/ && wrangler pages deploy _dist --project-name hp-demo-hitoba --branch main --commit-dirty=true
  • スクロール修正(2026-05-18): 静的化で開幕ローダー演出が完走せず <html class="lenis-stopped">(=CSS .lenis.lenis-stopped{overflow:hidden})が解除されずスクロール不能だった。サイト本来の「演出後 lenis.start()+クラス除去」ハンドオフを再現する小スクリプト＋CSS net(html.lenis.lenis-stopped{overflow:auto!important})を注入して根治。Lenis本体は保持(スムーススクロール生存)。templatize.py に汎用化済(Lenisサイト全般に有効・無ければ無害)。

  • 検証済(2026-05-18): 本番200 / css・js2本200 / CSS1348ルール適用 / swup・lenis初期化OK / コンソールエラー0 / native+Lenis両方スクロール動作。SVGロゴ(workkit®)は意匠として保持。

  • 原本HTML（テンプレノートの html ブロック）をそのまま index.html 配置（簡略化禁止＝デザイン100%再現が価値）。テキスト全ダミー・画像132空スロット・中身は後日差替。

  • 再デプロイ: cd /Users/oogushiyuuki/株式会社SCALE/hp-demo-neie && rm -rf _dist && mkdir _dist && cp index.html _headers _dist/ && wrangler pages deploy _dist --project-name hp-demo-neie --branch main --commit-dirty=true
  • <base href="https://neie.jp/"> のため CSS=インライン / フォント=CDN / JS(Splide/Lenis)・jQuery=neie.jp絶対URL読込（=デザインの一部）。ヒーローは背景動画スロット空のためクリーム地＋neieロゴSVG表示が正常。
  • 検証済(2026-05-18): 本番200 / 外部JS cross-origin 200 / Splideスライダー3種初期化OK / ローディング詰まりなし。

使い方

  1. 参考にしたいHPのURLを用意
  2. Claude Code で実行:
    /hp-template https://参考HPのURL
  3. 完了後、上表に追記＆ HPデモコード/HPデモ_<host>_<日時> ノートが生成される
  4. テンプレノート内の html ブロックをコピー → 案件フォルダに index.html として配置
  5. data-slot="img-N" を検索して画像を差し込み、ダミーテキストを実コピーに置換

補足

  • ローカルにも index.html / SLOTS.md / _original_capture.html が出力される（プレビュー・差分用）
  • 画像の差し込み位置・寸法は各ノート末尾の「画像スロット一覧」表を参照
  • アイコンSVG・CSSグラデ・Webフォントは意図的に保持（=デザインの一部）。写真・ラスター画像のみ空スロット化