quieter

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

必須の準備

/impeccable を呼び出してください。デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。作業を進める前にプロトコルに従ってください。デザインのコンテキストがまだない場合は、必ず先に /impeccable teach を実行してください。

---

現状を評価する

デザインが過剰に強い印象を与える要因を分析します。

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

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

2. コンテキストを理解する：

   • 目的は何ですか？（マーケティング、ツール、読書体験など）
   • 対象ユーザーは誰ですか？（コンテキストによっては、活気が求められます）
   • 何がうまく機能していますか？（優れたアイデアを捨てないでください）
   • 核となるメッセージは何ですか？（重要なものを保ちます）

コードベースからこれらのいずれかが明らかでない場合は、推測できない点をユーザーに直接確認してください。

重要：「控えめ」は、退屈またはありきたりという意味ではありません。洗練され、上品で、目に優しいということです。怠慢ではなく、ラグジュアリーをイメージしてください。

洗練の計画

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

• 色の方針：彩度を下げますか、それともより洗練された色調に変えますか？
• 階層の方針：どの要素は強調したままにし（ごく少数）、どの要素は控えめにしますか？
• 簡素化の方針：何を完全に取り除けますか？
• 洗練の方針：抑制によって品質をどのように伝えますか？

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

デザインを洗練する

次の観点から、体系的に強さを抑えます。

色の調整

• 彩度を下げる：彩度が最大の色から、70～85％程度の彩度に変更します
• パレットを落ち着かせる：明るい色を、落ち着いた洗練された色調に置き換えます
• 色の種類を減らす：色数を抑え、それぞれをより意図的に使います
• ニュートラルカラーを主体にする：ニュートラルカラーを中心に使い、色はアクセントにします（10％ルール）
• コントラストを穏やかにする：強いコントラストは、最も重要な箇所にだけ使います
• 色味のあるグレー：純粋なグレーではなく、暖色系または寒色系の色味を加えたグレーを使います。派手さを抑えながら、洗練された印象を加えられます
• 色の上にグレーを使わない：色付きの背景にグレーのテキストを載せる場合は、グレーではなく、その色のより暗い色合いか透明度を使います

視覚的な重みを抑える

• タイポグラフィ：フォントのウェイトを下げ（900 → 600、700 → 500）、適切な箇所ではサイズも小さくします
• 繊細さによる階層：色や太字に頼らず、ウェイト、サイズ、余白で階層を表現します
• ホワイトスペース：余裕を持たせ、密度を下げます
• 境界線と線：太さや不透明度を抑えるか、完全に取り除きます

簡素化

• 装飾要素を取り除く：目的に役立たないグラデーション、シャドウ、パターン、テクスチャを取り除きます
• 形状を簡素化する：極端な角丸を抑え、カスタム形状を簡素化します
• レイヤーを減らす：可能な限り視覚的な階層を平坦化します
• エフェクトを整理する：ぼかし、グロー、複数のシャドウを減らすか、取り除きます

動きを抑える

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

構成の洗練

• サイズの差を抑える：サイズ間のコントラストを小さくすると、落ち着いた印象になります
• グリッドに揃える：規則性のない要素を、体系的な配置に戻します
• 余白を均一にする：極端な余白のばらつきを、一定のリズムに置き換えます

絶対に避けること：

• すべてを同じサイズや太さにする（階層構造は引き続き重要です）
• 色をすべてなくす（静かなデザインはグレースケールという意味ではありません）
• 個性をすべてなくす（洗練させながらも、独自性を保ちます）
• 美しさのために使いやすさを犠牲にする（機能要素には、引き続き明確なアフォーダンスが必要です）
• すべてを小さく薄くする（要所となる要素も必要です）

品質を確認する

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

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

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