refactoring-ui

Refactoring UI Design System

中核となる理念

デザイン上の判断は、装飾ではなく意図に基づいて行うべきです。色、サイズ、余白、太さなど、あらゆる視覚的な選択が階層を伝え、ユーザーの注意を導きます。まず余白を多めに取り、そこから減らしていきます。まずコントラストを控えめにし、必要な箇所に加えていきます。

CSSを書く前に、どのような印象にしたいかを考えてください。金融ダッシュボードと子ども向け学習アプリでは、まったく異なる視覚表現が求められます。以下のセクションでは、戦略的な思考（個性、色彩理論、レイアウト戦略）から、実践的な作業（余白の値、影の構文、アニメーションのタイミング）へと進んでいきます。

---

デザインの考え方

デザインの個性とトーン

インターフェースには、選ぶかどうかにかかわらず、必ず個性があります。意図的に選ぶことが、しっくりくるデザインと、ありきたりなデザインの違いを生みます。

個性のスペクトラム

デザインを次の2つの軸に当てはめます。

• フォーマル ↔ カジュアル：構成がどれほど整然として真面目か、それともリラックスして親しみやすいか
• 控えめ ↔ 表現豊か：どれほど抑制的でミニマルか、それとも大胆で鮮やかか

4つの象限：

	控えめ	表現豊か
フォーマル	銀行、法律、エンタープライズ、行政機関	高級ブランド、高級小売、ファッション
カジュアル	開発者向けツール、ドキュメント、ユーティリティ	ゲーム、ソーシャルアプリ、子ども向け教育

デザイン上の要素を個性に結びつける

視覚的な要素を調整するたびに、デザインは特定の象限に近づきます。

• 角丸：2〜4px（フォーマル）→ 8〜12px（中間的）→ 16px以上（カジュアル）。個性に合わせ、常に最大値を使うのは避けます。
• フォントの選択：InterやRobotoのようなジオメトリックサンセリフ（モダン、中立的）、Source SansやNunitoのようなヒューマニストサンセリフ（親しみやすく、近づきやすい）、MerriweatherやPlayfairのようなセリフ（伝統的、権威ある）、モノスペースのアクセント（技術的、開発者向け）
• 色の彩度：低め／落ち着いた色（控えめ）→ 高め／鮮やかな色（表現豊か）。「色彩理論」のセクションを参照してください。
• 余白の密度：ゆったり（フォーマル、高級感）→ 詰まった（カジュアル、活気がある、データ量が多い）
• 影のスタイル：控えめでぼかしの効いた影（控えめ）→ オフセットを大きくした印象的な影（表現豊か）。または、ミニマル／フラットなデザインなら影を一切使わない方法もあります。
• 画像のスタイル：写真（本物らしく、真面目）→ イラスト（親しみやすく、遊び心がある）→ アイコンのみ（実用的、技術的）

ドメインごとの性格の基準

厳格なルールではなく、出発点として使ってください。具体的な製品と対象ユーザーを常に優先します。

フィンテック／銀行：フォーマルで控えめです。落ち着いたブルーやグリーン、角丸は小さめ（4～6px）、幾何学的なサンセリフ体、データを詰め込んだレイアウト、装飾は最小限にします。抑制の効いたデザインが信頼を伝えます。

医療／ヘルスケア：フォーマルで控えめです。落ち着いたブルー、グリーン、またはティールを使います。余白を広く取り、セクションを明確に区切り、タッチ領域を大きくします。アクセシビリティは譲れません。遊び心のある印象は避けましょう。患者は安心感を求めています。

Eコマース：市場セグメントによって異なります。低価格帯／大衆市場向けはカジュアルで表現豊かに（明るい色、大きなCTA、躍動感）。高級市場向けはフォーマルで表現豊かに（落ち着いた配色、セリフ体の見出し、ドラマチックな余白、控えめなCTA）。

クリエイティブツール：カジュアルで表現豊かにします。ニュートラルな背景に大胆なアクセントカラーを使います。非対称なレイアウトにし、空の状態やオンボーディングにも個性を持たせます。ツールは企業的ではなく、インスピレーションを与えるものに感じられるべきです。

教育：幼稚園から高校までの教育では、カジュアルで表現豊かにします（温かみのある色、丸みを帯びた形、親しみやすい書体、イラスト）。社会人向け／成人向けの学習では、カジュアルで控えめにします（すっきりと集中できるデザインにし、コンテンツへの注意を妨げないようにします）。

SaaSダッシュボード：カジュアルで控えめにします。ニュートラルな基本配色に、データや状態を示す機能的な色を加えます。情報量は多くても整理します。ユーザーが求めているのはデータであってデザインではないため、インターフェースの存在感は抑えます。

メディア／コンテンツ：ニュースでは、フォーマルで控えめにします（伝統的なタイポグラフィ、構造化されたグリッド、最小限の色使い）。エンターテインメントでは、カジュアルで表現豊かにします（大胆な画像、生き生きとした色、没入感のあるレイアウト）。

開発者向けツール：カジュアルで控えめにします。等幅フォントをアクセントに使い、ダークモードを優先し、装飾は最小限にします。情報密度を高めながらも、見やすく整理します。コンテンツにはゆとりを持たせつつ、装飾にスペースを使いすぎないようにします。

「これは誰のため？」チェックリスト

ビジュアルの選択をする前に、次の質問に答えてください。

1. 主なユーザーは誰ですか？（年齢、技術的な習熟度、利用状況）
2. どのような感情を引き起こすべきですか？（信頼、期待、落ち着き、緊急性）
3. この分野で信頼を生むものは何ですか？（抑制？ 洗練？ 親しみやすさ？ データ密度？）
4. 競合製品はどのように見えますか？（そして、よそよそしい印象にならずにどう差別化すべきですか？）
5. どの性格の象限に当てはまりますか？

---

色彩理論と心理学

以下の既存の「色」セクションでは、HSLを使った配色の作り方とシェードの管理方法を説明しています。このセクションでは、どの色を選ぶか、そしてその理由を説明します。

色相環の基本

色は暖色と寒色に分けられます。

• 暖色系（赤、オレンジ、黄）：前に出て見え、より近く、活気があり、緊急性の高い印象を与えます。注意を引く必要のある要素に使います。
• 寒色系（青、緑、紫）：後ろに下がって見え、より遠く、落ち着きがあり、安定した印象を与えます。背景、コンテナー、信頼を示す要素に使います。

この暖色と寒色の関係は、基本的なツールです。寒色の青い背景に暖色のオレンジ色のアラートバッジを配したダッシュボードでは、色温度だけで自然な視覚的階層を作れます。

カラーハーモニーの配色

色の組み合わせ方によって、全体の印象が決まります。

類似色（色相環で隣り合う色。例：青＋青緑＋緑）： まとまりがあり、落ち着いた印象になります。配色内のコントラストは弱めです。統一感と静けさを感じさせたいコンテンツアプリ、ヘルスケア、瞑想などのインターフェースに最適です。注意点：中間色やアクセントカラーで変化をつけないと、単調に感じられることがあります。

補色（色相環で反対側にある色。例：青＋オレンジ）： エネルギッシュでコントラストが強い配色です。背景に対して目立たせたいCTA、マーケティングページ、注意を引きたい場面に最適です。注意点：両方の色の彩度が高いと、きつい印象になることがあります。片方の色を落ち着かせましょう。

