quieter

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

必須の準備

ユーザーは /quieter を使ってこのワークフローを開始します。このスキルが有効になったら、$frontend-design を読み込んでください。デザイン原則、アンチパターン、コンテキスト収集プロトコルが含まれています。先に進む前に、そのプロトコルに従ってください。デザインのコンテキストがまだ存在しない場合は、必ず先に $setup を読み込んでください。

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

---

現状を評価する

デザインが強すぎると感じられる要因を分析します。

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

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

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

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

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

重要：「落ち着かせる」とは、退屈にしたり、ありきたりにしたりすることではありません。洗練され、上品で、目に優しいデザインにすることです。手抜きではなく、高級感を目指してください。

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

洗練の計画

効果を保ちながら強さを抑える方針を立てます。

• 色の方針：彩度を下げるか、より洗練された色調に移行するか？
• 階層の方針：どの要素を太く目立たせるか（ごく少数）、どの要素を後退させるか？
• 簡素化の方針：完全に取り除けるものは何か？
• 洗練の方針：抑制によって、どのように品質の高さを伝えるか？
• 強調を弱める計画：本当の焦点を際立たせるために、どの騒がしい要素を後退させるか？

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

デザインを洗練する

以下の各要素について、体系的に強さを抑えます。

色の調整

• 彩度を下げる：彩度100％から70〜85％に移行します
• パレットを柔らかくする：明るい色を、彩度を抑えた洗練された色調に置き換えます
• 色の種類を減らす：より少ない色を、より慎重に使います
• ニュートラルカラーを中心にする：ニュートラルカラーをより効果的に使い、色はアクセントとして使います（10％ルール）
• コントラストを穏やかにする：強いコントラストは、最も重要な箇所だけに使います
• 色みのあるグレー：純粋なグレーではなく、暖色系または寒色系の色みを持つグレーを使います。派手さを抑えながら、洗練さを加えられます
• 色の上にグレーを置かない：色付きの背景にグレーのテキストを置く場合は、代わりにその色のより暗い色合いを使うか、透明度で調整します
• 基準となる焦点を保つ：プライマリーアクションや重要なメッセージには十分なコントラストを維持し、画面に焦点が残るようにします

視覚的な重みを軽減する

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

シンプル化

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

モーションを抑える

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

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

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

絶対に避けること：

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

品質を確認する

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

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

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