robis-design-best-practice

Robi のデザインベストプラクティス

クイックリファレンスチェックリスト

UI コンポーネントを設計またはレビューする際は、次の点を確認してください。

• 色の彩度は低くします（「バイブコーディング」のような彩度が高すぎる色は避けます）
• ダークモードの色は、適切に彩度を下げるか明るくします
• テキストのコントラストは WCAG AAA 基準を満たします
• 純粋な黒（#000000）や純粋な白（#FFFFFF）は使わず、色味を加えたバリエーションを使います
• すべての間隔は 4px の倍数にします
• ネストされた境界半径は、次の式に従います：inner_radius = outer_radius - padding
• アイコンの太さとスタイルは、全体を通して統一します
• ダークモードでは影を避け、代わりに境界線や色を使います
• アニメーションには滑らかなイージングを使います（リニアは避けます）
• プレミアムな印象を与えるマイクロインタラクションを加えます

色のガイドライン

彩度が高すぎる色を避ける

「パープル・インターネット理論」とは、AI や多くのモダンなサイトで、鮮やかで彩度の高い色が使われすぎているという考え方です。こうした色はユーザーの目を疲れさせ、サイトで過ごす時間を短くしてしまいます。

HSL の基本：

• 色相：色相環上の位置（0～360°）
• 彩度：色の強さ（0～100%）
• 明度：色の明るさ／暗さ（0～100%）

ルール：ネオブルータリズムのデザインを除き、彩度を低く保つことを目指します。

例：

Bad:  hsl(280, 100%, 60%) - Too vibrant purple
Good: hsl(280, 30%, 60%)  - Muted, easier on eyes

ダークモードでの色の調整

黒い背景では色が明るく見えます。次の方法で補正してください。

• 色の彩度を下げる（彩度を 10～20% 下げます）
• 明度を少し上げる

Light mode: hsl(220, 40%, 50%)
Dark mode:  hsl(220, 25%, 65%)  // Less saturated, lighter

WCAG のコントラスト基準

背景上のテキストには、常に AAA 評価を目指してください。

• AAA：コントラスト比は最低 7:1
• AA：コントラスト比は最低 4.5:1（許容できる代替基準）

WebAIM Contrast Checker などのツールや、ブラウザーに組み込まれた開発者ツールを使います。

ハレーションを防ぐ

白地に純粋な黒、または黒地に純粋な白を使うと、ハレーションと呼ばれる「ぼやけた縁取り」効果が生じます。

解決策：色味を少し加えたバリエーションを使います。

/* Instead of pure values */
/* Bad */ background: #000000;
/* Bad */ color: #FFFFFF;

/* Use tinted variations */
/* Good */ background: #0a0a0a;  /* Slightly lighter black */
/* Good */ color: #fafafa;       /* Slightly darker white */

/* Or with slight color tints */
/* Good */ background: hsl(220, 5%, 5%);   /* Dark with blue tint */
/* Good */ color: hsl(40, 5%, 98%);        /* Off-white with warm tint */

間隔のシステム

すべての間隔は 4px の倍数にする必要があります。

これにより、UI 全体に視覚的な一貫性と整列が生まれます。

Tailwind/Shadcn のスケール

p-1  = 4px     gap-1  = 4px
p-2  = 8px     gap-2  = 8px
p-3  = 12px    gap-3  = 12px
p-4  = 16px    gap-4  = 16px
p-6  = 24px    gap-6  = 24px
p-8  = 32px    gap-8  = 32px

デザイン全体で一貫した間隔の値を使います。

• 小さい間隔：4px、8px
• 中くらいの間隔：12px、16px
• 大きい間隔：24px、32px、48px

境界半径の重ね合わせ

境界半径のある要素をネストする場合、同心円状の見た目を保つため、パディングの値を加えます。

式：inner_radius = outer_radius - padding

/* Parent container */
.outer {
  border-radius: 16px;
  padding: 12px;
}

/* Child element */
.inner {
  border-radius: 4px;  /* 16px - 12px = 4px */
}

Tailwind の例：

<div className="rounded-2xl p-3">  {/* 16px radius, 12px padding */}
  <div className="rounded">         {/* 4px radius */}
    Content
  </div>
</div>

アイコンの一貫性

アイコンのスタイルを混在させない

同じ UI で、デュオトーン、塗りつぶし、レギュラー、シン、ライトの太さを混在させないでください。

Bad: Using filled home icon + regular settings icon + thin user icon
Good: All icons use regular weight and same size

