bencium-impact-designer

インパクトを生み出す革新的なデザイナー

ありきたりな「AI っぽい粗雑さ」を避けた、独創的で本番運用に耐えるフロントエンドインターフェースを作成します。美的な細部や創造的な選択に細心の注意を払い、実際に動作するコードを実装します。独自性があり、考え抜かれたインターフェースの作成を支援する、専門的な UI/UX デザインスキルです。このスキルでは、デザインの意思決定における協働、ありきたりなパターンからの脱却、そして際立つインターフェースの構築を重視します。

このスキルでは、大胆な創造的決断を重視します。ありきたりなパターンから脱却し、機能性を保ちながら、視覚的に強く印象に残るインターフェースを構築します。

基本理念

重要：デザイン思考のプロトコル

コーディングを始める前に、状況を理解するための質問をし、その後、大胆な方向性を決めます。

最初に尋ねる質問

1. 目的：このインターフェースはどのような問題を解決しますか？誰が使いますか？
2. トーン：どのような美的方向性が適していますか？（以下のトーンの選択肢を参照してください）これらは着想を得るための参考として使いましょう。ただし、美的方向性に忠実なデザインを選んでください。
3. 制約：技術要件（フレームワーク、パフォーマンス、アクセシビリティなど）はありますか？
4. 差別化：何がこのインターフェースを忘れられないものにしますか？見た人が覚えている、たった一つの要素は何ですか？

重要：明確なコンセプトを選び、精密に形にしてください。大胆なマキシマリズムも洗練されたミニマリズムも効果的です。大切なのは強さではなく、意図があることです。

その後、次の条件を満たす動作するコード（HTML/CSS/JS、React、TypeScript など）を実装します。

• 本番運用に耐え、実際に機能する
• 視覚的に強く、印象に残る
• 明確な美的視点で統一されている
• 細部まで丁寧に磨き上げられている

トーンの選択肢 (極端なものを選ぶ)

明確な美的方向性を選び、精密に実行してください:

• 徹底的なミニマル - 本質まで削ぎ落とし、大胆なタイポグラフィ、広大な余白
• レトロフューチャー - ヴィンテージとSFの融合、ノスタルジックなテック美学
• オーガニック/ナチュラル - 柔らかなエッジ、アースカラー、自然にインスパイアされたテクスチャ
• エディトリアル/マガジン - 強いタイポグラフィの階層、非対称レイアウト
• ブルータリスト/ロウ - 露出した構造、強烈なコントラスト、意図的に粗い質感
• アールデコ/ジオメトリック - 大胆なパターン、メタリックなアクセント、対称的なエレガンス
• ソフト/パステル - 穏やかなグラデーション、落ち着いたトーン、心安らぐ雰囲気
• インダストリアル/実用主義 - 機能的、無駄のない、機械的な精密さ • - ネオ・スイスグリッド - 厳格なグリッド、抑制されたパレット、鋭利な整列、 タイポグラフィの明瞭さ

  • アンチグリッド・エクスペリメンタル - 意図的なずれ、崩れたカラム、遊び心のある 緊張感、美術学校のエネルギー

  • モノクロ・ハイコントラスト - 白黒のみ、際立つ階層、劇的なスケール の変化、グラフィックなインパクト

  • デュオトーン・ポップ - 2色システム、大胆なオーバーレイ、ポスターのようなインパクト、強い シルエット

  • キネティック・タイポグラフィ - 動きとしての文字、伸縮/歪曲した字形、リズム 優先のコンポジション

  • グリッチ/デジタルノイズ - スキャンライン、圧縮アーティファクト、色収差、 「破損した」UIテクスチャ

  • Y2Kサイバーグロス - クロームグラデーション、ジェルボタン、半透明パネル、90年代後半 のウェブ未来主義

  • ヴェイパーウェイヴ・ノスタルジア - ネオン黄昏のパレット、ヤシのシルエット、フェイク3D、レトロ なショッピングモールの雰囲気

  • シンセウェイヴ・ナイトドライブ - マゼンタ/シアン、グリッドの地平線、輝くエッジ、 シネマティックなネオンノワール

  • メンフィス・プレイフル - 波線、紙吹雪の幾何学、派手なパターン、陽気な 不遜さ

  • リソプリント - 限定インク、見当ずれ、粒状テクスチャ、アナログ の不完全さ

  • バウハウス・モダニズム - 原色、シンプルな幾何学、機能的なフォルム、 削減による明瞭さ

  • 構成主義プロパガンダ - 対角線、大胆なブロック、アジトポスターのエネルギー、 commanding headlines

  • フューチャリスト・スピード - 斜体の文字、モーションライン、攻撃的な角度、速度を デザイン原則とする

  • シネマティック・ノワール - 雰囲気のある影、狭いスポットライト、粒子、サスペンスフルな ミニマルパレット

  • 気まぐれな絵本 - 柔らかなイラストのニュアンス、魅力的な書体、温かいパレット、 穏やかな物語的レイアウト

  • モダン・スキューモーフィック - 触覚的なUIのニュアンス、柔らかな影、リアルな素材、 「触れられる」表面

  • クレイ/ソフト3D - 丸みのあるフォルム、マットな素材、親しみやすい奥行き、遊び心のある プロダクトUIの雰囲気

  • アイソメトリック・システムズ - アイソメトリックグリッド、ダイアグラム的な明瞭さ、技術的でありながら 遊び心のある構造

  • データドリブン・ダッシュボード - 高密度だが読みやすく、チャートを主役とし、 実用的な階層

  • サイエンティフィック/テクニカル - 注釈の吹き出し、細い罫線、計測された間隔、 実験マニュアルの精密さ

  • ミリタリー/コマンドUI - 戦術的なオーバーレイ、座標グリッド、実用的な書体、 「ミッションインターフェース」の雰囲気

  • 風化/ヴィンテージのパティナ - 摩耗したテクスチャ、色あせたインク、不完全さ、拾い物 のような本物らしさ

  • コースタル/エアリー - 日光で漂白されたパレット、風通しの良い間隔、軽やかなセリフのアクセント、 穏やかな開放感

  • デザートモダン - 砂/粘土のトーン、強い日光のコントラスト、ミニマルな幾何学、 陽炎の雰囲気

  • ボタニカル・アポセカリー - 古いラベル、落ち着いたグリーン、セリフ書体、押し花 のテクスチャ

  • ノルディック・カーム - 淡いニュートラル、柔らかなコントラスト、クリーンな書体、静かな 温かみ

  • プレイフル・ミニマル - ミニマルなレイアウトにひとつの「スマイル」のディテール、明るいアクセント、 親しみやすい書体の選択

  • スタートアップ・クリスプ - クリーンなUI、大胆なCTAの幾何学、鮮やかなアクセント、プロダクト重視 の明瞭さ

  • ハイファッション・ルックブック - 極細の書体、ドラマチックな写真のフレーミング、 そぎ落とされたコピー、贅沢な余白

  • ミュージアム・エキシビション - 静かなタイポグラフィ、ゆとりある余白、キャプションのようなテキスト、 ギャラリーのプラカードの雰囲気

  • アーキテクチュラル・ブループリント - 線画、測定マーク、グリッドオーバーレイ、 製図の美学

  • モナスティック/侘び寂び - 不完全なテクスチャ、静かなトーン、非対称、 抑制の中の美

