DESIGN SYSTEM

Primary Palette

Background Rules

ハードコードされた色ではなく、意味を持つセマンティックトークンを使用することで、 テーマ切り替えとデザイン変更が容易になります。

Usage Example

/* CSS Variables (globals.css) */
:root {
  --pi-text-primary: theme('colors.neutral.900');
  --pi-bg-primary: #F5F3EE;
  --pi-bg-surface: theme('colors.white');
}

.dark {
  --pi-text-primary: theme('colors.white');
  --pi-bg-primary: theme('colors.neutral.950');
  --pi-bg-surface: theme('colors.neutral.900');
}

/* Tailwind config */
colors: {
  'pi-text': 'var(--pi-text-primary)',
  'pi-bg': 'var(--pi-bg-primary)',
}

以下のアイコンのみ使用可。シンプルで視認性の高いものを厳選。

Icon Sizes

Spacing Scale (4px base)

Border Radius

Container Width

Header 仕様（シンプル＆クリーン）

Footer 仕様（3行中央寄せ）

Breakpoints

モバイルファースト設計。PC最適化には lg: を使用。

Container Width（PC拡張）

PCでは横幅を活用。lg:max-w-*xl で拡張。

Grid Columns（PC拡張）

PCではカラム数を増やして一覧性を向上。

Header（PC対応）

flex-col          // ナビ縦並び
w-[18px] h-[18px] // アイコン
text-[9px]        // ラベル
px-4 py-2.5       // パディング

lg:flex-row       // ナビ横並び
lg:w-5 lg:h-5     // アイコン拡大
lg:text-xs        // ラベル拡大
lg:px-6 lg:py-3   // パディング拡大

2カラムレイアウト（PC専用）

ガチャ画面など、PCでは左右分割で情報量を増やす。

<div className="lg:grid lg:grid-cols-2 lg:gap-8 lg:items-start">
  {/* 左カラム: 画像（sticky） */}
  <div className="lg:sticky lg:top-20">
    <Image ... />
  </div>

  {/* 右カラム: オプション */}
  <div className="mt-6 lg:mt-0">
    <PlanSelection ... />
  </div>
</div>

Common Patterns

grid grid-cols-2 sm:grid-cols-3
grid grid-cols-3 sm:grid-cols-4

px-3 sm:px-4
gap-2 sm:gap-3
p-4 sm:p-5

text-2xl sm:text-4xl   // 見出し
text-sm sm:text-base   // 本文
text-[10px] sm:text-xs // キャプション

w-4 h-4 sm:w-5 sm:h-5  // アイコン
w-20 h-20 sm:w-24 sm:h-24 // サムネイル

hidden sm:inline  // sm以上で表示
sm:hidden         // smで非表示

flex flex-col lg:flex-row

Safe Area (iOS対応)

pt-[env(safe-area-inset-top)]

pb-[env(safe-area-inset-bottom)]

Standard Layout Template

// コンテナ
<div className="max-w-3xl mx-auto px-3 sm:px-4 py-6 sm:py-8">

  // セクション見出し
  <h2 className="text-lg sm:text-xl font-bold mb-3 sm:mb-4">

  // グリッド
  <div className="grid grid-cols-2 sm:grid-cols-3 gap-3 sm:gap-4">

  // フレックス
  <div className="flex items-center gap-2 sm:gap-3">

  // ボタン
  <button className="p-2 sm:p-3 rounded-lg">

  // テキスト切り替え
  <span className="hidden sm:inline">詳細テキスト</span>
  <span className="sm:hidden">短縮</span>
</div>

レイヤーの重なり順を統一するためのスケール。

Visual Stack

Buttons

Cards

Badges

バッジは rounded-full + text-xs + font-bold で統一

Form Inputs

focus: ring-2 ring-neutral-900 (light) / ring-amber-400 (dark)

Glassmorphism

bg-white/80 backdrop-blur-xl border-white/20

Header Navigation と特別なUIにのみ使用

Border Beam (SSR専用)

SSRカードの演出にのみ使用。乱用禁止。

Duration & Easing

一貫したアニメーション体験のため、標準化されたデュレーションとイージングを使用。

// CSS Variables
:root {
  --pi-duration-instant: 100ms;
  --pi-duration-fast: 150ms;
  --pi-duration-normal: 200ms;
  --pi-duration-slow: 300ms;
  --pi-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --pi-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

// Tailwind Classes
transition-all duration-150 ease-out
transition-transform duration-200 ease-in-out

Motion Patterns

initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, ease: "easeOut" }}

type: "spring"
stiffness: 500
damping: 35

staggerChildren: 0.1
delayChildren: 0.2

whileHover={{ scale: 1.02 }}
whileTap={{ scale: 0.95 }}

Skeleton Loading

コンテンツ読み込み中は Skeleton で表示。シンプルなパルスアニメーション。

// Skeleton base
<div className="bg-neutral-200 rounded animate-pulse" />

// Light mode: bg-neutral-200
// Dark mode: bg-neutral-700

Spinner

ボタン内や小さなローディング表示に使用。

<div className="w-4 h-4 border-2 border-neutral-400 border-t-white rounded-full animate-spin" />

Empty / Error States

Touch Targets

モバイルファーストのため、タッチターゲットは最小44x44pxを確保。

// ボタン・リンクの最小サイズ
min-h-[44px] min-w-[44px]

// パディングで確保
p-3 (48px with icon)

Focus States

キーボード操作時のフォーカスリングを必ず表示。

// Focus visible
focus-visible:ring-2
focus-visible:ring-amber-400
focus-visible:ring-offset-2

Color Contrast

テキストと背景のコントラスト比 4.5:1 以上を確保。

Screen Reader Support

スクリーンリーダー対応のための ARIA 属性とセマンティック HTML の使用。

// アイコンボタンの例
<button
  aria-label="カートに追加"
  className="p-3 bg-neutral-900 rounded-xl"
>
  <ShoppingCart className="w-5 h-5" />
</button>

// 画像の代替テキスト
<Image
  src={photo}
  alt="商品名: フォトブック A4サイズ"
/>

Reduced Motion Support

motion-reduce メディアクエリで視覚障害やモーション酔いへの配慮。

// Framer Motion での対応
const prefersReducedMotion =
  window.matchMedia('(prefers-reduced-motion: reduce)').matches;

<motion.div
  initial={prefersReducedMotion ? {} : { opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={prefersReducedMotion ? { duration: 0 } : { duration: 0.3 }}
/>

// CSS での対応
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

アーティストごとに固有のテーマカラーを定義。ヘッダー、ボタン、アクセントに適用。

Theme Usage

// テーマ取得
import { getArtistTheme } from "@/lib/artist-themes";

const theme = getArtistTheme(artistId);

// 使用例
style={{ color: theme.primaryHex }}
className={`bg-gradient-to-r ${theme.gradient}`}