分裂補色（1つの色相と、その補色の両隣にある2つの色相）： 鮮やかでありながら、補色配色よりもバランスが取れています。ごちゃごちゃさせずに変化をつけたいデザインに最適です。明確なメインカラーと、2つの補助的なアクセントカラーを組み合わせられます。

トライアド（色相環で等間隔に位置する3つの色。例：赤＋黄＋青）： 鮮やかでバランスの取れた配色です。遊び心のあるクリエイティブなアプリに最適です。使いすぎないようにしましょう。1色を主役にし、残り2色は彩度を抑えてアクセントとして使います。彩度の高いトライアド配色は圧迫感があります。

ほとんどのプロダクトインターフェースでは、類似色に補色のアクセントを1色加えるのが、最も安全でプロフェッショナルな出発点です。

色相別の色彩心理

色相にはそれぞれ連想される意味があります。まずはこれを参考にし、対象の分野やユーザーに合わせて調整しましょう。

青：信頼、安定、落ち着き、プロ意識。最も幅広い場面で使いやすい色ですが、そのため使われすぎてもいます。金融、ヘルスケア、エンタープライズ、ソーシャルメディアなどに使われます。青を選ぶなら、慣例だからではなく、本当に適しているから選んでいるか確認しましょう。

緑：成長、健康、お金、自然、成功。フィンテック、ウェルネス、サステナビリティ、ポジティブな状態などに使われます。青と組み合わせると、信頼と成長を表現できます。

赤：緊急性、エネルギー、情熱、危険。フード・レストランアプリ、エンターテインメント、セールのCTA、エラー状態などに使われます。インターフェースでは控えめに使いましょう。少量でも強い印象を与えます。メインカラーとして使うと強烈ですが、アクセントとして使うと効果的です。

紫：高級感、創造性、神秘性、精神性。美容、高級プロダクト、クリエイティブツールなどに使われます。注：AIではデフォルトとして紫やバイオレットが非常に多用されています。 紫を選ぶのは、その分野に本当に適している場合に限りましょう。

オレンジ：温かさ、熱意、親しみやすさ、手頃さ。ソーシャルアプリ、教育、CTA、建設・エネルギー関連などに使われます。赤ほど強くなく、黄色よりも活気があります。プロダクトデザインではあまり使われていません。

黄色：楽観、注意喚起、警告、温かさ。ハイライトやアクセントとして最適です。白い背景では読みやすさを確保しにくいため、メインカラーには向きません。警告、バッジ、注目を集めたい箇所に適しています。

ニュートラルカラー（グレー、オフホワイト、黒に近い色）：洗練された、コンテンツを主役にするデザインを表現します。写真ポートフォリオ、エディトリアルサイト、開発者向けツールなどに使われます。コンテンツそのものを色として際立たせることもデザインの選択肢であり、多くの場合、最も洗練された方法です。

文化的な背景

色から連想される意味は文化によって異なります。対象ユーザーを考慮しましょう。

• 白：純粋さや清潔さ（西洋）／喪（東アジアの一部）
• 赤：危険や停止（西洋）／幸運や繁栄（中国、インド）
• 緑：自然や進行（西洋）／イスラム教（中東）
• 黄色：幸福（西洋）／喪（ラテンアメリカの一部）

グローバルなプロダクトでは、幅広い文化で肯定的に受け取られやすい青や緑を活用し、対象ユーザーに合わせて前提を検証しましょう。

デザインの調整手段としての彩度

彩度は、ありきたりな AI デザインから抜け出すために最も活用されていない手段です。

• 高彩度：活気があり、遊び心があって、若々しく、人目を引きます。消費者向けアプリ、子ども向け製品、マーケティングページに使います。
• 低彩度／くすんだ色：洗練され、落ち着きがあり、成熟した印象で、プロフェッショナルです。エンタープライズ、医療、金融、コンテンツ重視のアプリに使います。
• くすんだパレットのテクニック：どの色相でも彩度を20〜40％下げます。すると、意図を持ってデザインされた印象がすぐに生まれます。AI が生成する UI の多くは彩度の高い色をそのまま使っています。彩度を下げることは、「AI らしさ」から抜け出す最も手っ取り早い方法です。
• 彩度を組み合わせる戦略：背景やコンテナーにはくすんだベースパレットを使い、主要なアクションや重要なデータには彩度の高いアクセントカラーを1色使います。これにより、視覚的なノイズを抑えながら焦点を作れます。

/* AI default: fully saturated, feels generic */
--primary: hsl(250, 90%, 55%);

/* Muted: same hue, instantly more sophisticated */
--primary: hsl(250, 45%, 50%);

/* Even more restrained: works for enterprise/formal */
--primary: hsl(250, 30%, 45%);

パレットの決定ツリー

1. 個性を決める（「デザインの個性」セクションを参照）→ これにより彩度の範囲が決まります
2. 色彩心理と、ドメインで伝えるべき内容に基づいて、支配的な色相を選ぶ
3. 必要なバリエーションの度合いに基づいて、配色スキームを選ぶ（落ち着いた印象なら類似色、活気を出すなら分裂補色）
4. 個性に合わせて彩度を設定する（フォーマル／控えめならくすんだ色、カジュアル／表現豊かなら鮮やかな色）
5. 以下の「色」セクションにある HSL のシェード構築の仕組みを使って、パレット全体を作る

---

レイアウトの決定フレームワーク

レイアウトは、テンプレートの初期設定ではなく、コンテンツとユーザーの目標を基準に決めます。

コンテンツ優先のレイアウト選択

まず主要なコンテンツの種類を特定し、それに合ったレイアウトパターンを選びます。

長文テキスト（記事、ドキュメント、ポリシー）： 最大幅65chの、幅を絞った単一カラム。サイドバーによる妨げは最小限にします。読書は直線的に進むため、レイアウトも同様にします。

データ比較（分析、料金、機能比較）： 複数カラムのテーブル、または横並びのパネルを使います。ユーザーは横方向に情報を見比べる必要があります。情報量は多くても、整然と配置します。

ステータス監視（ダッシュボード、運用コンソール、管理者向け概要）： 視覚的なインジケーター（色、アイコン、スパークライン）を備えた、密度の高いカードグリッドを使います。情報密度の高さは長所です。見た目よりも一覧性を優先します。

メディアの閲覧（ギャラリー、ポートフォリオ、製品カタログ）： Masonry レイアウトまたは均一なグリッドを使います。コンテンツそのものをデザインとして活かします。装飾を最小限に抑え、コンテンツ表示領域を最大化します。

順次進行するワークフロー（オンボーディング、購入手続き、複数ステップのフォーム）： ステップ式／ウィザード形式のレイアウトを使います。1画面につき1つのタスクを配置し、進行状況を示します。必要に応じてメインナビゲーションを非表示にし、妨げになる要素を取り除きます。

探索／発見（ソーシャルフィード、マーケットプレイス、コンテンツ探索）： 非対称レイアウト、サイズに変化をつけたカード、視覚的なフックを使います。レイアウトは閲覧を促すものにします。コンテンツ量に応じて、無限スクロールまたはページネーションを採用します。

情報密度のスペクトラム

一度にどれだけ表示するかは、利用者と、その人が必要とする情報によって異なります。

低密度（マーケティングサイト、オンボーディングフロー）： 大きめの文字（本文18〜24px）、ゆとりのある余白（セクション間に48〜96px）、1画面あたりの要素は少なめにします。すべての要素を意図的に選びます。パディングもデザインの一部です。