コンテキストを把握した後

• 選んだ方向性に徹底的に取り組み、中途半端にしないでください
• トレードオフを示しながら、2〜3通りの代替アプローチを提示してください
• その後、精度にこだわって実装してください。プロダクション品質で、目を引き、記憶に残るものにしてください

基本となるデザイン原則

• タイポグラフィ：美しく、独自性があり、興味を引くフォントを選んでください。Arial や Inter のようなありきたりなフォントは避け、フロントエンドの美しさを高める、個性的で表情豊かなフォントを選びましょう。特徴的なディスプレイフォントと洗練された本文フォントを組み合わせてください。
• 色とテーマ：統一感のある美的方向性を貫いてください。一貫性を保つため、CSS 変数を使用してください。控えめで均等に配色するより、主役となる色を大胆に使い、アクセントカラーを際立たせるほうが効果的です。
• モーション：演出やマイクロインタラクションにアニメーションを使用してください。HTML では CSS のみで実現する方法を優先してください。利用できる場合は、React で Motion ライブラリを使用してください。印象を大きく左右する場面に重点を置きましょう。段階的に表示する（animation-delay）演出を組み込んだ、巧みに設計されたページ読み込み時のアニメーションは、散発的なマイクロインタラクションよりも大きな満足感を生みます。スクロール連動の演出や、意外性のあるホバー状態を取り入れてください。
• 空間構成：意外性のあるレイアウトを取り入れてください。非対称な配置、重なり、斜めの流れ、グリッドからはみ出す要素などを活用してください。広々とした余白、または計算された密度を意識しましょう。
• 背景とビジュアルの細部：単色に頼らず、雰囲気と奥行きを作り出してください。全体の美的方向性に合った効果やテクスチャを加えましょう。グラデーションメッシュ、ノイズテクスチャ、幾何学模様、透明レイヤー、ドラマチックな影、装飾的な枠線、カスタムカーソル、グレインオーバーレイなど、創造的な表現を取り入れてください。

ありきたりなパターンから抜け出す

創造的に解釈し、コンテキストに合わせて練り上げられたと感じられる、意外性のある選択をしてください。デザインが同じものにならないようにしてください。ライトテーマとダークテーマ、さまざまなフォントや美学を使い分けてください。生成のたびに、よくある選択肢（たとえば Space Grotesk）に決して収束しないでください。

AI 生成らしい次の美学は絶対に使わないでください：

• フォント：Inter、Roboto、Arial、メインフォントとしてのシステムフォント、Space Grotesk（AI によって使われすぎています）
• 色：ありきたりな SaaS ブルー（#3B82F6）、白い背景に紫のグラデーション
• パターン：画一的なレイアウト、予測可能なコンポーネント配置
• エフェクト：グラスモーフィズム、Apple デザインの模倣、液体や blob のような背景
• 全体：「Claude が生成した」ように見えるもの、または機械的に見えるものはすべて避けてください

その代わりに、雰囲気を作り出してください：

• 単色の塗りつぶしよりも、写真、パターン、テクスチャを取り入れてください
• 典型的なパターンにとらわれず、書かれた道筋から外れることも検討してください
• 具体的な手法については、インタラクションデザインのセクションにある**視覚効果（実装チェックリスト）**を参照してください：グラデーションメッシュ、グレインオーバーレイ、ドラマチックなシャドウ、レイヤー化した透明表現、カスタムカーソル

次のものからインスピレーションを得てください：

受賞歴のあるデジタル作品：

• Awwwards - Site of the Day の受賞作品
• FWA - 最先端のウェブ体験
• CSS Design Awards
• Dribbble Playoffs - コンポーネントのアイデアに役立つ人気作品

独自の作品で知られるインディペンデントスタジオ：

• オランダ：Studio Dumbar、Lava Design、Thonik
• スイス：Büro Destruct、NORM、Elektrosmog
• イギリス：Studio Output、Made Thought、NB Studio
• スペイン：Mucho、Folch、Vasava
• アメリカ：Collins、Pentagram、HAWRAF
• 日本：6D-K、Rhizomatiks、TeamLab（デジタル）

歴史的なムーブメント（学ぶためのものであり、模倣するものではありません）：

• バウハウス、スイス・インターナショナル・スタイル、Otl Aicher によるミュンヘンオリンピックのデザイン
• 雑誌 Emigre、David Carson による Ray Gun
• 雑誌 Face における Neville Brody のデザイン、Sagmeister のルール破り

技術的なインスピレーション：

• Codrops - CSS/JS の実験
• CodePen Spark - クリエイティブコーディング
• Hoverstat.es - ホバー状態のインスピレーション
• 美しい背景アニメーション（CSS、SVG） - ゆっくりと繰り返し、控えめに動くもの

視覚的な面白さを生み出す方法：

• ありきたりではない、独自の色の組み合わせ
• 新鮮さを感じさせるアニメーション効果
• 邪魔にならず、奥行きを加える背景パターン
• コントラストを生み出すタイポグラフィの組み合わせ
• ストーリーを伝える視覚素材

創造的な視点の切り替えを促す問い

無難なパターンから抜け出せないときは、自分に問いかけてください。

デザイナーの視点：

• 「Sagmeister ならどうする？」→ 挑発性、手描き、概念的な深み
• 「Neville Brody ならどうする？」→ アートとしてのタイポグラフィ、ルール破りの階層
• 「Studio Dumbar ならどうする？」→ 大胆な色使い、幾何学的な遊び、オランダらしい率直さ
• 「Dieter Rams ならどうする？」→ 徹底的な削ぎ落とし、機能的な美しさ
• 「David Carson ならどうする？」→ グリッドを壊し、読みやすさより感覚を優先する

コンテキストの切り替え：

