⚙️ Vault運用

2026-07-19_作業ログ

最終更新 2026年08月07日 ／ 90_Meta/Claude作業ログ/2026-07-19_作業ログ.md

02:49 - /handoff 実行（全テーマ）

このセッションで扱ったテーマ（全部）

  1. 株式会社コートー コーポレートサイト（トップページ）制作 — システム作業（hp-flow）— Step6改良ループ進行中・ローカルのみ（未GitHub/未デプロイ）

※このセッションは実質1テーマ（コートーHP制作）に集中。

テーマ別の詳細

1. 株式会社コートー HP（トップページ1枚）制作

  • コマンド: /hp-flow（クライアント納品用）
  • 参考HP: https://cosok.co.jp/ （光束工業）を完全再現→TERASUオリジナル化
    ※memory client-koto は「isomurassレイアウト流用」とあるが、今回大串は cosok.co.jp を参考指定（参考が変わった）
  • 依頼書: 株式会社コートー（千葉県船橋市・屋根板金/板金加工メーカー・創業1954年・代表 齋藤健太郎・本社工場 船橋/茨城工場 古河）。トップ1枚・下層は#仮リンク・画像は先方支給前提でプレースホルダ・kotofactory.co.jp本番予定
  • 作業ディレクトリ: ~/dev/hp-cosok/site/（ローカルのみ・未GitHub・未デプロイ）

  • ローカルプレビュー: http://localhost:8766/ （python3 -m http.server・このセッションのプロセスなのでセッション終了で停止。次回は cd ~/dev/hp-cosok/site && python3 -m http.server 8766 で再起動）

  • 完了済みStep:

  • Step1: cosok全9ページを完全mirror（wget無し環境→Python自作mirror.py）+ ダミー化（text_mapping.json）
  • Step2-3: 取りこぼし補完・確認①（完全再現OK）
  • Step4: オリジナル化。疎結合判定→Stage A実施（/cms/wp-content/themes/cosok/→/assets/にフラット化=社名cosok抹消・GA(G-VG54E5CYLL)/wp-emoji/wp-json/generator/CMS痕跡/コメント除去）。Stage B（クラスt-*一括改名）は大串判断で見送り（汎用クラス・指紋価値低・破壊リスク高）

  • Step5: コートー依頼書を流し込み（cosokレイアウト維持・全11セクション）+ SEO/CVコピー設計。画像は全プレースホルダ（ph/*.svg・ラベルのみ）。ナビ/下層は#仮リンク

  • Step6 改良ループでやったこと（大串FB順）:
    1. ナビを6項目化: トップ/会社概要/事業内容/加工製品・商品情報/各種情報/お問い合わせ（ヘッダー＋フッター再掲）
    2. 選ばれる理由セクションを cki-group風「Our Strengths ショーケース」に置換（.ks-*完全スコープ・Koto赤）:

    • 中央固定タイトル＋左右にカードが流れて重なる＋カード画像グレー→カラー＋背景2枚(右上/左下)固定＋流れ始めでぼかし
    • 重要な技術対応: cosok本体の #wrapper{overflow:hidden} がページ全体でCSS sticky/GSAP pinを阻害→背景+タイトルのステージを position:fixed の手動スクロールトグルで固定（GSAP pinは使わず）。画像colorize/背景blurはGSAP ScrollTriggerのtoggleClass（これは動く）
    • カード調整の変遷: 縦長3:4→横長5:4→テキスト半分/画像半分の50/50・角丸ゼロ・幅288px(18rem)・重なり-4rem（重なり強すぎて「くっつき」→-13rem→-4remで解消）
    • 中央テキストはカードに隠れないよう max-width 26rem+短い3行に
      3. 事業紹介セクションを cki-group風「Our Business 横スクロール(hscroll)」に置換（.kb-*完全スコープ・Koto赤）:
    • GSAP ScrollTrigger pin+scrub で大判スクエアカードが横に流れる。3部門(板金加工/雨樋/外装材)・最初のカードは48vw(画面半分)から開始・PCのみ横スクロール/SPは縦積み
    • ※こちらはGSAP pinを使用（desktop幅で動作確認済み。以前pin失敗に見えたのはmobile幅でguard(innerWidth>767)がskipしていたため）

  • 次の一歩（候補）:

  • Step6改良の続き（大串FBを待つ）or Step7レスポンシブ対応
  • 未実施: GitHub立ち上げ（scale-group-jp/client-koto・preview.client-koto.pages.dev）、デプロイ、Step7レスポンシブ、Step8著作権最終監査、Step9 Lab還元、Step10-12公開
  • 掃除ポイント: 下層ページ(company/product等のindex.html)はダミーcosok内容が残存（トップのみ納品・#リンクで到達不可だがStep8監査前に削除推奨）。contactのmw-wp-form痕跡はStep10フォーム作り直しで対応

このセッション全体の大串FB（重要なやつ全部）

  • 「レイアウトを崩さずに流し込んで」= 参考(cosok)のデザイン維持で中身だけ流し込む（memory hp-flow-keep-reference-layout準拠）
  • Stage Bクラス一括改名は「安全重視で見送り」を選択
  • 選ばれる理由/事業紹介は「このレイアウトにして」と参考HTML/CSSを直接支給→スコープCSSで忠実再現+Koto赤に統一+プレースホルダ
  • カードは「テキスト半分画像半分」「角丸なし」「横幅狭く」「くっつき直して」と段階的に指示→都度反映
  • スクショ検証: このプレビュー環境は中間スクロール状態のスクショが撮れない（scroll追従不良/computer scrollタイムアウト）→独立ページ・静的フレームで検証する運用

技術的な学び（横展開候補）

  • cosok/kurokitec系テーマ等 #wrapper{overflow:hidden} のサイトはCSS sticky/GSAP pinが効かない→pinしたい固定要素は position:fixed をスクロールリスナーで手動トグル（fixedはoverflow:hiddenの影響を受けない）。GSAP pinを使うなら desktop幅guardの中で（mobile幅だとinnerWidth>767 guardでskipされ「pin無し」に見える）
  • この環境: wget/brew/node無し→Pythonでmirror自作・GSAPはjsDelivr CDN
  • ブラウザプレビューのcomputer scrollがアニメ多用ページでタイムアウト・screenshotがJS scrollに追従しない→JS計測(getBoundingClientRect/位置)＋独立ページ静的フレームで検証