iyuyoung/young-design

Young Design

若々しく、作家性があり、プロダクト主導でありながら、幼稚になったり、装飾的になったり、汎用的になったりしないWebサイトを制作します。視覚品質と実装品質を一つのシステムとして扱います。固定のハウススタイルを適用するのではなく、プロダクトに応じて視覚表現を適応させます。

タスクモードを選択する

作業を始める前に、以下のモードのいずれかを選択してください：

• Direction（方向性）: ビジュアル言語、ページ階層、トークン、代表的なコンポーネントを定義します。
• Design（デザイン）: 現実的なコンテンツとレスポンシブな意図を持った、完全なページまたはモックアップを作成します。
• Implementation（実装）: 承認された方向性やリファレンスを実稼働コードに変換します。
• Refinement（洗練）: 既存のサイトを監査し、最も影響の大きいギャップを特定し、動作を不安定にすることなく改善します。
• Review（レビュー）: 依頼がない限りファイルを変更せずに、証拠に基づいた視覚的フィードバックを提供します。

ユーザーがデザインのみを依頼した場合は、実稼働プロジェクトを実装しないでください。ユーザーがサイトの構築や最適化を依頼した場合は、検証が完了するまで作業を進めてください。

デザイン契約を確立する

色やコンポーネントを選択する前に、以下を決定します：

1. オーディエンス — 誰が訪れ、どのような感情状態で訪れるか。
2. 約束 — 最初のビューポートで明確に伝えなければならない唯一のこと。
3. 主要なアクション — 最も価値のある次のステップ。
4. パーソナリティ — 役立つ3つの形容詞と、避けるべき3つの性質。
5. 制約 — フレームワーク、ブランドアセット、SEO、パフォーマンス、アクセシビリティ、印刷、またはデプロイ要件。

可能な限り、リポジトリ、ブリーフ、および以前の決定からこれらを推測します。回答がないとデザインが大きく変わる場合にのみ質問します。

次に、暖かさ、遊び心、触感、密度、精度、視覚的コントラストについて1〜5のデザインフィンガープリントを定義します。スコアと、結果として得られる方向性を説明する一文を記録します。関連性のないプロダクトにデフォルトで同じフィンガープリントを与えないでください。

現実的なプロダクトコピーと代表的なデータを使用します。Lorem ipsum、汎用的なダッシュボード、および作り物のソーシャルプルーフは、階層の問題を隠蔽します。

ページの前にビジュアルシステムを構築する

ルックアンドフィールを定義または変更する際は、references/visual-language.md を参照してください。プロダクト、オーディエンス、またはワークフローから1つの支配的なビジュアルモチーフを導き出します。紙やコラージュはオプションであり、デフォルトではありません。

小さな一貫性のあるシステムを作成します：

• 単なる色の集まりではなく、カラーロール;
• ディスプレイ、ボディ、およびオプションの注釈用タイポグラフィ;
• スペーシングのリズムとコンテンツ幅;
• 境界線、半径、シャドウ、およびマテリアルルール;
• アイコンとイラストレーションの言語;
• インタラクションとモーションの動作;
• デスクトップ、タブレット、モバイルのコンポジションルール。

デザイントークンまたは共有変数を使用します。各セクションを独立したポスターとしてスタイリングしないでください。

以下の間の区別を維持します：

• ブランドレイヤー — 認識可能な声、マーク、色、タイポグラフィ;
• プロダクトレイヤー — タスクフロー、コントロール、状態、フィードバック;
• コンテンツレイヤー — 階層、スキャン、信頼性、SEOコピー;
• マテリアルレイヤー — ペーパー、テープ、鉛筆、テクスチャ、またはコラージュのアクセント。

マテリアルの詳細は階層をサポートする必要があります。プロダクトの信頼性と使いやすさを損なわないよう、控えめに保ってください。

プロダクトの瞬間を中心に構成する

デフォルトで左に見出し、右に任意のダッシュボードスクリーンショットを配置しないでください。プロダクトが機能することを証明する瞬間を特定します：レコメンデーション、プレビュー、結果、トランスフォーメーション、ワークシート、比較、または次のステップ。

最初のビューポートには通常、以下が含まれます：

• 具体的な約束;
• 1つの読み取り可能なプロダクトの瞬間;
• 1つの主要なアクション;
• 簡潔な信頼性または制約の手がかり;
• 作家性を感じさせるのに十分な非対称性またはマテリアルキャラクター。

セカンダリセクションは、異なる質問に答えるようにします。同じカードグリッドを異なる見出しの下で繰り返さないでください。

ヒーロー、チューザー、カード、ツール、ディレクトリ、またはエディトリアルパターンを選択する際は、references/component-patterns.md を参照してください。

