generic-static-design-system

静的サイトのデザインシステム

ミニマルな静的サイト（純粋な HTML/CSS/JS）向けのデザインシステムパターンです。

拡張元： 汎用デザインシステム - 色彩理論、タイポグラフィのスケール、スペーシングシステム、コンポーネントの状態について、ベースとなるスキルをお読みください。

純粋な CSS によるアプローチ

プリプロセッサも Tailwind もビルドツールも使わず、CSS のみを使用します。

CSS カスタムプロパティ

:root {
  /* Brand colors - keep palette minimal */
  --bg-primary: #000000;
  --text-primary: #ffffff;
  --accent: #00ff00;

  /* Spacing */
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  /* Timing */
  --transition-fast: 0.15s;
  --transition-base: 0.3s;
}

システムフォントスタック（ウェブフォントなし）

/* System fonts = zero load time */
body {
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

code {
  font-family: "SF Mono", Monaco, "Courier New", monospace;
}

clamp() によるレスポンシブなタイポグラフィ

/* Fluid sizing, no media queries needed */
h1 {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
}

body {
  font-size: clamp(1rem, 3vw, 1.125rem);
}

CSS のみのアニメーション

キーフレームアニメーション

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.pulse {
  animation: pulse 2s ease-in-out infinite;
}

トランジションパターン

/* Hover effect - GPU accelerated */
.link {
  transition:
    transform var(--transition-base) ease,
    color var(--transition-base) ease;
}

.link:hover {
  transform: translateY(-2px);
  color: var(--accent);
}

nth-child による段階的なアニメーション

.menu a {
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.menu.visible a {
  opacity: 1;
  transform: translateY(0);
}
.menu.visible a:nth-child(1) {
  transition-delay: 0.1s;
}
.menu.visible a:nth-child(2) {
  transition-delay: 0.2s;
}
.menu.visible a:nth-child(3) {
  transition-delay: 0.3s;
}

CSS のみのインタラクティブパターン

表示／非表示の切り替え

.hidden {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.visible {
  max-height: 300px; /* Must be > content height */
}

アイコンの回転

.arrow {
  transition: transform 0.3s ease;
}

.rotated .arrow {
  transform: rotate(180deg);
}

フォーカス状態

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

コンポーネントパターン（JS なし）

アクセシブルなボタン

<button class="btn" type="button">Click Me</button>

.btn {
  padding: var(--space-sm) var(--space-md);
  background: transparent;
  border: 1px solid var(--text-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: all var(--transition-base) ease;
}

.btn:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg-primary);
}

ナビゲーション

<nav>
  <a href="#section1">Section 1</a>
  <a href="#section2">Section 2</a>
</nav>

nav a {
  padding: var(--space-sm);
  text-decoration: none;
  color: var(--text-primary);
}

nav a:hover {
  color: var(--accent);
}

パフォーマンス目標

ファイル	最大サイズ
HTML	< 5KB
CSS	< 10KB
JS	< 5KB
合計	< 50KB

Lighthouse	目標
パフォーマンス	95+
アクセシビリティ	90+
ベストプラクティス	100

関連項目

• 汎用デザインシステム - トークンの整理、スペーシング
• デザインパターン - 基本パターン
• UX の原則 - 視覚的な階層