⚙️ Vault運用

2026-07-22_作業ログ

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

作業ログ 2026-07-22

対象システム: mikke!（mikke.scale-group.co.jp・リポ ~/dev/lab-terasu）
この日の到達点: ver96

やったこと

1. サムネ品質の最終確認（前日からの最優先宿題・完了）

  • 全168件を機械検査 → 要確認 0件 / mShots依存 0件
  • 「今は写っている」だけでなく、外部API（WordPress mShots）への依存がゼロ＝後日プレースホルダに戻る時限爆弾を除去した状態

2. 日本語フォントを25件追加（14→39件・全81件）

  • 3軸フィルタ(案A)を入れた時点で日本語が14件しかなく、「日本語×明朝×和モダン」で6件しか出ず実用にならなかった
  • Google Fonts の商用可から、実在を機械確認（css2 APIへの到達確認）したうえで追加
  • 内訳: ゴシック7／丸ゴシック4／明朝4／手書き4／装飾6
  • 不具合の根治: 自前追加したフォントは web-fonts-data.json（Lab由来の別データ）に無いためCSSが発行されず既定フォントで表示されていた。_font_links() が data/mikke-fonts.json の family も見るよう修正

3. 旧データの掃除

  • 旧 cat（「英字・すっきり」等の9分類＝言語と形が混在）・cat_label・英語タグ57種をデータとコードから完全撤去
  • 日本語判定・入力プレビューが data-cat に依存していた箇所も data-lang へ付け替え

事故と復旧（重要）

別セッションが同じリポに push 済みなのを取り込まないまま deploy し、本番から参考サイト9件を消した。

  • 発覚経緯: ver96 デプロイ後の git push が ! [rejected] で弾かれて気づいた（本番は既に壊れていた）
  • 実害: 一覧 174件 → 165件。willstyle mori-construction nirnor shueisha-2026saiyo 等が grep 0件
  • 復旧: git pull --rebase（コンフリクトなし・両者の変更が共存）→ 再ビルド → 再デプロイ → 本番で全件復活を確認
  • 原因: wrangler pages deploy はローカルの生成物で本番を丸ごと置き換える方式で、git のようなマージが起きない。古いローカルのまま出すと相手の成果が黙って消える
  • 恒久対策: セッション開始時と deploy 直前に git fetch && git status／deploy より先に push を通す（弾かれる＝ローカルが古いの早期警報）→ 詳細は Claude_学びストック 2026-07-22 の項

残っている宿題（大串の判断待ち）

項目 状態
フォントの「一覧の1行(sub)」を残すか 大串「3軸あるから要らない認識」→ 同じ3軸の書体（例: Noto Sans JP と Zen Kaku Gothic New）が区別できなくなる点だけ共有済み。判断待ち
Slack通知の見出し出し分け（用件7種） mikke!側は本文に全部載る形で完了。見出しレベルの出し分けは TERASU HP 側 contact.js の改修が必要

関連

11:42 - /handoff 実行（全テーマ）

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

  1. mikke! 競合KASOUのキャッチアップと分析 — 相談 — 完了（分析済み・打ち手の優先順位まで合意）
  2. mikke! 下層ページ収録＋PC/SPフルページ表示 — システム作業 — 仕組み完成・2サイトのみ撮影済み（全件展開は未着手）
  3. mikke! 詳細ページの全面リニューアル（2カラム化・FV・下層デザイン） — システム作業 — 完了（ver116）
  4. mikke! 絞り込みにベース/アクセントカラーを追加 — システム作業 — 完了（ver99〜108）
  5. mikke! フォントページの3軸フィルタ刷新＋日本語25件追加 — システム作業 — 完了（ver95〜96）
  6. mikke! お問い合わせを専用フォーム化 — システム作業 — 完了（ver93）
  7. mikke! 全ページのコントラスト不足を機械調査 — システム作業 — 完了（ver112）
  8. 参考サイト「春風亭与いち公式サイト」を /mikke で登録 — システム作業 — 完了（ver113）
  9. タグ・summary・見どころの廃止 — 意思決定＋システム作業 — 完了
  10. 「どんなサイト？」の文字数制限／チップのツールチップ改善 — システム作業 — 着手直前で中断（未実装）

テーマ別の詳細

