2026-07-21_作業ログ

09:57 - /handoff 実行（全テーマ・mikke!大規模改修セッション）

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

1. mikke! 大幅改修（構造転換＋配色ページ全リニューアル） — システム作業 — 本番ver42まで公開済み
2. 問い合わせ通知の流入元配管（_source） — システム作業 — 3リポ本番反映済み
3. 動画（案B）でサイト詳細のワンクッション — 相談 — 技術実証済み・5件試作は未着手
4. サイドバー/絞り込みバーのデザイン案 — 相談 — モック提示・判断待ち

テーマ別の詳細

1. mikke! 大幅改修（メイン）

• リポ: ~/dev/lab-terasu（mikke!同居）/ 本番: https://mikke.scale-group.co.jp / preview免除に再変更（2026-07-21・直接prod）
• 現在地: git log最新・ver42・全部本番反映済み
• やったこと（ver29〜42）:
• 構造転換: 配色/フォント/ロゴを上部ナビへ移動、タブをHP絞り込み軸に。右上「絞り込み」ボタン廃止
• トップの絞り込みをサイドバー型（案R）に採用（ver41）。左パネルで業種/種別/雰囲気、件数動的、URL保持、スマホ折り畳み。LAYOUT="tabs"で従来グルーピングに復旧可（既存JS温存）
• ナビ改名「配色を探す/フォントを探す/ロゴを探す」、パーツ全削除（workerで/parts/を404）
• SEOメタ固有化（canonicalがトップ指す致命傷を修正）
• 配色ページ大リニューアル（ver34〜42）: ゾーン制。フルスペクトラム396/モノクロ256/原色108/トーン別/アース/和の伝統色90/CSS色名93/グラデーション。HEX/RGB検索+スポイト。h1「色、ぜんぶここに。」。コピーは押したセル中央表示。全ゾーンのセル大きさ統一（固定サイズ折り返し・全色維持）
• ロゴ/フォントもHPカードと同じ骨格に統一
• 次（判断待ち）:
• サイドバーのデザイン5案（A現行/B件数バー/Cアコーディオン/Dチェック/Eドット）→ https://mikke.scale-group.co.jp/sidebar/ で選定待ち。私の推しB
• 業種/種別/雰囲気タブの構成: すべて=サイドバー無しフラット、業種等=該当軸だけサイドバー＋初期からブロック表示（選ぶとそのブロックだけ）で合意済み・本実装これから
• 絞り込みバー別案 https://mikke.scale-group.co.jp/filterbar2/（案P/Q/R/S・Rサイドバー採用済み）

2. 問い合わせ流入元配管

• lab-terasu(worker)/terasu-hp(contact.js)/scale-lead(inquiry.ts) 3リポ本番反映済み。_source=mikkeでSlack見出し出し分け+CRM流入元記録。テスト送信は未実施（実際に飛ぶため）

3. 動画（案B）

• Playwright導入済み・1件実証成功（tools/record_site.mjs）。ただしPC1本1分49秒・159×2で約10時間、容量640MB→R2必須。5件試作から、で合意。着手前に一声かける

4. デザイン案モック

• /sidebar/（サイドバー5案）/filterbar2/（ガラッと4案）/tab-options/（タブ7案）/icon-options/ 全てmikke-review/配下で永続

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

• リンクはURL単独行・**で囲まない・直後に記号続けない（何度も指摘・恒久ルール）
• mikke!は再びpreview免除（PV少・スピード優先・当分プレビュー不要）
• CSSを消す時は必ず差分取ってから（フォント/パーツCSS巻き込み事故を複数回）
• コピー表示は押したセル中央
• 色は「全色ある」網羅性で"色ならmikke"のポジション狙い

15:38 - /handoff 実行（全テーマ・mikke!大規模改修 第2セッション）

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

