frontend-design

フロントエンドデザイン

意図的な美しさとプロフェッショナルな仕上がりを備えたインターフェースを作成します。ありきたりな「テンプレート」のような見た目は避けてください。

デザインプロセス

コードを書く前に、次の質問に答えてください。

1. 目的 — このインターフェースはどのような問題を解決しますか？誰が使いますか？
2. トーン — どのような美的方向性ですか？（ブルータリスト、ラグジュアリー、遊び心のある、エディトリアル、レトロフューチャーなど）
3. 制約 — 対象デバイス、アクセシビリティ要件、パフォーマンス予算
4. 特徴 — 何がこのインターフェースを印象に残るものにしますか？

方向性を決めましょう。欠点のある大胆なデザインより、控えめなデザインのほうが劣ります。

タイポグラフィ

フォントの選択

使い古された定番は避けてください。インターフェースの個性を際立たせる書体を選びましょう。

/* BAD: Generic, seen everywhere */
font-family: 'Inter', 'Roboto', 'Arial', sans-serif;

/* GOOD: Distinctive and paired intentionally */
--font-display: 'Instrument Serif', serif;      /* headings */
--font-body: 'Satoshi', sans-serif;              /* body text */
--font-mono: 'Berkeley Mono', monospace;         /* code */

タイポグラフィの詳細

/* Tabular numbers for aligned columns */
.data-cell { font-variant-numeric: tabular-nums; }

/* Balanced headings prevent widow words */
h1, h2, h3 { text-wrap: balance; }

/* Proper ellipsis character */
.truncate::after { content: '\2026'; } /* … not ... */

テキストのオーバーフローは意図的に処理してください。

/* Single line truncation */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Multi-line clamping */
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Flex children need min-w-0 for truncation to work */
.flex-child { min-width: 0; }

カラーシステム

テーマの構成

明確で意味のある名前を付けた CSS カスタムプロパティを基盤に構築します。

:root {
  /* Primitives */
  --gray-50: oklch(0.98 0.005 240);
  --gray-900: oklch(0.15 0.01 240);
  --accent: oklch(0.65 0.25 30);

  /* Semantic tokens */
  --color-bg: var(--gray-50);
  --color-text: var(--gray-900);
  --color-text-muted: oklch(0.55 0.01 240);
  --color-border: oklch(0.88 0.005 240);
  --color-accent: var(--accent);
  --color-accent-hover: oklch(0.58 0.28 30);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: var(--gray-900);
    --color-text: var(--gray-50);
    --color-text-muted: oklch(0.65 0.01 240);
    --color-border: oklch(0.28 0.005 240);
  }
}

カラーの原則

• パレットを決める — 主役となる色を1色、アクセントカラーを1〜2色にします。5色の虹のような配色は避けてください。
• oklch を使う — 知覚的に均一で、プログラムによるパレット作成には hex/hsl より適しています。
• コントラスト比 — 本文は最低4.5:1、大きなテキストは3:1（WCAG AA）を確保します。

モーションとアニメーション

ルール

1. ユーザーの設定を尊重する：常に prefers-reduced-motion を尊重します
2. transform と opacity だけをアニメーションさせる：これらは GPU で合成されます。それ以外はレイアウトや描画を引き起こします
3. transition: all は使わない：プロパティを個別に指定します
4. アニメーションは中断可能にする：ユーザー操作によって実行中のアニメーションをキャンセルできるようにします

/* GOOD: Specific properties, respects user preference */
.card {
  transition: transform 200ms ease-out, opacity 150ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
}

効果の高いタイミング

アニメーションの予算は、次の場面に重点的に使います。

• ページ遷移 — 順序を調整した段階的な表示
• 状態の変化 — 読み込み中 → コンテンツ、折りたたみ → 展開
• フィードバック — ボタンを押したとき、フォーム送信の確認

避けるもの：あらゆる要素への無作為なホバー効果、スクロールジャック、装飾的な背景アニメーション。

空間構成

レイアウトの原則

• 非対称性は興味を引く — 完全に中央揃えのグリッドレイアウトは予測可能です
• 意図的な余白 — ホワイトスペースはデザイン要素であり、間違いではありません
• グリッドからはみ出す要素 — グリッドに重なったり、グリッドからはみ出したりする要素を1つ設けると、注目を集められます
• 斜めの流れ — 斜め方向の視線誘導は、横方向の視線移動よりも人を引きつけます

レスポンシブ対応の方針

/* Fluid typography */
h1 { font-size: clamp(2rem, 5vw, 4rem); }

/* Container queries for component-level responsiveness */
.card-container { container-type: inline-size; }

@container (min-width: 400px) {
  .card { grid-template-columns: 200px 1fr; }
}

背景と雰囲気

レイヤーを重ねた表現で、視覚的な奥行きを作り出します。

/* Noise texture overlay */
.surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('/noise.svg');
  opacity: 0.03;
  pointer-events: none;
}

/* Gradient mesh */
.hero {
  background:
    radial-gradient(ellipse at 20% 50%, oklch(0.7 0.15 250 / 0.3), transparent 50%),
    radial-gradient(ellipse at 80% 20%, oklch(0.7 0.2 30 / 0.2), transparent 50%),
    var(--color-bg);
}

画像とメディア

// Explicit dimensions prevent layout shift
<Image src={src} width={800} height={600} alt="Description" />

// Below-fold: lazy load
<Image src={src} loading="lazy" alt="..." />

// Above-fold: prioritize
<Image src={src} priority alt="..." />

// Decorative: empty alt
<Image src={pattern} alt="" aria-hidden="true" />

インタラクションの状態

すべてのインタラクティブ要素には、次の4つの状態が必要です。

状態	表現
デフォルト	基本の外観
ホバー	コントラストを高める、またはわずかに変化させる
フォーカス	:focus-visible を使ってリングを表示する
アクティブ／押下	わずかに拡大する、または色を変える
無効	不透明度を下げる ＋ cursor: not-allowed

.button {
  background: var(--color-accent);
  transition: background 150ms ease-out, transform 100ms ease-out;
}
.button:hover { background: var(--color-accent-hover); }
.button:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.button:active { transform: scale(0.98); }

アンチパターン

避けるもの	代わりに
どこでも Inter／Roboto／Arial を使う	個性的で、プロジェクトにふさわしい書体を選ぶ
白地に紫のグラデーション	一貫性のある具体的なパレットを決める
均一なカードグリッド	サイズに変化をつけ、目立つカードやヒーローカードを加える
何にでもシャドウを付ける	高さの階層を示すために、シャドウを目的に応じて使う
すべての要素に border-radius: 9999px を適用する	コンテンツの種類や文脈に合わせて角丸を調整する
どの要素にも同じホバー効果を使う	要素の機能に合わせてインタラクションのフィードバックを調整する