ds-design

同様のプロンプトに対するありきたりな出力に見えない UI を構築してください。

手順

1. 依頼内容とプロジェクトを確認します。テーマ、対象ユーザー、ユーザーに取ってほしい行動、技術スタック、既存のブランド、実際に使える画像を見つけます。依頼内容が曖昧な場合は、自分なりの解釈を1行で書き留めてから進めます。
2. コードを書く前に、5行以内の方針メモを作成します。目的、対象ユーザー、トーン、記憶に残る要素を1つ、モード（訴求、操作、閲覧）を含めます。よくあるカテゴリの見た目ではなく、テーマそのものの世界観を取り入れます。
3. コンポーネントを書く前にトークンを定義します。
   • 文字：ディスプレイ用フォントと本文用フォントを明確に使い分けます。ディスプレイ用にデフォルトのフォントは使いません。5〜7段階のサイズスケールを使い、本文は16px以上、1行は80文字未満にします。
   • 色：名前付きの16進数カラーを4〜6色使います。広い面積には支配的な色を1色、アクションにのみ鋭いアクセントカラーを1色使います。
   • 余白：4pxまたは8pxを基準にし、角丸は1〜2種類、シャドウは1種類またはなしにします。
4. 「同様のプロンプトなら、どれに対してもこの計画を立てるだろうか？」と問いかけます。答えが「はい」になる部分は、それぞれ変更します。
5. 意図をもってページをレイアウトします。情報密度を選びます。訴求目的ならゆったり、ツールならコンパクトにします。内容に合う場合は、非対称な構成やサイズのコントラストを取り入れます。実際に使えるコピーと現実的なデータを使い、lorem ipsum は使いません。
6. 動きは役割がある場合にのみ使います。演出を統一した表示アニメーションを1つと、ユーザー操作へのフィードバックを用意します。
7. すべての状態を実装します。ホバー、フォーカス可視、無効、空、読み込み中、エラー、長文の各状態を含めます。
8. アクセシビリティの最低基準を満たします。コントラスト比は4.5:1以上とし、フォーカスリングを見えるようにし、フィールドにはラベルを付けます。タッチターゲットは44px以上、画像には代替テキストを付け、動きを減らす設定に配慮します。
9. 幅約1440pxと390pxでスクリーンショットを撮影します。禁止されているデフォルト表現と方針メモに照らして確認します。問題をまとめて修正してから、新たにスクリーンショットを撮影します。役に立っていない装飾を1つ取り除きます。

禁止されているデフォルト表現

依頼で求められている場合を除き、次のものは使わないでください。

• 紫から青へのグラデーションや、装飾的なグラデーションの背景。
• ディスプレイ用フォントとしての Inter、Roboto、システムフォント。
• アイコンとしての絵文字。SVG アイコンを1つのセットで使います。
• 中央揃えのヒーローと、その下に並ぶ同一デザインのカード3枚。
• グラスモーフィズムや、あらゆる面へのグロー効果。
• コントラストの低い、グレーの背景にグレーの文字。
• 「可能性を解き放つ」「シームレス」などのありきたりなコピー。
• すべての見出しの上に置く、すべて大文字のラベル。
• すべてのカードに同じ角丸と柔らかなシャドウを使うこと。

完了条件

• 方針メモとトークンが用意され、コードでトークンが使われている。
• どちらの画面幅のスクリーンショットにも禁止されたデフォルト表現がなく、横スクロールも発生しない。
• すべての状態が実装され、アクセシビリティの最低基準を満たしている。
• 記憶に残る要素がスクリーンショットで確認できる。

ルール

• 依頼でフォント、色、スタイルが指定されている場合は、禁止リストに含まれていてもそれを使います。
• 改良では UI のアイデンティティを維持します。再設計ではコンテンツと機能を維持します。