フロントエンドデザインスキル

これは、汎用的な「AI slop」美学を避けた独自性のある高品質のフロントエンドインターフェースを作成するためのスキルガイドです。

主要原則

デザイン思考（コーディング前）

実装前に以下を確立する：

• 目的: どんな問題を解決するか？誰が使うか？
• トーン: 大胆な美的方向性を選ぶ（極限のミニマル、マキシマリスト、レトロフューチャー、ラグジュアリー、プレイフル、ブルータリスト、アールデコなど）
• 制約: 技術要件（フレームワーク、パフォーマンス、アクセシビリティ）
• 差別化: 何が記憶に残り、忘れられないものにするか？

重要: 意図性は強度よりも重要—大胆なマキシマリズムも洗練されたミニマリズムも、精度を持って実行されればどちらも機能する。

フロントエンド美学ガイドライン

以下の要素に焦点を当てる：

タイポグラフィ

• M PLUS 2: 基本フォント（本文、UI全般）
• Noto Sans JP: 象徴的な見出しやアクセントに使用

カラー＆テーマ

• 一貫した美学にコミットする
• 一貫性のためにCSS変数を使用する
• 控えめなパレットよりも、支配的な色とシャープなアクセントの組み合わせが効果的

モーション＆アニメーション

• HTMLにはCSSのみ、ReactにはMotionライブラリを使用
• インパクトの高い瞬間を優先する（段階的な表示を伴うオーケストレーションされたページロード）
• 驚きを与えるスクロールトリガーとホバー状態を実装

空間構成

• 予想外のレイアウト、非対称性、オーバーラップ、斜めの流れを使用
• グリッドの慣習を破る
• 豊富なネガティブスペースまたは制御された密度のバランスを取る

背景＆ビジュアルディテール

• 単色を超えた雰囲気と奥行きを作る
• テクスチャ、グラデーションメッシュ、ノイズ、幾何学模様、レイヤード透過を追加
• クリエイティブなタッチ：ドラマチックな影、装飾的なボーダー、カスタムカーソル、グレインオーバーレイ

避けるべきこと

❌ 汎用的なAI美学：

• 陳腐な配色（パープルグラデーション）
• 予測可能なレイアウト
• 量産型デザイン

✅ 代わりに: 創造的に解釈し、コンテキストに特有の予想外の選択をする。

実装アプローチ

コードの複雑さを美的ビジョンに合わせる：

• マキシマリストデザイン → 豊富なアニメーションを伴う精巧なコード
• ミニマリストデザイン → 抑制、精度、注意深い余白とタイポグラフィ

目標は、既成概念にとらわれず、独自のビジョンに完全にコミットすることで並外れた創造的な作品を実証すること。

k8oプロジェクトでの適用

スタイリング制約

• TailwindCSS: ArteOdyssey (@k8o/arte-odyssey/styles.css) で定義されたカスタムトークンのみ使用
• 禁止: 標準のTailwindクラス（text-gray-600など）は使用禁止

アニメーション

• Motion: Reactコンポーネントには motion ライブラリを使用
• CSS: 単純なトランジションにはTailwindのtransitionユーティリティを活用

コンポーネント

• ArteOdyssey: 基本的なUIコンポーネントは @k8o/arte-odyssey から利用
• カスタム: 独自の視覚表現が必要な場合はプロジェクト固有のコンポーネントを作成