interface-design-taste

interface-design-taste

汎用的で雑然とした、あるいは設計不足に感じられるものではなく、意図が明確で、プロダクトにふさわしく、構造が分かりやすいインターフェースを構築します。

判断ツリー

どのようなデザイン上の課題に取り組んでいますか？

• サイト、アプリ、デスクトップ製品の方向性をゼロから決めたい

  • ブリーフの土台を固める必要があれば、references/principles.md を使用します
  • 方向性を探るために例が役立ちそうであれば、references/style-families.md を使用します

• 既存のインターフェースを、やみくもにすべて作り直すことなく改善したい

  • references/critique-workflow.md を読みます
  • 次に、最も弱い要素（レイアウト、タイポグラフィ、色、モーション、プラットフォームへの適合性）に取り組みます

• 階層、構成、間隔、画面構造をより明確にしたい

  • references/layout-and-rhythm.md を読みます

• 書体の選択、コピーのトーン、ラベル、情報の流れを改善したい

  • references/typography-and-copy.md を読みます

• パレットをより洗練させ、サーフェスを分かりやすくし、アイコンを改善し、画像を意図的に使いたい

  • references/color-material-and-iconography.md を読みます

• ホバー／フォーカス／アクティブ状態、トランジション、オンボーディングフローの磨き込み、モーションに関する指針が必要

  • references/interaction-motion-and-states.md を読みます

• マーケティング向けウェブ、プロダクト向けウェブ、デスクトップ UI について、プラットフォーム固有の指針が必要

  • references/platform-adaptation.md を読みます

• デザインの方向性を再利用可能なトークンとコンポーネントのルールに落とし込みたい

  • references/design-systems-and-tokens.md を読みます
  • templates/design-brief-template.md を使用します

• 落とし穴、失敗例、「なぜまだしっくりこないのか？」への答えが必要

  • references/gotchas.md を読みます

クイックリファレンス

必要なこと	読むもの	得られるもの
漠然としたプロンプトをデザインの方向性に落とし込む	references/principles.md	明確な優先事項と、役立つ計画立案の観点
トレンドを模倣せずに、ビジュアルのアプローチを探る	references/style-families.md	一貫性のある組み合わせを含む、応用可能な例
階層と構成を改善する	references/layout-and-rhythm.md	より明確な画面構造と間隔の考え方
書体、ラベル、トーンを改善する	references/typography-and-copy.md	より整理された階層と、信頼感のあるコピー
パレット、サーフェス、アイコン、画像を改善する	references/color-material-and-iconography.md	意図的なビジュアルの関係性と、読みやすいコントラスト
モーションとすべての UI 状態を改善する	references/interaction-motion-and-states.md	意図のあるトランジションと、完成度の高いインタラクションデザイン
同じアイデアをサイト、アプリ、デスクトップ向けに調整する	references/platform-adaptation.md	プラットフォームに適した動作と情報密度
既存の画面やフローを監査する	references/critique-workflow.md	優先順位を付けた再設計の手順
成果を再利用可能なシステムとしてまとめる	references/design-systems-and-tokens.md	トークン、コンポーネントのルール、引き継ぎの構成

デフォルトのワークフロー

1. 対象となる成果物、ユーザーのタスク、求められる特徴を特定します。例：マーケティングページ、コンテンツページ、プロダクトの画面、ダッシュボード、デスクトップツール。
2. 判断を明確にするうえで役立つ場合は、デザインの評価軸や関連するリファレンスを使用します。ブリーフにすでに方向性が示されている場合は、ワークシートを省略します。
3. 一貫性のある構成を作り上げます。スタイルの混在、表現力豊かなモーション、単発の装飾的な要素も、ブリーフに役立つことがあります。それらを階層、リズム、または別の意図的な関係性で結び付けます。
4. 表現と並行して、階層、インタラクション状態、アクセシビリティ、プラットフォームへの適合性を確認します。独自の標準スタイルに置き換えるのではなく、ユーザーの意図を保ちます。
5. 再利用、引き継ぎ、デザインシステムの作業で必要な場合は、再利用可能なトークンとコンポーネントのルールをまとめます。単発の画面ごとに作成する必要はありません。

テイストの軸

次の任意の軸を使うと、「もっとよくして」という曖昧な要望を具体化できます。役立つものを選んでください。必須のワークシートでも、固定されたスタイルメニューでもありません。

軸	低い側	高い側	制御するもの
落ち着き	控えめ	劇的	インターフェースがどれほど強く自己表現するか
密度	ゆとりがある	実務的	画面にどれだけの作業を収められるか
コントラスト	柔らかい	鮮明	輪郭の明瞭さ、階層、緊張感
質感	フラット	重層的	境界線、影、ぼかし、表面の奥行き
動き	静的	表現豊か	フィードバック、物語性、雰囲気、楽しさのための動き

この軸は、最適化するためのスコアではなく、話し合いの手がかりとして使ってください。密度の高いデスクトップツールでも、落ち着いた雰囲気や遊び心のあるデザインにできます。マーケティングページでも、控えめな表現は可能です。

運用ルール

