Picture-i
Back

DESIGN SYSTEM

Picture-iDesign Guidelines v2.0

このガイドラインに従うことで、一貫性のある美しいUIを維持できます。
例外は認めません。

Design Philosophy

Minimal & Clean

装飾を最小限に。余白を恐れるな。

Consistent

同じ要素には同じスタイル。例外なし。

Intentional

すべてのデザイン決定に理由がある。

Color System

Primary Palette

900

Text, CTA

800

Dark BG

600

Secondary

400

Inactive

200

Border

100

Light BG

Accent Color

ONLY AMBER

amber-400

SSR, Primary accent

amber-500

Hover state

yellow-300

Gradient end

blue, purple, pink, cyan などの派手な色は禁止

Background Rules

Light Mode Pages

#F5F3EE

Warm gray - 温かみのある背景

Dark Mode Pages

gradient 900→800

ガチャ、プレビュー系

Typography

Noto Sans JP

唯一許可されたフォント
あいうえお Aa 123

Heading 1

ページタイトル

あいうえお Aa 123

Heading 2

セクション

あいうえお Aa 123

Heading 3

カード見出し

あいうえお Aa 123

Body

本文

あいうえお Aa 123

Caption

補足テキスト

あいうえお Aa 123

Micro

バッジ、ラベル

Do

  • font-bold は見出しのみ
  • 本文は font-medium または font-normal
  • 行間は適度に（leading-relaxed）
  • 英語は tracking-wide

Don't

  • font-black, font-thin は禁止
  • イタリック体は使わない
  • アンダーライン装飾は禁止
  • text-shadow は禁止

Icon System

CRITICAL

Approved Icons (Lucide)

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

禁止アイコン・スタイル

アイコンの種類:

  • • 絵文字風のアイコン
  • • 手書き風アイコン
  • • 3D風アイコン
  • • グラデーション塗りのアイコン
  • • 過度に装飾されたアイコン

使い方:

  • • stroke-width を変更しない（デフォルト: 2）
  • • アイコンに影をつけない
  • • 回転・歪みアニメーション禁止
  • • アイコン単体での過度な強調禁止
  • • テキストなしのアイコンボタンは最小限に

Icon Sizes

12px

バッジ内

16px

インライン

20px

ボタン、ナビ

24px

リスト

32px

カード

40px

ヒーロー

Spacing & Layout

Spacing Scale (4px base)

4px

8px

12px

16px

24px

32px

40px

48px

Border Radius

lg / 8px

ボタン小

xl / 12px

入力、アイコン背景

2xl / 16px

カード、モーダル

full

バッジ、アバター

rounded-sm, rounded-md は原則禁止。統一感を保つため。

Container Width

max-w-smモーダル
max-w-mdフォーム
max-w-2xlコンテンツ
max-w-3xlメインレイアウト
max-w-4xlワイドコンテンツ

Responsive Design

MOBILE FIRST

Breakpoints

モバイルファースト設計。sm ブレークポイントを中心に使用。

default0px〜モバイル（デフォルト）100%
sm:640px〜タブレット・横向きスマホ80%
md:768px〜タブレット（大）20%
lg:1024px〜デスクトップ10%

xl (1280px) 以上はほぼ未使用。シンプルに sm: 中心で対応。

Common Patterns

Grid Columns

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

写真グリッド: 2列 → 3列

Padding / Gap

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

微調整: 12px → 16px

Text Size

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

Icon / Element Size

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

Hidden / Show

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

テキスト短縮・切り替え

Flex Direction

flex flex-col lg:flex-row

モバイル縦 → PC横

Safe Area (iOS対応)

Header

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

ノッチ・Dynamic Island対応

Footer

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

ホームインジケータ対応

Do

  • モバイルファーストで書く（sm: で拡張）
  • sm ブレークポイントを中心に使う
  • safe-area-inset でノッチ対応
  • max-w-3xl で最大幅を制限
  • グリッドは 2列 → 3列 の段階的変更

Don't

  • xl 以上のブレークポイントを多用
  • 3段階以上のブレークポイント変更
  • 固定ピクセル幅（w-[500px]等）
  • 複雑なレイアウト切り替え
  • デスクトップファーストで書く

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>

