作業ログ 2026-07-24

03:21 - /handoff 実行（全テーマ）

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

1. 未来共創コミュニティ 新規LP制作（mi-rai広告ページのデザインをベースに /hp-flow で制作）— システム作業 — 公開中・セクションデザイン多様化は未着手
2. セクションごとのデザイン付け（次の未着手タスク）— 相談/作業 — 案出し前で中断

---

テーマ別の詳細

1. 未来共創LP（client-miraikyousou-lp）

• 背景: /hp-flow で mi-rai.co.jp/service/ad のデザインを完全再現 → TERASUオリジナル化(Stage A) → 未来共創コミュニティの内容(10セクション+CTA)を流し込み
• 場所: ~/dev/mirai-ad/site（ git未接続・LOCALのみ）
• 公開: https://client-miraikyousou-lp.pages.dev/ ／ https://preview.client-miraikyousou-lp.pages.dev/ （Cloudflare Pages・wrangler直デプロイ）
• 重要: 既存の稼働クライアント client-miraikyousou（本番 miraikyoso.jp・WordPress版）とは別プロジェクト。絶対に触らない。今回のLPはmi-raiデザインベースの別物
• やったこと（時系列）: 完全mirror(curl+Python・wget無い環境) → テキスト同長ダミー化 → Stage Aオリジナル化(パス平坦化 mirai-v3/wp除去・トラッキング/CMS指紋除去・CSS変数 --t-*化・app.bundle.js内の mi-rai.co.jp/theme path中立化) → 未来共創10セクション+CTA流し込み → 全セクション背景を透過して線アニメ(line-anim-canvas)表示 → 白黒(モノクロ)化(青#203E95→#141414・線アニメ#c4c4c4) → ヘッダー/フッターをNext.js版未来共創(t-hd/tc743)に合わせる(repo ~/dev/client-miraikyousouのindex.html+css/f27f…/77de41…から抽出) → プロセスステップ図(4ステップ・③下に挿入) → ③リストを枠なし普通テキスト化 → FVにネットワーク背景動画(~/dev/client-miraikyousou/assetsのmono版をfilter:invert(1)で白背景黒線に) → Contents目次セクション(FVと②の間)追加
• デプロイ方法: export PATH="/Applications/Codex.app/Contents/Resources/cua_node/bin:$PATH" してから npx wrangler pages deploy site --project-name=client-miraikyousou-lp --branch=main（と --branch=preview）。wranglerはOAuthログイン済(y-ogushi@scale-group.co.jp・株式会社SCALE・pages:write)
• git未接続の理由と対応: 「全部git管理」ルールに反する状態。標準の new-hp-preview.sh(GitHub Actions自動デプロイ)は ~/.config/scale/cloudflare_pages_token が無いため使えず、wrangler直デプロイにした。GitHub管理化＋push自動デプロイにするにはトークン設置が必要
• バックアップ: ~/dev/mirai-ad/_work_backups/（各改修前の index.html を都度保存）
• 却下されて元に戻したもの: ⑤の2カラム(黒パネル+画像) / ②の2カラム画像レイアウト（両方「元に戻して」で復元済み）

2. セクションごとのデザイン付け（未着手・次タスク）

• 大串FB: 「このページシンプルすぎて変だから、セクションごとに(PowerPointテンプレのように)デザインをつけたい。FVはそのまま。何個か案を出してプレビューで」
• 参考: PROJECT PowerPoint Template(fastppt.net)の各スライドデザイン（画像/2カラム/番号/引用/統計など多様なレイアウト集）
• 状態: 案出し前で中断。次セッションは「複数デザイン案をプレビューで提示」から
• 進め方の学び: 単発で1個ずつ置換すると却下→revertが続く。複数案をまとめてプレビューが大串の希望

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

• 白黒(モノクロ)基調が好み
• 全背景に線アニメ(透過)を出す
• 参考レイアウトは忠実に(100%再現志向)
• 単発でなく複数案をプレビューで見せてほしい
• 却下時は「元に戻して」で即revert（バックアップ運用が有効だった）
• FVのネットワーク動画はOK・FVは触らない

---

TERASU Lab（Labセッション・本番反映済み）

1. カードの削除をE案で新設（大串採用）

• 長押しで確定（押している間だけリングが一周・離すと戻る）＝誤タップで消える事故が構造的に起きない
• 画鋲は左上・✗は右上（大串指示どおり）。画鋲は core（mikke!共有）なので Labだけ左へ寄せる上書きにした
• 消えたカードは KV の deleted に立てて全員の一覧から消える。正本JSONは消さない（大串採用＝あとで戻せる）
• 戻す場所＝ https://lab.terasu.scale-group.co.jp/trash/ （ナビ「探す」の一番下）
• 件数がズレないよう、前回のKV結果を localStorage に控えて絞り込みJSより先に同期的に外す設計
• 保存APIの許可項目 deleted は Labだけに足した（core＝mikke!側は無変更）
• tools/sync_meta.py は deleted を書き戻さない（戻せる状態を壊さないため）

2. レスポンシブ検品 48件 → 0件（合格106/106）

38件は検品ツールの誤検知だった
- マーキー/カルーセルの中身は親が overflow で切っている＝横スクロールは出ず実害なし → 数えないよう是正
- 「スマホでレイアウトが変わらない」だけで落としていた（ナビ等はPC/SPで同じが正しい・実物で確認）
→ はみ出しが無く文字12px以上なら合格・注意書きのみ

実際に崩れていた10件を修正（原因は全部「元サイトのPC前提指定を抜き出したまま」）
- givee-clients: タブレットで5列のままロゴが溢れる → 1023px以下は3列＋ロゴに max-width
- ntvart-cta: 親がgridで max-width が効かない → min-width:0 で列を縮められるように
- ntvart-service: 768px以上でPC2カラム(740px+1fr)になり1158px → 1023px以下は1カラム（PCは不変）
- skewbanner / business-hscroll / strengths-list: 元サイトが body に min-width:67.5rem（タブレットはPC版を横スクロールさせる設計）→ その帯だけ打ち消し
- about-spotlight / lifelink-afterflow: 装飾とスライドインの初期位置が外へ → 横だけ overflow-x:clip

3. 選定用の候補ページを整理

• del-review（E案で決着）／acc-review（A案）／pop-review（C案）／by-review（A案）を生成ごと廃止
• ※ 旧URLは Cloudflare のエッジに12時間前のキャッシュが残っていて一時的に開ける。実体は削除済みで、時間で消える（Lab のHTMLは no-store 済み）

4. 追加者を複数人に（大串採用＝A案「チェックして選ぶ」・実装済み・本番反映済み）

• 押すたびに入り・切り。3名全員まで選べる（色/分類と違い古い方を押し出さない）
• 使い分けは1操作に統一＝足したい人を入れる＝追加／間違いを切る＝変更。全員外すと「未設定」
• 表示は「細川・さき」と中黒／絞り込みは複数人のうち1人でも一致すれば出る／人数カウントも各人ぶん
• data-by は | 区切り。coreの一致判定は sub/pg しか複数値を見ないので Labだけ by も同じ扱いに（mikke!無変更）
• sync_meta.py は contributor を配列で書き戻す。既存データは 配列/|区切り/単一文字列 の3通りとも読める

（以下は選定時の記録）
- いまは1人だけ（押すと置き換わる＝「変更」しかできない）
- 大串「変更と追加をどう使い分けるか考えないと。案たくさん」→ 実物で動く6案を用意
https://lab.terasu.scale-group.co.jp/by-review/
A チェックして選ぶ／B 上=変更・下=追加／C 宛先バー型／D 押す=変更・＋=追加／E モード切替／F 長押しで追加
- 決めたら本体（LAB_EDIT_JS）に実装＋絞り込みも複数人対応にする

5. /section にレスポンシブ検品ゲートを追加

• 昨日作った tools/check_responsive.mjs が実用になった（誤検知是正で106/106）ので、
  登録前に必ず通すゲートとしてコマンド定義に組み込み

6. /font をリポ分離に追従＋フォント消失の退化を根治（v2.0）

• 旧版は本番につながらない場所に書いていた（~/dev/lab-terasu）＝Labにもmikke!にも出ない状態だった
• ツール（add_font.py / extract_fonts.py）を core へ移設して1本化
• extract_fonts.py が mikke! のフォントを25件消す作りだった（丸ごと再生成・実測81→57件）。
  web-fonts を通さず直接足した日本語フォント（BIZ UDPGothic / Zen Maru Gothic / Dela Gothic One 等）が犠牲になっていた
  → マージ方式に変更（既存は消さない・取れた項目だけ更新）＋件数が減ったら exit 1 で止まる安全弁
• レコードごと差し替えると mikke! の絞り込み軸(lang/shape/mood)も消えるのでフィールド単位で重ねる方式に
• 通しで検証: テストフォント1件を追加 → Lab /fonts/ と mikke! /fonts/ の両方に出ることを実ビルドで確認（93→94枚）

7. /mikke の登録ツールが落ちていたのを修復

• add_refsite.py が Lab の add_section.py を import する作りで、リポ分離後は core から見えず ModuleNotFoundError
  ＝/mikke を打つと登録の時点で落ちる状態だった（実測）
• 追加者ロジックを core/tools/contributors.py に共通化（参考HPもセクションも同じ1本）
• あわせて saki の表示名を「制作部署」→「さき」に是正（サイト表示は改名済みで、登録ツールだけ旧名だった）
• 現在の3択＝大串 / さき / 細川

8. 仕様の確認（大串からの質問への回答・機械で検証済み）

問い	答え
/mikke は両方に入る？	○（データは core にあり両方が読む。両リポで core の参照を進めて初めて反映）
追加者・追加日は Lab だけ？	○（build_mikke.py に該当記述0件＝mikke!では表示も絞り込みもしない）
追加者は3択？	修復後に○（大串 / さき / 細川）
/section は Lab だけ？	○（出力は entries/ と code-previews/＝Labリポのみ）

9. 後始末（A/B/C）

• A 旧リポ ~/dev/lab-terasu を凍結: CLAUDE.md 冒頭に凍結バナー（作業場所の対応表つき）＋新リポと重複する
  ツール22本を削除（誤用の元を物理的に排除）。旧リポにしか無い16本は残置し、その旨も明記
• B /mikke v3.1: 追加者ロジックの core 共通化を反映＋「落ちていた」事実を履歴に記録＋
  「追加者・追加日を使うのは Labだけ」を明記
• C mikke! 本番デプロイ: 1回目は Cloudflare への通信エラーで失敗（本番は無傷）→ 再実行で成功。
  本番実測 MIKKE-VER: ver181／バックアップ mikke_ver181_20260724_0812.tar.gz
• 配布チェック /mikke・/section・/font とも PASS(6/6)

10. サムネ・FVが「地色と枠だけ」で撮れる問題を根治（大串FB）

• 真因3つ: ①幕を消す関数を用意しながらどこからも呼んでいなかった ②一覧サムネ側は共通処理をimportすらしていなかった ③詳細FV側は freezeAnim を先に掛けてローディングの進行アニメごと止めていた
• 対策: 幕を待つ→残れば消す／中身が写るまで粘って撮る(shootUntilRich・薄ければ待って撮り直し・ほぼ無地なら保存しない)／判定を2段階に分離(撮り直しはゆるく・保存はしないは厳しく)
• 新ツール: audit_shots.mjs(出来上がった画像を色数と輪郭量で検品・全件可)／derive_shot.py(下層→サムネ／サムネ→FV。撮れない画像を撮れている画像から作る)
• 修復: 信濃町/R.project/NOT A HOTEL ARCHITECTS/CAFE TORTUE の一覧・FVを撮り直し。ILOLI HAIR は幕が明けずトップが撮れないので member(スタッフ)ページを流用(大串決定)。孤児サムネ andlabdesign を削除
• 結果: 全171件が検品クリア。両本番(Lab/mikke! ver184)に反映済み
• /mikke v3.2: 上記を全部コマンドに反映（新規登録で最初からきれいに入り後修正が要らないように）。配布チェックPASS(6/6)

11. 絞り込みの位置を直す（Lab＋mikke! 両方・大串FB）

• スクロール時、絞り込みが top:14px で貼りつき、上に浮く固定ボタン群(.mikke-topnav・20〜64px)より上に来て宙に浮いて見えていた
• ボタン群の下(80px)に揃えた。mikke!も同じ症状だったので core で直して両方に反映（Lab固有の上書きは削除＝二重管理を解消）
• 実測: 両サイトとも 絞り込み上端 14→80px。mikke! は ver184 で本番反映

12. 参考HP ⇄ セクションの相互リンク（大串採用・本番反映済み）

• 新しいデータは不要。セクションが持つ参考元URLと参考HPのURLを突き合わせるだけ
• 突き合わせは ①ホスト名が同じ ②登録ドメインが同じ（recruit.example.com と example.com）の2段
• 参考HP詳細 の下に「このサイトから作ったセクション」（器は共通点の多いサイトと同じ .d-sim、中身はセクション一覧と同じカード）
• セクション詳細 の右に「元の参考HP → そのページを見る」（外部へ飛ぶ前にFV・下層・色が見られる）
• 実測: 参考HP22件に紐づき／セクション側 37/99件

13. 使用履歴（大串採用・本番反映済み）

• カードの「使った」ボタンを押すと案件名を聞き、KV(/api/meta の field='used')に全員共有で記録
• 値は「案件名|案件名|…」。二重登録は弾き、空OKで直前を取り消せる。回数バッジ＋記録済みは枠を強調
• 一覧・セクション詳細・参考HP詳細のすべてのカードで使える
• worker は Labだけ 'used' を許可し、上限を120→600字に
• sync_meta.py は used を書き戻さない（運用の記録なのでKVが正本）。実行時によく使われている順で一覧表示
• 本番APIで保存→読み出し→取り消しまで検証済み

アイデアメモ（Lab をより良くする案・大串と相談中）

• ~~② 参考HP ↔ セクションの相互リンク~~ → 2026-07-24 実装完了: HP詳細に「このサイトから作ったセクション」、セクション詳細に「元HPへ」
• ~~使用履歴~~ → 2026-07-24 実装完了: どのセクションを実案件で使ったか記録→人気順・死蔵が見える
• 図解・よく使う素材もフォント集のように入れる（大串アイデア・メモ）
• 他候補: ページ組み立て(セクションを縦に並べて1枚に)／横断検索／配色当てはめ／AIに渡す用コピー／参考元の生存監視 など

大串FB（Labセッション）

• 削除UIは E案（長押し）を採用／削除は「KVに隠す＋あとで戻せる」（正本JSONは消さない）
• レスポンシブは「直したい」→ 誤検知を潰したうえで本物だけ直す方針が正解だった
• 追加者は A案（チェックして選ぶ）。変更と追加は両方よく使う
• デザインは実物で動く候補を並べてから決める（今回も6案→A案）

技術メモ（次に効く小ネタ）

• 共通化したつもりのツールが片方からしか見えないことがある（import 先が別リポに残る）。分離後は実際に動かして確かめる
• 「作り直して上書き」する生成物は退化の温床。別経路で足したデータが黙って消える → マージ＋件数の安全弁を付ける
• <button> の中に <button> は置けない（ブラウザが外に追い出して消える）。行の中にボタンを置くなら span role="button"
• grid の子は max-width:100% が効かない（列が中身まで伸びる）。min-width:0 を添える
• Cloudflare Pages は削除したファイルでもエッジキャッシュでしばらく開ける。実体の有無は ?cb=乱数 を付けて確認する

19:41 - /handoff 実行（全テーマ・2回目）

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

1. TERASU Lab の大幅アップデート — システム作業 — 本番反映済み・全リポclean
2. /mikke を「入れると全部溜まる」コマンドへ進化 — システム作業 — v3.5・配布チェックPASS
3. 配色ページのグラデーション整列 — システム作業 — 本番反映済み
4. アニメーションとレイアウトの違い — 相談 — 結論あり（統合しない）

---

テーマ別の詳細

1. TERASU Lab の大幅アップデート（すべて本番反映済み）

セクション一覧・詳細
- 検索窓を新設（会社名・キーワード）／会社名の絞り込み軸（件数の多い順・社名だけに短縮）
- 「◯◯ごとに並べる」を4軸に新設（参考HPと同じマークアップ＝見た目も操作感も同一）
- 画鋲（お気に入り）を追加＝左上、削除は右上。お気に入りページに「セクション」枠
- 「コード」を分類の横からホバーの選択肢へ移動（3ボタンが1行・同じ大きさ37px）
- 詳細ページ: 追加者を押して変更できるように／FVの縦幅を参考HPと完全一致（PC482/SP479）
- 分類チップが2つのときくっついていたのを修正（器がblockでgapが効いていなかった）

サムネの根治（大串FB「微妙だと使う気が失せる」）
- 真因: セクション撮影が参考HPの蓄積を1つも使っていなかった（1.2秒待って撮るだけ）
- 対策: 動き止め→隠れている中身を表示に戻す(reveal)→スライダー1枚化 を適用。
ぼかし・透明のまま撮れていたのが解消。reveal は core/shot_common.mjs に共通化
- dedupeOverlap は使わない（セクションは部品を意図的に重ねるので本体まで消える・実測14→1）
- audit_sections.mjs を新設（色数×輪郭量で検品）。全106件を撮り直し

削除・整理
- 使用履歴は正確に計測できない（人が押した回数）ため撤去（大串判断）
- 「元の参考HP」は参考元と重複するため削除
- CTAボタンのページを削除（大串「使わなそう」）
- 重複チェック check_duplicates.py を新設（名前かぶり/コード一致/サムネ一致/同じURL×分類）
→ 参考HPに完全重複1件（niko and… BASE）を発見し削除。セクション6組は中身が別物なので残す

フォントページ（絞り込みが使えなかった）
- 真因: 絞り込みの器はあるのに軸が1つも入っていなかった
- 4軸（言語/形/雰囲気/会社名）＋検索＋削除ボタンを実装。一行の説明は非表示
- 会社名を全81件に付与（既存は「Googleフォント」・大串指示）
- 2タブ化: フォント／アニメーション（文字の動き30件）。
上に文字入力とフォント選択を置き、全カードの実演が一斉に変わる

レイアウトの整理
- 「構成を考える参考」だけに絞り込み（40→23件）。動き系6件はアニメーションへ、
文字の動き5件はフォント>アニメーションへ、「card」6件（AIへの指示文）は削除
- カードに「実例」を表示＝そのパターンを使っている参考HPへ飛べる

2. /mikke を「入れると全部溜まる」コマンドへ（v3.3→v3.5）

• v3.3 二重登録の防止＋追加者の合流: 同じサイトは新しく作らず、別の人が登録した時だけ
  既存に追加者を足す（2人が登録＝2人の名前）。URL表記ゆれも同一判定
• v3.4 フォントも自動で図鑑へ: detect_fonts.mjs で ①Google Fontsの読み込み ②実際に描かれている書体
  の両方が指したものだけ抽出。OS標準・自前配信・登録済みは自動で除外
• v3.5 構成と動きも自動分析: analyze_layout.mjs でFVの型/ナビの型/グリッド/左右交互/横スクロールと、
  無限ループ/スクロール演出/ホバーを判定 → レイアウト・アニメーションのカードに「実例」として出る
• 既存171件を分析（170件判定）: スライダー76 / カードグリッド74 / 左右交互70 / ハンバーガー43 …
  動き: スクロール演出105 / ホバー97 / マーキー75
• しきい値は実測で調整（sticky は164/170件＝当たり前なので不採用、左右交互は137→70件に厳格化）
• セクションだけは従来どおり最後に聞いて、入れたいものだけ入れる（大串指示）

3. 配色ページのグラデーション整列（大串FB）

• 真因: モノトーンが美しいのは #000→#202020→#404040… と1行が濃淡だから。
  他は色順に並べただけで行の切れ目（列数）を意識していなかったためまだらに見えていた
• _gradient_rows() を新設: 色相でまとめ→列数ぴったりの行に切り→行の中は明るい→暗い
• 全8ゾーン＋系統9ゾーンに適用

4. アニメーションとレイアウトの違い（相談・結論）

	アニメーション	レイアウト
何の集まり	動き	画面の組み方
例	1文字ずつ出る/ホバー/流れ続ける	FVの型/ナビ/左右非対称/パンくず
→ 軸が別なので統合しない。ただし文字の動きは両方に散っていたのでフォント側に集約した。

このセッション全体の大串FB

• サムネが微妙だとせっかく入れたセクションも使う気が失せる
• 正確に計測できないなら意味がない（使用履歴を撤去）
• 全く同じものは削除、ちょっとでも違うなら残す（重複対応の判断基準）
• レイアウトは「こういう構成にしようと考えられてめっちゃ便利」
• 良いHPはフォントも良い。/font だけだとみんな入れないから /mikke で自動で入るように
• /mikke ひとつで HP・フォント・レイアウト・アニメーションが一気に溜まる形にしたい
• 既存で登録しているHPを元にレイアウトもたくさん追加したい

次にできること（未着手）

• レイアウトのパターン自体を増やす（現在23件。分析で「該当なし」のサイトから新パターンを起こせる）
• レイアウトの「実例」が付いたのは23件中11件＝残りにも実例が付くよう判定を増やす
• planb-fv-saki-0617 は元コードに画像が1枚も無い（写真ギャラリーのはずが空）＝ /section で入れ直しが必要