デザインショーケースウェブサイト

デザインショーケースウェブサイト は何をしますか？

簡潔な概要と散在したソース資料を、その主題、対象者、言語、目的に特化したサイトに変えます。フォーカスしたランディングページ、マルチページウェブサイト、インタラクティブなウェブ製品をサポートします。このスキルをワークフローの基盤として使用し、ユーザーが明示的に指定したデザイン、ブラウザ、画像、製品インターフェース、フレームワークのスキルと組み合わせてください。

コアルール

• 魅力的なセクションの集まりではなく、コンバージョン体験をデザインすること。
• ビジネス、対象者、場所、製品、実際の画像からアイデンティティを導き出すこと。ユーザーから依頼がない限り、以前のプロジェクトのビジュアルスタイルを再利用しないこと。
• 検証済みの事実と創造的解釈を分離すること。住所、価格、営業時間、レビュー、クライアント、受賞歴、機能、パフォーマンスの主張を決して創作しないこと。
• 元のユーザーアセットを保持すること。プロジェクト内でコピーを最適化し、生成された画像や一時的な画像を文書化すること。
• 対象者と概要から言語を選択すること。証拠なしに韓国語、中国語、英語、日本語、またはバイリンガルコンテンツを想定しないこと。
• ローカライズされたタイポグラフィ、改行、句読点、読む順序、コンテンツ密度、文化的に馴染みのあるアクションをデザインの一部として扱うこと。
• ファッショナブルなエフェクトのコラージュよりも、1つの強力なアートディレクションを優先すること。
• ユーザーが創造的自由を許容した場合、サイトのデザインをユーザーに丸投げするのではなく、正当な方向性を推測して決定すること。
• 実装が要求された場合、プロトタイプは実際にクリック可能でデモ可能にすること。ユーザーが戦略のみを求める場合を除き、コンセプト文書で止めないこと。
• すべての重要な情報をアニメーションなしで表示可能にし、動きの軽減設定を尊重すること。

エンゲージメントモードの選択

1. コンセプトのみ: ポジショニング、ページフロー、ビジュアルディレクション、キースクリーンの説明を作成する。依頼がない限りファイルを変更しない。
2. プロトタイプ: 主要なインタラクションが機能し、プレゼンテーション品質のコンテンツを備えた、レスポンシブで実行可能なシングルページまたはマルチページサイトを構築する。
3. リデザイン: 既存のページとリポジトリを最初に監査し、機能要件と現在のスタックを維持した上でインターフェースを改善する。
4. ポリッシュ: ライブまたはローカルのページを検査し、最も影響の大きいギャップを特定し、焦点を絞った変更を実装し、再検証する。
5. ウェブ製品: タスクフロー、状態、ナビゲーション、データプレゼンテーションを設計する。作業がアプリケーション中心の場合は、このスキルを製品インターフェーススキルと組み合わせる。

リポジトリが存在しない場合は、インタラクションのニーズに合った最もシンプルで保守可能なスタックを選択する。リポジトリが存在する場合は、その規則を検査して再利用する。

ワークフロー

1. 成果の枠組みを決める

結果を実質的に変える決定のみを解決する:

• 対象者とロケール;
• サイトタイプ、コンテンツ規模、およびシングルページ、マルチページ、アプリケーションのいずれの体験か;
• プライマリおよびセカンダリのコンバージョンアクション;
• 提供形態と必要なインタラクション;
• ソース資料と使用権;
• 望ましい第一印象と許容できない方向性;
• スタック、ルート、ビューポート、ポートなどの起動制約。

一度に最大3つの簡潔な質問をする。ユーザーが創造的自由を許容し、証拠が十分な場合は、合理的な仮定を述べて進める。

簡潔な概要、マップリンク、または混合ローカルアセットの場合は、コンテンツを収集する前に discovery-and-research.md を読む。

情報アーキテクチャを選択する際、中国語、英語、日本語、韓国語で作業する場合、または多言語体験を構築する場合は、site-types-and-localization.md を読む。

2. 信頼できる情報源台帳を構築する

提供されたリンク、マップリスティング、既存サイト、ファイル、画像、ビデオを検査する。記録する:

• 検証済みの値;
• そのソースと検証日;
• 直接公開できるかどうか;
• オーナーの確認が必要なもの。

運用上の事実は、コンポーネントに散在させるのではなく、データファイルまたはコンテンツファイルに集中させる。プレースホルダーは明示的にラベル付けする。公開情報に矛盾がある場合は、ビジネス所有または最も最近更新されたソースを優先し、矛盾をフラグ付けする。

3. コンバージョンストーリーを定義する

ビジュアルエフェクトを選択する前に、以下を記述する:

• 訪問者が10秒後に覚えておくべき1文;
• プライマリCTAと1つのオプショナルなセカンダリCTA;
• 第一印象からアクションに至る信念の階段;
• 証拠によってすでに裏付けられている3〜5の証明ポイント;
• ためらいを取り除くために必要な最小限の情報。

実装プロジェクトでは、対象者、目的、ポジショニング、コンバージョン、証拠、トーン、アンチリファレンス、アクセシビリティの期待事項を含む PRODUCT.md を作成または更新する。

4. 特定のアートディレクションを確立する

カテゴリの真実と感情的な約束、そして意図的なコントラストを組み合わせた1つのコンセプトを命名する。有用なコントラストの例としては、エネルギッシュだが規律正しい、ローカルだが編集的、技術的だが人間的、プレミアムだが歓迎的、などがある。

実装前にデザインダイヤルを設定する:

