ウェブデザインエキスパート

ウェブアプリケーション向けに独自のビジュアルシステムを生み出すエキスパートウェブデザイナー。

意思決定ポイント

レイアウトアプローチの選択

IF コンテンツ重視 (ブログ、ドキュメント、学習プラットフォーム)
├─ 12カラムグリッドシステム
├─ 明確な階層を持つ高いテキスト密度
└─ 読みやすさのための一貫したガター

IF マーケティング/コンバージョン重視 (SaaS、eコマースランディング)
├─ ヒーローセクションをファーストビューに配置
├─ ドラマを生み出す非対称レイアウト
└─ 注意を誘導する大きなホワイトスペース

IF eコマース/カタログ重視
├─ CSS Gridのauto-fitによる商品配置
├─ カードベースのレイアウト
└─ フィルター/検索の強調表示

IF ダッシュボード/アプリインターフェース
├─ サイドバー + メインコンテンツ
├─ データ密度を優先
└─ 常にアクセス可能なナビゲーション

IF エディトリアル/マガジンスタイル
├─ 混合グリッドシステム
├─ 大きな画像とプルクオート
└─ 一貫性よりも視覚的な多様性

カラーパレット戦略

IF B2B/エンタープライズ向け
├─ ブルーのプライマリーカラー（信頼、プロフェッショナル）
├─ ニュートラルを基調としたパレット
└─ 最小限のアクセントカラー

IF コンシューマー/ライフスタイルブランド
├─ 暖色系のプライマリーカラー（オレンジ、グリーン、パープル）
├─ 季節に応じたアクセントオプション
└─ 感情に基づいた選択

IF 高トラフィック/アクセシビリティ重視
├─ 最低コントラスト比4.5:1を強制
├─ 色覚障害に対応した組み合わせテスト済み
└─ ダークモードバリアント必須

ビジュアル階層の決定木

IF ユーザーゴール = 即時アクション（サインアップ、購入）
├─ ファーストビューにヒーローCTA（必須）
├─ ページごとに単一のプライマリーアクション
└─ コンバージョン要素に視覚的重み

IF ユーザーゴール = コンテンツ消費
├─ コンテンツプレビュー/サマリーを最初に表示
├─ 複数のエンゲージメントパスは許容
└─ 読み取り体験を最適化

IF ユーザーゴール = 探索（ポートフォリオ、カタログ）
├─ グリッド/ギャラリーレイアウトを基本に
├─ 素早いスキャンに最適化
└─ サムネイル → 詳細のフロー

失敗モード

設計委員会症候群

症状: 同一ページに複数のビジュアルスタイル、矛盾するブランドメッセージ、明確なデザインシステムがない
検出ルール: 1ページに3種類以上のボタンスタイルやフォントファミリーがある場合
修正方法: デザイン原則ドキュメントを作成し、単一の真実の情報源を強制し、関係者に制約を承認してもらう

装飾過多

症状: 目的のないアニメーション、理解を助けないビジュアル要素、グラフィックによる読み込みの遅延
検出ルール: 各ビジュアル要素がユーザーの目標達成にどう役立つかを説明できない場合
修正方法: ユーザーニーズに役立たない要素を削除し、すべてのアニメーションにユーザー利益を説明する

モバイル後回しパターン

症状: モバイルでの横スクロール、小さなタッチターゲット、小さな画面にデスクトップナビゲーション
検出ルール: モバイル版を使用するためにズームや横スクロールが必要な場合
修正方法: モバイルファーストで開始し、実際のデバイスでテストし、最小44pxのタッチターゲットを確保する

低コントラストのアクセシビリティ障害

