スタイルタイルとしてのディレクション
なぜ必要か: ムードボードは土台にするには曖昧すぎ、フルページモックアップは具体化しすぎています。人々はステップ4で既に決定した構造について議論し始めます。スタイルタイル（Samantha Warren）とエレメントコラージュ（Dan Mall）はその中間に位置します。ページレイアウトなしで色、タイポグラフィ、インターフェース要素を示すため、議論はルックアンドフィールに集中できます。AIを使えばバリエーション作成コストはほぼゼロになるため、選択がボトルネックとなります。このステップでは、意図的に方向性を広げ、選択に評価基準を与えます。
必要なもの: brand.md、taste-profile.md、anti-defaults.md、sitemap.md、および1つのワイヤーフレーム（コピー用）、personas.md。
生成物: 06-directions/tiles/r<round>/*.html、06-directions/direction.md。
1. 軸を選択する
テイストプロファイルの未決定ポイントから、方向性を区別するための2～3の軸に名前を付けます。例: 落ち着いた ↔ 印象的な、密度が濃い ↔ 軽やかな、暖かい ↔ 冷たい、編集的な ↔ 技術的な、フラット ↔ テクスチャード。各方向性を異なるポイントに配置します。アクセントカラーだけが異なる3つの方向性は、実質1つの方向性です。
ムードボードのステージAで個別のボードが生成されている場合は、それらを出発点としてください。
2. 3つのタイルを構築する
方向性ごとに1つの自己完結型HTMLファイル。各タイルには以下を表示:
- 名前と、その背後にあるアイデアを一文で（トレンドからではなく、ブランドから）
- 役割（背景、テキスト、アクセント、アクション）付きのカラーパレットスウォッチ、およびテキストとボタンのコントラスト比（WCAG AA: テキストは4.5:1）
- タイポグラフィ: ディスプレイ用とボディ用のフェイスといくつかのサイズ、コピー草案からの実際の見出しと段落
- インターフェース要素: プライマリボタンとセカンダリボタン、リンク、入力フィールド、ナビゲーションバー、1つのカード
- ヒーローフラグメント（完全なヒーローセクションではない）と、もう1つの特徴的な要素: 引用、数字、リスト、プライシングライン
- 画像: スタイルサンプルまたは写真、イラスト、スクリーン処理の説明
- このブランドだけが持つであろう1つのディテール（ロゴの形状、業界用語、測定単位）
ルール:
- 最初に
anti-defaults.mdを読んでください。フォントは、使用可能なライセンス（Google Fonts、OFL、クライアントのライセンスフォント）のあるソースのみから使用し、ライセンスとファイルサイズを明記します。 - プロジェクトからの実際のコピーを使用し、ロレム・イプサムは絶対に使用しないでください。サンプルインターフェーステキストは
facts.mdの事実のみを使用します。架空の機能、オファー、在庫状況、数値は使用しないでください。 - 完全なページレイアウト、完全なナビゲーションツリー、フッターは含めないでください。
- 各タイルを390pxと1440pxでレンダリングし、表示する前に確認してください。
3. 評価
レビューページに、3つのタイルを横並び（モバイルでは縦に並べて）表示します。各タイルについて:
- 単語テスト: タイルごとに1つの質問。評価者（可能であれば同僚も）は、ブランド属性とその反対極を混ぜたリストから3つの単語（チェックボックス、
data-max="3"）を選びます。どちらの極が勝ったかをカウントします。 - 要素ごと: 要素（色、タイポグラフィ、ボタン、画像、ディテール）ごとに1つの質問: どのタイル（A、B、C、またはなし）から要素を採用するか、理由欄付き。これにより、シート全体で約8問の質問になります。
- オプションの5秒テスト: プロジェクト外の誰かにタイルを5秒間表示し、「これはどんな会社ですか？どの3つの単語が思い浮かびますか？」と尋ねます。
4. 統合
評価結果からdirection.mdを作成します: カテゴリごとに選択された要素、どのタイルから何が来ているか、その理由、そしてステップ7のために未決定のまま残すもの。統合が実質的な場合は、1つの結合タイルを作成し、ラウンド2で再度表示します。3ラウンド以上は実行しないでください。収束しない場合、問題は通常ブランド属性にあるため、ステップ3に戻ります。
完了条件: direction.mdが確認され、統合された方向性に対する単語テストがブランド属性を指していること。