作業の進め方
Web Design Engineer は、ページ、ダッシュボード、プロトタイプ、スライド、可視化向けのブラウザー成果物ワークフローです。すべての依頼を新しいランディングページとして扱うのではなく、まず成果物、対象ユーザー、既存作業のモードを特定します。プロダクトの拡張、リデザインの契約の保持、ビジュアルの方向性の再構築は、それぞれ許される範囲が異なる別の仕事です。
デザイン評価には、バリエーション、モーション、情報密度、アセット依存度、ブランド忠実度という調整可能な5つの軸を使います。これらは、詳細な実装の前に、宣言されたシステムと早期に確認できるドラフトへ反映されます。ブランド案件では、パレットだけでなく、実際のロゴ、製品写真、インターフェースのキャプチャが重要です。またこのスキルは、軽量なセルフチェックと、実行可能なブラウザー受け入れ確認を区別しており、後者はソース上、明示的なQA依頼がある場合に限られます。
期待される成果物
- HTML/CSS/JavaScript または React のビジュアル成果物
- ビジュアルの方向性とデザイントークンの選択に関する文書化された評価
- 確認可能な早期ドラフト、続いて完成した状態とインタラクション
依頼からレビューまで
- 01既存のコンテキストを読む
提供されたソースコード、スクリーンショット、ブランド資産、制約を確認します。作業が拡張、契約を保持するリデザイン、より広範な全面刷新のどれに当たるかを分類します。
- 02デザイン契約を宣言する
ビジュアルの方向性、対象ユーザー、密度、モーション、アセットを説明したうえで、タイポグラフィ、余白、パレット、サーフェス、インタラクションの扱いを指定します。最初のコードを書く前に、ユーザーがこのデザインシステムを承認するのを待ちます。
- 03確認可能なドラフトを見せる
主要なレイアウトと正直なプレースホルダーを使って方向性を検証します。すべてのコンポーネントやインタラクション状態を埋める前に、この早期ドラフトについて別途承認を待ちます。
- 04構築とレビュー
承認されたインタラクションと状態を完成させます。ソースにあるセルフチェックを行い、ブラウザー受け入れ確認が依頼された場合は、実際のビューポートとインタラクションの証拠を別に収集します。