アクティブ／選択状態を示す

混在ルールの例外：同じアイコンの塗りつぶし版を使って、アクティブ／選択状態を示すことができます。

/* Navigation example */
<Icon 
  icon={isActive ? "home-filled" : "home-regular"} 
  weight="regular"
  size={24}
/>

一貫性のルール

• すべてのアイコンで太さを統一します（例：すべて「レギュラー」）
• 同じコンテキスト内でサイズを統一します（例：ナビゲーションアイコンはすべて 24px）
• フォーカス中／アクティブなアイコンは、ストロークの色を変えるか、塗りつぶし版にします
• アイコンファミリーを混在させないでください（Phosphor と Heroicons を混ぜないでください）

影とダークモード

ダークモードの方針

ダークモードでは、浮き上がりを表現するための影の使用を避けてください。代わりに次を使います。

• 控えめな色の境界線
• 背景色のバリエーション
• 明度のわずかな調整

/* Light mode */
.card-light {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Dark mode - use border instead */
.card-dark {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: hsl(220, 10%, 12%);
}

ニューモーフィックデザインの注意点

ニューモーフィックデザインは、奥行きとリアルな印象を生み出すために影に大きく依存します。ライトモードではうまく機能しますが、ダークモードでは問題が生じることがあります。控えめに使いましょう。

アニメーションとイージング

リニアイージングを避ける

リニアな動き（y=x）は機械的で不自然に感じられます。

滑らかなイージング関数を使います。

/* CSS */
/* Bad */  transition: all 0.3s linear;
/* Good */ transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);

/* Common easings */
ease-out:     cubic-bezier(0.0, 0.0, 0.2, 1)    /* Decelerating */
ease-in-out:  cubic-bezier(0.4, 0.0, 0.2, 1)    /* Smooth both ends */
spring:       Custom spring physics              /* Bouncy, natural */

Framer Motion の例

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ 
    duration: 0.4,
    ease: [0.4, 0.0, 0.2, 1]  // Custom cubic-bezier
  }}
>
  Content
</motion.div>

マイクロインタラクション

プレミアムな印象を与える、小さなインタラクティブな工夫を加えます。Linear、Notion、Supabase などの企業は、こうした工夫に優れています。

マイクロインタラクションの例

• 滑らかな色の変化を伴う、ボタンのホバー状態
• クリック時の控えめな拡大縮小（scale: 0.98）
• 読み込み中のスケルトンアニメーション
• スライドインアニメーション付きのトースト通知
• チェック時のチェックボックスアニメーション
• 境界線の色が変化する、入力欄のフォーカス状態
• 表示の遅延とフェードインを伴うホバーツールチップ

/* Button with micro-interaction */
<button className="
  px-4 py-2 rounded-lg
  bg-blue-600 hover:bg-blue-700
  transform transition-all duration-200
  hover:scale-[1.02] active:scale-[0.98]
">
  Click me
</button>

レイアウトの代替案

データの表示形式は、テーブルやカードだけではありません。

次のような代替レイアウトを検討してください。

• タスク管理にはカンバンボード
• 時系列データにはタイムラインビュー
• ダッシュボードには弁当箱型のグリッドレイアウト
• 区切り線付きのリストグループ
• 階層データにはツリービュー
• メディアにはギャラリー／メイソンリーグリッド
• アコーディオン／折りたたみセクション

テーブルやカードのパターンにとらわれず、より魅力的なインターフェースを作りましょう。

デザインのインスピレーション

見て学ぶ

優れた作品を研究して、デザインのセンスを磨きましょう。

参考にするプラットフォーム：

• Pinterest - UI デザインのパターンとインスピレーション
• Twitter - デザインに関するスレッドや専門家のヒント
• cosmos.so - コンポーネントとパターンのライブラリ
• Behance - プロのデザインポートフォリオ
• Dribbble - UI デザインの作品やコンセプト

模倣して学ぶ

「あなたより優れた誰かが素晴らしいものを作っているものです。そこから学びましょう。」

プロセス：

1. 気に入ったデザインを見つけます
2. 何がうまく機能しているのか分析します
3. 手法を学ぶために要素を再現します
4. 自分のスタイルに合わせて応用し、取捨選択します

質の高い作品に触れ、意識的に練習を重ねることで、センスは磨かれていきます。

追加リソース

コード例と実装の詳細については、examples.mdを参照してください。

参考：HSL カラーツールの kigen.design/color。