中密度（大半の製品インターフェース）： 標準的な文字サイズ（本文16px）、バランスの取れた間隔（セクション間に24〜48px）、明確なグループ分けにします。多くのアプリで使える基本的な密度です。

高密度（ダッシュボード、管理パネル、開発者ツール、金融端末）： コンパクトな文字サイズ（本文13〜14px）、狭めの間隔（セクション間に12〜24px）にして、一度により多くの要素を表示します。ユーザーは専門知識を持っているため、余白よりデータを求めています。それでも、明確な階層とグループ分けは必要です。

密度のレベルごとに、スペーシングスケール、フォントサイズ、コンポーネントのパディング、角丸の初期設定が異なります。

ナビゲーションパターンの選択

アプリの構造に応じて選択してください。

• 上部の横型ナビゲーション：マーケティングサイトや、最上位のセクションが5つ未満のアプリに最適です。すっきりとしていてなじみやすく、縦方向のスペースを確保できます。
• サイドバーナビゲーション：セクションが5つ以上あるアプリ、階層が複雑なアプリ、ユーザーが頻繁にコンテキストを切り替えるアプリに最適です。常に表示され、内容をひと目で把握できます。
• タブバー：1つのセクション内で、内容を切り替えて表示する場合に最適です。タブは2〜5個にしてください。
• 下部ナビゲーション（モバイル）：モバイルを主な利用環境とし、主要な移動先が3〜5個あるアプリに最適です。親指で操作しやすくなります。
• ハイブリッド（上部ナビゲーション＋サイドバー）：ドキュメントサイトや複雑なSaaSに最適です。上部でセクションを移動し、サイドバーにページツリーを表示します。

ドメイン別レイアウトのプロファイル

個性の軸を際立たせる、具体的な出発点です。

フィンテックのダッシュボード：アイコンとラベルを備えたサイドバーナビゲーション。メイン領域は、上段に統計カードを並べ、その下にデータテーブルまたはグラフを配置します。密度の高いグリッドにします。落ち着いたカラーパレットを使い、データの可視化とステータス表示に色を絞って使用します。

クリエイティブなポートフォリオ：画面いっぱいに広がるヒーロー画像。その下に非対称のプロジェクトグリッドを配置します。ナビゲーションは最小限にし（ロゴ＋ハンバーガーメニュー、または少数のテキストリンク）、プロジェクト間に十分な余白を設けます。作品そのものを主役にしましょう。

医療ポータル：中央寄せのレイアウトで、最大幅は約720px。セクション見出しを明確にし、フォームの項目には十分な余白を取ります。複雑なタスクには段階的なフローを使い、「次へ」の操作を分かりやすくします。患者向け画面に、データを詰め込みすぎないでください。

Eコマースのストアフロント：商品グリッドとフィルター用サイドバー（モバイルでは折りたたみ可能）を配置します。カート付きの固定ヘッダーを使い、「カートに追加」のCTAを目立たせます。商品の詳細にはクイックビューモーダルを使います。視覚的な優先順位は、画像 → 価格 → 商品名 → レビューの順です。

開発者向けドキュメント：ページツリーを折りたためる固定サイドバーを使います。本文のカラム幅は狭め（約65ch）にします。コードブロックにはシンタックスハイライトとコピー用ボタンを付けます。長いドキュメントには「このページの内容」セクションを設けます。バージョン選択メニューは上部ナビゲーションに配置します。

ソーシャル／コミュニティアプリ：最大幅を約600pxにした1カラムのフィードと、フローティングの投稿ボタンを使います。ページ遷移なしで、フィード内から「いいね」や返信ができるようにします。無限スクロールを採用します。ナビゲーションは最小限にし、フィードそのものを体験の中心にしましょう。

管理パネル：グループ化したセクションを持つサイドバーナビゲーションを使います。データテーブルには並べ替え、フィルター、一括選択の機能を付けます。設定は個別のページに分けず、フォームセクションごとにまとめます。階層が深い場合はパンくずリストを使います。

コンテンツ／メディアアプリ：記事や動画向けに広いコンテンツ領域を確保します。コンテンツを見ている間は、操作画面の要素を最小限にします。関連コンテンツは下部、または最小限のサイドバーに配置します。読書・視聴モードではUIを取り除きます。

シングルページアプリの落とし穴を避ける

すべてを1つの画面に収める必要はありません。

• 複数のステップがあるプロセス：ウィザード形式のフローを使いましょう。ユーザーに、まだ到達していないステップを見せないでください。
• 使用頻度の低い設定：別ページまたは専用パネルに分けましょう。めったに使わない操作でメイン画面を煩雑にしないでください。
• 複雑な詳細表示：サブ項目、関連コンテンツ、操作など、詳細自体に深さがある場合は、インラインで展開せず、専用ページを使いましょう。
• 経験則：画面の高さの3倍を超えてスクロールするなら、ページに詰め込みすぎています。分割を検討してください。

---

AIのデフォルトを避ける

AI エージェントは、学習データに含まれる統計的な平均に傾きがちです。このセクションでは、そうしたデフォルトを明示し、避けられるようにします。

よくあるパターン

次のようなパターンがあると、ユーザーに「これはAIが生成したように見える」と思われます。

1. 紫／青のグラデーション背景 — ヘッダー、ヒーロー、カード、ボタンなど、あらゆる要素に適用されています
2. どこでも最大限の角丸 — 文脈に関係なく、すべての要素に rounded-2xl や rounded-full を使っています
3. ありきたりなSaaSのヒーロー — グラデーション文字の見出し、曖昧なサブ見出し、「始める」ボタン、装飾的なブロブ
4. 3枚カードのグリッド — あらゆる機能／メリット／料金セクションで、同じカードを3枚並べています
5. あらゆる要素にシャドウ — すべてのカードやボタンに shadow-lg が付いていて、「何もかも浮いている」ように見えます
6. デフォルトの色がインディゴ／バイオレット — 色が指定されていないと、AIは紫を選びます
7. SaaSのランディングページ用テンプレート — ヒーロー → 機能のグリッド → お客様の声 → CTA。実際の内容に関係なく、あらゆるプロジェクトに適用されています
8. 均一なリズム — すべてのセクションの間隔が同じで、単調な視覚的リズムになっています

なぜ起こるのか

学習データは、SaaSのマーケティングサイト、Tailwind UIのサンプル、コンポーネントライブラリに大きく偏っています。こうしたデザインはそれぞれの文脈では優れていますが、どのプロジェクトも同じ情報源に頼ると、どれも同じように見えてしまいます。エージェントは「モダンなウェブデザイン」の統計的な平均を出力します。

その解決策

それぞれのデフォルトに対して、具体的な代替案を示します。

グラデーション → 単色を使います。奥行きを出したい場合は、控えめなテクスチャ、対照的な要素を組み合わせた単色背景、またはセクション全体ではなく、プログレスバーやステータスインジケーターなど、小さなアクセント1か所だけにグラデーションを使う方法を試してください。

最大限の角丸 → 角丸の大きさを、デザインの個性に合わせます。フォーマルな金融アプリなら4～6px、親しみやすいコンシューマーアプリなら8～12pxにします。完全な丸みは、アバターやタグなど特定の要素だけに使います。丸みよりも一貫性が大切です。

