Skip to main content

📋 rilii.dev UIリデザイン実装計画書 v2.0

🏗️ アーキテクチャ設計​

設計原則​

  1. React 18 & Docusaurusベストプラクティス

    • 関数コンポーネント + React Hooks
    • Docusaurus swizzleメカニズムの活用
    • Context APIによる状態管理

  2. パフォーマンス最適化

    • CSS Modules + CSS変数の活用
    • GPUアクセラレーション（transform, opacity）
    • React.memo()による最適化

  3. 既存資産の活用

    • colors.tsの拡張利用
    • 既存CSS変数システムの強化
    • color-mix()関数の積極活用

📁 ディレクトリ構造​

/src
├── /design-system         # デザインシステム基盤
│   ├── /hooks            # カスタムフック
│   │   ├── useAnimation.ts      # アニメーション制御
│   │   ├── useScrollTrigger.ts  # スクロールトリガー
│   │   ├── useParallax.ts       # パララックス効果
│   │   └── useThemeColors.ts    # テーマカラー管理
│   └── /utils            # ユーティリティ関数
│       ├── gradientHelper.ts    # グラデーション生成
│       └── animationHelper.ts   # アニメーションヘルパー
├── /components
│   ├── /ui               # 基本UIコンポーネント
│   │   ├── /AnimatedButton      # アニメーションボタン
│   │   ├── /InteractiveCard     # インタラクティブカード
│   │   └── /KineticText         # キネティックテキスト
│   └── /layout           # レイアウトコンポーネント
│       └── /BentoGrid           # 弁当箱グリッド
├── /config
│   └── colors.ts         # 既存: カラー定義（拡張）
├── /css
│   ├── custom.css        # 既存: カスタムCSS（拡張）
│   └── animations.css    # 新規: アニメーション定義
└── /theme                # Docusaurusテーマ（swizzle対象）
    └── [swizzled components]

🎯 実装フェーズ詳細​

Phase 1: デザインシステム基盤構築​

1.1 グラデーションシステム実装​

  • 既存のcolors.tsを拡張してグラデーション定義を追加
  • CSS変数としてcustom.cssに新規グラデーション追加
  • color-mix()関数を活用した動的カラー生成

1.2 アニメーショントークン定義​

  • animations.cssファイル作成
  • CSS変数でトランジション定義
  • キーフレームアニメーションの基本セット作成

1.3 カスタムフック作成​

  • useThemeColors: colors.tsとCSS変数の橋渡し
  • useAnimation: アニメーション制御の共通ロジック
  • TypeScript型定義の整備

Phase 2: アニメーションシステム実装​

2.1 スクロールトリガーシステム​

  • useScrollTriggerフック実装
  • Intersection Observer APIの活用
  • 要素の出現タイミングでアニメーション発火

2.2 マイクロインタラクション​

  • ボタンのリップルエフェクト
  • カードのホバー3D変形
  • フォーム要素のフィードバック
  • React.memo()でパフォーマンス最適化

2.3 グローバルアニメーション設定​

  • requestAnimationFrameでのスムーズな動き
  • will-changeプロパティの適切な使用
  • CSS Transitionの最適化

Phase 3: コンポーネント再設計​

3.1 インタラクティブカード​

  • 関数コンポーネントとして実装
  • 3Dホバーエフェクト（perspective + rotateY/X）
  • グローエフェクト（box-shadow アニメーション）
  • 遅延読み込み対応

3.2 アニメーションボタン​

  • リップルエフェクト実装
  • グラデーションアニメーション
  • モーフィング効果
  • アクセシビリティ考慮（prefers-reduced-motion）

3.3 弁当箱レイアウト（Bento Grid）​

  • CSS Gridベースの実装
  • レスポンシブ対応（mobile/tablet/desktop）
  • アイテムの動的配置
  • スタッガーアニメーション

Phase 4: Docusaurusテーマ統合​

4.1 Swizzleによるコンポーネント拡張​

  • BlogPostItemのカスタマイズ
  • BlogLayoutの改修
  • TOCコンポーネントのアニメーション追加

4.2 レスポンシブシステム​

  • Docusaurus標準ブレークポイント（996px）への統一
  • メディアクエリの最適化
  • コンテナクエリの検討

4.3 パララックス実装​

  • useParallaxフック作成
  • スクロール連動アニメーション
  • パフォーマンス最適化（throttle/debounce）

Phase 5: 高度なインタラクション実装​

5.1 キネティックタイポグラフィ​

  • テキストアニメーション実装
  • 文字単位のアニメーション制御
  • Web Animations API活用

5.2 実験的ナビゲーション​

  • 動的メニューシステム
  • スムーズな遷移効果
  • プログレスインジケーター

5.3 パフォーマンス最適化​

  • React.lazy()による遅延読み込み
  • useMemo/useCallbackの適切な使用
  • CSS containプロパティの活用
  • Lighthouse測定と改善

📊 実装スケジュール​

Phaseタスク依存関係
1デザインシステム基盤構築なし
2アニメーションシステム実装Phase 1
3コンポーネント再設計Phase 1, 2
4Docusaurusテーマ統合Phase 3
5高度なインタラクション実装Phase 4

※実装期間は考慮不要

⚠️ リスクと対策​

リスク影響度対策
アニメーション性能劣化高GPU活用、will-change最適化
既存コンポーネント破壊中段階的移行、後方互換性維持
ビルドサイズ増大低Tree shaking、コード分割

🔒 実装ルール​

  1. 計画遵守: この計画から逸脱する場合は必ず許可を求める
  2. 段階的実装: 各Phaseは完全に完了してから次へ進む
  3. テスト駆動: 各コンポーネントに単体テストを実装
  4. パフォーマンス計測: 各Phase完了時にLighthouse測定

📝 承認チェックポイント​

  • Phase 1完了時 - デザインシステム確認
  • Phase 2完了時 - アニメーション動作確認
  • Phase 3完了時 - コンポーネント品質確認
  • Phase 4完了時 - レイアウト確認
  • Phase 5完了時 - 最終パフォーマンス確認

🚀 Phase 1 実装タスク​

Task 1.1: ディレクトリ構造の作成​

  • /src/design-system/hooks ディレクトリ作成
  • /src/design-system/utils ディレクトリ作成
  • /src/components/ui ディレクトリ作成
  • /src/components/layout ディレクトリ作成

Task 1.2: グラデーションシステム​

  • colors.ts にグラデーション定義追加
  • gradientHelper.ts 作成
  • CSS変数でグラデーション定義
  • color-mix()を活用した動的カラー生成

Task 1.3: アニメーション基盤​

  • animations.css ファイル作成
  • 基本キーフレーム定義
  • トランジショントークン設定
  • will-change最適化

Task 1.4: カスタムフック実装​

  • useThemeColors フック作成
  • useAnimation フック作成
  • TypeScript型定義

🔧 技術的実装指針​

React Hooksパターン​

  • useState, useEffect, useRef の基本フック活用
  • カスタムフックでロジック再利用
  • useMemo, useCallbackで最適化

Docusaurus統合​

  • swizzle --ejectで必要コンポーネントのみカスタマイズ
  • テーマコンポーネントの継承
  • プラグインAPIの活用検討

CSS戦略​

  • CSS Modules + グローバルCSS変数
  • PostCSSは使用しない（Docusaurus標準に従う）
  • カスケーディングを意識した詳細度管理

更新履歴

  • v2.0 (2025-01-07): React 18/Docusaurusベストプラクティスに準拠
  • v1.0 (2025-01-07): 初版作成
目次