• デザインバリエーション、1〜10;
• モーション強度、1〜10;
• 情報密度、1〜10;
• カラー戦略;
• 写真戦略;
• タイポグラフィ戦略。

コンセプト、トークン、タイプ、レイアウト、画像処理、モーション、レスポンシブ動作を含む DESIGN.md を作成または更新する。コンセプト、ページアーキテクチャ、メディア処理を選択する際は、direction-and-structure.md を読む。

自動的なビジュアルデフォルトを避ける: 一般的なブラックネオンフィットネススタイル、一般的なベージュレストランスタイル、装飾的なガラスパネル、ランダムな弁当グリッド、意味のないグロー、過剰なピル、均一なカード、繰り返されるフェードアップセクション。

5. 決定に基づいてページを構成する

サイトの目的から情報アーキテクチャを選択する。マルチページの作業では、個々のセクションのスタイリングを行う前に、最小限の完全なサイトマップ、グローバルナビゲーション、ページ固有の目標、クロスページのコンバージョンパスを定義する。ウェブ製品では、マーケティングリズムよりもタスク完了と状態カバレッジを優先する。

訪問者の意思決定に必要なセクションのみを使用する。一般的なコンバージョンページの流れは以下の通り:

1. 約束とプライマリアクションを含むヒーロー;
2. 即時の証明;
3. 特徴的な提供物または製品価値;
4. 経験、プロセス、または差別化要因;
5. 異論を取り除く実用的な詳細;
6. 場所、連絡先、予約、購入、または問い合わせ;
7. 決定的な最終CTA。

スケール、リズム、トリミング、余白、編集上の配置を通じて構成を変化させる — 恣意的なコンポーネントのバリエーションではない。モバイルでは、適切な場合に最も価値の高いアクション（例: 通話、ナビゲーション、予約、購入、サインアップ、検索、保存、続行）を簡単に手の届く範囲に保つ。

6. インターフェースとしてのコンテンツを書く

• まず対象者の第一言語で書く。必要な場合のみ他のロケールを追加する。
• ビジュアルリズムに合った、短く直接的な見出しを使用する。
• 一般的な主張を、裏付けのある具体的な内容に置き換える。
• CTAラベルは文字通りで文化的に馴染みのあるものにする。
• 実際の幅で対象言語の改行をテストする。英語のプレースホルダーを使用してレイアウトを承認しない。
• サポートされている各ロケールを独立してテストする。翻訳がソース言語のコンポーネントに適合することを想定しない。
• ダミーテキストではなく実際のコンテンツを使用する。

7. プロトタイプを構築する

• セマンティックなページ構造と再利用可能なトークンを使用する。
• リンク、通話、ナビゲーション、フォーム、メニュー、フィルター、ギャラリー、モーダルを、プロトタイプから想定されるレベルで機能させる。
• 大きな画像を適切なウェブフォーマットとサイズに最適化する。意味のある切り抜きフォーカスポイントを保持する。
• モーションを使用して階層を明確にし、空間関係を明らかにし、ブランドの特性を強化する。控えめで中断可能に保つ。
• キーボードフォーカス、意味のある代替テキスト、十分なコントラスト、44pxのタッチターゲット、セーフエリア対応のモバイルコントロールを提供する。
• JavaScriptモーションが実行されない場合でも、重要なコンテンツを保持する。

実装または最終レビューの前に prototype-and-qa.md を読む。

8. 実際のブラウザで検証する

ビルドが成功しただけで完了と宣言しない。最低限以下を検証する:

• ワイドデスクトップ 約1440px;
• 中間/タブレット幅;
• モバイル 約390px;
• 狭いモバイル 約375px;
• 1回の動き軽減またはキーボードパス。

ヒーローとページ全体を検査する。対象言語の折り返し、画像のトリミング、水平方向のオーバーフロー、セーフエリア、スティッキーコントロール、コンソールエラー、リンク、フォーム、メニュー、フォーカス順序、読み込み動作、最終CTAの到達可能性を確認する。発見された問題を修正し、影響を受けるチェックを繰り返す。

期待される引き継ぎ

実行可能なプロトタイプの場合、以下を提供する:

• 動作するソースと成功したプロダクションビルド;
• ローカルプレビューまたは明確な実行コマンド;
• プロジェクトがそれを正当化する場合の PRODUCT.md と DESIGN.md;
• 運用上の事実とメディアに関するソース/プレースホルダーノート;
• 実装されたインタラクションと検証済みビューポートの簡潔なリスト;
• 起動前に変更される可能性のある事実に関する簡単なオーナー確認リスト。

プレビューまたは主要な成果物で最終応答をリードする。最も重要なデザイン決定と検証結果のみに言及する。

品質ゲート

以下がすべて真になるまで引き継がない:

• 特異性: サイトはリデザインなしにランダムな競合他社のためにラベルを付け替えることができない。
• 信頼性: 主張とメディアは、実際のものであり、ソースが明らかであり、または暫定的であることが明確にマークされている。
• コンバージョン: 次のアクションが数秒以内に明らかであり、モバイルでも簡単である。
• 階層: 1つのアイデアが各ビューポートを支配し、タイポグラフィと画像がそれをサポートしている。
• レスポンシブ性: コンポジションは単に積み重なるのではなく、意図的に適応する。
• 抑制: モーションとエフェクトには役割があり、サイトはエフェクトデモのように感じられない。
• インクルージョン: キーボード、コントラスト、タッチターゲット、動きの軽減、セマンティック構造がカバーされている。
• 信頼性: ビルド、コンソール、アセット、および重要なインタラクションが検証されている。