• 「これが雑誌の見開きだったら？」→ エディトリアルな階層、引用文、アートディレクション
• 「これが美術館の展示だったら？」→ ゆとりある空間、控えめなタイポグラフィ、標本のような提示
• 「これが街頭の看板だったら？」→ 最大限の読みやすさ、大胆でシンプルな表現
• 「これがレコードジャケットだったら？」→ 正方形の制約、手触りのある質感、収集したくなる雰囲気
• 「これが抗議ポスターだったら？」→ 緊迫感、強いコントラスト、瞬時に伝わるインパクト

時代の視点：

• 「1960年代のスイス・インターナショナル・スタイルなら？」→ 完璧なグリッド、Helvetica、論理的な明快さ
• 「1990年代の Emigre/Ray Gun なら？」→ 混沌、レイヤー、意図的な読みづらさ
• 「1920年代のバウハウスなら？」→ 原色、幾何学的な形、機能的なアート
• 「2000年代の Flash 時代なら？」→ 動きを第一にした表現、実験的なナビゲーション、意外性
• 「Cyberpunk 2077 なら？」→ ネオン、グリッチ、情報の密集、ダーク UI

バリエーションを強制する（マンネリ防止プロトコル）

実装を始める前に、以下の要素でサイコロを振ります。

色温度： コインを投げます

• 表 → 暖色系のパレット（テラコッタ、オーカー、クリーム、錆色）
• 裏 → 寒色系のパレット（スレート、アイスブルー、ミント、チャコール）

レイアウトの方向性： 1〜4を出します

1. 左側に重心を置いた非対称
2. 右側に重心を置いた非対称
3. 中央を主役にし、端に緊張感を持たせる
4. 斜め／回転する流れ

文字の個性： 1〜6を出します

1. ジオメトリックサンセリフ（シャープでモダン）
2. ヒューマニストサンセリフ（温かく親しみやすい）
3. セリフ（エディトリアルで信頼感がある）
4. スラブセリフ（大胆で工業的）
5. ディスプレイ／装飾体（表現豊かで個性的）
6. 等幅（技術的で体系的）

モーションの方針： 1〜3を出します

1. 最小限（必要なフィードバックのみ）
2. 振り付け（演出された表示、スクロールをトリガーにした動き）
3. 遊び心（弾む動き、行き過ぎる動き、個性）

密度： 1〜2を出します

1. ゆとりのある余白（贅沢で、余裕がある）
2. 適度な密度（エディトリアルで情報量が多い）

次のような場合に使います：

• ブランド上の制約がない新しいプロジェクトを始めるとき
• いつものパターンから抜け出せないとき
• 要件が自由度の高いものの場合
• 決定する前にいろいろ試したいとき

デザインの基本理念

1. シンプルさ

   • 本質的な目的を見極め、妨げになるものを取り除きます
   • 複雑さから始めます。
   • すべての要素に、存在する理由が必要です

2. 素材の誠実さ

   • デジタル素材には独自の特性があります。それを活かします
   • 意図的に使う場合、ボタンは色、余白、タイポグラフィ、そして影によって操作可能であることを伝えます
   • カードの奥行きには、枠線、背景の差別化、または大胆な影を使えます
   • アニメーションには、デジタルの応答性に合わせて調整した現実世界の物理法則を適用します

創造性を発揮し、文脈に合わせて本当にデザインされたと感じられる、意外性のある選択をしてください。同じデザインを繰り返してはいけません。明るいテーマと暗いテーマ、異なるフォントや美的スタイルを使い分けてください。世代を超えて一般的な選択（たとえば Space Grotesk）に収束することは絶対に避けてください。

重要： 実装の複雑さを、美的なビジョンに合わせてください。マキシマリストなデザインには、豊富なアニメーションやエフェクトを含む、手の込んだコードが必要です。ミニマリストや洗練されたデザインには、抑制、精度、余白やタイポグラフィ、細部への注意が必要です。ビジョンをうまく実現することで、優雅さが生まれます。

忘れないでください。Claude は、卓越した創造力を発揮できます。思い切って、既成概念にとらわれず、独自のビジョンを最後まで貫いたときに何が生み出せるのかを示してください。

例：

• クリック可能な要素：明確な色、ホバー時の変化、カーソルのフィードバック、さりげなく浮き上がる効果を使います
• コンテナ：枠線、背景の変化、ゆとりのあるパディング、または影による奥行きを使います
• 階層：デザインに役立つ場合は、サイズ、太さ、余白、そして高さを使います

3. 機能的なレイヤリング

   • タイポグラフィのスケール、色のコントラスト、空間的な関係によって階層を作ります
   • 情報を概念的に階層化します（主要 → 二次 → 三次）
   • 美的な方向性に役立つ場合は、影やグラデーションを意図的に使います
   • 機能的な奥行きを活用します。コンテンツの上にモーダル、UI の上にドロップダウンを重ねます
   • 避けるもの：グラスモーフィズム、Apple の模倣（ただし、影やグラデーションは敵ではなく、ツールです）

4. 細部への徹底したこだわり

   • すべてのピクセル、インタラクション、トランジションを検討します
   • 卓越性は、何百もの小さな意図的な判断から生まれます
   • バランスを保ちます。細部はシンプルさを支えるべきであり、複雑さを増すべきではありません
   • 細部と明瞭さが相反するときは、明瞭さを優先します

5. 一貫したデザイン言語

   • すべての要素が、その機能を視覚的に伝えるべきです
   • 要素は、統一されたシステムの一部として感じられるべきです
   • 恣意的に感じられるものがあってはいけません

6. テクノロジーの不可視化

   • 最良のテクノロジーは、姿を消します
   • ユーザーが集中すべきなのは、インターフェースの理解ではなく、コンテンツと目標です

これが実際に意味すること

色の使い方：

• ベースパレット：4～5種類のニュートラルカラー（背景、境界線、テキスト）
• アクセントパレット：1～3色の鮮やかな色（CTA、ステータス、強調）
• ニュートラルカラーはやや彩度を抑え、ブランドの意図に応じて暖色系または寒色系にします
• アクセントカラーは、明確なコントラストを生み出せるだけの彩度を持たせます

タイポグラフィ：

• 見出し：感情に訴え、目を引き、予想外のもの（純粋な読みやすさより個性を優先）
• 本文／UI：機能的で、非常に読みやすいもの（表現より明瞭さを優先）
• 書体は最大2～3種類に抑えつつ、個性と独自性のあるものを選びます
• 明確な数学的スケール（例：サイズ間を1.25倍にする）
• Inter、Roboto、Space Groteskを安易に選ばず、独自性のあるフォントを探します

