MIKO PRODUCTION — INTERNAL DOCUMENT

MAC PM、お疲れ様です。ClaudeDesign です。

先日の Fable ブリーフを受けて、Shinchan Executive Producer の指示のもと、MIKO BLOG TOPページ v3 のデザイン・インタラクション実装が完了しました。このパッケージが、あなたの実装・検証作業のスムーズな引き継ぎになることを願っています。

ブリーフにあった「コピペで増やせるシンプルさ」「静的HTML+CSS縛り」「Cloudflare Workers対応」はすべて守っています。フレームワーク・ビルドツール不要で、このままpushすれば動きます。

何かあればいつでも。よい実装を！

• ✅
  スティッキーナビバー — ロゴ（左）・ライブ時計（中央・秒更新）・テーマ切替ボタン（右）
• ✅
  時間連動カラーテーマ自動適用 — 朝(5〜10時) / 昼(10〜15時) / 夕方(15〜18時) / 夜(18〜22時) / 深夜(22〜5時)
• ✅
  手動テーマ切替ボタン — 5段階をサイクル。CSS変数を動的に上書き（全要素がトランジションで追従）
• ✅
  フィルムパーフォレーション — 上下、スムーズ無限スクロールアニメ
• ✅
  ヒーローヘッダー — ロゴフロートアニメ・キャッチコピー「気ままに、進化中。」・ADMIT ONEバッジ
• ✅
  タイムライン記事カード × 5枚 — COMING SOONバッジ付き・ホバーリフトアニメ・入場アニメ（遅延スタガー）
• ✅
  トーストメッセージ — ページ読込・ロゴクリック・バッジクリック・カード初回ホバーで表示。キュート72% / クール28%ランダム配分
• ✅
  映画エンドロール（STAFF ROLL） — フルスクリーン黒背景・スクロールアニメ・ESCキーまたはボタンで閉じる
• ✅
  レスポンシブ対応 — 480px以下でレイアウト崩れなし確認済み
• ✅
  prefers-reduced-motion 対応 — アニメ無効化設定のユーザーにも静的で正常表示

以下のHTMLをコピペして .timeline 内の先頭（最新記事が上）に追加するだけです：

<a class="post-card" href="posts/NNN_YYYYMMDD/">
  <div class="post-meta">
    <span class="post-no">No.NNN</span>
    <span>YYYY.MM.DD</span>
  </div>
  <div class="post-title"><span class="post-emoji">🎬</span>記事タイトル</div>
  <p class="post-excerpt">ひとこと紹介文</p>
</a>

テーマは index.html 末尾の <script> 内 THEMES オブジェクトに定義されています。新テーマの追加や色調整はここを編集してください。

主要CSS変数（assets/style.css の :root に初期値）：

• 📁
  ビルド設定不要。フレームワークプリセット：なし（静的HTML）
• 📁
  ルートディレクトリ：リポジトリルート（/）
• 📁
  ビルドコマンド：空白
• 📁
  出力ディレクトリ：空白（または /）
• 📁
  main ブランチにpushすれば自動デプロイ

• 🎬
  記事ページテンプレート作成 — posts/post.html の共通レイアウト
• 🖼️
  OGPメタタグ — SNSシェア時のサムネイル設定
• 🔍
  サイトマップ / robots.txt — SEO基盤整備
• 🎨
  ダークモード常駐切替 — localStorage に保存してリロード後も維持