bolder

無難でありきたり、または視覚的なインパクトに欠けるデザインの存在感と個性を高め、より魅力的で記憶に残る体験を生み出します。

必須の準備

frontend-design を読み、そのコンテキスト収集プロトコルに従ってください。利用可能なコンテキストを再利用し、結果に影響する不足情報についてのみ質問してください。

---

現状を評価する

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

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

   • ありきたりな選択：システムフォント、基本的な色、標準的なレイアウト
   • 控えめなスケール：すべてが中程度のサイズで、メリハリがない
   • コントラストが低い：すべての視覚的な重みが似ている
   • 静的：動きも活気も生命感もない
   • 予測可能：意外性のない標準的なパターン
   • フラットな階層構造：目立つものも、注目を集めるものもない

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

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

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

重要：「大胆にする」とは、混乱させたりけばけばしくしたりすることではありません。際立ち、記憶に残り、自信を感じさせることです。無作為な混沌ではなく、意図的なドラマを考えてください。

大胆さは、タイポグラフィ、色、レイアウト、形状の表現、語り口について、確固とした選択をすることで生まれるべきです。エフェクトは必須ではありませんが、明確な視点は不可欠です。

警告 — AI っぽさの罠：「大胆に」しようとすると、AI は使い古された同じ手法に頼りがちです。シアン／パープルのグラデーション、グラスモーフィズム、暗い背景にネオンのアクセント、数値にグラデーションを施したテキストなどです。これらは大胆さとは正反対で、ありきたりです。作業に進む前に、frontend-design スキルにある「避けるべきこと」のガイドラインをすべて確認してください。大胆さとは、エフェクトを増やすことではなく、際立たせることです。

「大胆な」選択が、実際には単にありきたりなトレンドの模倣になっていないか確認する際は、ai slop detection のリファレンスを参照してください。 強い個性を、アクセントボーダー、デフォルト設定の改善、背景の装飾、またはより個性的なコンポーネントの見せ方で表現する場合は、finishing touches を参照してください。

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

一貫性を保ちながらインパクトを高める戦略を立てます。

• 焦点：主役となる見せ場は何ですか？（1つに絞り、最高のものにしてください）
• 個性の方向性：優雅なドラマチックさ？遊び心のある活気？暗くムーディーな雰囲気？方向性を1つ選んでください。
• リスクの許容範囲：どこまで実験できますか？制約の範囲内で限界に挑戦してください。
• 階層の強調：大きなものはさらに大きく、小さなものはさらに小さくして、コントラストを高めてください。
• 具体的な手段：フォントの選択、色温度、角丸、コピーの語調、構成のうち、どれで個性を表現しますか？

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

デザインのインパクトを高める

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

タイポグラフィの強化

• ありきたりなフォントを置き換える：システムフォントを個性的なフォントに変更します（アイデアは frontend-design スキルを参照してください）
• 極端なサイズ差：劇的なサイズの差をつけます（1.5 倍ではなく、3〜5 倍）
• ウェイトのコントラスト：600 と 400 ではなく、900 と 200 のウェイトを組み合わせます
• 意外性のある選択：可変フォント、見出し用のディスプレイフォント、コンデンス幅やエクステンデッド幅、意図的なアクセントとしての等幅フォント（安易に「開発ツール」風にするための選択ではありません）
• 語り口も重要：ラベル、見出し、補足コピーにも個性を反映し、エンタープライズ向けの無難な定型文のような印象にならないようにします

色彩の強化

• 彩度を高める：より鮮やかでエネルギッシュな色にします（ただし、ネオンカラーは避けます）。
• 大胆なパレット：意外性のある色の組み合わせを取り入れます。ありがちな紫から青へのグラデーションのような、AI生成デザインによくある凡庸さは避けます。
• 支配色の戦略：デザインの60％を、ひとつの大胆な色で占めます。
• シャープなアクセント：目を引く、高コントラストのアクセントカラーを使います。
• 色味のあるニュートラルカラー：純粋なグレーを、パレットと調和する色味のあるグレーに置き換えます。
• 豊かなグラデーション：意図を持った複数の色の変化点があるグラデーションを使います（ありがちな紫から青へのグラデーションは避けます）。
• 色温度を決める：暖色系と寒色系のパレットでは印象が異なります。意図を持ってどちらかを選びます。

空間的なドラマ

• 極端なサイズ差：重要な要素を、周囲の要素の3〜5倍の大きさにします。
• グリッドを崩す：ヒーロー要素をコンテナーからはみ出させ、境界をまたがせます。
• 非対称なレイアウト：中央揃えでバランスの取れたレイアウトを、緊張感のある非対称なレイアウトに置き換えます。
• ゆとりのある余白：余白を大胆に使います（20〜40pxではなく、100〜200pxの間隔を設けます）。
• 重なり：奥行きを出すため、要素を意図的に重ねます。
• その他の要素を控えめにする：ヒーロー要素を大胆に見せる最も手早い方法は、競合する要素の存在感を抑えることです。

視覚効果

• ドラマチックなシャドウ：意味のある高低差を表現する場合に使います（ただし、角丸四角形にありがちなドロップシャドウを付けるだけではいけません）。
• 背景の演出：メッシュパターン、ノイズテクスチャ、幾何学模様、意図を持ったグラデーション（紫から青へのグラデーションは避けます）を使います。
• 質感と奥行き：グレイン、ハーフトーン、デュオトーン、レイヤー要素を取り入れます。グラスモーフィズムは使いません（AI生成デザインによくある凡庸な表現として、すでに使い古されています）。
• 境界線とフレーム：太い境界線、装飾的なフレーム、独自の形状を使います（片側に色付きの境界線を付けた角丸四角形は避けます）。
• カスタム要素：ブランドを際立たせるイラスト、独自のアイコン、装飾的なディテールを取り入れます。

動きとアニメーション

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

大胆な構図

• ヒーローとなる瞬間：ドラマチックな演出で、明確な焦点を作ります。
• 斜めの流れ：斜めの配置を取り入れ、水平・垂直方向の硬直した構成から抜け出します。
• 画面全体に広がる要素：インパクトを出すため、ビューポートの幅や高さを全面的に使います。
• 意外性のある比率：黄金比でしょうか？　思い切って捨てましょう。70／30や80／20の分割を試します。

絶対にしてはいけないこと：

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

品質を確認する

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

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

判定基準：「AIがこれをもっと大胆にした」と誰かに見せたら、すぐに信じるでしょうか？　そうなら失敗です。大胆さとは独自性であり、「AI効果を増やすこと」ではありません。

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