Z-Index Scale

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

z-00デフォルト、背景背景画像
z-1010浮いた要素カード、ボタン
z-2020固定ナビHeader, 固定ボトムバー
z-3030ドロワーサイドメニュー
z-4040オーバーレイ背景の暗転
z-5050モーダル確認ダイアログ

Visual Stack

z-0: Background
z-10: Card
z-20: Header
z-40: Overlay
z-50: Modal

z-index は 10 単位で使用。中間値（z-15等）は使わない。

Components

Buttons

Button Rules:

  • • padding: py-3 px-6 (標準) / py-4 px-8 (大)
  • • border-radius: rounded-xl (標準) / rounded-2xl (CTA)
  • • font: font-bold (Primary) / font-medium (Secondary)
  • • グラデーションボタンは禁止（BorderBeamで代用）

Cards

Light Card

bg-white shadow-sm

Dark Card

bg-neutral-800 border

カードには必ず rounded-2xl を使用。shadow は shadow-sm のみ。

Badges

DefaultSSRSRRN完了発送中

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

Form Inputs

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

Effects & Animation

Glassmorphism

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

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

Border Beam (SSR専用)

SSR

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

Framer Motion Settings

Page Transition

initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}

Spring Animation

type: "spring"
stiffness: 500
damping: 35

Stagger

delay: index * 0.1

Tap Effect

whileTap={{ scale: 0.95 }}

bounce, elastic, wiggle などの過度なアニメーションは禁止

Loading States

Skeleton Loading

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

Card Skeleton

List Skeleton

Code

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

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

Spinner

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

16px

24px

32px

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

Empty / Error States

データがありません

Empty State

エラーが発生しました

Error State

Golden Rules

MUST READ

必ず守ること

  • Neutral カラーパレットを使う
  • Lucide Icons のみ使用
  • rounded-xl / rounded-2xl を使う
  • shadow-sm のみ（shadowは控えめに）
  • 余白はたっぷり取る
  • font-weight は 400-700 の範囲
  • アニメーションは subtle に
  • 一貫性を最優先する

絶対にやらないこと

  • 派手な色（blue, pink, cyan等）を使う
  • カスタムアイコン、絵文字を使う
  • グラデーションテキスト
  • shadow-lg, shadow-2xl の乱用
  • 要素を詰め込みすぎる
  • font-thin, font-black を使う
  • 派手なアニメーション
  • デザインシステムの例外を作る

Accessibility

A11Y

Touch Targets

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

32px NG

?

40px 要注意

44px OK

48px 推奨

// ボタン・リンクの最小サイズ
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 以上を確保。

neutral-900 on white21:1
neutral-600 on 1005.7:1
white on neutral-90021:1
neutral-400 on 8005.5:1

Do

  • タッチターゲット 44px以上
  • フォーカスリングを表示
  • コントラスト比 4.5:1 以上
  • 適切な alt テキスト
  • フォームのラベル明示

Don't

  • 小さすぎるボタン（32px未満）
  • outline: none でフォーカス非表示
  • 薄い色のテキスト（neutral-300等）
  • 画像の alt を空にする
  • 色だけで情報を伝える

Photo Standards

Standard

3:4

Cheki

1:1.35 + margin

Thumbnail

1:1

Artist Themes

8 THEMES

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

星野ひかり

artist-001

#ec4899
#f472b6

月城あおい

artist-002

#3b82f6
#60a5fa

桜庭りん

artist-003

#a855f7
#c084fc

天音みく

artist-004

#10b981
#34d399

紅葉かえで

artist-005

#f97316
#fb923c

白雪まゆ

artist-006

#94a3b8
#cbd5e1

灰原しおり

artist-007

#6b7280
#9ca3af

黒崎れい

artist-008

#171717
#262626

Theme Usage

適用箇所

  • • ヘッダーのアーティスト名（グラデーション）
  • • ヘッダー上部のアクセントライン
  • • CTAボタン・リンクの色
  • • カテゴリアイコンの背景
  • • NEWバッジ・タグ

コード参照

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

const theme = getArtistTheme(artistId);

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

Picture-i Design System v2.0

このガイドラインに従わないデザインは reject されます。