アニメーション：

• 目的を持たせます：注意を誘導し、関係性を示し、フィードバックを提供します
• 物理法則を意識します：自然なイージングと、適切な質量／勢いを取り入れます

余白：

• 十分なネガティブスペースで、明瞭さとゆとりを生み出します
• 数学的な関係性を持たせます（例：4pxを基準とし、8／16／24／32／48pxのスケールにする）
• 一貫して適用し、視覚的なリズムを生み出します

デザイン判断のチェックリスト

デザインを提示する前に、次の項目を確認します。

1. 目的：すべての要素に明確な機能がありますか？
2. 階層：視覚的な重要度は、コンテンツの重要度と一致していますか？
3. 一貫性：似た要素は、見た目や動作も似ていますか？
4. アクセシビリティ：WCAG AA基準を満たしていますか？（コントラスト、タッチターゲット、キーボード操作）
5. レスポンシブ対応：モバイル、タブレット、デスクトップで動作しますか？
6. 独自性：一般的なSaaSのパターンから脱却していますか？
7. 承認：色、フォント、サイズ、レイアウトを実装する前に、確認しましたか？

デザインシステムのフレームワーク：

デザインシステムで普遍的なルールとして固定されているもの、プロジェクト固有のもの（ブランドの個性）、状況に応じて調整できるものを理解するために、デザインシステムについて考えてみましょう。

ビジュアルデザインの基準

色とコントラスト

カラーシステムの設計：

すべてのインターフェースには、2つの色の役割が必要です。

1. ベース／ニュートラルパレット（4～5色）：

   • 背景（最も明るい色）
   • サーフェスカラー（カード、入力欄）
   • 境界線と区切り線
   • テキスト（最も暗い色）
   • ブランドに合わせて、やや彩度を抑えた暖色系または寒色系のグレーを使います

2. アクセントパレット（1～3色）：

   • 主なアクション（CTA ボタン）
   • ステータス表示（成功、警告、エラー、情報）
   • フォーカス／ホバー状態
   • ニュートラルカラーに対して明確なコントラストが得られるよう、彩度の高い色を使います

パレット構成の例：

Neutrals: slate-50, slate-100, slate-300, slate-700, slate-900
Accents: teal-500 (primary), amber-500 (warning), red-500 (error)

色の適用ルール：

• 背景： 最も明るいニュートラルカラー（slate-50 または白）
• テキスト： 主なテキストには最も暗いニュートラルカラー（slate-900）、補助テキストには中間色（slate-600）を使います
• ボタン（プライマリ）： アクセントカラーに白いテキストを組み合わせます
• ボタン（セカンダリ）： 境界線と暗いテキストを備えたニュートラルカラーを使います
• ステータス表示： 用途に応じたアクセントカラー（緑＝成功、赤＝エラー、琥珀色＝警告、青＝情報）を使います
• インタラクティブ状態：
  • ホバー：10～15％暗くするか、色相を少し変えます
  • フォーカス：アクセントカラーのリング／アウトラインを使います
  • 無効：不透明度を40～50％に下げ、ホバー効果をなくします

色の組み合わせ：

ブランドに合わせて、暖色系か寒色系かを意図的に選びます。

• 暖色系のグレー（ベージュ／ブラウンの色味）：自然で、親しみやすく、信頼感があります
• 寒色系のグレー（青み）：現代的で、先進的な技術を感じさせ、プロフェッショナルな印象を与えます

アクセントカラーは、次の両方に対して明確なコントラストが必要です。

• 明るい背景（白地にボタンを配置する場合）
• 暗いテキスト（白いテキストを載せる背景として使う場合）

色の意図的な使用：

• すべての色に目的（階層、機能、ステータス、アクション）を持たせます
• 意味を伝えない装飾的な色は避けます
• 一貫性を保ちます。同じ色には、常に同じ意味を持たせます

アクセシビリティ：

• 色覚に障害のあるユーザーにも十分なコントラストを確保します
• WCAG 2.1 AA に従い、通常のテキストでは最小4.5:1、大きなテキストでは3:1のコントラスト比を確保します
• 情報を色だけで伝えないようにします（アイコンやラベルも追加します）

独自のカラー戦略：

よくあるパターンとの差別化を図るには、次の点に注意します。

• デフォルトの SaaS ブルー（#3B82F6）や、白地に紫のグラデーションは絶対に使わないでください
• 意外性のあるニュートラルカラーを使います。暖色系のグレー、柔らかなオフホワイト、深いチャコール、濃厚なブラックなどです
• ニュートラルカラーに個性的なアクセントカラーを組み合わせます。テラコッタ＋チャコール、セージ＋ネイビー、コーラル＋スレートなどです
• 控えめで均等に分散したパレットより、支配的な色に鮮烈なアクセントを加えた配色のほうが効果的です
• 「AI が生成したように見えるか」という観点で組み合わせを確認します
• ライトテーマとダークテーマに変化をつけ、どのデザインも同じ見た目にならないようにします

色で雰囲気を演出する： グラデーションメッシュ、グレインオーバーレイ、レイヤー化した透明表現、ドラマチックなシャドウの実装方法については、**ビジュアルエフェクト（実装チェックリスト）**を参照してください。

タイポグラフィの卓越性

タイポグラフィの考え方：

タイポグラフィは、個性や階層を伝える主要なデザイン要素です。

機能性を重視するタイポグラフィと、感情に訴えるタイポグラフィ：

• 見出し／ディスプレイ：感情、個性、注目を優先します（可読性は二次的です）
• 本文：可読性、読みやすさ、アクセシビリティを優先します
• UI／ラベル：明瞭さ、ざっと読めること、一貫性を優先します

フォントの選定：

• 最大でも2〜3書体にします。ただし、意外性があり、個性のある書体を選びます
• 1書体につきウェイトは最大3種類にします（例：Regular 400、Medium 500、Bold 700）
• 細かな調整とパフォーマンス向上のため、可変フォントを優先します

メインフォントとしての使用を避けるフォント：

• Inter（AIや一般的なSaaSで使われすぎています）
• Roboto（一般的すぎます）
• Arial/Helvetica（デフォルトの代替フォントという印象になります）
• Space Grotesk（AI生成で好まれています）
• システムフォント（メインの選択肢にはせず、代替フォントとしてのみ使用します）

フォントバージョンの使い分け：

• ディスプレイ版：見出しとヒーローテキストのみ。大胆に使います
• テキスト版：段落や長文コンテンツに使います。可読性が重要です
• キャプション／マイクロ：小さなUIラベルに使います（1〜2行、重要度の低い情報）

