bolder

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

必須の準備

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

---

現状を評価する

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

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

   • 汎用的な選択：システムフォント、基本的な色、標準的なレイアウト
   • 控えめなスケール：すべてが中程度のサイズで、メリハリがない
   • コントラスト不足：視覚的な強さがどれも似ている
   • 静的：動きも活気も生命感もない
   • 予測可能：意外性のない標準的なパターン
   • 平坦な階層：目立つ要素や注目を集める要素がない

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

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

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

重要：「大胆にする」とは、無秩序でけばけばしくすることではありません。個性的で、記憶に残り、自信に満ちたデザインにすることです。意図的なドラマを考え、無作為な混乱は避けてください。

大胆さは、タイポグラフィ、色、レイアウト、形状の表現、文体における確固たる選択から生まれるべきです。エフェクトは必須ではありませんが、明確な視点は必須です。

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

「大胆な」選択が、実際には単に流行を無批判に模倣しただけになっていないか確認する際は、AIっぽい凡庸さの検出のリファレンスを参照してください。 より強い個性を、アクセントボーダー、既定値の改善、背景の装飾、より個性的なコンポーネント表現によって生み出す場合は、仕上げの調整を参照してください。

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

一貫性を保ちながら存在感を高めるための方針を立てます。

• 焦点：主役となる瞬間は何ですか？（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効果を増やすこと」ではありません。

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