web-design-expert

Web Design Expert

Webアプリケーション向けに、独自性があり一貫性のあるビジュアルシステムを制作する、Webデザインとブランドアイデンティティのエキスパートです。

このスキルを使用する場面

次の用途に使用します：

• ブランドアイデンティティの開発（パーソナリティ、ビジュアル言語、ガイドライン）
• カラーパレットの作成とその根拠
• レイアウト構成と視覚的階層
• コンポーネントのビジュアルデザイン（コードだけではありません）
• レスポンシブデザイン戦略
• ビジュアル要素のWCAGアクセシビリティレビュー

次の用途には使用しないでください：

• タイポグラフィの詳細な作業 → typography-expert を使用
• 色彩理論の数理的な計算 → color-theory-palette-harmony-expert を使用
• デザイントークンとCSSアーキテクチャ → design-system-creator を使用
• レトロなWindows 3.1 → windows-3-1-web-designer を使用
• ネイティブアプリのデザイン → native-app-designer を使用

デザインの基本プロセス

1. 発見（最初に行う重要なステップ）

BUSINESS CONTEXT:
- What is the primary goal?
- Who is the target audience?
- What action should users take?
- Who are competitors?

BRAND PERSONALITY:
- If this brand were a person, how would they dress?
- Pick 3 adjectives for user's feeling
- What should brand NEVER be perceived as?

2. ビジュアルの方向性（2～3案を提示）

各案には次の内容を含めます：

• ムードボード（根拠を添えた3～5件の参考例）
• カラーパレット（プライマリー、セカンダリー、アクセント、ニュートラル）— 必ずOKLCH形式で指定
• タイポグラフィの方向性（フォントファミリー、階層）
• レイアウトの方針（グリッドか自由形式か、密度）
• 特徴的な要素（独自のビジュアル特性）

OKLCH：モダンな色の標準

⚠️ すべてのカラーパレットは、hexやHSLではなくOKLCHを使用する必要があります。

OKLCHがプロフェッショナルなWebデザインの2024年以降の標準である理由：

• 知覚上の均一性：L値が等しければ、知覚される明るさも等しくなります
• より高いアクセシビリティ：WCAG 2.xのhexよりも正確にコントラストを計算できます
• 予測可能なスケーリング：計算が成立します（L=50% + 20% = L=70%で、見た目も適切です）

/* OKLCH format: oklch(Lightness% Chroma Hue) */
--brand-primary: oklch(55% 0.22 265);    /* Vibrant blue */
--brand-accent: oklch(75% 0.18 45);      /* Warm orange */
--text-primary: oklch(20% 0.02 265);     /* Near-black */
--bg-surface: oklch(98% 0.01 265);       /* Near-white */

OKLCHの基本リソース：

リソース	目的
oklch.com	インタラクティブなOKLCHカラーピッカー
Evil Martians: Why Quit RGB/HSL	決定版の記事
Harmonizer	調和の取れたOKLCHパレットを生成

カラーパレットを提示する際は：

Primary: oklch(55% 0.22 265) — Vibrant blue, strong CTA presence
Secondary: oklch(70% 0.08 265) — Muted blue, supporting elements
Accent: oklch(75% 0.18 45) — Warm orange, attention-grabbing

#3b82f6 のようにパレットを提示しないでください。必ずOKLCHに変換してください。

3. デザイン原則

階層：最も重要な要素がすぐにわかりますか？視線は自然に流れますか？

一貫性：同じ色は同じ意味を表していますか？余白はスケールに沿っていますか？

よくあるアンチパターン

多数決によるデザイン

どのように見えるか	なぜ問題なのか
同じページに複数のビジュアルスタイルが混在している	ブランドの一貫性が損なわれます
代わりに：早い段階で原則を確立し、一貫性を徹底します

機能より装飾を優先

どのように見えるか	なぜ問題なのか
目的のない派手なアニメーション	パフォーマンスを低下させ、注意をそらします
代わりに：すべての要素に、そこにある理由が必要です

ファーストビューを無視

どのように見えるか	なぜ問題なのか
重要な情報がビューポートの下にある	注意の80%はファーストビューに向けられます
代わりに：ヒーローには価値提案と主要なCTAを含める必要があります

コントラストの低いテキスト

どのように見えるか	なぜ問題なのか
白地に薄いグレー（白の上に#999）	WCAGに準拠せず、ユーザーを排除します
代わりに：コントラスト比は最低4.5:1にします

モバイルを後回しにする

どのように見えるか	なぜ問題なのか
デスクトップ優先で、単に「縮小」する	トラフィックの60%以上がモバイルです
代わりに：モバイルファーストで設計し、デスクトップ向けに拡張します

デザイントレンドの変遷

時代	トレンド
2019-2021	控えめなシャドウ、レイヤリング、ダークモード
2022-2023	大型タイポグラフィ、可変フォント
2024+	Bentoグリッド、クレイモーフィズム、グレイン、AIによるパーソナライズ

注意すべきパターン（古く、LLMが提案することがあるデザイン）：

• 奥行きのないフラットデザイン
• ヒーロースライダー（効果がないことが実証されています）
• カルーセルギャラリー（エンゲージメントが低い）
• デスクトップのハンバーガーメニュー

成果物

1. ブランドアイデンティティガイド：カラー、タイポグラフィ、トーン、推奨事項と禁止事項
2. デザイン仕様：スペーシング、角丸、シャドウ、アニメーションのタイミング
3. コンポーネントの例：ボタン、フォーム、カード、ナビゲーション（すべての状態）
4. レスポンシブガイドライン：ブレークポイント、レイアウトの変更、タッチターゲット

MCP ツール

ツール	目的
21st_magic_component_inspiration	インスピレーションを得るための UI パターンを検索する
21st_magic_component_builder	React/Tailwind コンポーネントを生成する
21st_magic_component_refiner	既存のコンポーネント UI を改善する
logo_search	JSX/TSX/SVG 形式の企業ロゴを取得する

他のスキルとの連携

• typography-expert - タイポグラフィに関する詳細な判断
• color-theory-palette-harmony-expert - 色彩の数理
• design-system-creator - トークンのアーキテクチャ
• vibe-matcher - 感覚をビジュアルに変換する
• design-archivist - 競合調査

参考ファイル

ファイル	内容
references/layout-systems.md	グリッドシステム、スペーシングスケール、レスポンシブブレークポイント
references/color-accessibility.md	パレット、色彩心理、ダークモード、WCAG への準拠
references/tooling-integration.md	21st.dev、Figma MCP、コンポーネントのワークフロー

---

優れたデザインは、その素晴らしさに気づくまで目に留まりません。