quieter

大胆すぎる、攻撃的、または刺激が強すぎるデザインの視覚的な強さを抑え、効果を損なうことなく、より洗練され親しみやすい美しさを実現します。

必須の準備

frontend-designを読み、そのコンテキスト収集プロトコルに従ってください。利用可能なコンテキストを再利用し、重要な情報が不足している場合にのみ質問してください。

デザインを落ち着かせるために強調を抑えること、グレースケールの階層、またはアクションの優先順位を明確にすることが必要な場合は、階層チェックリストを参照してください。 彩度を下げるだけでなく、グルーピングやリズムを改善して落ち着きを生み出す場合は、スペーシングシステムを参照してください。 より抑制されたデザインにしながら独自性を保つ必要がある場合は、パーソナリティの調整要素を参照してください。 「落ち着いた」デザインが、ありきたりで流行に左右されないだけの無難な印象に陥りそうな場合は、AI らしさの検出を参照してください。 強さを抑えるために、境界線を減らす、不要なカードを減らす、影を控えめにする、背景の変化を穏やかにするといった対応が必要な場合は、サーフェスの分離を参照してください。

---

現状を評価する

デザインが強すぎると感じられる原因を分析してください。

1. 強さの原因を特定する：

   • 色の彩度：明るすぎる色や彩度が高すぎる色
   • 極端なコントラスト：強いコントラストの組み合わせが多すぎる
   • 視覚的な重み：太く重い要素が多すぎて、互いに競合している
   • アニメーションの過剰さ：動きが多すぎる、または効果が劇的すぎる
   • 複雑さ：視覚要素、パターン、装飾が多すぎる
   • スケール：階層がなく、すべてが大きく主張している

2. 背景を理解する：

   • 目的は何ですか？（マーケティング向けか、ツールか、読書体験か）
   • 対象ユーザーは誰ですか？（状況によっては活気が必要です）
   • 何がうまく機能していますか？（良いアイデアを捨てないでください）
   • 中心となるメッセージは何ですか？（重要なものを保ってください）

コードベースから判断できない点があれば、推測できない内容をユーザーに直接質問して明確にしてください。

重要：「落ち着いた」デザインは、退屈でもありきたりでもありません。洗練され、上質で、目に優しいデザインを意味します。怠慢ではなく、高級感を目指してください。

落ち着いたデザインは通常、インターフェースの活気をすべて取り去るのではなく、競合する選択肢を減らすことで実現します。

洗練の計画

インパクトを保ちながら強さを抑えるための方針を立ててください。

• 色の方針：彩度を下げるか、より洗練された色調に変えるか？
• 階層の方針：どの要素を目立たせたままにするか（ごく少数）、どの要素を控えめにするか？
• 簡素化の方針：何を完全に取り除けるか？
• 洗練の方針：抑制によって品質をどのように示すか？
• 強調を抑える計画：真の焦点を際立たせるため、どのノイズの多い要素を控えめにするか？

重要：優れた落ち着いたデザインを作るのは、優れた大胆なデザインを作るよりも困難です。繊細さには精密さが求められます。

デザインを洗練する

次の観点から、段階的に強さを抑えてください。

色の調整

• 彩度を下げる：彩度が最大の色から、70～85％の彩度に調整する
• パレットを穏やかにする：明るい色を、落ち着いた洗練された色調に置き換える
• 色の種類を減らす：使用する色を減らし、より慎重に使う
• ニュートラルカラーを主体にする：ニュートラルカラーをより活用し、色はアクセントとして使う（10％ルール）
• コントラストを穏やかにする：強いコントラストは最も重要な箇所に限る
• 色味のあるグレー：純粋なグレーの代わりに、暖色または寒色の色味を加えたグレーを使う。派手さを抑えながら洗練された印象を加えられます
• 色の上にグレーを置かない：色付きの背景にグレーのテキストを載せている場合は、代わりにその色の濃い色調か透明度を使う
• 要となる要素を保つ：画面に焦点が残るよう、主要なアクションや重要なメッセージには十分なコントラストを確保する

視覚的な重みを軽減する

• タイポグラフィ：フォントの太さを抑え（900 → 600、700 → 500）、適切にサイズを小さくします
• さりげなさによる階層化：色や太字ではなく、太さ、サイズ、余白を使います
• ホワイトスペース：余裕を持たせ、密度を下げます
• 境界線と罫線：太さを抑え、不透明度を下げるか、完全に取り除きます
• 強調を控える：重要な要素を弱めるのではなく、競合する要素を目立たなくするのが効果的です

シンプル化

• 装飾要素を取り除く：目的に役立たないグラデーション、影、パターン、テクスチャを取り除きます
• 形状をシンプルにする：極端な角丸を抑え、独自の形状を簡素化します
• レイヤーを減らす：可能な範囲で視覚的な階層をフラットにします
• エフェクトを整理する：ぼかし、グロー、複数の影を抑えるか、取り除きます
• 区切り線より余白を使う：余白を増やしたり、背景をさりげなく変えたりするほうが、境界線を追加するより効果的なことがよくあります

モーションを抑える

• アニメーションの強さを抑える：移動距離を短くし（40pxではなく10～20px）、より穏やかなイージングにします
• 装飾的なアニメーションを取り除く：機能的な動きは残し、飾りは取り除きます
• マイクロインタラクションをさりげなくする：大げさなエフェクトを穏やかなフィードバックに置き換えます
• イージングを洗練させる：滑らかで控えめな動きにはease-out-quartを使い、バウンスや弾性のある動きは使いません
• 明確な目的がない場合は、アニメーションを完全に取り除きます

コンポジションを洗練させる

• スケールの差を抑える：サイズ間のコントラストを小さくして、落ち着いた印象にします
• グリッドに揃える：統一感のない要素を、体系的な配置に戻します
• 余白を均等にする：極端な余白のばらつきを、一貫したリズムに置き換えます
• グループを明確に保つ：落ち着いたレイアウトでも、グループ内よりグループ間に十分な余白が必要です

絶対に避けること：

• すべてを同じサイズ、太さにする（階層は依然として重要です）
• すべての色をなくす（控えめであることは、グレースケールにすることではありません）
• 個性をすべてなくす（洗練によって特徴を保ちます）
• 美しさのために使いやすさを犠牲にする（機能的な要素には、明確な操作性が必要です）
• すべてを小さく、細くする（要所となる要素も必要です）
• 画面の重心が分からなくなるほど、焦点となる要素を目立たなくする

品質を確認する

洗練によって品質が維持されていることを確認します。

• 機能性を保っているか：ユーザーは引き続き簡単にタスクを完了できますか？
• 独自性を保っているか：特徴がありますか、それともありきたりになっていませんか？
• 読みやすさが向上しているか：長時間にわたってテキストを読みやすくなっていますか？
• 洗練されているか：より上質で洗練された印象になっていますか？

控えめなデザインは、自信に満ちたデザインです。声高に主張する必要はありません。少ないほど豊かですが、削ぎ落とすことはより難しいものです。意図を保ち、精密に洗練させましょう。