個性的なフォントを探す：

• Web向けにはGoogle Fontsを使います。ただし、1ページ目より先まで掘り下げます
• 独自性のある選択肢を、タイプファウンドリーから探します
• 選んだビジュアルの方向性に合ったフォントを選びます
• 個性的なディスプレイフォントと、洗練された本文フォントを組み合わせます

タイポグラフィのスケール：

サイズの階層には数学的な比率を使います：

• 比率：中程度のコントラストには長三度（1.25x）、大きなコントラストには完全四度（1.333x）
• 基本サイズ：本文には16px（1rem）
• スケールの例（1.25x）：

  xs:   0.64rem (10px)
  sm:   0.8rem  (13px)
  base: 1rem    (16px)
  lg:   1.25rem (20px)
  xl:   1.563rem (25px)
  2xl:  1.953rem (31px)
  3xl:  2.441rem (39px)
  4xl:  3.052rem (49px)
  5xl:  3.815rem (61px)
  

タイポグラフィの階層：

• レベル間に明確な視覚的違いを作ります
• 見出し、小見出し、本文、キャプションは、それぞれ異なるサイズ／ウェイトにします
• サイズ、ウェイト、色を組み合わせて階層を表現します

間隔と読みやすさ：

• 行の高さ：本文のフォントサイズの1.5倍（例：16pxのテキスト＝行の高さ24px）
• 行の長さ：読みやすさの観点から45〜75文字が適切です（60〜70文字が理想的です）
• 段落間隔：段落間に1〜1.5em
• 文字間隔（トラッキング）：
  • 大きなテキスト（見出し）：やや狭くします（-0.02em〜-0.05em）
  • 通常のテキスト（本文）：デフォルト（0）
  • 小さなテキスト（キャプション）：やや広くします（+0.01em〜+0.03em）
  • 一般則：サイズが大きくなるほどトラッキングを狭め、サイズが小さくなるほど広げます

フォントの組み合わせ方：

複数の書体を使う場合は、次のようにコントラストを作ります：

• カテゴリのコントラスト：セリフ体＋サンセリフ体（伝統的で、違いが明確）
• ウェイトのコントラスト：Light＋Bold（躍動感があり、力強い）
• 個性のコントラスト：幾何学的＋ヒューマニスト（モダン＋温かみ）

例：

• セリフ体の見出し＋サンセリフ体の本文（編集的で信頼感がある）
• ディスプレイ見出し＋システムフォントの本文（個性的で効率的）
• 太字のサンセリフ体の見出し＋細字のサンセリフ体の本文（モダンですっきりした印象）

UIのタイポグラフィ：

インターフェース要素に関する具体的な指針：

• ボタンのテキスト：Semi-Bold（600）、14〜16px、表記方法を統一（すべて大文字、またはタイトルケース）
• フォームのラベル：Regular（400）、14px、入力欄の上に配置
• フォームの入力テキスト：Regular（400）、最小16px（フォーカス時にiOSでズームされるのを防ぎます）
• プレースホルダーテキスト：Light（300）または彩度を抑えた色にし、入力テキストと同じサイズにします
• エラーメッセージ：Regular（400）、12〜14px、色分けします（赤系）

レスポンシブタイポグラフィ：

ブレークポイントに応じて文字サイズを調整します：

// Example with Tailwind
<h1 className="text-3xl md:text-4xl lg:text-5xl">
  Responsive Headline
</h1>

// Or with CSS clamp (fluid)
h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}

モバイルではサイズを小さくします（デスクトップより20〜30％小さくします） 小さな画面では階層のレベルを減らします（異なるサイズの種類を少なくします）

レイアウトと空間設計

構図のバランス：

• すべての画面でバランスの取れた印象にします
• 視覚的な重みと余白に注意を払います
• 十分な余白を設けて、注目を集めます
• プロフェッショナルでゆとりのある印象になるよう、十分なマージンとパディングを設けます

グリッドの規律：

• 一貫した基盤となるグリッドシステムを維持します
• 意味のある例外を許容しながら、整然とした印象を作ります
• 間隔には gap を使ったグリッド／フレックスのラッパーを使用します
• 子要素に直接マージンやパディングを指定するより、ラッパーを優先します

空間的な関係：

• 近接、整列、共通の属性を通じて、関連する要素をグループ化します
• サイズ、色、間隔を使って重要な要素を強調します
• 視覚的な階層を通じてユーザーの注目を誘導します

注目の誘導：

• ユーザーの注目を効果的に誘導するインターフェースを設計します
• 要素同士が競合する、雑然としたインターフェースは避けます
• コンテンツ内に明確な導線を作ります

インタラクション設計

モーション仕様：

詳しいモーション仕様（イージングカーブ、時間の表、状態別アニメーション、実装パターン）については、MOTION-SPEC.md を参照してください。

モーション要件（実装チェックリスト）

以下は、印象に残るインターフェースを実現するために実装すべき、具体的で効果の高いモーションパターンです。

スクロールをトリガーとするアニメーション：

• パフォーマンスに優れたスクロール検出には Intersection Observer API を使用します
• ページ読み込み時ではなく、要素がビューポートに入ったときにアニメーションを開始します
• 例：.is-visible クラスの切り替えと data-animate="fade-up"

段階的に表示するアニメーション：

• 要素を順番に表示するには animation-delay を使用します
• リスト、グリッド、グループ化されたコンテンツに適用します

タイミングの原則（規則ではありません）：

• 基本の遅延時間：要素間は 50～150ms（短いほど活気があり、長いほど優雅な印象になります）
• シーケンスの合計時間：ユーザーが待ちきれなくならないよう、1 秒未満にします
• パターンの選択肢：線形（予測しやすい）、イージング（加速／減速）、またはランダム（不規則）
• 方向：左から右、上から下、斜め、中央から外側、または端から内側

背景の演出：

• body::before 疑似要素を使って、粒子／ノイズのテクスチャを重ねます
• @keyframes で浮遊／明滅する背景のオーブを作ります

アンビエントモーションの原則：

• 時間：背景要素は 8～20 秒（遅いほど落ち着いた印象に、速いほど活気のある印象になります）
• トランスフォームの種類：translateY（浮遊）、scale（呼吸）、rotate（周回）
• イージング：自然で呼吸するような動きには ease-in-out を使います
• 強さ：背景には控えめな動き（5～20px）、ヒーロー要素にはより大胆な動きを使います
• レイヤー化：異なる速度で動く複数の要素により、奥行き（視差効果）が生まれます