1. 競合KASOU（kasoudesign.com）の分析

  • 運営は創新ラボ（2013年設立・東京千代田区）。TERASU/mikke!とまったく同じビジネスモデル（ギャラリーで集客→自社制作へ送客）。掲載5,000件以上
  • 効いている点（優先順）: ①収録単位がサイトではなくページ（About/料金表/一覧などを個別収録して絞れる）②PC/SPフルページを両方掲載 ③分類5軸＋Parts ④投稿者の顔と一言コメント ⑤制作会社クレジット（供給が集まる仕組み）⑥探す/知る/学ぶ/依頼するの4入口 ⑦色ごとの静的URL（SEO）
  • mikke!が勝てる点: 配色4,431色・フォント81件はKASOUに無い独自資産
  • 打ち手の優先順位（合意済み）: S=下層ページ＋PC/SP撮影 ／ A=Labセクション集をmikke!に統合(Parts軸) ／ A=制作会社クレジット ／ B=静的URL化 ／ B=キュレーターコメント

2. 下層ページ収録＋PC/SPフルページ（最重要の宿題）

  • 新設ツール2本: tools/find_subpages.mjs（下層URL自動発掘・9種別に分類）／tools/shoot_fullpage.mjs（PC/SP撮影）
  • 撮影済みは willstyle と yoichi-shumputei の2サイトのみ。残り167件は未撮影
  • 全件展開の方針が未決（上位30〜50件に絞る／下層を主要4種別に限定 の判断待ち）。1サイト3〜5分・全件で8〜13時間の見込み
  • 撮影方式は試行錯誤の末に確定（下の「学び」参照）

3. 詳細ページの全面リニューアル

  • 2カラム化（左=FV＋下層デザイン／右=情報・sticky）→ その後、下層デザインは全幅で似ているサイトの上へ移動
  • ページ幅を画面いっぱいに拡張（親テンプレが1312pxに絞っていたのをCTAと同じ手法で突破し、最大1480px中央寄せ）
  • FVは参考サイトと同寸（PC693px / SP247px / gap20px）
  • 画鋲を50px→20px（社名と同じ大きさ・1行目と横位置一致）

