webdesign-review

Webdesign-Review

すべての専門領域のスキルを連携して適用し、体系的なデザインレビューを実施します。

対象範囲

次の場合にこのスキルを使用します：ウェブサイト、プロトタイプ、またはデザインの包括的なレビューを実施するとき。このメタスキルは、関連するすべてのデザイン領域にわたる分析を連携させ、見落としがないようにします。

原則

1. 直感より厳密さを重視する

デザインレビューは個人の好みではなく、定められた構成に従います。すべての評価は、専門領域のスキルに含まれる具体的なルールまたは原則に基づいている必要があります。

2. 影響度に応じて優先順位を付ける

すべての問題の重要度が等しいわけではありません。アクセシビリティとユーザビリティを美しさより優先します。機能上の欠陥をスタイル上の好みより優先します。

3. 実行可能な解決策を伴う建設的な批評

特定したすべての弱点には、具体的な改善案を添えます。「これはよくない」はレビューではありません。「これはルール X に違反しています。よりよい方法は Y です」がレビューです。

4. チェックリストで網羅性を確保する

各専門領域のスキルに含まれるチェックリストが、レビューの基盤となります。項目を省略してはいけません。

ルール

レビューワークフロー

• 必須：詳細に入る前に、必ず全体的な評価から始めます。
• 必須：優先度順に、次の順序で各領域を確認します：
  1. accessibility -- アクセシビリティ（法的義務、BFSG）
  2. usability -- ユーザビリティ
  3. ux-design -- ユーザーエクスペリエンスとフロー
  4. ui-design -- レイアウト、階層、コンポーネント
  5. web-typography -- タイポグラフィ、読みやすさ、スケール
  6. color-theory -- 色、コントラスト、配色
  7. responsive-design -- ブレークポイントごとの動作
  8. navigation-design -- ナビゲーションの構造と明確さ
  9. images-media -- 画像、動画、パフォーマンス
  10. branding-identity -- ブランドの一貫性
  11. landing-pages -- コンバージョン最適化（ランディングページの場合）
  12. customer-journey -- ユーザージャーニーとタッチポイント
  13. component-patterns -- コンポーネントアーキテクチャ
  14. ui-patterns -- インタラクションパターン
  15. visual-direction -- ビジュアルの方向性とトレンド
  16. design-trends -- 最新性と現代性
  17. design-process -- プロセスの品質
  18. ai-design-workflow -- デザインにおける AI の統合
  19. website-audit -- 技術的な品質
  20. agent-ui-design -- エージェントのインターフェース（該当する場合）
• 必須：各領域に対応するチェックリストを確認します。
• 必須：指摘事項を重要度別に分類します：重大／重要／推奨。
• 禁止：「おそらく問題ない」という理由だけで領域を省略してはいけません。
• 禁止：ルールへの参照がない主観的な意見を指摘事項として記録してはいけません。

評価の構成

• 必須：すべての指摘事項を次の形式で構成します：領域 > ルール > 指摘事項 > 重要度 > 解決策。
• 必須：可能な場合は、証拠としてスクリーンショットまたはコード例を添付します。
• 必須：問題点だけでなく、優れた点も明示します。
• 禁止：領域ごとの指摘事項を 20 件を超えて記載してはいけません。影響度の高いものを優先します。

重要度レベル

• 重大：アクセシビリティ違反（BFSG）、機能上の欠陥、セキュリティ上の問題。直ちに解決する必要があります。
• 重要：ユーザビリティの問題、一貫性の欠如、パフォーマンスの不足。公開前に解決する必要があります。
• 推奨：スタイルの改善、最適化、ベストプラクティス。今後の反復で対応できます。

パターン

クイックレビュー（30 分）

上位 6 つの領域に重点を置きます：アクセシビリティ、ユーザビリティ、ux-design、ui-design、web-typography、color-theory。詳細な分析は行わず、チェックリストを一通り確認します。

標準レビュー（2 時間）

20 の領域すべてを確認します。チェックリストをすべて完了します。重要度と解決策を添えて指摘事項を記録します。優先度の高い項目を 5 件にまとめます。

詳細監査（1 日）

完全なレビューに加え、スクリーンリーダーでのテスト、Lighthouse の分析、パフォーマンスの測定、クロスブラウザーテスト、モバイルデバイスでのテストを実施します。優先順位を付けた対応項目を含む詳細なレポートを作成します。

比較レビュー

競合他社とウェブサイトを比較して分析します。各分野で最も優れたソリューションを特定します。差別化と改善に向けた提案を提示します。

アンチパターン

つまみ食い

明らかな問題だけを指摘し、体系的な欠陥を見落とすことです。解決策：チェックリストを最後まで確認します。

美的バイアス

デザイン性に優れたウェブサイトを、ユーザビリティやアクセシビリティに問題があっても、より寛大に評価することです。解決策：必ず、まずアクセシビリティとユーザビリティを評価します。

文脈を把握せずにレビューする

ターゲットユーザー、ビジネス目標、業界を理解せずにデザインを評価することです。解決策：まず背景情報を集めてから評価します。

解決策を忘れる

改善案を提示せずに問題を列挙することです。解決策：すべての指摘に、具体的な提案を少なくとも1つ含めます。

チェックリスト

レビューの前

• ターゲットユーザーとビジネス目標を把握していますか？
• 業界と競合他社を特定しましたか？
• レビュー対象のページ／画面を定義しましたか？
• レビューの深さ（Quick／Standard／Deep）を決めましたか？

レビュー中

• 関連するすべての分野を網羅していますか？
• 分野ごとのチェックリストを最後まで確認しましたか？
• 指摘を深刻度別に分類しましたか？
• すべての指摘に解決策の提案を添えましたか？
• 優れた点も評価しましたか？

レビューの後

• 優先度の高い項目を5つまとめた要約を用意しましたか？
• 重大な指摘を明確に示しましたか？
• 次のステップを定義しましたか？

相互参照

このメタスキルは、20個すべての分野別スキルを統括します。

コアデザイン：ui-design、ux-design、web-typography、color-theory、accessibility 構造とナビゲーション：usability、responsive-design、navigation-design コンテンツとメディア：images-media、branding-identity 戦略とプロセス：customer-journey、design-process、ai-design-workflow ページと監査：landing-pages、website-audit パターンとトレンド：design-trends、ui-patterns、visual-direction、component-patterns 専門分野：agent-ui-design