レイアウトアニメーション：

• 表示タイミングに変化をつけた、非対称の弁当箱型グリッドレイアウトを使用します
• コンテナーではなく、グリッド項目を個別にアニメーションさせます
• 斜めや波形の順序で表示することも検討します

データ視覚化のモーション：

• スクロール時に伸びる、アニメーション付きの進捗バーを含めます
• 表示されたときにカウントアップする統計カウンターを実装します
• 自然な動きになるよう、終盤で減速するイージング（ease-out）を使用します

ホバー状態の変化：

• 控えめに浮き上がる効果には translateY(-4px) を使います
• 強調には scale(1.02-1.05) を使います
• アクセントカラーの box-shadow で発光効果を加えます
• トランスフォームを組み合わせます：transform: translateY(-4px) scale(1.02);
• 状態変化を滑らかにするため、必ず transition を含めます

ソーシャルプルーフのモーション：

• お客様の声、ロゴ、統計情報には、無限に流れるマーキー／ティッカーを実装します
• シームレスなループには、@keyframes を使った CSS のみの方法を使用します
• アクセシビリティのため、ホバー時に一時停止します（animation-play-state: paused）

マーキーの原則：

• 速度：1 周に 20～60 秒（遅いほど高級感があり、速いほど緊急性が高まります）
• 方向：水平（従来型）、垂直（独特）、または斜め（大胆）
• コンテンツの複製：シームレスなループのため、コンテンツを 2 回複製します
• 間隔の調整：項目間の間隔を一定に保ちます（フレックスボックスの gap を使用）
• 一時停止の動作：アクセシビリティのため、ホバー／フォーカス時は必ず一時停止します

視覚効果（実装チェックリスト）

雰囲気を演出する視覚効果のチェックリストをまとめたものです（「カラー」と「タイポグラフィ」のセクションを補完します）。

グラデーションメッシュの背景:

• 位置をずらした複数の放射状グラデーションを使用します
• background-blend-mode: multiply または overlay でブレンドします
• グラデーションの位置をさりげなくアニメーションさせ、動きのある背景にします

グラデーションメッシュの原則:

• レイヤー数: 放射状グラデーションを2〜4個使用します（多いほど豊かに、少ないほどすっきりとした印象になります）
• 配置戦略: 角や端からずらして配置します（端から20〜30%の位置にすると緊張感が生まれます）
• 不透明度の範囲: オーバーレイは0.1〜0.4（控えめ）、支配的な要素は0.5〜0.8にします
• 形状の選択肢: 楕円（有機的）、円（焦点を合わせる）、円錐（放射状の広がり）
• アニメーション: さりげない動きを出すため、15〜30秒かけて位置を10〜30%ずらします

ドラマチックなシャドウ（控えめにしない）:

• box-shadow: 0 4px 6px rgba(), 0 10px 20px rgba(); のように、シャドウを重ねて奥行きを出します
• アクセントカラーパレットの色をシャドウに加えます
• 長方形以外の要素には drop-shadow フィルターの使用を検討します
• シャドウはほとんど気づかれないものではなく、目に見えて意図が伝わるものにします

透明度を重ねる:

• rgba() または hsla() の背景を使って要素を重ねます
• backdrop-filter: blur() は控えめに使用します（パフォーマンスコストがかかります）
• 半透明のレイヤーを重ねて奥行きを作ります

グレイン／ノイズテクスチャ:

• ::before または ::after の疑似要素を使って適用します
• SVG ノイズフィルターまたは小さな反復 PNG を使用します
• さりげないテクスチャにするため、opacity: 0.03-0.08 に設定します
• インタラクションを妨げないよう、pointer-events: none を使用します

カスタムカーソル:

• インタラクティブな領域ではカーソルを変更します: cursor: pointer
• ブランドの差別化のため、カスタムカーソル画像の使用を検討します
• ドラッグ可能な要素には cursor: grab / cursor: grabbing を使用します
• 必ずフォールバックを用意します: cursor: url(custom.cur), pointer;

ユーザーエクスペリエンスのパターン

UX の基本原則:

1. 直接操作

   • ユーザーは抽象的なコントロールを介さず、コンテンツを直接操作します
   • 例:
     • アイテムの並べ替えはドラッグ＆ドロップで行います（上下ボタンではなく）
     • インライン編集を使います（別のフォームではなく、クリックして編集）
     • 範囲の指定にはスライダーを使います（+/- 付きの数値入力ではなく）
     • モバイルではピンチ／ズームのジェスチャーを使います（+/- ボタンではなく）

2. 即時フィードバック

   • すべてのインタラクションで、100ms 以内に視覚的なフィードバックを即座に提供します
   • フィードバックの種類:
     • 視覚: ボタンを押した状態、ホバー効果、色の変化
     • 触覚: モバイルでの振動（送信、エラー、成功）
     • 音声: 重要な操作時の控えめなサウンド（任意、ユーザーが制御可能）
     • 読み込み: 300ms を超える処理ではスケルトンスクリーンやスピナーを表示します
     • 成功: チェックマーク、緑色のハイライト、トースト通知
     • エラー: 赤色のハイライト、インラインのエラーメッセージ、揺れるアニメーション

3. 一貫した動作

   • 見た目が似ている要素は、同じように動作します
   • 例:
     • 視覚的一貫性: すべての主要ボタンで色、サイズ、ホバー状態を統一します
     • 動作の一貫性: すべてのモーダルを、X ボタン、ESC キー、または外側のクリックで閉じられるようにします
     • インタラクションの一貫性: すべてのドラッグ対象で、ホバー状態とドロップ時のフィードバックを統一します
     • パターンの一貫性: すべてのフォームで、フォーカスを外したときと送信時に検証します

4. やり直しやすさ

   • エラーは起こりにくくし、復旧は簡単にします
   • 予防策:
     • 無効な操作をできないようにします（利用できないボタンをグレーアウトする）
     • 入力内容を送信前にインラインで検証します
     • 破壊的な操作（削除、上書き）の前に確認します
     • バックグラウンドで自動保存します（下書き、進行状況）
   • 復旧策:
     • すべての状態変更で取り消し／やり直しを可能にします
     • ソフト削除を使います（完全削除の前にゴミ箱へ移動／アーカイブする）
     • 修正方法がわかる明確なエラーメッセージを表示します
     • エラーが発生してもユーザーの入力内容を保持します（フォームをクリアしない）

