research-backed-frontend-development

調査に基づくフロントエンド開発

小さな修正やアドバイスの依頼であっても、すべてのフロントエンド、UI、UX のタスクにこのスキルを適用してください。作業量は変更の規模に応じて調整してください。以下の調査免除事項は、タスクにこのスキルを適用しなくてよいという意味ではありません。

対象、ユーザー、主要なタスクに合ったインターフェースを作成してください。熟慮されたビジュアルアイデンティティと、わかりやすい操作を目指してください。依頼内容、既存のデザインシステム、技術スタック、作業範囲を尊重してください。デザインの依頼に実装まで求められているとは限らず、レビューの依頼が編集を許可するわけでもありません。

デザインの前に調査する

新しいインターフェース、大幅な変更、または未解決のデザイン上の判断がある場合：

• 類似の課題を、似たユーザー向けに解決している独立した製品を、オンラインで少なくとも2つ調べてください。ビジュアル面で優れた参考例も含めてください。製品のマーケティング用ホームページだけでなく、該当する画面や操作フローを確認してください。
• 両方の製品のスクリーンショットまたはレンダリングされた画面を、実際に見てください。公開中のサイト、公式スクリーンショット、画像付きのヘルプ記事、アプリストアのギャラリー、録画デモなどから根拠を得られます。画像は内容を読み取れる大きさで開いてください。検索結果の抜粋、ページのテキスト、画像の説明、保存しただけで一度も見ていないスクリーンショットは、目視確認したことになりません。
• インタラクション、ナビゲーション、モーションについては、関連する動画も確認するか、ライブデモを実際に操作してください。操作前、操作中、操作後の状態を調べてください。再生できない場合は、タイムスタンプ付きの動画フレームを使用してください。文字起こしだけでは、アニメーションやレイアウトの変化を確認できません。静的な構成の作業では、動画は必要ありません。
• プラットフォームのデザインガイダンス、確立されたデザインシステム、W3C のアクセシビリティガイダンス、ユーザビリティ調査など、信頼できる情報源から、関連する UX/UI のベストプラクティスを探して読み込んでください。ガイダンスそのものを読んでください。タイトル、検索結果の抜粋、メタデータのみの応答では不十分です。フォーム、絞り込み、タッチ操作、ナビゲーション、データ密度など、実際の問題に照らして内容を検討してください。競合製品の挙動は観察結果であり、使いやすさを証明するものではありません。

初期段階の方向性を提案する前であっても、実際に確認した情報源の URL、確認した画面や動画のタイムスタンプ、両製品のビジュアル面の観察結果、ガイダンス本文から得た関連する推奨事項、それらが裏付ける判断を記した短い調査メモを作成してください。提案する操作について、実際に確認した動画またはライブ操作からも情報が得られていることを確認してください。根拠が足りない場合や取得に失敗した場合は、別の情報源や利用可能なツールを試してください。提案を「未検証」と呼ぶだけでは、この調査の代わりになりません。記憶している慣例やリンク集を、調査の代わりにしないでください。すぐに回答してほしい、または「コードだけ」といった依頼があっても、この準備を省略してはいけません。

タスクですでに収集済みの、条件を満たす調査結果は再利用してください。デザインを維持する誤字、余白の修正、その他の範囲が狭い修正では、該当するインターフェースを確認するだけで十分です。閲覧しないでほしいという依頼は尊重してください。代替手段を試してもアクセスできない場合は、不足している根拠を明らかにし、調査を完了したと主張せず、提供された資料に基づいて作業を進めてください。調査メモは製品 UI に含めないでください。

方針を決めて構築する

調査で得た根拠を、ユーザーの主なタスク、情報の階層、レイアウト、書体、配色、関連するインタラクション状態を含む簡潔な方針にまとめます。どのパターンを取り入れるか、または避けるか、その理由を説明します。参考資料から学びつつ、その独自性やアセットを模倣しないでください。

このテーマにふさわしい書体、余白、画像、色を選びます。使い回しのきくカードグリッド、装飾的なラベル、目的のない流行のエフェクトは避けてください。表現力を重視する場合は細部まで意図を持たせ、抑制の効いたデザインにする場合は比率と配置を正確に整えます。モーションは有用なものにし、視差効果を減らす設定にも配慮してください。

既存プロジェクトの規約に沿って実装します。コントロールを機能させ、適切なセマンティック要素を使い、キーボードやコントローラーのフォーカス、読みやすいコントラスト、ターゲットサイズ、レスポンシブレイアウトに配慮してください。この機能で起こり得る読み込み中、空、エラー、復旧の各状態も含めます。現実的なコンテンツを使い、コピーの作成には natural-writing を適用します。同じ調査結果を両方のスキルに活用できます。

結果を確認する

変更したインターフェースを起動し、主なインタラクションを試し、該当する画面サイズでキャプチャを実際に確認します。方針と調査結果に照らして、階層、余白、読みやすさ、はみ出し、フォーカス、状態のフィードバックを確認してください。目に見える問題を修正し、影響を受けた状態を再度キャプチャします。適切なプロジェクトチェックを実行してください。コードを確認しただけでは、視覚的な品質を確かめたことにはなりません。

デザインのみの作業では、提案するレイアウトと状態を根拠と照合し、提案とテスト済みの挙動を明確に区別します。レビューでは、根拠に裏付けられた指摘を報告します。引き継ぎは簡潔にし、変更内容、重要な選択の根拠となった情報源、検証した内容、実質的な制約を記載してください。利用可能な場合は、ブラウザーの操作時に polite-browser-use に、録画の確認時に view-video に従ってください。