design-guide

デザインガイド

SwiftUI、Android Studio、Web アプリケーションなど、あらゆるプラットフォームで構築するすべての UI を、モダンでプロフェッショナルかつ一貫性のある見た目にするための包括的なデザインシステムです。

バンドルされているリソース

このスキルには、追加の参考資料が含まれています。

• references/color-palettes.md - 詳細な配色、アクセントカラーの選択肢、プラットフォーム固有の色の実装例を掲載しています。色を選択または実装する際に参照してください。
• references/component-templates.md - SwiftUI、Android Compose、React 向けのボタン、カード、フォーム、ナビゲーションのすぐに使えるコードテンプレートを掲載しています。特定のコンポーネントを実装する際に参照してください。

デザインの基本原則

1. クリーンでミニマルに

• 余白を十分に活用します
• ごちゃごちゃしたインターフェースは避けます
• 画面やセクションごとに主要なアクションを1つにします
• 不要な装飾要素は取り除きます
• コンテンツにゆとりを持たせます

2. カラーパレット

ニュートラルカラーを基調にする：

• グレーやオフホワイトを基調にします
• 白：#FFFFFF
• ライトグレー：#F5F5F5、#EEEEEE
• ミディアムグレー：#9E9E9E、#757575
• ダークグレー：#424242、#212121
• 純粋な黒：#000000（控えめに使用）

アクセントカラー：

• アプリのアクセントカラーは1色にします
• CTA、重要なアクション、主要な情報に控えめに使用します
• おすすめのアクセントカラー：エメラルド（#10B981）、インディゴ（#6366F1）、ローズ（#F43F5E）、アンバー（#F59E0B）
• 汎用的な紫／青のグラデーションは絶対に使用しないでください

色の使用ルール：

• ニュートラルカラー80％、セカンダリニュートラルカラー15％、アクセントカラー5％
• 背景：ライトグレーまたは白
• テキスト：明るい背景にダークグレー
• インタラクティブ要素：アクセントカラー
• 境界線／区切り線：非常に薄いグレー（#E5E5E5）

3. 余白のシステム（8px グリッド）

常に8の倍数を使用します：

• 8px：狭い余白（アイコンのパディング、インライン要素）
• 16px：標準の余白（ボタンのパディング、フォームフィールド間）
• 24px：セクション間の余白（カード内部のパディング）
• 32px：コンポーネント間の余白（カードやセクションの間）
• 48px：大きなセクション間の区切り
• 64px：画面レベルの余白（マージン）

適用方法：

• ほとんどのコンテナーには、パディングとして16pxまたは24pxを使用します
• 主要なセクション間のマージンは32pxにします
• 要素間の間隔は、標準では16px、詰めて配置するグループでは8pxにします
• 13pxや27pxのような任意の値は使用しないでください

4. タイポグラフィ

階層：

• H1：32px～40px、太字、使用頻度は低く（ページタイトルのみ）
• H2：24px～28px、セミボールド（セクション見出し）
• H3：20px～24px、セミボールド（サブセクション）
• 本文：16px～18px、レギュラー（読みやすさのため、最小でも16px）
• 小：14px、レギュラー（キャプション、メタデータ）
• 極小：12px、レギュラー（法的文書のみ、使用は控えめに）

フォントのルール：

• 1つのプロジェクトで使用するフォントファミリーは最大2種類にします
• 見出し用に1種類（ディスプレイフォントも可）
• 本文用に1種類（非常に読みやすいもの）
• おすすめの組み合わせ：
  • Inter + Inter（同一ファミリーでウェイトを変える）
  • SF Pro Display + SF Pro Text（Apple プラットフォーム）
  • Roboto + Roboto（Android）
  • システムフォントも常に使用できます

行の高さ：

• 見出し：1.2～1.3
• 本文：1.5～1.6
• 小さなテキスト：1.4

5. シャドウ

控えめにし、強くしすぎない：

• 小さなシャドウ：0 1px 3px rgba(0,0,0,0.12)
• 中程度のシャドウ：0 4px 6px rgba(0,0,0,0.1)
• 大きなシャドウ：0 10px 15px rgba(0,0,0,0.1)
• 浮き上がった要素のシャドウ：0 20px 25px rgba(0,0,0,0.1)

使用する場面：

• カード：控えめなシャドウか境界線のどちらか一方
• ボタン：ホバー時に非常に控えめなシャドウ
• モーダル／ダイアログ：中程度のシャドウ
• ドロップダウン：中程度のシャドウ
• 避けるもの： 強いドロップシャドウ、内側のシャドウ、複数のシャドウ

