web-visual-direction

Web ビジュアルの方向性

曖昧なブリーフを、まとまりのある一貫したビジュアルシステムに変換します。プロダクトに合い、実装後も成立する選択をしてください。形容詞を並べただけのムードボードのようなものは作らないでください。

ワークフロー

1. プロダクトのブリーフと、既存のコード、ブランドアセット、スクリーンショット、コンテンツ、コンポーネントライブラリ、制約を確認します。意図的に築かれたブランド価値は保ちます。
2. 対象ユーザー、ユーザーが直ちに取り組むタスク、インターフェースが生み出すべき印象を、それぞれ1文で述べます。
3. 「編集者としての権威と業務のスピード」のように、実用的な緊張感を持つビジュアルの軸を1つ選びます。それが適している理由を説明します。
4. 関連する参考事例を2つか3つ選びます。表面的な装飾や著作権のあるレイアウトではなく、リズム、コントラスト、フレーミング、密度といった原則を抽出します。
5. スタイルの細部より先に構成を決めます。
   • 最初のビューポートの焦点を特定します。
   • グリッド、コンテンツ幅、密度、セクションのリズムを定義します。
   • グリッドから意図的にはみ出す要素がある場合は、それを決めます。
6. タイポグラフィ、色、サーフェス、境界線、画像、アイコン、モーションについて、実装可能なルールを定義します。
7. 方針を小規模なトークンセットとコンポーネントへの適用方法として表現します。プロジェクトの既存のスタイリングシステムを再利用します。
8. 実装が対象範囲であれば、代表的なビューポートまたはコンポーネントを1つ実装します。
9. モバイルとデスクトップの幅で方針を検証します。理解しやすさ、階層、パフォーマンス、アクセシビリティを損なう選択は取り除きます。

判断基準

• 実際のプロダクト、仕事、場所、人、物、成果を前面に出します。
• 装飾効果より、記憶に残る構造的なアイデアを優先します。
• 業務に合わせて密度を調整します。業務用インターフェースはコンパクトに、ストーリーを伝えるブランドページには余白を持たせます。
• 理由のあるタイポグラフィを使います。流行しているというだけで、フォントを禁止したり選んだりしないでください。
• カードは意味のあるグループ化に使い、あらゆる文の既定のコンテナーにしないでください。
• グラデーション、ガラス効果、粒子感、グロー、特大文字は、デザインの質を証明するものではなく、あくまでツールとして扱います。
• モーションには目的を持たせ、視差効果の低減設定を尊重します。
• ブランドアセット、顧客のロゴ、指標、プロダクトのスクリーンショットを捏造しないでください。

納品要件

以下を提示または実装します。

1. ビジュアルの軸 - 1文。
2. 参考原則 - 取り入れる点と避ける点。
3. 方針の仕様 - 構成、書体、パレット、サーフェス、画像、アイコン、モーション。
4. トークン案 - コードベースに適合する名前付きの値またはマッピング。
5. レスポンシブ方針 - 狭い幅と広い幅での変更点。
6. 検証 - ブラウザーにアクセスできる場合は、スクリーンショットまたは確認したビューポート。

参考資料

プロダクトの種類によって方針を大きく変える必要がある場合は、references/site-archetypes.mdをお読みください。