ありきたりなヒーロー → 実際のプロダクトを中心にヒーローをデザインします。プロダクトを見せる、実際のユースケースを見せる、あるいはヒーロー自体をなくします。装飾を加えず、明快な見出しと焦点を絞ったCTAだけにするのが、最善のヒーローであることもよくあります。

3枚カードのグリッド → コンテンツの実態を考えます。機能ならアイコン付きのリストが適しているかもしれません。料金なら比較表が適しています。お客様の声なら、1つの引用を切り替えて表示する方法が適しています。おなじみのテンプレートではなく、コンテンツに合ったレイアウトを使います。

あらゆる場所にシャドウ → 境界線、背景色の違い、または余白だけで区切ります。シャドウは、ページより上に浮かぶインタラクティブな要素（ドロップダウン、モーダルなど）のように、高さを示すために使います。すべてにシャドウがあれば、何も浮き上がって見えません。

デフォルトのインディゴ → Color Theoryのセクションを確認します。無難に感じる色ではなく、プロダクトが伝える印象に基づいて色相を選びます。アースカラーのパレット、テラコッタをアクセントにした暖色系のグレー、または鮮やかなアクセントを1色加えたモノクロームの配色は、いずれもインディゴより意図が感じられます。

あらゆるものにSaaSテンプレート → まずDesign PersonalityとLayout Decision Frameworkのセクションを参照します。医療ポータルにヒーローセクションは必要ありません。ダッシュボードにお客様の声は必要ありません。ランディングページのテンプレートにあるものではなく、ユーザーが必要とするものに合わせてレイアウトを組み立てます。

均一なリズム → コンテンツ同士の関係に応じて、セクション間の間隔に変化を付けます。関連するコンテンツのセクション間は48px、大きな話題の切り替わりには96pxを設けます。最も重要なセクションには、最もゆとりを持たせます。音楽のように、視覚的なリズムにも変化が必要です。

AIらしさの最終確認

デザインを仕上げる前に、次のことを自問します。

「これを開発者に見せたら、AIが作ったと見抜かれるだろうか？」

答えが「はい」なら、最もありきたりな要素を特定します。たいていは配色かレイアウトの構造です。上記のフレームワークを使って、プロジェクトに合ったものにします。

---

AIっぽく見えない文章を書く

見た目の選択はAI生成のUIだとすぐに見抜かれますが、文章も同じくらいすぐに見抜かれます。目指すのは「優れたマーケティングコピー」ではありません。洗練された印象を出そうとする言語モデルではなく、New York Timesの記者が書いたように読める文章です。

AI らしさが表れる特徴

「AI が書いた」と感じさせるパターン：

1. ダッシュの多用 — 2文に1回はダッシュが入っています。たいていは、カンマやピリオド、括弧で十分なのに、ダッシュが使われています。AI は文のリズムを変えるとき、ダッシュを定番の手段として使います。
2. ぶつ切りの文。強調のために使われます。頻度が高すぎます。 — 短く歯切れのよい文を連ねて、勢いを出そうとします。実際の書き手は、文のリズムに変化をつけます。
3. 「X だけではなく、Y です」 — その類似表現として、「X だけではありません」「X だけでなく、Y もあります」などがあります。考えた結果ではなく、反射的に使われる並列構文です。
4. 「X の方も Y の方も」 — どちらにもメリットがあるという、こじつけた2つの対象を並べます。たいていは削れます。
5. 「X から Y まで」 — 「スタートアップから大企業まで」「アイデアからリリースまで」など。幅広さを示すための安易な表現です。
6. 三項構文の多用 — 「高速、シンプル、強力」「速度、規模、セキュリティを重視」など。どの文にも3つ並べる癖が出ています。
7. 意味のない強調語 — 「本当に」「心から」「信じられないほど」「シームレスに」「簡単に」など。音節は増えても、意味は増えません。
8. マーケティングの決まり文句 — 「ゲームチェンジャー」「革新的」「最先端」「業界最高水準」「次世代」「世界水準」など。使わないようにしましょう。
9. 中身のない書き出し — 「目まぐるしく変化する現代社会では……」「こんな世界を想像してみてください……」「私たちは今、……の時代に生きています」など。誰もこんな言い方はしません。
10. 文の長さが均一 — 実際の文章にはリズムがあります。長くて入り組んだ文の次に、短い文が続くこともあります。中くらいの長さの文が3つ続くのは、AI によくあるパターンです。
11. 動名詞で始まる箇条書きの連発 — どの項目も「構築する」「作成する」「設計する」「強化する」で始まります。並列構造を使いすぎると、単調になります。
12. 定番の CTA 動詞 — 「活用する」「発見する」「変革する」「高める」など。クリック後に実際に起きることを表す、具体的な動詞を選びましょう。

解毒剤

それぞれの兆候に対する修正方法です。

エムダッシュ → カンマで済むならカンマを使います。ピリオドで済むならピリオドを使います。エムダッシュは、鋭い挿入や劇的な中断に使うもので、何でもつなぐためのものではありません。段落にエムダッシュが複数あるなら、ほぼ間違いなく使いすぎです。エムダッシュは一つなら効果的ですが、三つ続くと癖に見えます。

ぶつ切りの断片文 → 文にゆとりを持たせます。カンマを使った一つの流れるような文で表現できる考えは、たいていそのようにするべきです。断片文を連ねると息苦しくなり、急いで書かれたプレスリリースのように読めるからです。文の長さに変化をつけましょう。長い文の後に短い文、短い文の後に長い文を置きます。声に出して読んでみてください。箇条書きを読み上げているように聞こえずに最後まで読めないなら、書き直しましょう。

「Xだけでなく、Yでもあります」 → Yだけを言いましょう。Xにも触れる必要があるなら、要点を際立たせるための引き立て役にするのではなく、独立した考えとして別の文にしましょう。

「XでもYでも」 → 実際のユーザーを選びましょう。文章が本当に異なる二つの読者層を対象にしているなら、一度に一方に向けて書きます。一般的な「XでもYでも」という表現は、どちらにも響きません。

「XからYまで」 → 具体的な例を挙げましょう。「小規模チームからフォーチュン500企業まで」は抽象的です。「StripeやNotionのチームが使っています」なら具体的です。

三つ並べる表現 → 二つの要素を並べるか、力強い形容詞を一つ使いましょう。「速くて信頼できる」は、「速く、信頼性があり、パワフル」よりも効果的です。よく選んだ一語は、弱い三語に勝ります。

中身のない強調語 → 削りましょう。「本当に役立つ」なら「役立つ」。「驚くほど速い」なら「速い」にするか、具体的な数値を示します。名詞が役割を果たしているなら、強調語は余計です。

マーケティングの決まり文句 → 製品が実際に何をするのかを説明しましょう。「革新的なプラットフォーム」ではなく、何を置き換えるのか、以前はできなかったどんなことをユーザーに可能にするのかを伝えます。

中身のない書き出し → 具体的な内容から始めましょう。最初の文には、具体的な名詞、明確な動詞、または実質的な主張を含めます。製品カテゴリー内のどの製品にも当てはまる書き出しなら、書き直しましょう。

単調なリズム → 声に出して読みましょう。すべての文が同じ長さに感じられるなら、パターンを崩します。長い文の後に短い文を置くと強調でき、短い文が続いた後に長い文を置くと、読者が内容を消化する余裕が生まれます。

動名詞が続く箇条書き → 書き出しに変化をつけましょう。命令形（「より速く出荷する」）、名詞句（「実際の監査証跡」）、完全な文を織り交ぜます。箇条書きは並列構造の試験ではありません。