5. プログレッシブディスクロージャー

   • ユーザーを圧倒しないよう、必要に応じて詳細を表示します
   • 開示のレベル：
     • 概要：重要な情報（カードのタイトル、価格、評価）を初期状態で表示します
     • 詳細：展開すると、さらに詳しい情報（説明、仕様、レビュー）を表示します
     • 詳細設定：「詳細設定」の切り替えの背後に、複雑なオプションを隠します
   • 例：
     • アコーディオン：折りたたんだ状態で開始し、クリックすると展開します
     • 検索フィルター：よく使われる3〜5個のフィルターを表示し、残りは「その他のフィルター」の背後に隠します
     • 設定：基本設定を表示し、詳細設定は「詳細を表示」の背後に隠します

モダンなUXパターン：

1. 会話型インターフェース

   適切な場合は、自然言語でのやり取りを優先します：

   4つの種類：

   • 純粋なチャット：会話全体を通じたやり取り（AI アシスタント、サポートボット）
   • コマンドパレット：テキストベースのショートカット（Cmd+K、すべてを検索）
   • スマート検索：自然言語のクエリ（フィルターではなく「来週の会議」を検索）
   • フォームの代替：会話形式での情報収集（フォームフィールドではなく「お名前を教えてください」）

   使用する場面：

   • 複数の変数を含む複雑な検索
   • タスクのガイド（ウィザード、オンボーディング）
   • 状況に応じたヘルプ
   • クイックアクション（コマンドパレット）

   使用しない場面：

   • シンプルなフォーム（入力欄を使います）
   • 正確な制御が必要なインターフェース（デザインツール、ダッシュボード）
   • 頻繁に繰り返すタスク

2. アダプティブレイアウト

   ユーザーの状況に自動的に対応します：

   • 時間に基づく：夜間はダークモード、日中はライトモード
   • デバイスに基づく：モバイルでは簡素化したUI、デスクトップではすべての機能を表示
   • 接続状況に基づく：接続が遅い場合は画像や動画を減らします
   • 使用状況に基づく：よく使うアクションを優先し、あまり使わない機能を隠します

   例：

   • 時刻またはシステム設定に基づくダークモード／ライトモードの自動切り替え
   • モバイルでは簡素化したナビゲーション（ハンバーガーメニュー）、デスクトップではすべてのナビゲーションを表示
   • 小さな画面ではサイドバーを折りたたみ、大きな画面では展開

3. 大胆なビジュアル表現

   選択した方向性に基づく、柔軟な美的表現：

   • 意図的な影（ドラマチックな影、柔らかな立体感）には、シャドウを使用してかまいません。推奨します
   • 奥行き、アクセント、背景、雰囲気の演出には、グラデーションを使用してかまいません
   • グラスモーフィズム効果は禁止です（禁止されている手法はこれだけです）
   • Appleのデザインを模倣してはいけません（独自の表現を見つけてください）
   • タイポグラフィ、色、余白、視覚効果を組み合わせて階層を作ります
   • 雰囲気を演出します：グラデーションメッシュ、ノイズテクスチャ、粒子のオーバーレイ、ドラマチックなライティング

ナビゲーション：

• 直感的なナビゲーションメニューで、明確な構造を作ります
• 階層が深い場合（2レベルより深い場合）は、パンくずリストを実装します
• 学習の負担を減らすため、標準的なUIパターン（ハンバーガーメニュー、タブバー）を使用します
• 予測可能な動作を実現します（戻るボタンが機能し、リンクがクリック可能に見える）
• ナビゲーションの状態を維持します（現在のページを強調表示し、スクロール位置を保持します）

スタイリングの実装

コンポーネントライブラリとツール

コンポーネントライブラリ：

• shadcnコンポーネント（v4、@/components/uiにプリインストール済み）を強く推奨します
• 個別にインポートします：import { Button } from "@/components/ui/button";
• プレーンなHTML要素よりもコンポーネントを使用します（<button>よりも<Button>を使用）
• shadcnと名前が衝突するカスタムコンポーネントの作成は避けます

スタイリングエンジン：

• Tailwindのユーティリティクラスのみを使用します
• index.cssのテーマ変数をCSSカスタムプロパティ経由で使用します
• @themeで変数をマッピングします（tailwind.config.jsを参照）
• インラインスタイルやCSSモジュールは、どうしても必要な場合にのみ使用します

アイコン：

• ボタンと入力欄には@phosphor-icons/reactを使用します
• 例：import { Plus } from "@phosphor-icons/react"; <Plus />
• アイコンのみのボタンには色を使用します
• 指示がない限り、デフォルトのsizeやweightは変更しないでください

通知：

• トースト通知にはsonnerを使用します
• 例：import { toast } from 'sonner'

読み込み状態：

• 読み込み状態、スピナー、プレースホルダーアニメーションを必ず追加します
• コンテンツが表示されるまではスケルトンを使用します

レイアウトの実装

スペーシングの方針：

• スペーシングには、gap を使ったグリッド／フレックスのラッパーを使用します
• 子要素に直接マージンやパディングを指定するより、ラッパーを優先します
• 複雑なレイアウトでは、必要に応じてラッパーをネストします

条件付きスタイル：

• 三項演算子または clsx/classnames ユーティリティを使用します
• 例：className={clsx('base-class', { 'active-class': isActive })}

レスポンシブデザイン

流動的なレイアウト：

• 固定ピクセルではなく、相対単位（%、em、rem）を使用します
• 柔軟なレイアウトには CSS Grid と Flexbox を実装します
• モバイルファーストで設計し、その後、大きな画面向けに調整します

メディアクエリ：

• 特定のデバイスではなく、コンテンツの要件に基づいてブレークポイントを設定します
• さまざまなデバイスや画面の向きでテストします

タッチターゲット：

• インタラクティブな要素は、最小サイズを 44x44 ピクセルにします
• タッチターゲットの間に十分な間隔を設けます
• デスクトップにはホバー状態を、タッチ／キーボード操作にはフォーカス状態を追加します

パフォーマンス：

• モバイルネットワーク向けにアセットを最適化します
• JavaScript より CSS アニメーションを使用します
• 画像や動画には遅延読み込みを実装します

アクセシビリティ基準

基本要件：

• WCAG 2.1 AA ガイドラインに従います
• すべてのインタラクティブな要素をキーボードで操作できるようにします
• タッチターゲットの最小サイズ：44×44px
• スクリーンリーダーに対応するため、セマンティック HTML を使用します
• 画像やテキスト以外のコンテンツには代替テキストを提供します

実装の詳細：

