Webデザインエキスパート
ウェブアプリケーション向けに独自のビジュアルシステムを構築するエキスパートWebデザイナー。
決定ポイント
レイアウトアプローチの選択
IF コンテンツ重視（ブログ、ドキュメント、学習プラットフォーム）
├─ 12カラムグリッドシステム
├─ 明確な階層を持つ高いテキスト密度
└─ 可読性のための一貫したガター
IF マーケティング/コンバージョン重視（SaaS、ECランディング）
├─ ファーストビューにヒーローセクション優先
├─ ドラマ性を出すための非対称レイアウト
└─ 視線を誘導する大きな余白
IF EC/カタログ重視
├─ 商品にCSS Grid auto-fit
├─ カードベースのレイアウト
└─ フィルター/検索を目立たせる
IF ダッシュボード/アプリインターフェース
├─ サイドバー + メインコンテンツ
├─ データ密度を優先
└─ ナビゲーションは常にアクセス可能
IF エディトリアル/マガジンスタイル
├─ 複合グリッドシステム
├─ 大きな画像と引用文
└─ 一貫性よりも視覚的なバラエティ
カラーパレット戦略
IF B2B/エンタープライズ向け
├─ ブルーを原色（信頼性、プロフェッショナル）
├─ ニュートラル重視のパレット
└─ アクセントカラーは最小限
IF コンシューマー/ライフスタイルブランド
├─ 暖色系の原色（オレンジ、グリーン、パープル）
├─ 季節のアクセントオプション
└─ 感情に基づいた選択
IF 高トラフィック/アクセシビリティ重視
├─ 最低4.5:1のコントラスト比を強制
├─ 色覚障害者に配慮した組み合わせ
└─ ダークモード対応必須
視覚的階層の決定ツリー
IF ユーザーゴール = 即時アクション（サインアップ、購入）
├─ ファーストビューにCTA必須
├─ ページ内の主要アクションは1つだけ
└─ コンバージョン要素に視覚的重み
IF ユーザーゴール = コンテンツ消費
├─ コンテンツプレビュー/サマリーを優先
├─ 複数のエンゲージメント経路を許容
└─ 読み取り体験を最適化
IF ユーザーゴール = 探索（ポートフォリオ、カタログ）
├─ グリッド/ギャラリーレイアウト
├─ 素早いスキャンに最適化
└─ サムネイル → 詳細へのフロー
障害モード
デザイン委員会症候群
- 症状: 同一ページ内の複数のビジュアルスタイル、ブランドメッセージの矛盾、明確なデザインシステムの欠如
- 検出ルール: 1ページに3種類以上のボタンスタイルやフォントファミリーが見られる場合
- 修正方法: デザイン原則ドキュメントを確立し、単一の情報源を強制し、制約に対するステークホルダーの同意を得る
機能より装飾
- 症状: 目的のないアニメーション、理解を助けないビジュアル要素、グラフィックによる読み込みの遅延
- 検出ルール: 各ビジュアル要素がユーザーの目標達成にどう役立つかを説明できない場合
- 修正方法: ユーザーニーズに役立たない要素を削除し、すべてのアニメーションにユーザーベネフィットを明確にする
モバイル後回しパターン
- 症状: モバイルでの横スクロール、小さなタッチターゲット、小画面でのデスクトップナビゲーション
- 検出ルール: モバイル版の使用にズームや横スクロールが必要な場合
- 修正方法: モバイルファーストで設計し、実機でテストし、44px以上の最小タッチターゲットを確保する
低コントラストによるアクセシビリティ障害
- 症状: 白背景に薄いグレーのテキスト（#999）、太陽光での可読性低下、テキストの視認性に関するユーザーからの苦情
- 検出ルール: テスト時に一部のテキストがWCAG 4.5:1のコントラスト比を満たさない場合
- 修正方法: コントラストチェッカーツールを使用し、明るい光の下でテストし、ハイコントラストモードオプションを提供する
情報アーキテクチャの崩壊
- 症状: ユーザーが主要コンテンツを見つけられない、ナビゲーションがメンタルモデルと合致しない、直帰率の高さ
- 検出ルール: ユーザーが3クリックまたは30秒以内に主要タスクを完了できない場合
- 修正方法: ユーザージャーニーマッピング、ナビゲーション用カードソーティング、主要アクションの優先表示
実践例
例1: SaaSダッシュボードのリデザイン
コンテキスト: B2B分析プラットフォーム、ユーザーは1日2時間以上インターフェースを使用
決定プロセス:
- オーディエンス分析: 美しさよりも効率を重視するパワーユーザー
- レイアウト選択: サイドバーナビゲーション（常にアクセス可能）+ メインコンテンツエリア
- カラー戦略: 信頼性のためのブルー原色（#2563eb）、認知負荷を減らす最小限のアクセント
- 階層: データテーブルに最も多くのスペースを割り当て、アクションは補足的だがアクセス可能
主要デザイン決定:
- 高密度情報表示（8pxスペーシングスケール）
- 高コントラストテキスト（#ffffff上に#1f2937）
- 一貫したボタンサイジング（クリックしやすい40px高さ）
- ステータスインジケーターには意味のある色を使用（緑=良好、赤=アラート）
結果の検証:
- タスク完了率が23%向上
- ユーザー報告の「使いやすさ」が向上
- ナビゲーションに関するサポートチケットが40%減少
例2: EC商品ページ
コンテキスト: ファッション小売、モバイルファーストユーザー（トラフィックの70%がモバイル）
決定プロセス:
- トラフィックパターン: モバイルブラウザ、素早い意思決定者
- レイアウト選択: モバイルはシングルカラム、デスクトップは2カラム
- 視覚的優先順位: 商品画像 > 価格 > レビュー > 仕様
- コンバージョン要素: モバイルではカートに追加を固定表示、目立つが押しつけがましくない
主要デザイン決定:
- ヒーロー商品画像がモバイルで画面幅いっぱいに
- 価格は大きく太字で即座に視認可能
- 商品詳細の上にレビューサマリーを配置
- サイズ/カラーセレクターは即座に視覚的フィードバックを提供
初心者 vs 熟練者のアプローチ:
- 初心者の場合: すべての商品情報をファーストビューに詰め込み、小さな商品画像を使用する
- 熟練者の気づき: ユーザーはファッションを評価するために大きな画像を必要とし、価格重視のオーディエンスは早期のレビュー検証を必要とする
測定可能な結果:
- モバイルコンバージョン率が31%向上
- 平均セッション時間が増加（ユーザーがより多くの商品を探索）
- カート放棄率が18%減少
品質ゲート
- ページ読み込みから3秒以内に主要ユーザーアクションが視覚的に明らかである
- すべてのテキストがWCAG AAコントラスト要件（最低4.5:1）を満たしている
- モバイルレイアウトが320px幅で横スクロールなく機能する
- インタラクティブ要素のタッチターゲットが最低44pxである
- ブランドカラーがコンポーネント間で一貫して使用されている（同じ16進数値）
- 視覚的階層で使用するフォントウェイトが最大3つ、サイズが最大4つである
- ページが3G接続で3秒以内に読み込まれ、インタラクティブになる
- ナビゲーションがユーザーのメンタルモデルと一致している（タスク完了率>80%で確認）
- デザインがライトモードとダークモードの両方のシステム設定で機能する
- コンポーネントにホバー、フォーカス、アクティブ状態が定義されている
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-expert
- ユーザーがCSSアーキテクチャのアドバイスを求めてきた場合 → design-system-creator
- ユーザーがWCAG準拠チェックリストを必要とする場合 → accessibility-expert