中身のない CTA の動詞 → 実際の動詞を使いましょう。「無料トライアルを始める」「料金を見る」「ドキュメントを読む」。「可能性を解き放つ」より、平易な言葉のほうが伝わります。

参考にする文章

『The New York Times』や『The Atlantic』のコラム、または尊敬する書き手の文章を読みましょう。次の点に注目してください。

• 文の長さや構造に変化がある
• リズムを作るのは主にカンマで、エムダッシュはまれにしか使われず、使うときには重要な役割を担う
• 抽象的な表現より具体性が勝る（名前、数字、場所、具体的な詳細）
• 誰にでも気に入られようとせず、書き手の視点がある
• 形容詞を重ねず、一つ一つ慎重に選んでいる

その後、自分の文章を読みましょう。差が明らかなら、もう一度推敲が必要です。

文章の最終確認

文章を公開する前に、次のことを自問しましょう。

「これを声に出して読んだとき、人が話しているように聞こえるだろうか。それとも、洗練された文体を装おうとしている言語モデルのように聞こえるだろうか」

後者なら、よくある原因はエムダッシュ、文のリズム、決まり文句です。この三つを直せば、たいていは人が実際に書いたような文章になります。

---

コンテキストに応じたコンポーネントのバリエーション

同じ種類のコンポーネントでも、配置される場所や役割によって見た目を変えるべきです。eコマースサイトの「カード」とダッシュボードの「カード」は、同じ名前を共有しているだけで、デザインとしては根本的に異なります。

基本原則

コンポーネントのスタイルを決める前に、「このコンポーネントはここで何をしているのか？」と考えます。「カード／ボタン／テーブルはどのような見た目か？」ではありません。

コンテキストによって、次の点が決まります。

• 枠線の扱い（なし、控えめ、目立たせる）
• パディングの密度（コンパクト、標準、ゆったり）
• ホバー時の動作（なし、わずかに浮かせる、色を変える、展開する）
• コンテンツのレイアウト（縦、横、画像中心、テキスト中心）
• 視覚的な重み（背景、シャドウ、枠線、フラット）

カードのバリエーション

商品カード（EC サイト）： 画像を中心に配置します（カードの高さの60～70％）。パディングは小さめにします。価格を目立たせます。ホバー時にクイック追加ボタンやサイズ選択を表示します。角丸はブランドの個性に合わせます。

統計カード（ダッシュボード）： 数値を主役にします。大きく太字にし、ステータスに応じて色を付けてもよいでしょう。パディングはコンパクトにします。必要に応じてスパークラインやトレンド指標を追加します。ホバー効果は不要です。装飾は最小限にし、データ自体をデザインにします。

プロフィールカード（ソーシャル／チームディレクトリ）： アバターを中心に配置します。アバターを左、情報を右に置く横向きのレイアウトも可能です。アクションボタン（メッセージ、フォロー）はインラインで配置します。控えめな背景色を使うなど、温かみのある個人的な雰囲気にします。

設定カード（管理画面／環境設定）： 画像は使わず、テキストを中心にします。関連するカードとまとめて縦に並べます。トグルや入力欄を右側に配置します。装飾は最小限にし、見た目ではなく機能を重視します。フォームのパターンに統一します。

コンテンツカード（ブログ、ニュース、メディア）： 見出しを中心にします。メタデータ（著者、日付、読了時間）は控えめにします。余白を十分に取ります。ホバー時には、タイトルに控えめな下線を付けたり、背景色を変えたりします。画像は任意です。すべてのコンテンツカードにサムネイルが必要なわけではありません。

ナビゲーションのバリエーション

マーケティングサイトのナビゲーション：項目は最小限にします（リンクは4～6個）。背景を透明にして、ヒーロー領域に重ねることもよくあります。ロゴを左、CTA ボタンを右に配置します。すっきりとした見た目にするため、タブレットでもハンバーガーメニューに折りたたむ場合があります。

アプリダッシュボードのナビゲーション：サイドバーを常時表示します。アイコンとラベルを組み合わせます。コンテンツ領域を広く取れるよう、アイコンのみの表示に折りたためるようにします。選択中の状態を明確に示します。関連するセクションをグループ化し、控えめな区切り線を使います。

ドキュメントのナビゲーション：上部バーに主要なセクションやバージョンセレクターを配置します。左サイドバーにはページツリーを配置し、グループを展開・折りたたみできるようにします。長いドキュメントには、右サイドバーに「このページの内容」を表示します。

モバイルアプリのナビゲーション：項目数を3～5個に絞ったボトムタブバーを使います。アイコンに短いラベルを添えます。選択中の状態は、太さだけでなく色でも示します。中央の項目を目立つアクション（作成、追加）にすることもできます。モバイルの主要なナビゲーションにハンバーガーメニューを使うのは避けます。

ボタンのバリエーション

データが密集した UI（ダッシュボード、テーブル、管理画面）： 小さめにします（text-sm、py-1.5 px-3）。ツールチップ付きでアイコンのみを表示する場合もあります。視覚的なノイズを抑えるため、ゴーストまたはアウトラインのスタイルを使います。ボタンをグループ化する場合は、ボタングループのパターンを使います。

マーケティングページ： 大きめにします（text-lg、py-3 px-8）。塗りつぶしには目立つ色を使います。存在感を出すため、水平方向のパディングを広めにします。アイコンや矢印を付けてもよいでしょう。主要な CTA は一目で分かるようにし、セカンダリボタンは明確に控えめにします。

フォームで使う場合： 入力欄の高さに合わせます。角丸も入力欄と統一します。フォームの右下（モバイルでは幅いっぱい）に配置します。送信ボタンはプライマリにし、キャンセルボタンはゴーストまたはテキストのみのスタイルにします。

破壊的な操作で使う場合： デフォルトでは控えめにし、赤を強く目立たせないようにします。くすんだ赤のテキスト、またはアウトラインのスタイルを使います。ホバー時または確認ダイアログでは、赤を全面的に使います。破壊的な操作をページ上で最も目立つ要素にしてはいけません。

テーブルのバリエーション

財務／数値データ： 小数点の位置を揃えられるよう、数値を右揃えにします。見やすさのため、行の背景色を交互に変えます。行の高さはコンパクトにします。スクロール時はヘッダーを固定します。数値列には、等幅フォントまたは tabular-nums のフォント機能を使います。

管理パネル： 一括選択用のチェックボックス列を設けます。アクション列にはアイコンボタンまたはドロップダウンを配置します。列ヘッダーはソート可能にします。行にホバーしたときはハイライトします。必要に応じてインライン編集を可能にします。

比較テーブル（料金、機能）： 「おすすめ」の列を強調します。ヘッダー行を固定します。左側の列に機能名を配置します。真偽値を示す機能には、チェック／バツのアイコンを使います。モバイルでは、行を交互に表示する形式とカードベースのレイアウトを切り替えられます。

コンポーネントのコンテキストチェックリスト

コンポーネントのスタイルを設定する前に、次の質問に答えてください。

1. このページの情報密度はどの程度ですか？（低い／中程度／高い → パディングとサイズを決めます）
2. このコンポーネントの近くにある、ユーザーの主なアクションは何ですか？（コンポーネントのスタイルがメインのCTAと競合しないようにします）
3. どんな雰囲気を確立しましたか？（フォーマルなコンポーネントとカジュアルなコンポーネントでは見た目が異なります）
4. これは主役ですか、それとも脇役ですか？（ヒーローコンポーネントには装飾を加え、脇役のコンポーネントは控えめにします）