1. mikke! 配色ページの全面刷新（colordic 8ページ取り込み） — システム作業 — 完了・本番ver47〜54
2. mikke! 一覧/絞り込みのUI改修（サイドバー・まとめ表示・チップ1行化） — システム作業 — 完了・ver55〜79
3. mikke! フッター全面リニューアル（支給コードt-dcベース） — システム作業 — 完了・ver80〜91
4. mikke! 詳細ページ改修（画鋲/ボタン/似ているサイト横スクロール） — システム作業 — 完了・ver75〜91
5. サムネイル品質の根治（mShots依存の脱却） — システム作業 — 進行中（130件の自前撮影が実行中）
6. 制作実績ページ新設（TERASU HP /works/ ミラー） — システム作業 — 完了・ver62〜73
7. ロゴを探すのアーカイブ — システム作業 — 完了・ver85（復元手順あり）
8. お問い合わせフォームのブラッシュアップ — 相談 — 案提示済み・A/B/C/E/F/G採用と言われたが未着手
9. ページ送りをつけるか相談 — 相談 — 結論=現状維持（159件では分割しない）

テーマ別の詳細

1. 配色ページ（ver44〜54）

• 大串支給の colordic.org 8ページ（原色/和色/洋色/web216/パステル/ビビッド/モノトーン/メトロ）＝計1993色を取り込み。従来ゾーン（フルスペクトラム等）は撤去
• データ正本 data/mikke-colordic.json ／ 取得スクリプト tools/fetch_colordic.py（再取得可）
• 全ゾーンをモノトーンの型に統一（色だけ表示・押す/ホバーでコード・色名はツールチップ）
• セルサイズを全ゾーン統一（76×56px）。色の並びは「似ている色でまとめる」（無彩色→色相30度→彩度帯→明度）
• 「その他の色」2438色を追加→さらに色系統9ブロック（赤系/オレンジ系/茶系/黄系/緑系/水色系/青系/紫系/ピンク系）に分解。計4431色
• ブロック名を平易化: 原色→基本の色 / 和色→和の伝統色 / 洋色→洋風の色名 / いろんな色→Web標準の色 / パステル→淡い色 / ビビッド→鮮やかな色（モノトーン・メトロは据置）
• 見出し横の説明文・h1「色、ぜんぶここに。」・戻り導線・色検索はすべて削除

2. 一覧/絞り込み（ver55〜79）

• 絞り込みの並びを 雰囲気→サイト種別→業種 に。項目ドット廃止→軸タイトルに■（ダスティ・アース: #C1705C/#6E8CA0/#8A9A7B）
• 「◯◯ごとに並べる」全幅バー（案D・小さめ）を各軸の一番上に新設。押すとその軸でブロック分け表示（URL ?g= で保持）
• カードの「詳細をみる」テキスト廃止→サムネのホバーで「サイトへ／詳細をみる」の2択
• チップ（業種/種別/雰囲気）を必ず横1行に。一覧を4列→3列にして1440px幅なら全159件が省略なし
• 総件数「159件」表示を削除。お気に入りの件数バッジも非表示
• 【重大バグ2件を根治】①カードのレイアウト崩れ＝縦積み指定が article[class^="clip"] 限定でサイドバー化後のDOMに当たらずテンプレのflexが生きていた ②絞り込みが最後まで見られない＝高さ固定(100vh-28px)が原因。body の overflow-x:hidden で sticky も無効化されていた（clipに変更）

3. フッター（ver80〜91）

• 大串支給コード（t-dc）をSTEP1でそのまま反映→STEP2で修正
• 2枚カード廃止→既存の横長・黒背景CTA1本。掲載著作権/削除依頼の文言はマストで残置
• 列の分類をB案に: 「mikke! を使う」（ホームページ/配色/フォント/お気に入り）＋「HPをつくる」（制作実績/HP制作の相談(無料)/運営会社/プライバシーポリシー）
• 最下段（会社情報/掲載削除の文言/©SCALE）を下端で一直線に（©のabsoluteをやめグリッドのalign-items:end）
• mikke!ロゴ下にXアイコン（https://x.com/terasu_design）を円形ボタンで設置
• 支給コードのGivee社情報（社名/住所/電話/サービス名）は残さずSCALEの実データに差し替え
• 全9ページ共通で反映（ミラー3ページにもCTA_STYLE注入が必要だった＝入れ忘れで矢印が巨大化する地雷）

4. 詳細ページ（ver75〜91）

• 画鋲を会社名の横／「サイトを見る」ボタン撤去／スクショ下CTA廃止
• 「これをベースにオリジナルのHP制作したい」ボタンを新設（/contact/?ref=）。デザインは案4「枠線＋ホバー塗り」に決定
• 似ているサイトを3件固定→共通点の多い順に横スクロール（←→、最大24件）
• スクショ〜会社名の余白38pxを一度消してしまい大串FBで復元（勝手に詰めない）

