frontend-design Skill

プロダクション品質のフロントエンドインターフェースを作成する 汎用的な AI 臭を避け、独自性のあるデザインを実現

概要

このスキルは、Web コンポーネント、ページ、アプリケーションを構築する際に適用される。 「AI が作った感」を排除し、意図的で洗練されたデザインを目指す。

発動条件

トリガー:
  - フロントエンド UI を新規作成する
  - ページ / コンポーネントのデザインを改善する
  - 「もっとおしゃれに」「デザインを良くして」と言われた
  - ランディングページ / ポートフォリオを作成する

発動時の行動:
  1. このスキルを読み込む
  2. デザイン方針を決定する（下記参照）
  3. 実装前にユーザーにトーンを確認（任意）

デザイン思考

実装前に美的方向性を確立する:

1. 目的を理解する

• 解決しようとしている問題は何か？
• ターゲットユーザーは誰か？

2. トーンを決める

以下から 1 つを選び、徹底的にコミットする:

トーン選択肢:
  minimalist: 余白を活かした静謐なデザイン
  maximalist: 情報量が多く賑やかなデザイン
  retro-futuristic: レトロとモダンの融合
  organic: 自然な曲線、アースカラー
  luxury: 高級感、ダークトーン、金アクセント
  playful: 遊び心、ポップな色使い
  editorial: 雑誌風、タイポグラフィ重視
  brutalist: 生々しさ、あえてのラフさ
  japanese-modern: 和のテイスト、余白と間

3. 差別化を考える

「これを忘れられないものにするものは何か？」

美学ガイドライン

Typography（タイポグラフィ）

推奨:
  - 特徴的でキャラクターのあるフォントを使う
  - ディスプレイフォントとボディフォントを意図的にペアリング
  - フォントサイズにコントラストをつける（見出し: 大胆に）

避ける:
  - デフォルトのシステムフォントのみ
  - Inter, Roboto のみの単調な構成
  - 全て同じサイズ・ウェイト

例:
  - 見出し: "Playfair Display" / "Space Grotesk" / "Noto Serif JP"
  - 本文: "Inter" / "Noto Sans JP"

Color & Theme（色とテーマ）

推奨:
  - CSS 変数で一貫したカラーシステム
  - 支配的な色 + シャープなアクセント色
  - ダークモード対応を最初から考慮

避ける:
  - 青と白だけのありきたりな配色
  - 彩度が低すぎるグレースケール
  - 色に意図がない

例:
  --primary: #1a1a2e;
  --accent: #e94560;
  --background: #0f0f23;

Motion（モーション）

推奨:
  - マイクロインタラクション（ホバー、クリック）
  - ページ読み込み時のスタガードアニメーション
  - スクロール連動のエフェクト

避ける:
  - 過剰なアニメーション（うるさい）
  - 意味のない動き
  - パフォーマンスを犠牲にする

Tailwind 例:
  hover:scale-105 transition-transform duration-200
  animate-fade-in-up

Spatial Composition（空間構成）

推奨:
  - 非対称レイアウト
  - 要素の重なり（overlap）
  - グリッドを破るアクセント
  - 大胆な余白

避ける:
  - 全て中央揃え
  - 均等なグリッドのみ
  - 詰め込みすぎ

Visual Details（視覚的ディテール）

追加を検討:
  - グラデーション（subtle な背景グラデ）
  - テクスチャ / ノイズ
  - カスタムボーダー / 区切り線
  - シャドウ（深度の表現）
  - ブロブ / 装飾的図形

Tailwind 例:
  bg-gradient-to-br from-slate-900 to-slate-800
  shadow-2xl shadow-purple-500/20
  backdrop-blur-sm

避けるべきパターン（AI 臭）

ありがちな AI デザイン:
  - 全て中央揃え、均等グリッド
  - Inter + 青白のみ
  - 「Welcome to our platform」的な汎用コピー
  - 同じカードが並ぶだけ
  - 意味のないイラスト / アイコン
  - 「Get Started」ボタンが唯一のアクセント

代わりに:
  - 非対称、意図的な構成
  - 特徴的なカラーパレット
  - 具体的で文脈に合ったコピー
  - 視覚的なヒエラルキー
  - ユニークなインタラクション

実装チェックリスト

デザイン確認:
  - [ ] トーンを 1 つ選んだか？
  - [ ] フォントペアリングを考えたか？
  - [ ] カラーパレットに意図があるか？
  - [ ] 「AI っぽい」パターンを避けたか？

技術確認:
  - [ ] レスポンシブ対応（mobile-first）
  - [ ] ダークモード対応
  - [ ] アクセシビリティ（コントラスト比、alt テキスト）
  - [ ] パフォーマンス（画像最適化、不要なアニメーション削除）

参考リソース

インスピレーション:
  - Awwwards: https://www.awwwards.com/
  - Dribbble: https://dribbble.com/
  - Landingfolio: https://www.landingfolio.com/

フォント:
  - Google Fonts: https://fonts.google.com/
  - Fontshare: https://www.fontshare.com/

カラー:
  - Coolors: https://coolors.co/
  - Realtime Colors: https://www.realtimecolors.com/

変更履歴