---

実行

視覚的階層

階層は優れたUIの基盤です。ユーザーが重要なものをすぐに理解できるようにします。

階層を作るためのツール

階層を作るための主なツールは3つあります。

1. サイズ — 要素が大きいほど、注目を集めます
2. ウェイト — 太いテキストほど、重要に感じられます
3. 色 — コントラストが高い要素ほど、目立ちます

重要なのは、サイズだけに頼らないことです。よくある間違いは、主要なコンテンツを非常に大きくし、二次的なコンテンツを非常に小さくすることです。そうではなく、3つのツールを組み合わせて使いましょう。

コントラストを下げて目立たなくする

重要なものを大きくする代わりに、重要でないものの存在感を抑えてみましょう。

• 二次テキストには、サイズを小さくするのではなく、明るい色を使います
• 補足情報のフォントウェイトを下げます
• メタデータ（日付、ラベル、件数）には控えめな色を使います

セマンティックカラーと視覚的階層

セマンティクスが階層に優先しないようにしましょう。あまり使われない「危険」アクションが主要なアクションと競合するなら、鮮やかな赤にするべきではありません。破壊的な二次アクションには、控えめな赤を使いましょう。

/* Primary destructive action - prominent */
.btn-danger-primary { @apply bg-red-600 text-white; }

/* Secondary destructive action - muted */
.btn-danger-secondary { @apply text-red-600/70 bg-transparent; }

ラベルとデータ

ラベルと値のペアを表示する場合、通常はラベルよりデータのほうが重要です。

• ラベルを目立たなくします（明るい色、小さいサイズ、または文字間隔を広げた全大文字にします）
• 値が自然に目立つようにします

<div>
  <span class="text-xs uppercase tracking-wide text-gray-500">Status</span>
  <span class="text-gray-900 font-medium">Active</span>
</div>

---

タイポグラフィ

フォントサイズのスケール

意図的な段階差をつけたモジュラースケールを使いましょう。根拠のないサイズ設定は避けてください。

推奨スケール（約1.25の比率に基づく）：

• xs：12px — 注記、キャプション
• sm：14px — 二次テキスト、メタデータ
• base：16px — 本文（読みやすさを保つための最小サイズ）
• lg：18px — 強調する本文、リード文
• xl：20px — 小見出し
• 2xl：24px — セクション見出し
• 3xl：30px — ページ見出し
• 4xl：36px — ヒーローテキスト
• 5xl+：48px+ — ディスプレイテキスト、マーケティング

行の高さ

フォントサイズが大きくなるほど、行の高さを小さくします。

• 小さいテキスト（12-14px）：1.5-1.75（ゆとりが必要です）
• 本文（16-18px）：1.5-1.65
• 見出し（24px+）：1.2-1.35（詰めると洗練された印象になります）

文字間隔

• 全大文字のテキスト：トラッキングを0.05-0.1em追加します（大文字は余白が必要です）
• 大きな見出し：わずかに負のトラッキング（-0.02em）を検討します
• 本文：デフォルトのままにします

フォントウェイトの方針

ウェイトを使いすぎないようにしましょう。2〜3種類を選びます。

• ノーマル（400）：本文
• ミディアム（500）：強調、UI要素
• セミボールド／ボールド（600-700）：見出し、強い強調

UIテキストには、いきなりボールドにするより、ミディアム（500）を使うほうが洗練された印象になることがよくあります。

行の長さ

読みやすさを保つ最適な長さは、1行あたり45-75文字です。16pxのフォントの場合、およそ20-35em、または320-560pxです。

.prose { max-width: 65ch; } /* ch unit = width of '0' character */

---

色

カラーパレットの構築

各色に、十分な範囲のシェード（通常は9〜10段階）が必要です。

• 50-100：背景、控えめな塗りつぶし
• 200-300：境界線、無効状態
• 400-500：アイコン、二次テキスト
• 600-700：主要なテキスト、ボタン
• 800-900：見出し、強調度の高いテキスト

HSLで色を定義する

HSL（色相、彩度、明度）は、カラーパレットを作る際により直感的に使えます。

/* Base color */
--primary-600: hsl(220, 65%, 50%);

/* Lighter (increase lightness, slightly decrease saturation) */
--primary-100: hsl(220, 60%, 95%);

/* Darker (decrease lightness, can increase saturation slightly) */
--primary-800: hsl(220, 70%, 30%);

重要なのは、知覚される明るさは色相によって変わることです。同じ明度なら、黄色は青より明るく見えます。それに応じて調整してください。

UI状態に応じた色

• ホバー：1段階暗くします（500 → 600）。または明度を5-10%下げます
• アクティブ／押下：さらに1段階暗くします（600 → 700）
• 無効：彩度を大幅に下げ、明度を上げます
• フォーカス：リング／アウトラインを使い、要素の色は変更しません

グレーも完全な無彩色ではありません

グレーに少し色味を加えて、暖かさや涼しさを出しましょう。

• 暖色系のグレー：黄色やオレンジを少し加えます（親しみやすく、近寄りやすい UI に適しています）
• 寒色系のグレー：青を少し加えます（プロフェッショナルで技術的な UI に適しています）

/* Cool gray (slight blue) */
--gray-600: hsl(215, 15%, 40%);

/* Warm gray (slight yellow) */
--gray-600: hsl(40, 10%, 40%);

アクセシブルなカラーコントラスト

• 本文テキスト：コントラスト比 4.5:1 以上（WCAG AA）
• 大きなテキスト（太字の 18px 以上、または 24px 以上）：3:1 以上
• UI コンポーネント：隣接する色に対して 3:1 以上
• 色だけに頼らない：アイコン、テキスト、パターンも併用します

純粋な黒は使わない

純粋な黒（#000）はきつく、不自然に感じられます。代わりに、非常に濃いグレーを使いましょう。

/* Too harsh */
color: #000;

/* Better - dark but not absolute */
color: #1a1a1a; /* or hsl(0, 0%, 10%) */

---

余白

余白のスケール

基本単位（通常は 4px または 8px）に基づいて、一貫したスケールを使います。

4, 8, 12, 16, 24, 32, 48, 64, 96, 128...

13px や 27px のような恣意的な値は避けましょう。制約を設けることで一貫性が生まれます。

余白の関係性

• 関連する要素：近くに配置します（8-12px）
• まとまりはあるが別個の要素：中程度の余白を取ります（16-24px）
• 別々のセクション：大きな間隔を取ります（32-64px）

原則として、近接している要素は関連していると考えられます。関連する要素は近くにまとめ、関連しない要素は明確に離しましょう。

まずは余白を多めに取る

後から余白を加えるより、減らすほうが簡単です。まずは余裕を持たせ、必要な箇所だけ詰めましょう。ほとんどのデザインは、余白が多すぎるのではなく、詰まりすぎています。

パディングの一貫性

ボタンや入力欄の内部の比率は、一貫させましょう。

• 水平方向のパディング：垂直方向のパディングの 1.5-2 倍
• サイズが変わっても、アスペクト比を保ちます

/* Small */
.btn-sm { @apply px-3 py-1.5; }

/* Medium */
.btn-md { @apply px-4 py-2; }

/* Large */
.btn-lg { @apply px-6 py-3; }