6. 角丸

角丸のガイドライン：

• 小さな要素（ボタン、入力欄）：6px～8px
• カード、コンテナー：8px～12px
• 大きなパネル：12px～16px
• 円形（アバター、アイコンボタン）：50%または9999px

やりすぎないこと：

• すべての要素を角丸にする必要はありません
• 次の要素では角を直角にしてもかまいません：
  • 画面の端
  • 全幅のセクション
  • データテーブル
  • ナビゲーションバー

7. インタラクティブな状態

すべてのインタラクティブ要素に必須です：

ボタン：

• デフォルト：基本色、控えめなシャドウ
• ホバー：少し暗くする（10％）、シャドウを持ち上げる
• アクティブ：押し込まれた見た目、暗くする（20％）
• 無効：不透明度40％、ホバーなし、ポインターカーソルなし
• フォーカス：視認できるアウトライン（アクセントカラー、2px、オフセット2px）

フォームフィールド：

• デフォルト：薄いグレーのボーダー（#E5E5E5）
• フォーカス：アクセントカラーのボーダー（2px）、シャドウを削除
• エラー：赤いボーダー、下にエラーテキスト
• 無効：グレーの背景、操作不可
• 有効：控えめな緑色のチェックマーク（任意）

リンク：

• デフォルト：アクセントカラー、ホバー時に下線
• 訪問済み：アクセントカラーを少し落ち着かせる
• 禁止：青 #0000FF（アクセントカラーが青の場合を除く）

カード：

• デフォルト：控えめなシャドウまたはボーダー
• ホバー：浮き上がる効果、少し強めのシャドウ
• アクティブ：即座にフィードバックを返す

8. モバイルファーストの考え方

必ずモバイル向けに設計してから、画面サイズを拡大してください：

• タッチターゲットの最小サイズは44x44px（iOS）、48x48px（Android）
• タップ可能な要素の間に十分な間隔を設ける（最小8px）
• 親指で操作しやすいナビゲーション（画面下部）
• モバイルでは1列のレイアウト
• レスポンシブブレークポイント：
  • モバイル：< 640px
  • タブレット：640px - 1024px
  • デスクトップ：> 1024px

コンポーネントのパターン

ボタン

プライマリーボタン（メインアクション）：

Background: Accent color
Text: White
Padding: 12px 24px (vertical, horizontal)
Border radius: 8px
Shadow: 0 1px 3px rgba(0,0,0,0.12)
Font: 16px, semibold
Hover: Darken 10%, lift shadow

セカンダリーボタン（代替アクション）：

Background: White
Text: Accent color
Border: 1px solid accent color
Padding: 12px 24px
Border radius: 8px
Hover: Light accent background (10% opacity)

ゴーストボタン（第3のアクション）：

Background: Transparent
Text: Dark gray
No border
Padding: 12px 24px
Hover: Light gray background

悪いボタンの例：

• ❌ グラデーションの背景
• ❌ 1つのボタンに複数の色を使用
• ❌ 余白が小さすぎる（窮屈に見える）
• ❌ ホバー時の状態がない
• ❌ テキストが小さすぎる（< 14px）

カード

標準的なカード：

Background: White
Border: 1px solid #E5E5E5 OR subtle shadow (not both)
Border radius: 12px
Padding: 24px
Margin bottom: 16px

OR

Background: White
Shadow: 0 4px 6px rgba(0,0,0,0.1)
Border radius: 12px
Padding: 24px
Margin bottom: 16px

カード内コンテンツの間隔：

• タイトルとサブタイトルの間：8px
• サブタイトルとコンテンツの間：16px
• コンテンツセクション間：24px
• コンテンツとアクションの間：24px

悪いカードの例：

• ❌ ボーダーとシャドウを両方使用
• ❌ 重いシャドウ
• ❌ 一貫性のないパディング
• ❌ 色が多すぎる

フォーム

フォームフィールド：

Label: 14px, semibold, dark gray, margin bottom 8px
Input: 
  - Height: 44px minimum
  - Padding: 12px 16px
  - Border: 1px solid #E5E5E5
  - Border radius: 8px
  - Background: White
  - Font: 16px
  - Focus: Accent border, no shadow
  
Error state:
  - Border: Red
  - Helper text: Red, 14px, margin top 4px
  
Field spacing: 24px between fields