4〜7（完了分の要点）

  • 絞り込み: ベース/アクセントカラーを追加（B案=色丸グリッド11px・7列×2行=14色・パープルは実績ゼロで除外）。色を最上位に配置し、項目名の■は全軸で撤廃
  • フォント: 3軸(言語×形×雰囲気)に刷新・日本語14→39件（全81件）・旧cat9分類と英語タグ57種を完全撤去
  • お問い合わせ: TERASU HPミラーをやめmikke!専用フォームへ。用件7種・?ref引き継ぎ・掲載/削除依頼の条件表示・お気に入り添付
  • コントラスト: 全ページを機械調査し、見出しがテンプレ由来の濃茶(#2f2725)を継承して黒背景に沈んでいたのを根治（比1.31→17.27）

8. 春風亭与いち公式サイトの登録

  • 参考にしているKASOUと同じサイトを登録＝詳細ページを直接見比べられるようにするのが目的（大串発案）
  • エンタメ・娯楽／ポートフォリオ／和モダン／ネイビー(機械監査77.3%)×ホワイト・オレンジ
  • 下層3ページ（お知らせ・About・お問い合わせ）も撮影済み

9. タグ・summary・見どころの廃止

  • 調査の結果、3つともどこにも表示されていなかった（タグは似ているサイトの最大1点のみ、summaryは参照箇所ゼロ）
  • 大串決定で全廃 → add_refsite.py から必須指定を撤去、/mikke コマンド定義からも削除（配布チェックPASS 6/6）
  • 登録に必要なのは id/name/url/業種/サイト種別/雰囲気/ベース色/アクセント色/note/contributor の10項目だけ
  • 既存データのtags/summary/highlightsはJSONに残置（消しても動くが将来の再入力コストを避けた）

10. 中断した作業（次の一歩）

  • 「どんなサイト？」(note)の文字数制限: 現在制限なし。実データは中央値52字・最長105字・80字超が31件。大串は「詳細ページを2カラムにした兼ね合いでもっと短い方が見やすい」との認識 → 上限を決めて機械チェックを入れる（既存31件の短縮も要検討）
  • チップのツールチップが見づらい: 原因は title 属性のブラウザ標準ツールチップ（OS描画でCSS制御不可）。チップ自体のhover CSSは正常。data-tip + CSS疑似要素の自前ツールチップに置き換える方針。build_mikke.py の3箇所（309行/377行/3343行）が対象。置換を試みたが失敗（0件）してファイルは無傷のまま

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

  • 参考サイトと同じサイトを登録して見比べるのが確実（willstyleで試行錯誤していたのを是正）
  • 下層デザインは参考と同じ位置・大きさ・仕様で（暫定・あとから独自化する前提）
  • FVはPCとスマホの縦の長さを揃える／参考と全く同じ大きさに
  • タグ・summaryのようにどこにも出ない項目は入力自体をやめる
  • 「読んで/確認して」は読むだけ。着手は指示を待つ
  • 文字が背景と被って見づらい箇所は他ページも横断で調査して直す

学び（技術・恒久）

  • fullPage撮影は使えない: Playwrightのfullpageは内部でビューポートを拡大するため、FVを height:100vh で組んだサイトではFVだけ数千pxに引き伸ばされ、写真が巨大化したり中身が消える。実機と同じビューポート(PC1440x1000 / SP390x760)で1画面撮るのが正解。SPの760pxはPC枠693px・SP枠247pxに並べた時の表示高が揃うよう逆算した値（どちらも481px）
  • 慣性スクロール系サイト(Lenis等)では scrollTo が効かない → 遅延読み込み対策のスクロール往復は使えず、lazy属性を外して直接読ませる方式に変更
  • loading="lazy" のデッドロック: 枠の高さが画像に依存する構造だと、未読込→高さ0→「画面外」と判定され永久に読み込まれない。FVなど確実に見える位置では lazy を付けない
  • CSSの詳細度: テンプレ側のワイルドカード指定に負けるため、mikke!独自CSSは html .mikke-detail を足して勝たせる（max-heightが効かず開閉が逆になる不具合が発生した）
  • 色未指定の見出しは危険: テンプレ由来の濃茶(#2f2725)を継承して黒背景で見えなくなる。コントラスト比を実測する検査を書いて全ページ調査するのが確実

18:56 - /handoff 実行（全テーマ）

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

  1. mikke! 詳細ページのUI改修（ver141〜149） — システム作業 — 完了・本番反映済み
  2. mikke! ナビバーの再設計 — システム作業 — 完了（8項目→3項目）
  3. mikke! 「共通点の多いサイト」の改名・採点式・表示 — 意思決定＋システム作業 — 完了
  4. mikke! 下層ページ軸（ページの種類）の新設 — システム作業 — 完了
  5. mikke! 上位10サイトの下層デザイン実装（ver150〜151） — システム作業 — 完了・大串OK
  6. 撮影ツールの根本改修（shoot_fullpage.mjs） — システム作業 — 完了・恒久ルール化
  7. 検品体制の新設（check_fullpage.mjs / check_detail.mjs） — システム作業 — 完了

テーマ別の詳細

1. 詳細ページのUI改修（ver141〜149）

  • Aboutの文字ぼやけ＝filter: blur の演出を戻していなかったのが原因。opacityだけ見ていた
  • FVを右ブロックの高さの中央へ（上余白69px/下余白73px）
  • 下層デザインの囲みをB案に（グレー背景廃止→1px罫線／ページ名は罫線の外／画像に細枠）
  • CTA文言「これをベースに〜」→「似た雰囲気でHP制作を相談する」（"これを"が参考元に失礼というFB）
  • 下層同士の縦間隔16→80px、下層↔共通点セクション74→128px
  • 業種チップが効かないバグ根治＝チップは ?f=ind:xxx を出すのにJSは ?ind=xxx を読んでいた
  • 下層ページ名を押すとその下層ページを別タブで開く（↗付き）
  • カードは必ず詳細ページへ（ホバーの「サイトへ」廃止・社名も詳細リンクに）
  • 「ファーストビュー」「下層デザイン」の見出しは追加後に大串指示で削除

2. ナビバーの再設計

  • 4案提示→B案（探すを畳む）採用。8項目→5項目→最終3項目
  • 探す＝お気に入り/ホームページ/配色/フォント（お気に入りが一番上）
  • 運営会社＝会社概要（旧・運営会社を改名）/制作実績
  • お問い合わせは独立（受注導線なので畳まない）。▼は大串指示で削除

3. 共通点の多いサイト

  • 「似ているサイト」→「共通点の多いサイト」に改名
  • 横スクロール＋矢印を廃止し縦3×横3の9件グリッドに
  • カードを一覧ページと全く同じに統一（色ドット・チップ・ピン留めまで同一）。NEWだけ非表示
  • 採点式をベース6/雰囲気4/アクセント2/業種1/クロス2に（大串「ベースカラーの一致が超大事」）
  • ベース一致を必須にする案は不採用＝色が15種で該当が少なく（与いちのネイビーは169件中2件）29サイトで9枚埋まらなくなるため

4. ページの種類（下層ページ軸）

  • 独立ページ /subpages/ を作ったが、トップの絞り込みと重複するため廃止（worker RETIREDで404）
  • トップの絞り込みに「ページの種類」軸を新設（サイト種別の直下）
  • 9種別を常に全部表示（0件でも出す・押せない）
  • ページの種類で絞るとカードのサムネがその種別のページ画像に差し替わる
  • 「下層ページ」は用語が伝わらないFBで表示は全て「ページの種類」に統一

5. 上位10サイトの下層デザイン（本丸）

  • 対象: 与いち/willstyle/森建設/nirnor/集英社/Billboard Live/デジタルグリッド/KEI inc./ZettaJoule/JR東日本
  • 110枚撮影・検品0件・本番10サイトとも全画像 表示OK（大串「全部完璧すぎる〜！」）
  • 下層URL発掘のバグ根治＝URL全体で判定していたためベースパスに種別語があると全ページがその種別に化けていた（集英社は全URLが /2026saiyo/ で全部「採用」判定→1件だけ）。相対パス＋リンクテキスト優先に変更し1→4件。タグ/カテゴリ一覧も除外
  • find_subpages.mjs は --write を付けないと保存されない（付け忘れて空振りした）

6. 撮影ツールの根本改修（ここが一番の資産）

  • 下層もFVと同じ「1画面ぶん」に統一（大串提案）。横は据え置き(PC915/SP428)、縦だけFVと同じ(PC635/SP834)
    → スクロールしない＝連結しない＝追従ロゴ/メニューの重複が構造的に起きない
  • 動画はPC/SP共通の秒数（最大2.5秒）で固定。0秒だと映像前の単色フレームを撮ることがあった
  • 実行中のCSSアニメーションも0秒で固定（再現性。撮り直しても完全同一ハッシュになる）
  • Cookie同意バナーはShadow DOM内にあり従来のセレクタで届いていなかった→辿って除去
  • PCも deviceScaleFactor:2（等倍で撮って915に縮小していたのでボケていた）＋JPEG品質90
  • 呼び出し順は動きを止める→隠れているものを表示に戻す（逆だと戻した直後にアニメが巻き戻る）

7. 検品体制

  • check_fullpage.mjs（撮影画像を機械判定：単色/短すぎ/PC・SP比率が同じ＝モバイル未反映/片方欠け）。撮影スクリプト末尾で自動実行
  • check_detail.mjs（本番の詳細ページを実際に開いて全画像が表示されているか検品）
  • 実際に事故を2回自動検出した（willstyleのSP3枚が真っ白／集英社の1枚が404）

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

  • FBを入れたら同じことが起きないようコマンドの修正・他サイトの見直しをするのはマスト（恒久）
  • 「読んで/確認して」は読むだけ。着手は明示指示を待つ
  • 提案は大歓迎・たくさん欲しい。ただし勝手な着手はNG／完了報告に選択肢を並べるのもNG
  • 判断を求めるときはメリット・デメリットが無いと決められない（案だけ出しても選べない）
  • レイアウトの選択は実際に組んで見せてほしい（文字の説明だけでは決められない）
  • 注意書き・Cookieバナーはデザインに関係ないので画像に入れない
  • 動きがある系はPC/SPで同じシーンを撮らないと比較にならない
  • スマホverが実際のレスポンシブ状態か要注意（違うとクレーム＝マイナスブランディング）

技術的な学び（恒久）

  • CDNは ?v=ハッシュ 単位で404をキャッシュする。画像が無い時点でそのURLが叩かれると、あとから置いても404のまま（集英社で発生）。→ workerで静的アセットはクエリを外して取得する形に変更して構造的に解消
  • Playwrightの fullPage は内部でビューポートを拡大するので height:100vh のFVが壊れる（実測2回）
  • CDPの captureBeyondViewport なら全長を1回で撮れるが、canvas描画のサイトは白くなる（canvasは1画面ぶんしか描かない）
  • reveal（透明要素を表示に戻す処理）は閉じているドロップダウンまで開いてしまう。nav/header配下や aria-expanded=false は触らない
  • position:fixed/sticky を無条件に隠すと、コンテンツ本体がsticky配下のサイトで中身が丸ごと消える（40%未満に限定する）