---

レイアウト

幅いっぱいに広げない

大きな画面では、コンテンツを端から端まで広げないようにします。最大幅を設定しましょう。

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1rem;
}

グリッドが常に最適とは限りません

すべてに 12 列のグリッドが必要なわけではありません。シンプルなレイアウトでは、次の方法が適していることもあります。

• 最大幅を設定したコンテナー
• 配置には Flexbox
• コンテンツの自然な流れ

要素にゆとりを持たせる

窮屈なレイアウトは安っぽく見えます。次の要素には十分なパディングを加えましょう。

• カードやパネル（最低 24-32px）
• セクション（垂直方向に 48-96px）
• ページの余白（モバイルでは 16-24px、デスクトップではそれ以上）

配置

• ほとんどのテキストは左揃えにする（読み取りやすくなります）
• 短い見出しや CTA は中央揃えにする（注目を集めます）
• 表の数値は右揃えにする（小数点を揃えます）

---

モバイルファーストのレスポンシブデザイン

モバイルファーストの理由

まずモバイル向けのレイアウトを作り、その後、大きな画面に合わせて複雑さを加えます。次のような利点があります。

• コンテンツの優先順位付けを促します
• 基本スタイルをシンプルにできます
• プログレッシブエンハンスメントを実現できます（どの画面でも動作し、大きな画面ではさらに使いやすくなります）

ブレークポイントの方針

特定のデバイス向けにデザインするのではなく、コンテンツに基づいてブレークポイントを設定します。

• 任意の画面サイズではなく、レイアウトが崩れる箇所にブレークポイントを追加します
• 一般的な範囲：~640px (sm)、~768px (md)、~1024px (lg)、~1280px (xl)

モバイルファーストのパターン

シンプルに始め、段階的に拡張します。

/* Mobile: stack vertically */
.card-grid {
  display: grid;
  gap: 1rem;
}