フォームのレイアウト：

• ラベルは入力欄の上に配置（横ではなく）
• 必須項目を明確に表示
• 関連するフィールドをグループ化
• 十分な間隔を確保（最小24px）
• 送信ボタン：モバイルでは全幅、デスクトップでは自動幅

悪いフォームの例：

• ❌ 入力欄の中にラベルを配置（プレースホルダーテキストはラベルではありません）
• ❌ テキストが小さすぎる（< 16px）
• ❌ 間隔が窮屈
• ❌ エラー状態がない
• ❌ 必須項目が不明確

ナビゲーション

トップナビゲーション：

Height: 64px
Background: White
Border bottom: 1px solid #E5E5E5
Padding: 0 32px (desktop), 0 16px (mobile)
Logo: 32px height
Links: 16px, medium weight, dark gray
Active link: Accent color

ボトムナビゲーション（モバイル）：

Height: 56px
Background: White
Shadow: 0 -4px 6px rgba(0,0,0,0.1)
Icons: 24px, centered
Labels: 12px (optional)
Active: Accent color

デザイン品質チェックリスト

UIを完成とみなす前に、次の項目を確認してください：

レイアウト：

• 全体に十分な余白がある
• 8pxグリッドを使用した一貫性のある間隔
• ごちゃごちゃしていたり、窮屈になったりしていない
• 視覚的な階層が明確

色：

• ベースカラーはニュートラル（グレー／白）
• アクセントカラーは1色のみ
• グラデーションは使用しない（特に指定された場合を除く）
• 十分なコントラストがある（最低でもWCAG AA）

タイポグラフィ：

• 明確な階層（サイズ＋ウェイト）
• 本文テキストは最小16px
• フォントファミリーは最大2種類
• 行の高さが読みやすい

インタラクティブ要素：

• ホバー時の状態が明確
• アクティブ状態が明確
• 無効状態が明確
• フォーカス状態が明確（キーボード操作）

コンポーネント：

• ボタンに適切なパディングがある
• フォームに明確なラベルと間隔がある
• カードにはボーダーかシャドウのどちらか一方を使用し、両方は使わない
• シャドウが控えめ

モバイル：

• タッチターゲットの最小サイズは44x44px
• 小さな画面でも動作する
• タッチ操作に十分な間隔がある

プラットフォーム固有の注意事項

SwiftUI

• 8pxグリッドに基づく明示的な値を指定して .padding() を使用する
• 一貫した色を使うため、16進数イニシャライザーで Color を使用する
• ダークモードには @Environment(\.colorScheme) を活用する
• アイコンにはSF Symbolsを使用する（常に一貫性を保つ）

Android Studio

• dp 単位を使用する（1dp ≈ mdpiでの1px）
• Material Design 3のコンポーネントは使用できますが、色はカスタマイズする
• 間隔の定数には dimens.xml を使用する
• モダンなUIにはComposeを活用する

Web（HTML/CSS/React）

• 色と間隔にはCSS変数を使用する
• モバイルファーストのメディアクエリを使用する
• セマンティックHTMLを使用する
• このガイドに沿ったTailwind CSSクラスを活用する

避けるべきアンチパターン

以下のことは絶対にしないでください：

• ❌ あらゆる場所で虹色のグラデーションを使う
• ❌ 要素ごとに色を変える
• ❌ デフォルトで紫や青のグラデーションを使う
• ❌ 小さくて読みにくいテキストを使う（本文で 16px 未満）
• ❌ 余白を統一しない（ランダムな値を使う）
• ❌ 強いドロップシャドウを使う
• ❌ あらゆるものの角を過度に丸くする
• ❌ インタラクション状態を設定しない
• ❌ 同じ要素にボーダーとシャドウの両方を使う
• ❌ 余白のない雑然としたレイアウトにする
• ❌ フォントファミリーを 2 種類より多く使う
• ❌ タッチターゲットを 44px 未満にする

クイックリファレンス

余白： 8、16、24、32、48、64px タイポグラフィ： 本文は最低 16px、フォントは最大 2 種類 色： ニュートラルカラーをベースに、アクセントカラーを 1 色だけ使用 シャドウ： 控えめなものだけを使用 角丸： ほとんどの要素で 6～12px インタラクション状態： ホバー、アクティブ、無効、フォーカスを必ず設定

UI コンポーネントを作成する前に、必ずこのガイドを参照してください。一貫性がプロフェッショナルなデザインの鍵です。