bolder

安全すぎる、ありきたり、または視覚的なインパクトに欠けるデザインを、より魅力的で記憶に残る体験へと高めます。

必須の事前準備

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

---

現状を評価する

デザインが安全すぎる、または退屈に感じられる原因を分析します。

1. 弱点の原因を特定する：

   • ありきたりな選択：システムフォント、基本的な配色、標準的なレイアウト
   • 控えめなスケール：すべてが中くらいのサイズで、ドラマがない
   • コントラストの弱さ：すべての要素の視覚的な重みが似ている
   • 静的：動きもエネルギーも生気もない
   • 予測可能：意外性のない標準的なパターン
   • 平坦な階層：際立つ要素や注目を集める要素がない

2. コンテキストを把握する：

   • ブランドの個性はどのようなものか？（どこまで大胆にできるか？）
   • 目的は何か？（マーケティングでは、財務ダッシュボードより大胆な表現が可能です）
   • 対象ユーザーは誰か？（何が響くか？）
   • 制約は何か？（ブランドガイドライン、アクセシビリティ、パフォーマンス）

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

重要：「大胆にする」とは、混沌とさせたり、けばけばしくしたりすることではありません。独自性があり、記憶に残り、自信を感じさせることです。意図的なドラマを目指し、無秩序な混乱は避けてください。

警告 — AI のありきたりな表現に陥る罠：「大胆にする」際に、AI は使い古された同じ手法に頼りがちです。シアンと紫のグラデーション、グラスモーフィズム、暗い背景にネオンのアクセント、指標にグラデーション文字を使うといったものです。これらは大胆さとは正反対で、ありきたりです。作業を進める前に、impeccable スキルの DON'T ガイドラインをすべて確認してください。大胆さとは独自性であり、「エフェクトを増やす」ことではありません。

インパクトを高める計画を立てる

一貫性を保ちながらインパクトを高める方針を作成します。

• 注目の中心：主役となる瞬間は何か？（1つだけ選び、最高のものにする）
• 個性の方向性：マキシマリストな混沌？　優雅なドラマ？　遊び心のあるエネルギー？　暗くムーディーな雰囲気？　方向性を1つ選ぶ
• リスクの許容範囲：どこまで実験的にできるか？　制約の範囲内で境界を押し広げる
• 階層の強調：大きなものはさらに大きく、小さなものはさらに小さくする（コントラストを高める）

重要：大胆なデザインでも、使いやすさは損なわないでください。機能を伴わないインパクトは、単なる装飾です。

デザインを強化する

以下の要素を通じて、体系的にインパクトを高めます。

タイポグラフィの強化

• ありきたりなフォントを置き換える：システムフォントを個性の際立つフォントに変更する（アイデアについては impeccable スキルを参照）
• 極端なスケール差：劇的なサイズ差をつける（1.5倍ではなく、3〜5倍）
• ウェイトのコントラスト：600と400ではなく、900と200のウェイトを組み合わせる
• 意外性のある選択：可変フォント、見出し向けのディスプレイフォント、コンデンス幅やエクステンデッド幅、意図的なアクセントとしての等幅フォント（「開発者向けツール」だからという安易なデフォルト使いは避ける）

色の強化

• 彩度を高める：より鮮やかでエネルギッシュな色に調整する（ただし、ネオンは避ける）
• 大胆なパレット：意外性のある色の組み合わせを取り入れる。紫から青へのグラデーションという、AI のありきたりな表現は避ける
• 主役となる色の戦略：大胆な色の1色をデザインの60％に使う
• 鮮烈なアクセント：目を引く高コントラストのアクセントカラー
• 色味のあるニュートラルカラー：純粋なグレーを、パレットと調和する色味のあるグレーに置き換える
• 豊かなグラデーション：複数の色の停止点を意図的に設定する（ありきたりな紫から青へのグラデーションは避ける）

空間のドラマ性