1. トレンドよりも、製品に合ったデザインを優先してください。ワークフローツールに適した答えは、ローンチページに適した答えとは異なります。
2. ページ構造、セクション構造、コンポーネント構造の3つの距離で階層を確立してください。
3. 状態を、実装後に残ったものではなくデザインの一部として扱ってください。空、読み込み中、成功、エラー、ホバー、フォーカス、選択済みの状態はすべて考慮します。
4. 動きは変化を明確にしたり、表現や楽しさを加えたりするために使えます。コントロールの応答性を保ち、動きを減らす設定を尊重し、点滅や、コンテンツを危険にしたり使いにくくしたりする動きは避けてください。
5. 認識しやすくなる場合は繰り返しを使い、タスクを見えにくくせず意味や個性を加える場合は、意図的な例外や装飾を取り入れてください。
6. プレースホルダーの文言よりも、具体的で信頼できるコピーや現実的なデータを優先してください。
7. どのようなスタイルでも、読みやすいコントラスト、キーボード操作、視認できるフォーカス、わかりやすいラベルを維持してください。重要な意味を色だけに頼って伝えてはいけません。

プラットフォームの制約

• マーケティング向けウェブ：

  • よりドラマチックなテンポや非対称性を取り入れます。
  • 画像や動きに、より大きな物語性を担わせます。

• プロダクト向けウェブ：

  • わかりやすいナビゲーション、繰り返し行うタスク、すばやく見渡せることを重視します。
  • 表現豊かなスタイルや動きも取り入れられますが、重要なフィードバックを認識しやすくし、繰り返し行うタスクを妨げないようにしてください。

• デスクトップ：

  • 情報密度、キーボード操作、補助的なコントロール、長時間の利用を考慮してデザインします。
  • 宣伝的な演出が作業スペースや精密なコントロールを圧迫しないよう調整します。

これらの状況の間でビジュアル言語を変換する場合は、references/platform-adaptation.md を使用してください。

レビューの質問

最終決定の前に、タスクに関連する質問を使ってください。2秒での一瞥と20％の削減は、診断のためのヒューリスティックであり、時間制限や削減ノルマではありません。情報密度の高いリファレンスツールや表現豊かな体験では、別の確認方法が必要になることがあります。

1. 2秒以内にユーザーが最初に気づくべきものは何ですか？
2. クロームを20％取り除いたら、何がなくなりますか？
3. まだデザインされていない状態はどれですか？
4. インターフェースは製品カテゴリに合った印象ですか。それとも、汎用的なAIデモのように見えますか？
5. 実際のコンテンツ、雑然としたデータ、長いラベルを使っても、適切に機能しますか？

注意点

1. 美しいヒーローがあっても、使う画面の弱さは補えません。
2. グループ分けが適切でなければ、影を増やしても階層は生まれません。
3. 色の役割が不明確だと要素同士が競合することがあります。階層とコントラストが読みやすければ、豊かな配色も機能します。
4. 密度の高いインターフェースは、余白不足よりもリズムの問題で破綻することが多くあります。
5. デスクトップツールに必要なのは、カードをきれいにすることだけでなく、精密な操作のための手がかりです。
6. 演劇的な演出が依頼内容に含まれていても、装飾的な動きで、欠けている操作フィードバックを補うことはできません。
7. デザインシステムを早く作りすぎると、誤った方向性が再利用可能なパーツとして固定されることがあります。

ガイダンスを役立てる

まず、階層、読みやすさ、タスクへの適合性、誰もが利用しやすい操作、まとまりのある表現といった、安定した原則から始めます。このガイダンスだけでは不十分な場合や、実際に観察した挙動と矛盾する場合は、該当する疑問について、最新の公式プラットフォーム／ツールのドキュメントやアクセシビリティのドキュメント、または信頼できるデザイン研究を参照してください。通常のデザイン作業でウェブを検索する必要はありません。具体例やチェック項目を添えて、出典を明記した修正案を正規のスキルに提案してください。インストール済みのコピーを黙って変更しないでください。

読み方ガイド

タスクが次の場合	読む資料
「このプロジェクトのビジュアルの方向性をもっと強めてください」	必要に応じて、根拠についてはreferences/principles.mdを、例についてはreferences/style-families.mdを参照します
「この画面は平板で、ありきたりな印象です」	references/layout-and-rhythm.mdとreferences/color-material-and-iconography.md
「階層が適切でなく、コピーも弱い印象です」	references/typography-and-copy.md
「インタラクションが不自然で、未完成な印象です」	references/interaction-motion-and-states.md
「ウェブとデスクトップの両方で動作するようにしてください」	references/platform-adaptation.md
「現状を監査して、何から直すべきか教えてください」	references/critique-workflow.md
「これを再利用可能なコンポーネントシステムにしてください」	references/design-systems-and-tokens.mdとtemplates/design-brief-template.md
「なぜまだ安っぽく感じるのでしょうか？」	references/gotchas.md

ヘルパーファイル

• references/README.md — リファレンスの索引と振り分けの概要
• templates/design-brief-template.md — 新しい作業で再利用できるブリーフ
• templates/critique-scorecard.md — 監査と再設計のワークシート
• scripts/validate.py — このスキルの構造バリデーター
• scripts/test_skill.py — パッケージングとコンテンツ網羅率のチェック