適切なアーティファクトを納品する

references/output-contracts.md を読み、選択したタスクモードの契約に従ってください。仮定、決定、レスポンシブな意図、および検証の証拠を、別のデザイナーやエンジニアが作業を継続できるように明示的にします。

実際のシステムとして実装する

リポジトリを変更したり、リファレンスをコードに変換したりする前に、references/implementation-playbook.md を参照してください。

既存のプロジェクトで作業する場合：

1. フレームワーク、ルート、共有レイアウト、トークン、コンポーネント、テスト、生成アセットを検査します。
2. 意図的なソース変更を、生成された出力やフォーマットのノイズから分離します。
3. 動作契約、URL、アナリティクスフック、テストセレクター、セマンティクス、印刷ルールを維持します。
4. ページ固有のオーバーライドの前に、共有基盤を追加または修正します。
5. 繰り返されるビジュアルおよび動作パターンには、再利用可能なコンポーネントを実装します。
6. すべての意味のある状態を確認します：初期、選択済み、ホバー、フォーカス、ローディング、空、エラー、成功、該当する場合は印刷。
7. デスクトップ、タブレット、狭いモバイル幅で検証します。

ローカルまたはセルフホストのフォント、SVGマーク、一貫性のあるアイコンライブラリを推奨します。生成画像は、実際のナラティブ上の価値がある場合にのみ使用します。弱い階層を装飾画像で補わないでください。

影響度順に洗練する

サイトが「古い」、「汎用的」、「デザイン通りではない」と感じられる場合、以下の順序で問題を修正します：

1. タイポグラフィのキャラクターと階層;
2. 最初のビューポートのコンポジション;
3. スペーシングのリズムとコンテンツ密度;
4. コンポーネントのジオメトリとインタラクション状態;
5. カラーロールとコントラスト;
6. マテリアルの詳細とマイクロ装飾;
7. モーションとポリッシュ。

シャドウ、グラデーション、ブロブ、アニメーションを追加することから始めないでください。これらは弱いコンポジションを修復することはほとんどありません。

完了と呼ぶ前に検証する

実装または最終レビューについては、references/quality-gates.md を参照してください。結果を提示、出荷、公開する準備ができているかどうかを判断する際は、references/review-rubric.md を参照してください。

最低限、以下を検証します：

• 意図しない水平方向のページオーバーフローがないこと;
• 表示されるインターフェーステキストは、重要でないアートワークでない限り、少なくとも14pxであること;
• 通常のテキストのコントラストが4.5:1、大きなテキストのコントラストが3:1を満たしていること;
• キーボードフォーカスが明確で、インタラクティブなコントロールが快適なタッチサイズであること;
• モバイルが単に縮小されるのではなく、再構成されていること;
• タイプ、半径、シャドウ、アイコン、マテリアルが一貫していること;
• 実装された最初のビューポートが、承認されたデザインの階層を維持していること;
• 機能、SEO構造、生成ファイル、ダウンロード、印刷出力が引き続き動作すること;
• プロジェクトが提供する場合、型チェック、テスト、ビルド、ブラウザチェックに合格すること。

リリース準備完了と呼ぶ前に、少なくとも85/100のスコアを要求し、クリティカルなブロッカーがないことを確認します。スコアは診断的に使用し、しきい値を満たすために水増ししないでください。

ブラウザ実行がローカルで利用できない場合は、環境の制限を述べ、視覚的検証を主張するのではなく、プロジェクトのCIを使用します。

Young Designの失敗モードを回避する

以下のデフォルトに絶対にしないでください：

• 汎用的なスタートアップのグラデーションと浮遊するガラスカード;
• 「パーソナリティ」の主要なソースとしての古風なセリフ;
• 過度なピル型、大きすぎる半径、または均一なカードグリッド;
• コントラスト不足のパステルカラーが全体的に使用されていること;
• すべての要素に対するランダムな回転、テープ、いたずら書き、または紙のテクスチャ;
• 洗練さを偽造するために使用される小さなメタデータとラベル;
• コアプロダクトの価値を隠したり、ページレベルの水平スクロールを強制するモバイルレイアウト;
• ビジュアルリデザインに対応するためだけに、動作するプロダクトロジックを書き換えること;
• 関連性のないブランド間で、一つのリファレンスを文字通りコピーすること;
• ドメインがよりシャープで、密度が高く、または技術的な表現を求めている場合に、暖かい紙、パステルカラー、または丸いカードを適用すること。

結果は、作家性があり、有用で、現代的であるべきです：親しみやすくても幼稚ではなく、表現力豊かでもうるさすぎず、洗練されていても無機質に感じさせないこと。