症状: 白地に薄いグレーのテキスト(#999)、日差しの下での読みにくさ、テキストの視認性に関するユーザーからの苦情
検出ルール: テスト時にいずれかのテキストがWCAG 4.5:1のコントラスト比を満たさない場合
修正方法: コントラストチェッカーツールを使用し、明るい光の下でテストし、ハイコントラストモードオプションを提供する

情報アーキテクチャの崩壊

症状: ユーザーがプライマリーコンテンツを見つけられない、ナビゲーションがメンタルモデルと一致しない、高い直帰率
検出ルール: ユーザーが3クリックまたは30秒以内にプライマリータスクを完了できない場合
修正方法: ユーザージャーニーマッピング、ナビゲーションのカードソーティング、キーアクションの強調表示

実践例

例1: SaaSダッシュボードのリデザイン

コンテキスト: B2B分析プラットフォーム、ユーザーは毎日2時間以上インターフェースを使用

意思決定プロセス:

ユーザー分析: 効率性を重視するパワーユーザー
レイアウト選択: サイドバーナビゲーション（常時アクセス可能）+ メインコンテンツエリア
カラー戦略: 信頼性のためのブループライマリー(#2563eb)、認知的負荷を減らす最小限のアクセント
階層: データテーブルに最も多くのスペース、アクションはセカンダリーだがアクセス可能

主要なデザイン決定:

高密度情報表示（8px間隔スケール）
高コントラストテキスト（#1f2937 on #ffffff）
一貫したボタンサイズ（クリックしやすい40px高さ）
ステータスインジケータに意味的な色を使用（緑=良好、赤=アラート）

結果の検証:

タスク完了率が23%向上
ユーザー報告による「使いやすさ」が向上
ナビゲーションに関するサポートチケットが40%減少

例2: eコマース商品ページ

コンテキスト: ファッション小売、モバイルファーストのユーザー（トラフィックの70%がモバイル）

意思決定プロセス:

トラフィックパターン: モバイルブラウザ、素早い意思決定者
レイアウト選択: モバイルはシングルカラム、デスクトップは2カラム
視覚的優先順位: 商品画像 > 価格 > レビュー > 仕様
コンバージョン要素: モバイルではカートに追加をスティッキーに、目立つが押し付けがましくない

主要なデザイン決定:

ヒーロー商品画像がモバイルで画面幅いっぱいに表示
価格は大きく太字で即座に視認可能
レビューサマリーを商品詳細の上に配置
サイズ/カラーセレクタは即時視覚フィードバック付き

初心者 vs エキスパートのアプローチ:

初心者: すべての商品情報をファーストビューに詰め込み、小さな商品画像を使用する
エキスパートの着眼点: ユーザーはファッションを評価するために大きな画像が必要であり、価格に敏感なユーザーは早期にレビューによる検証を必要とする

測定可能な結果:

モバイルコンバージョン率が31%向上
平均セッション時間が増加（ユーザーがより多くの商品を探索）
カート abandonment が18%減少

品質ゲート

デザインプランの検証

デザインの品質ゲート準拠状況を、構造化された計画として宣言し（schemas/design-plan.schema.jsonを参照）、モックアップを目視で確認する代わりに決定論的にチェックします:

node scripts/design_audit.mjs --input plan.json

監査ツールは { pass, score, findings, recommendations } を返し、上記5つの失敗モードを名前でフラグ付けします: design-by-committee（ボタンスタイル/フォントウェイト/サイズが多すぎる）、decoration-over-function、mobile-afterthought（320pxでの横スクロールまたは44px未満のタッチターゲット）、low-contrast（4.5:1未満）、information-architecture collapse（ユーザーのメンタルモデルと一致しないナビゲーション）。合格例と不合格例の並行表示については examples/expected-output.md を参照してください。

リファレンス

ファイル	読み込み条件
`references/layout-systems.md`	グリッド決定木、8px間隔スケール、レスポンシブブレークポイント、またはモバイルファースト/一貫性チェックリストが必要な場合
`references/color-accessibility.md`	最小限のパレット、色彩心理学テーブル、ダークモードガイダンス、またはWCAG 2.1 AAチェックリストが必要な場合
`references/tooling-integration.md`	デザインの方向性からコードに変換するために21st.devやFigma MCPツールを使用する必要がある場合
`templates/output-template.md`	監査前に記入する再利用可能なデザインプランテンプレートが必要な場合
`examples/expected-output.md`	完成したデザインプラン監査の形状（合格例と不合格例）が必要な場合
`schemas/design-plan.schema.json`	デザインプランの構造をプログラムで検証する必要がある場合
`scripts/design_audit.mjs`	品質ゲートと名前付き失敗モードに対するデザインプランの決定論的スコアリングが必要な場合
`agents/openai.yaml`	デザインプラン生成を委任するためのサブエージェント記述子が必要な場合

NOT-FOR 境界

以下の目的ではこのスキルを使用しないでください:

深いタイポグラフィの決定（行間計算、文字間隔）→ typography-expert を使用
カラー理論の数学計算やパレット生成 → color-theory-palette-harmony-expert を使用
デザインシステムトークンのアーキテクチャやCSS変数 → design-system-creator を使用
レトロまたは歴史的なデザインスタイル → windows-3-1-web-designer を使用
ネイティブモバイルアプリのインターフェースデザイン → native-app-designer に委任
詳細なアクセシビリティ監査 → accessibility-expert を使用
アニメーションやマイクロインタラクションの仕様 → motion-design-expert を使用

境界を示す指標:

ユーザーが特定のフォントペアの推奨を求める場合 → typography-expert
ユーザーがHSLカラー計算を必要とする場合 → color-theory-palette-harmony-expert
ユーザーがCSSアーキテクチャのアドバイスを求める場合 → design-system-creator
ユーザーがWCAGコンプライアンスチェックリストを必要とする場合 → accessibility-expert

レイアウト品質保証ゲート（機械的 - 出荷前に実行）

レンダリングされたページ、アーティファクト、ダッシュボード、デッキ、またはコンポーネントを完了と見なす前に、機械的なオーバーフロー/衝突チェッカーを実行してください。これはページをヘッドレスでレンダリングし、テキスト間の衝突、クリップ/省略記号で切り詰められた要素、コンテナからはみ出すテキスト、水平ページスクロールといった、スクリーンショットでは隠れ、特定の幅やテーマでのみ現れる視覚的な欠陥を検出します。

実行前に、アクティブなスキルカタログから layout-overflow-guard を解決してください。以下のコマンドは標準的なClaudeインストールパスを示しています。ご利用のハーネスが報告するパスを使用してください。スキルがない場合は、このゲートをスキップせずにインストールまたは同期してください。

python3 ~/.claude/skills/layout-overflow-guard/scripts/check_layout.py <file-or-url> \
  --widths 1280,1100,860,720,390 --themes light,dark

check_layout.py を読む必要はありません — Bashツールで起動し、そのレポートと終了コード（非ゼロ = 欠陥あり）に基づいて行動してください。スクリプトのソースはコンテキストに入らず、その結果のみが入ります。出荷前に、すべての幅と両方のテーマで違反をゼロにしてください。詳細は layout-overflow-guard スキルを参照してください。

スキルバンドルインデックス

このスキル内のすべてのファイルと、それを開くタイミング。自動生成。更新には scripts/index_references.py --fix を実行。

ルート

CHANGELOG.md — 変更履歴 — web-design-expertスキルへのすべての重要な変更はこのファイルに記録されます。
README.md — Web Design Expert — ウェブアプリケーション向けに独自のウェブビジュアルシステム（ブランドアイデンティティ、カラーパレット、レイアウト構成、レスポンシブUIパターン）を作成します。

agents/

agents/openai.yaml — openai (データ/スキーマ)

examples/

examples/expected-output.md — 出力例: Webデザインプラン監査 — シナリオ: SaaSマーケティングサイトのリデザインが構造化されたデザインプラン（schemas/design-plan.schema.jsonに一致）として指定されており、それを...
examples/sample-input.json — サンプル入力 (データ/スキーマ)

references/

references/color-accessibility.md — カラーとアクセシビリティ — カラーパレット、心理学、ダークモード、WCAGコンプライアンス。
references/layout-systems.md — レイアウトシステム — グリッドシステム、間隔スケール、レイアウト構成。
references/tooling-integration.md — デザインツール統合 — 21st.dev、Figma MCP、コンポーネントワークフロー。

schemas/

schemas/design-plan.schema.json — デザインプランスキーマ (データ/スキーマ)

scripts/

scripts/design_audit.mjs

templates/

templates/output-template.md — Webデザインプランテンプレート — [このデザインプランがカバーする製品/ページの一文での説明] フィールドノート: - primaryActionObviousWithin3s — 新しい訪問者が...

curiositech/port-daddy

port-daddy とは？

お気に入りのAIに質問する

ドキュメント