5. サムネイル品質（進行中・最重要の宿題）

• 大串から計8件のサムネ不良報告（ABEMA/こばクリニック/青木茂建築工房/ジュニ/エムケアーズ/アールイコール/AI model/arflex/餃子の王将）
• 原因はすべて mShots（WordPressの外部スクショAPI）依存: ①Generating Preview ②遅延読み込みで下半分が空 ③JS描画/オープニングアニメ待ち失敗
• 対策として新設: tools/shoot_mikke.mjs（自前撮影・networkidle待ち→全スクロール→画像/動画待ち→Cookieバナー非表示→撮影）／ tools/check_mikke_shots.mjs（全件機械検査）
• 検査の見逃しが発覚（餃子の王将）: 標準偏差だけでは濃い単色を取りこぼす（sd=21で閾値14超えOK判定、実際は最頻色90%）→ 最頻色の占有率判定を追加。再検査で50件が該当
• 根治として130件の自前スクショ撮影を実行中（完了まで30分程度）。完了後に全件検査→崩れは個別撮り直し→build→deploy が必要
• ルール更新: /mikke コマンド（Vault）とリポの docs/MIKKE_スタートカード.md に「デプロイのたびに検査して要確認0件」を恒久ルール化。ただし追加フロー自体に撮影を組み込む強化は未実施（大串に「今後同じことが起きない設計」を約束済み）

6. 制作実績ページ（ver62〜73）

• 上部ナビの運営会社とお問い合わせの間に新設。TERASU HP /works/ をコードそのままミラー
• 相対パスの画像/実績詳細はTERASU本体を参照。パンくず削除・フッターはmikke!のものに差し替え
• リード文を案Dに: 「mikke! の運営元 TERASU が手がけた制作実例です。／「こういうサイトをつくりたい」があれば、同じ体制でお手伝いできます。」

7. ロゴを探すのアーカイブ（ver85）

• ナビ/フッターから外し /logos/ は worker で404。logos_main()・data/mikke-logos.json・CSS・画像は残置
• 復元手順は docs/MIKKE_スタートカード.md の「アーカイブ中の機能」に明記（3か所戻すだけ）

8. お問い合わせフォーム（未着手）

• 現状はTERASU HPそのまま。種別が「HPのリニューアル/新規制作/採用/協業/その他」でmikke!の用件と噛み合っていない
• 大串が採用と明言したのは A（種別をmikke!仕様に=掲載希望/削除依頼/このサイトをベースに等）・B（?ref= で参照サイトの文脈を拾う）・C（掲載希望時だけ出す項目）・E（お気に入り連携）・F（文言/返信目安/送信後導線）・G（Slack出し分け）
• あわせて「サイト種別ごと/業種ごとの上書き挙動」の確認も未実施（後に選んだ方で上書きされる設計になっているか）

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

• 勝手に余白を詰めない（詳細ページのスクショ〜会社名38pxを消して指摘された）
• リンクはURL単独行・**で囲まない
• ブロック/ボタンの名称は「に」「で」など助詞の混在を避けて統一する（→「ごとに並べる」で統一）
• 色を付けるのは■だけ。文字色は通常の見出し色
• 「読んで/確認して」は読むだけ。着手は指示を待つ
• サムネは目視で取りこぼすので機械検査を回す。約束した設計が実際に効いているか自分で検証する（王将の見逃しで信頼を損ねた）

追記（15:45）サムネ130件の一括撮影は失敗

• バックグラウンド実行した node tools/shoot_mikke.mjs（130件）は 成功0件・失敗130件
• エラーは全件同じ: page.goto: Target page, context or browser has been closed
  ＝親プロセス終了時にPlaywrightのブラウザごと落とされた。スクリプト自体の不具合ではない
  （個別実行 node tools/shoot_mikke.mjs <id> は9件すべて成功している）
• 自前スクショは 29件のまま。本番サイトへの影響なし
• 次にやるときは以下のどちらか:
  1. 前面実行で20〜30件ずつ分割（1件約12秒／30件で約6分）
  2. 大串のターミナルから直接: cd ~/dev/lab-terasu && nohup node tools/shoot_mikke.mjs > shoot.log 2>&1 &