/* Tablet+: 2 columns */
@media (min-width: 768px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Desktop: 3 columns */
@media (min-width: 1024px) {
  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

タッチターゲット

モバイルのボタンや操作可能な要素には、十分なタップ領域が必要です。

• 最小サイズ：44x44px（Apple HIG）または 48x48px（Material）
• 見た目を大きくせずにタップ領域を広げるには、小さな要素にパディングを加えます

タイポグラフィのサイズ調整

モバイルでは見出しのサイズを小さくします。余裕が少ないためです。

h1 {
  font-size: 1.875rem; /* 30px mobile */
}

@media (min-width: 768px) {
  h1 { font-size: 2.5rem; } /* 40px tablet+ */
}

@media (min-width: 1024px) {
  h1 { font-size: 3rem; } /* 48px desktop */
}

---

奥行きとシャドウ

シャドウは奥行きを生み、レイヤーを分離します。意図的に使いましょう。

シャドウの高さのシステム

高さに応じたシャドウのスケールを作ります。

• sm：控えめで、カードやわずかに浮かせる要素に使います
• md：標準で、ドロップダウンやポップオーバーに使います
• lg：目立つもので、モーダルやダイアログに使います
• xl：強い印象を与えますが、ほとんど必要ありません

自然なシャドウの方向

光は上から当たります。シャドウは次のようにします。

• 下方向に落とします（Y オフセットを正にします）
• 少しぼかします（ぼかし半径を設定します）
• グレーではなく、半透明の黒を使います

/* Natural shadow */
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);

/* Unnatural (shadow going up) - avoid */
box-shadow: 0 -4px 6px rgb(0 0 0 / 0.1);

シャドウの組み合わせ

シャドウを重ねると、より自然に見えます。

/* Two shadows: soft ambient + sharper direct */
box-shadow:
  0 1px 3px rgb(0 0 0 / 0.1),
  0 10px 20px rgb(0 0 0 / 0.05);

注：デザインシステムでシャドウを使わない場合は、境界線や背景色の違いを使って区切りを表現します。

---

画像とアイコン

アイコンのサイズ

アイコンは、隣接するテキストとのバランスを保つようにします。

• インラインアイコンの場合：テキストの行の高さより少し小さくします
• 単独で使うアイコンの場合：タッチターゲットに合わせたサイズにします

<button class="flex items-center gap-2">
  <svg class="w-5 h-5">...</svg>
  <span class="text-base">Save</span>
</button>

アイコンの線の太さ

線が細いと洗練された印象に、太いと親しみやすい印象になります。

• 1.5-2px：モダンで上品
• 2-2.5px：バランスがよく、汎用的
• 3px+：大胆で遊び心のある印象

線の太さは、タイポグラフィの太さに合わせます。

---

空の状態

空の状態をそのままにしないでください。活用するチャンスです。

• ここに何が表示されるのかを説明します
• ユーザーが次のアクションを取れるよう案内します
• イラストやアイコンを使って、空虚な印象を和らげます

<div class="text-center py-12">
  <svg class="mx-auto h-12 w-12 text-gray-400">...</svg>
  <h3 class="mt-2 text-sm font-medium text-gray-900">No projects</h3>
  <p class="mt-1 text-sm text-gray-500">Get started by creating a new project.</p>
  <button class="mt-4">Create Project</button>
</div>

---

ダークモードのデザイン

ダークモードは、単に色を反転させるだけではありません。異なるアプローチが必要です。

コントラストを反転させずに弱める

• 暗い背景に純白のテキストを使わないでください。刺激が強すぎます。gray-100 または gray-200 を使います
• 純黒の背景を使わないでください。gray-900 または gray-950（例：#0f172a）を使います
• 浮き上がりを表すシャドウを弱めます。暗い背景では見えにくいため、代わりに控えめな境界線や明るめの背景を使います

色の調整

/* Light mode */
--bg-primary: #ffffff;
--text-primary: #111827;    /* gray-900 */
--text-secondary: #6b7280;  /* gray-500 */

/* Dark mode - not just inverted */
--bg-primary: #0f172a;      /* slate-900 */
--text-primary: #f1f5f9;    /* slate-100 */
--text-secondary: #94a3b8;  /* slate-400 */

彩度の変化

暗い背景では色がより鮮やかに見えます。ダークモードでは、ユーザーに強い印象を与えすぎないよう、主要な色の彩度を少し下げます。

サーフェスの階層

浮き上がりを示すには、シャドウではなく、より明るいサーフェスを使います。

• ベース：bg-gray-900
• 浮き上がったカード：bg-gray-800
• モーダル／ドロップダウン：bg-gray-700

---

フォームのデザインパターン

フォームはユーザーが作業する場所です。手間なく使えるようにしましょう。

入力欄のスタイル

/* Well-designed input */
.input {
  @apply w-full px-3 py-2
         text-gray-900 placeholder-gray-400
         bg-white border border-gray-300 rounded-lg
         focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent
         transition-shadow duration-150;
}

ラベルの配置

• ほとんどのフォームでは、入力欄の上に配置します（横並びにはしません）。そのほうが内容を確認しやすくなります
• フローティングラベルは、スペースが極端に限られている場合にのみ使います
• 必須項目の表示には、ラベルの前ではなく後ろに * を付けます

エラー状態

• 境界線を border-red-500 に変更します
• 入力欄の内側（右側）にエラーアイコンを追加します
• 入力欄の下に text-red-600 text-sm でエラーメッセージを表示します
• 色だけに頼らず、アイコンまたはテキストを追加します

フィールドのグループ化

<fieldset class="space-y-4">
  <legend class="text-sm font-medium text-gray-700">Billing Address</legend>
  
</fieldset>


<fieldset class="space-y-4 mt-8">
  <legend class="text-sm font-medium text-gray-700">Payment Method</legend>
  
</fieldset>

ボタンの配置

• 主要なアクションは右側（フォームでは右下）に配置します
• 副次的なアクション／キャンセルは、視覚的な強さを抑えて左側に配置します
• 破壊的なアクションには、確認を必須にします

---

コントラスト以外のアクセシビリティ

アクセシビリティはデザインの品質であり、単なるチェック項目ではありません。

フォーカス状態

すべてのインタラクティブ要素に、視認できるフォーカス状態が必要です。 置き換えずにアウトラインを削除しないでください。

/* Bad - removes accessibility */
:focus { outline: none; }

/* Good - replaces with visible ring */
:focus {
  outline: none;
  ring: 2px;
  ring-color: blue-500;
  ring-offset: 2px;
}

/* Tailwind shorthand */
.btn { @apply focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2; }

モーションへの配慮

prefers-reduced-motion に対応します。

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

インタラクティブ要素のサイズ

• タッチターゲットの最小サイズ：44x44px（48x48px を推奨）
• クリック可能な要素の間に十分なスペースを設けます（間隔は少なくとも 8px）
• ボタンのテキストは十分に大きくします（最小 14px）

セマンティック HTML

• アクションには <button> を、ナビゲーションには <a> を使います
• 見出しの階層（h1 → h2 → h3）を守り、レベルを飛ばさないようにします
• <nav>、<main>、<aside>、<footer> のランドマークを使います
• 視覚的なコンテキストだけでは不十分な場合は、aria-label を追加します

---

控えめなアニメーションとトランジション

動きは自然に感じられるようにし、注意をそらさないようにします。

タイミングの原則

• マイクロインタラクション：100-200ms（ホバー、フォーカス、切り替え）
• 短いトランジション：200-300ms（ドロップダウン、ツールチップ）
• 長めのトランジション：300-500ms（モーダル、ページ遷移）
• UI では500ms を超えないようにします。動作が遅く感じられます

イージング関数

/* Enter: start fast, end slow (ease-out) */
.dropdown-enter { transition: all 200ms ease-out; }

/* Exit: start slow, end fast (ease-in) */
.dropdown-exit { transition: all 150ms ease-in; }

/* UI interactions: smooth (ease-in-out) */
.btn { transition: all 150ms ease-in-out; }

アニメーションさせる対象

アニメーションさせるもの：

• ホバー時の背景色
• 強調のための transform（拡大縮小、移動）
• 表示／非表示時の不透明度
• 浮き上がりの変化を示す box-shadow

アニメーションさせないもの：

• 幅／高さ（レイアウトシフトが発生するため、代わりに transform: scale を使います）
• レイアウトの再計算を引き起こすもの
• 一度に動かすものが多すぎる場合

ホバー時のフィードバック

/* Subtle but noticeable */
.card {
  @apply transition-all duration-150 ease-in-out
         hover:shadow-md hover:-translate-y-0.5;
}

.btn {
  @apply transition-colors duration-150
         hover:bg-blue-600;
}

---

デザイン監査チェックリスト

あらゆるインターフェースの確認に使えます。

パーソナリティと意図

• デザインのパーソナリティは意識的に選ばれていますか（デフォルトのままではありませんか）？
• カラーパレットは、製品の分野や対象ユーザーに合っていますか？
• デザインだけを見て、どのような製品か分かりますか？
• 意図を持ってデザインされたように見えますか、それともデフォルトの要素を組み合わせただけに見えますか？
• AI が生成したと思われそうですか？そうであれば、最もありきたりな要素は何ですか？

コピー

• 音読してみて、人が話しているように聞こえますか、それとも洗練された印象を出そうとするモデルのように聞こえますか？
• 1 つの段落に em ダッシュが 2 つ以上ありますか？カンマやピリオドに置き換えてください。
• 「X だけでなく Y も」「X であっても Y であっても」「X から Y まで」といった構文はありませんか？削除するか、書き換えてください。
• 空疎な強調語（「本当に」「シームレスに」「非常に」）や決まり文句（「画期的」「最先端」）は取り除かれていますか？
• 文の長さに変化がありますか、それともすべて同じくらいの長さですか？
• CTA では、マーケティング用語（「可能性を引き出す」）ではなく、具体的な動詞（「料金を見る」）を使っていますか？

階層

• 2 秒以内に主要なアクションを見分けられますか？
• 主要、二次、三次の要素は視覚的に明確に区別されていますか？
• ラベルは値より控えめに表示されていますか？

タイポグラフィ

• 一貫した文字サイズのスケールを使っていますか（恣意的なサイズはありませんか）？
• 行の長さは 45～75 文字に制限されていますか？
• 見出しの行間は詰め、本文の行間にはゆとりを持たせていますか？

色

• UI に純粋な黒（#000）や純粋な白（#fff）を使っていませんか？
• グレーには、暖色系または寒色系の控えめな色味がありますか？
• すべてのテキストは WCAG AA のコントラスト比（本文は 4.5:1、大きな文字は 3:1）を満たしていますか？

余白

• 一貫した余白のスケールを使っていますか？
• 関連する項目は近くにまとめられ、セクションは明確に区切られていますか？
• カードやセクションには十分なパディングがありますか？

コンポーネント

• コンポーネントは汎用的なスタイルではなく、それぞれの用途に合わせてスタイリングされていますか？
• カード、ボタン、ナビゲーションのスタイルは、表示される場所に応じて変えていますか？

レスポンシブ対応

• 320px の画面で動作しますか？
• モバイルのタッチターゲットは少なくとも 44x44px ありますか？
• タイポグラフィは適切に拡大縮小されますか？

アクセシビリティ

• すべてのインタラクティブ要素に、視認できるフォーカス状態がありますか？
• 意味を伝えるために色だけに頼っていませんか？
• セマンティックな HTML 構造になっていますか？

---

クイックリファレンス：よくある間違い

1. フォントサイズが多すぎる — サイズのスケールに従いましょう
2. 階層レベル間のコントラストが不十分
3. 余白が窮屈 — 迷ったら、余白を増やしましょう
4. 純粋な黒のテキスト — 代わりに濃いグレーを使いましょう
5. ボーダーに頼りすぎたデザイン — 代わりに余白や背景色を試しましょう
6. 余白に一貫性がない — サイズのスケールを徹底して使いましょう
7. デスクトップファーストの考え方 — モバイルから始め、段階的に拡張しましょう
8. 恣意的な値 — すべての数値はシステムに基づくべきです
9. フォーカスアウトラインを削除する — 削除せず、別のスタイルに置き換えましょう
10. アニメーションの使いすぎ — 派手さより控えめさを優先しましょう
11. デフォルトで紫や青のグラデーションを使う — 分野や対象ユーザーに基づいて色を選びましょう
12. どこでも同じカードスタイルを使う — 用途に応じてコンポーネントを変えましょう
13. 目的なく色を選ぶ — デフォルトに頼らず、色彩理論に基づいて選びましょう
14. 何にでも SaaS テンプレートを使う — コンテンツの種類に合ったレイアウトにしましょう
15. コンテンツを理解する前にレイアウトを選ぶ — レイアウトはコンテンツに合わせるものであり、その逆ではありません