frontend-ui-ux-design

フロントエンド UI/UX デザイン

概要

このスキルを使うと、調査から実装まで、プロダクション品質のフロントエンド UI/UX デザインを作成できます。ユーザーのニーズ、ビジネス目標、技術的制約、アクセシビリティ要件のバランスを取る、体系的なデザインプロセスに従ってください。

デザインワークフロー

1. 要件を把握する

コンテキストを収集する：

• プロジェクトの目標と成功指標
• ターゲットオーディエンスとユーザーペルソナ
• 技術的制約（フレームワーク、ブラウザー、デバイス）
• ブランドガイドラインとデザイン言語
• アクセシビリティ要件（WCAG レベル）

スコープを明確にする：

• 成果物の種類（ワイヤーフレーム、モックアップ、デザインシステム、コンポーネントライブラリ）
• 詳細度（低、中、高）
• 必要なレスポンシブのブレークポイント
• 対応するブラウザーとデバイス

2. 調査と戦略

ユーザー調査：

• ユーザーのニーズ、目標、課題を分析する
• 既存の分析データやユーザーフィードバックを確認する
• 主要なユーザージャーニーとシナリオを特定する
• 情報アーキテクチャを定義する

調査プロセス全体について：調査、ペルソナ、ジャーニーマッピング、情報アーキテクチャの詳細なガイドラインについては、uiux-design-process.md を参照してください。

3. デザインとプロトタイプ

ワイヤーフレームを作成する：

• 低忠実度のレイアウトから始める
• コンテンツの階層と構造に重点を置く
• 主要なタスクのユーザーフローを定義する
• フィードバックに基づいて反復する

ビジュアルデザインを適用する：

• カラーパレットを定義する（プライマリー、セカンダリー、セマンティックカラー）
• タイポグラフィのスケールとスペーシングシステムを確立する
• バリエーションと状態を備えたコンポーネントをデザインする
• 視覚的な階層と一貫性を確保する

デザイン原則について：視覚的な階層、一貫性、シンプルさ、フィードバック、エラー防止のガイドラインについては、design-principles.md を参照してください。

デザインシステムについて：デザイントークン、ガバナンス、ドキュメントを備えた包括的なデザインシステムを構築する場合は、design-systems.md を参照してください。

4. アクセシビリティを確保する

WCAG 準拠：

• 最小コントラスト比（テキストは 4.5:1、大きなテキスト/UI は 3:1）
• キーボードナビゲーションへの対応
• スクリーンリーダーとの互換性（セマンティック HTML、ARIA ラベル）
• フォーカスインジケーターとスキップリンク
• 画像の代替テキスト

アクセシビリティガイダンス全般について：WCAG 2.1/2.2 標準、ARIA パターン、キーボードナビゲーション、テストツール、準拠チェックリストについては、accessibility-guide.md を参照してください。

5. レスポンシブレイアウトをデザインする

モバイルファーストのアプローチ：

• モバイルデザイン（最小 320px）から始める
• タブレット（768px 以上）向けに段階的に拡張する
• デスクトップ（1024px 以上、1440px 以上）向けに最適化する
• 流動的なグリッドと柔軟な画像を使用する
• 適切なレイアウトパターンを適用する

レスポンシブパターンについて：ブレークポイント、レイアウトパターン（流動的なグリッド、カラムドロップ、オフキャンバス）、レスポンシブナビゲーション、タイポグラフィ、画像、テーブル、フォーム、コンテナクエリーについては、responsive-design.md を参照してください。

6. コンポーネントライブラリを構築する

コンポーネントのデザイン：

• アトミックコンポーネント（ボタン、入力欄、アイコン）をデザインする
• モレキュールコンポーネント（フォームフィールド、カード、メニュー）を作成する
• オーガニズムコンポーネント（ヘッダー、フォーム、セクション）を構築する
• コンポーネントのバリエーション、状態、プロパティを定義する
• コンポーネントの使用パターンをドキュメント化する

コンポーネントの詳細について：仕様、バリエーション、状態、使用ガイドラインを網羅した包括的なコンポーネントカタログについては、component-library.md と component-patterns.md を参照してください。

7. パフォーマンスを最適化する

パフォーマンスに関する考慮事項：

• 画像を最適化する（WebP/AVIF、遅延読み込み、レスポンシブ画像）
• CSS/JS バンドルのサイズを最小限に抑える
• ファーストビューのコンテンツにクリティカル CSS を実装する
• 効率的なアニメーションを使用する（transform、opacity）
• Core Web Vitals（LCP、FID、CLS）を監視する

最適化の詳細について：画像の最適化、コード分割、キャッシュ戦略、パフォーマンスバジェットについては、performance-optimization.md を参照してください。

8. ドキュメントと引き継ぎ

デザイン成果物：

• デザイン仕様（色、タイポグラフィ、間隔）
• バリエーションを含むコンポーネントのドキュメント
• レスポンシブ対応のブレークポイントデザイン
• アクセシビリティレポートと適合性チェックリスト
• 実装ガイドラインとデザイントークン

出力形式について：デザインブリーフ、ワイヤーフレーム、ビジュアルデザイン、コンポーネントライブラリ、開発者向け引き継ぎ資料など、構造化された成果物形式については、output-format.md を参照してください。

クイックリファレンス

参照資料を読み込むタイミング

• uiux-design-process.md - リサーチからプロトタイピング、ユーザーテストまでのデザインプロセス全体
• design-principles.md - デザインの基本原則（階層、整合性、シンプルさ、フィードバック）
• design-systems.md - トークンとガバナンスを備えた包括的なデザインシステムの構築
• accessibility-guide.md - WCAG への適合、ARIA パターン、キーボードナビゲーション、テスト
• responsive-design.md - ブレークポイント、レイアウトパターン、レスポンシブコンポーネント
• component-library.md - アトミック／モレキュラーコンポーネントの仕様を含むカタログ
• component-patterns.md - コンポーネントパターン（フォーム、ナビゲーション、データ表示、フィードバック）
• performance-optimization.md - 画像の最適化、コード分割、Core Web Vitals
• design-tools-and-resources.md - デザインツール、フレームワーク、アイコンライブラリ、リソース
• output-format.md - 引き継ぎ用の構造化された成果物形式
• examples.md - 実際のデザイン例とパターン
• design-checklist.md - デザインを仕上げる前の品質チェックリスト

重要な原則

1. ユーザー中心のデザイン

• 常にユーザーのニーズと目標から始めます
• リサーチとテストを通じて前提を検証します
• 美しさよりも使いやすさを優先します

2. アクセシビリティを最優先

• 障害のある方を含む、すべてのユーザーを対象にデザインします
• 最低限、WCAG 2.1 AA 基準に準拠します
• キーボードナビゲーションとスクリーンリーダーを使ってテストします

3. モバイルファーストのレスポンシブデザイン

• 最小の画面サイズから始めます
• 大きな画面向けに段階的に拡張します
• タッチしやすい操作を確保します（最小 44x44px）

4. デザインシステムの考え方

• 再利用可能で一貫性のあるコンポーネントを構築します
• パターンと使用ガイドラインを文書化します
• デザイントークンのシステムを維持します

5. パフォーマンスを重視

• 画像とアセットを最適化します
• バンドルサイズを小さく保ちます
• Core Web Vitals を監視し、改善します

6. 反復的なプロセス

• 低忠実度のデザインから始め、高忠実度へと反復します
• 早い段階から頻繁にフィードバックを集めます
• ユーザーテストと指標に基づいて改善します