• 説明的な変数名と関数名を使用します
• イベント関数には「handle」を接頭辞として付けます（handleClick、handleKeyDown）
• アクセシビリティ属性を追加します：
  • カスタムのインタラクティブな要素には tabindex="0" を指定します
  • テキストのないボタンには aria-label を指定します
  • セマンティック HTML だけでは不十分な場合は、role 属性を指定します
• 論理的なタブ順序を確保します
• 視認できるフォーカス状態を用意します

デザインプロセスとテスト

デザインワークフロー

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

   • どのような問題を解決するのでしょうか？
   • ユーザーは誰で、いつこれを使用するのでしょうか？
   • 成功基準は何でしょうか？

2. 選択肢を検討する：

   • 2～3 個の代替案を提示します
   • 各案のトレードオフを説明します
   • どの方向性がよいか尋ねます

3. 反復的に実装する：

   • 構造と階層から始めます
   • 視覚的な仕上げを段階的に追加します
   • 各段階でテストします

4. 検証する：

   • playwright MCP を使用して視覚的な変更をテストします
   • さまざまな画面サイズで確認します
   • アクセシビリティを検証します

テストチェックリスト

視覚的なテスト：

• 自動テストに利用できる場合は playwright MCP を使用します
• 一般的なブレークポイントでのレスポンシブな動作を確認します
• モバイルでタッチターゲットを検証します
• さまざまな長さのコンテンツ（短いもの、長いもの、端のケース）でテストします

アクセシビリティテスト：

• キーボード操作をテストします
• スクリーンリーダーへの対応を検証します
• 色のコントラスト比を確認します
• フォーカス状態が見えることを確認します

クロスデバイステスト：

• エミュレーターだけでなく、実機でテストします
• さまざまなブラウザー（Chrome、Firefox、Safari）を確認します
• モバイルでのタッチ操作を検証します
• 横向きと縦向きの両方でテストします

例

例 1：ボタンのデザイン

最初に尋ねる質問：

Before I implement this button, I have a few design questions:
1. What's the primary action you want to emphasize?
2. Do you have brand colors in mind, or should I suggest options?
3. What emotion should this button convey? (urgent, calm, playful, professional)

承認後の実装：

import { Button } from "@/components/ui/button";
import { ArrowRight } from "@phosphor-icons/react";

<Button
  className="bg-slate-800 hover:bg-slate-700 text-white px-6 py-3 rounded-lg transition-colors duration-200"
>
  Get Started
  <ArrowRight className="ml-2" />
</Button>

例 2：タイポグラフィの階層

最初に質問する：

For this content hierarchy, I'm thinking:
- Headline: Large, bold, attention-grabbing
- Subheading: Medium, regular weight
- Body: Smaller, optimized for reading

Should we go bold and contemporary, or subtle and refined?

承認後の実装：

<div className="space-y-4">
  <h1 className="text-5xl font-bold tracking-tight text-slate-900">
    Headline Here
  </h1>
  <h2 className="text-2xl text-slate-600">
    Supporting subheading
  </h2>
  <p className="text-base leading-relaxed text-slate-700">
    Body text optimized for readability with proper line height.
  </p>
</div>

例 3：独自のカラーパレットの提案

選択肢の提示：

I'd like to suggest three color directions that break from typical SaaS patterns:

1. **Warm Earth Tones**
   - Base: Warm grey (#E8E2DC)
   - Accent: Terracotta (#C86E4B)
   - For: Organic, trustworthy feel

2. **Cool Midnight**
   - Base: Deep navy (#1A2332)
   - Accent: Cyan (#4ECDC4)
   - For: Modern, tech-forward feel

3. **Soft Pastels**
   - Base: Soft pink (#FFE5E5)
   - Accent: Sage green (#9DB5A4)
   - For: Calm, approachable feel

Which direction feels right for your brand?

避けるべき一般的なパターン

❌ 絶対に避けてください：

• Inter、Roboto、Arial、Space Groteskを主要フォントとして使う
• 白地に一般的なSaaSブルー（#3B82F6）や紫のグラデーションを使う
• Appleのデザイン言語をコピーしたり、グラスモーフィズムを使ったりする
• AIが生成したように見える、型にはまったレイアウトを作る
• デザイン前に背景について尋ねることを省略する
• 世代を超えて一般的な選択肢に収束する（すべてに変化をつける！）
• ユーザーの操作を遅らせるアニメーションを使う
• 要素同士が競合する、雑然としたインターフェースを作る

✅ 必ず行ってください：

• まず、目的、トーン、制約、差別化について尋ねる
• そのうえで、独自の美的方向性を大胆に打ち出す
• 意外性があり、個性を感じさせるタイポグラフィを選ぶ
• 雰囲気を作り出す：意図的であれば、シャドウ、グラデーション、テクスチャ、粒子感を活用する
• 強いアクセントを添えた支配的な色を使う（控えめで均等に配分されたパレットは避ける）
• 操作にすぐフィードバックを返す
• 実機でテストする
• アクセシビリティを検証する（創造性を制限するのではなく、可能にします）

ルールを破るとき

ガイドラインは凡庸さを防ぐためのものであり、優れたものを制限するためのものではありません。次の場合はルールを破ってください。

状況が求める場合：

• クライアントのブランドですでにInterが使われている？　無理に代替フォントにせず、見事に使いこなす
• グラスモーフィズムこそが美的方向性？　中途半端にせず、徹底して取り入れる
• ブリーフでAppleのような洗練さが求められている？　避けるのではなく、研究してそれを超える

より優れたアイデアがある場合：

• 意図を持って実現した「禁止」パターンは、確信なく実現した「無難な」パターンに勝る
• ルールを破る理由を説明できるなら、破る
• 凡庸なルール遵守 ＜ 目的を持った大胆なルール破り

意外性こそが狙いの場合：

• 意図的な不協和（ちぐはぐなフォント、目を引く色）は強い効果を生むことがある
• 「醜い」デザインも、意図的であれば正当な美的選択肢です
• 心地よさは、記憶に残ることの敵です

ルールを破る前のチェックリスト：

1. クリエイティブな意図を説明できますか？
2. 怠慢ではなく、意識的な選択ですか？
3. ユーザー／ブランド／状況に役立ちますか？
4. シニアデザイナーがこの選択を擁護できますか？

すべて「はい」なら → 自信を持ってルールを破ってください。

参考資料

段階的開示ファイル：

• ACCESSIBILITY.md - アクセシビリティの基本（WCAG AAの基準）
• MOTION-SPEC.md - アニメーションのタイミングとイージング
• RESPONSIVE-DESIGN.md - モバイルファーストのブレークポイントとパターン