• 極端なスケール差：重要な要素を周囲の要素より3〜5倍大きくする
• グリッドを崩す：主役となる要素をコンテナーからはみ出させ、境界を越えさせる
• 非対称なレイアウト：中央揃えの整ったレイアウトを、緊張感のある非対称なレイアウトに置き換える
• ゆとりある空間：余白を大胆に使う（20〜40pxではなく、100〜200pxの間隔）
• 重なり：奥行きを出すため、要素を意図的に重ねる

ビジュアルエフェクト

• ドラマチックな影：立体感を出す大きく柔らかな影を使います（ただし、角丸の長方形に汎用的なドロップシャドウを付けるのは避けます）。
• 背景の演出：メッシュパターン、ノイズテクスチャ、幾何学模様、意図を持たせたグラデーションを使います（紫から青へのグラデーションは避けます）。
• テクスチャと奥行き：粒子感、網点、デュオトーン、レイヤー要素を使います。グラスモーフィズムは使いません（AI っぽい安っぽいデザインで多用されています）。
• 境界線とフレーム：太い境界線、装飾的なフレーム、カスタムシェイプを使います（片側だけ色付きの境界線がある角丸の長方形は避けます）。
• カスタム要素：ブランドを際立たせるイラスト要素、カスタムアイコン、装飾的なディテールを使います。

モーションとアニメーション

• 入場の演出：50〜100ms の遅延を入れた、段階的でドラマチックなページ読み込みアニメーションを使います。
• スクロールエフェクト：視差効果、表示アニメーション、スクロールをトリガーとするシーケンスを使います。
• マイクロインタラクション：心地よいホバーエフェクト、クリック時のフィードバック、状態変化を取り入れます。
• トランジション：ease-out-quart／quint／expo を使った、滑らかで視認しやすいトランジションを使います（バウンスや弾性のある動きは、効果を安っぽく見せるため避けます）。

大胆な構図

• ヒーロー表現：ドラマチックな演出で、明確な焦点を作ります。
• 斜めの流れ：斜めの配置を使い、水平方向・垂直方向の堅苦しさから脱却します。
• フルブリード要素：インパクトを出すため、ビューポートの幅や高さをいっぱいに使います。
• 意外性のある比率：黄金比にこだわる必要はありません。70／30 や 80／20 の分割を試してみましょう。

絶対に避けること：

• 意図なくエフェクトを追加すること（混沌は大胆さとは異なります）。
• 美しさのために読みやすさを犠牲にすること（本文は読みやすくなければなりません）。
• すべてを大胆にすること（そうすると何も目立たなくなります。コントラストが必要です）。
• アクセシビリティを無視すること（大胆なデザインでも WCAG 基準を満たす必要があります）。
• モーションで圧倒すること（アニメーション疲れは実際に起こります）。
• 流行の美学を考えなしに模倣すること（大胆さとは、独自性があることであり、模倣ではありません）。

品質の確認

大胆さを高めても、使いやすさと一貫性が保たれていることを確認します。

• AI っぽい安っぽいデザインではない：他の AI 生成の「大胆な」デザインと同じに見えませんか？そうなら、やり直しましょう。
• 機能性が保たれている：ユーザーは気を散らされずにタスクを完了できますか？
• 一貫性がある：すべてに意図が感じられ、統一されていますか？
• 記憶に残る：ユーザーはこの体験を覚えているでしょうか？
• パフォーマンスが良い：これらのエフェクトはすべて滑らかに動作しますか？
• アクセシビリティが確保されている：アクセシビリティ基準を引き続き満たしていますか？

判断基準：誰かにこれを見せて「AI がこれを大胆にした」と言ったとき、すぐに信じてもらえるでしょうか？そうなら失敗です。大胆さとは独自性があることであり、「AI エフェクトを増やす」ことではありません。

覚えておいてください。大胆なデザインとは、自信に満ちたデザインです。リスクを取り、主張を打ち出し、記憶に残る体験を生み出します。しかし、戦略のない大胆さは、ただ騒がしいだけです。意図を持ち、ドラマチックに、忘れられないものにしましょう。