Design Scout
記憶だけでデザインされたウェブサイトは、ありきたりなものになります。中央寄せのヒーロー、グラデーションブロブ、3つのフィーチャーカード、誰も選んでいないフォント。優れたデザイナーは、何かを描き始める前に実際の作品を見ることでこれを回避します。このスキルはそれをデフォルトにします。最初に見て、目的を決めてから構築するのです。
フローは5つのステップです。時間を節約するためにリサーチをスキップしないでください。リサーチこそが時間を節約するのです。なぜなら、「これ、ありきたりだね。もう一度やり直そう」というラウンドをなくしてくれるからです。
- インテイク：ビジネスを理解する
- スカウト：実際のリファレンスを収集する
- ブリーフ：リファレンスをデザイン決定に変換する
- チェックポイント：ユーザーが方向性を承認する
- 構築とブリーフに沿った確認
1. インテイク
リサーチを始める前に3つの情報が必要です。不足しているものがあれば、1つのメッセージで尋ねてください。
- ニッチ：どのようなウェブサイトか（歯科医院、請求書処理B2B SaaS、ストリートウェアストア）
- 名前：ビジネス名またはプロダクト名
- 概要：何をしているか、何を販売しているか、誰に向けて、何が他と違うか
ユーザーがすでにこれらの情報を提供している場合は、再度尋ねないでください。
同じメッセージで、以下の任意の質問を提示し、スキップしてもよいことを明確にしてください。それぞれの質問はリサーチを大幅に精度を高めることができますが、どれも必須ではありません。
- オーディエンスは誰ですか？サイトで彼らに取ってもらいたいアクションは何ですか？
- サイトの雰囲気を3つの言葉で表すと？（落ち着いた、派手な、プレミアム、遊び心のある、技術的な...）
- 好きなサイトや嫌いなサイトはありますか？（業種は問いません）
- 既存のブランドアセット：ロゴ、カラー、フォント、写真はありますか？
- 必要なページやセクション、構築に使用するスタックは何ですか？
スキップされた項目については、適切なデフォルトを選び、ブリーフ内で前提として明記し、ユーザーが修正できるようにしてください。
2. スカウト
references/sources.md を今すぐ読んでください。このファイルには、すべてのソース、各ソースが何に適しているか、検索方法、プレーンなフェッチをブロックするものなどがリストされています。
まずクエリを計画してください。 何かを開く前に、4～6の検索フレーズを書き出してください。ニッチそのもの（"dental clinic website"）、ページタイプ（"booking landing page"）、ムードワード（"calm editorial"）、そしてこのニッチよりもデザイン文化が強い隣接するニッチ（歯科医はスキンケアブランドから学べ、会計ツールはLinearスタイルの開発者ツールから学べます）です。隣接クエリは重要です。ニッチの中だけを見ると、そのニッチの決まり文句を再生産してしまうからです。
4つのレンズをカバーしてください。 18のサイトではありません。ソースファイルはサイトをレンズごとにグループ化しています。各レンズから少なくとも1つのソースを使用し、最初のソースが不十分な場合はさらに追加してください。
| レンズ | 答える質問 |
|---|---|
| ライブウェブサイト | この分野の実際に出荷されたサイトは、どのようにページをレイアウトしているか？ |
| UIパターン | 優れたプロダクトは、この特定のセクション（価格設定、ナビ、予約フォーム）をどのように解決しているか？ |
| ビジュアルムード | どのような雰囲気にできるか：イメージ、テクスチャ、カラー、アートディレクション？ |
| タイポグラフィとカラー | 具体的にどのフォントとパレットか？ |
また、ビジネスの直接の競合他社2～3社も見てください（通常のウェブ検索で）。真似をするためではなく、このニッチの訪問者が何を期待しているかを学び、皆が何をしているかを見て、デザインがそこから際立つようにするためです。
実際のサイトにアクセスしてください。 ギャラリーのサムネイルは小さく、しばしば古くなっています。ギャラリーのエントリーが有望に見えたら、それが指し示す実際のライブウェブサイトを開いて確認してください。ブラウザツールがあればスクリーンショットを撮ってください。HTMLだけを読んでも構造はわかりますが、雰囲気はわかりません。
見つけたキーパーを記録してください。 レンズ全体で6～10を目指してください。それぞれについて：
- 名前とURL（実際に開いた実際のURL）
- 具体的に何が優れているか：「クリーンでモダン」ではなく、「幅の狭い商品写真に対してフラッシュ左に配置された、特大のセリフ体見出し」のように具体的に
- そこから借用する1つのこと
- 残すべきもの
あいまいなメモはあいまいなデザインを生みます。リファレンスの具体的に優れている点を言えない場合は、破棄してください。
正直ルール。 このセッションで実際にロードしたリファレンスだけを引用してください。見ていないサイト、URL、ページの説明を決してでっち上げないでください。偽のリファレンスは、ないよりも悪いです。なぜなら、ユーザーはそれを信頼するからです。ソースがブロックされている、ログイン必須、または空の場合は、その旨を伝えて別のソースを使用してください。ウェブアクセスがまったくない場合は、リサーチステップを実行できないことをユーザーに明確に伝え、リンクやスクリーンショットを貼ってもらうか、またはその注意事項を明記した上で一般的な知識から進めるかを尋ねてください。
タスクに合わせてスケール。 フルサイトにはフルパスで対応します。単一のセクションや「簡単な」リクエストの場合は、ショートパスで対応します。クエリ2つ、リファレンス3～4つ、数行のブリーフ。ゼロに落とさないでください。
3. ブリーフ
リファレンスをデザイン決定に変換します。references/brief-template.md のテンプレートを使用し、design-brief.md としてプロジェクトに保存してください。そうすることで、方向性が会話を超えて存続し、後の作業をそれに照らして確認できるようになります。
ブリーフは確定的である必要があります。すべての項目は、リファレンスまたはビジネスに紐付けられた理由を持つ具体的な選択です。
- コンセプト：1文で。このサイトをこのビジネスのものにし、他の誰のものでもないというアイデア
- レイアウト：セクションごとに、各セクションの構造的アイデア
- タイポグラフィ：名前付きフォント、各フォントがどこで使われるか、入手先（ライセンスを確認。ユーザーがライセンスを持っていない限り、Google FontsやFontshareなど、商用利用無料のフォントを優先）
- カラー：役割（背景、テキスト、アクセントなど）を伴う16進数値、読みやすいコントラストが確認されていること
- シグネチャー要素：訪問者が覚えていて、他の人に説明するであろう1つのもの
- イメージとモーション：どのような種類か、どれほど控えめか
- やらないこと：このデザインが意図的に避ける、ニッチの決まり文句やありきたりなパターン
原理を借用し、所有物は借用しないでください。アイデア（非対称グリッド、タイプのペアリング、セクションのテンポの付け方）を取り入れ、リファレンスのロゴ、画像、イラスト、コピー、またはレイアウトのピクセルレベルのクローンを決して取らないでください。複数のリファレンスからアイデアを混ぜ合わせ、結果が誰かのコピーにならないようにしてください。
4. チェックポイント
構築する前に、ユーザーに方向性を示してください：コンセプトライン、リンク付きの最も強力なリファレンス3～4つ、パレット、フォント、セクション概要、シグネチャー要素。1分で読める程度に簡潔にしてください。
リファレンスが明らかに異なる2つの方向性を示している場合は、平均化してありきたりにするのではなく、両方をA案とB案として提示し、推奨を添えてください。
「はい」または変更を待ってください。承認されていない方向性でサイト全体を構築することは、このステップが防ごうとしている高くつくミスです。唯一の例外は、ユーザーが事前に「確認なしで構築して」と言った場合で、その場合は進め、ブリーフを結果と一緒に表示してください。
5. 構築と確認
ユーザーのスタックでブリーフに従って構築してください。フロントエンドまたはデザイン実装のための別のスキルが利用可能な場合は、そのスキルを構築に使用し、ブリーフをその入力として扱ってください。
構築中：
- このビジネス向けの実際のコピーを、その声で書いてください。Lorem ipsum や「ワークフローを向上させましょう」のような埋め草はやめてください。
- お客様の声、顧客ロゴ、統計、賞、レビューを決してでっち上げないでください。セクションにそれらが必要な場合は、明確にマークされたプレースホルダーを配置し、ユーザーに何を提供すべきかを伝えてください。
- モバイルを意図的にデザインし、デスクトップを縮小したものにしないでください。
- テキストのコントラストを読みやすく保ち、インタラクティブ要素をキーボードで操作可能にしてください。
構築が完了したら、references/slop-check.md を読み、結果に対して実行してください。次に、それを見てください：ページを開き、可能であればデスクトップとスマートフォンの幅でスクリーンショットを撮り、ブリーフとリファレンスと比較してください。各セクションに問いかけてください：これはあなたが検索したギャラリーで通用するか？不十分な点を修正してから提示してください。
結果を短いメモとともに提示してください：何が構築されたか、どのリファレンスがどの決定を形作ったか、ユーザーが埋める必要があるプレースホルダー、そして確認できなかったこと。