タイポグラフィシステム

日本語に適したフォントとサイズを使いやすくまとめたシステムです。

機能

• 日本語最適化: Noto Sans JPをベースとした日本語対応フォントスタック
• 階層システム: 情報の重要度を明確に表現する見出しシステム
• アクセシビリティ: WCAG準拠のコントラスト比とフォントサイズ
• レスポンシブ: デバイスサイズに応じた適切なフォントサイズ調整
• 型安全性: TypeScriptとVanilla Extractによる型安全な実装

タイポグラフィシステム

Typography System

Comprehensive typography system with consistent font families, sizes, and weights.

Headings

Heading 1

Design System

48px Bold Page titles and main headings

Heading 2

Component Library

36px Bold Section headings

Heading 3

Component Overview

24px Bold Subsection headings

Heading 4

Component Details

20px Bold Component titles

Body Text

Body Large

This is large body text used for important content and introductions.

18px Regular Important content

Body

This is standard body text used for most content throughout the application.

16px Regular Standard content

Body Small

This is small body text used for secondary information and captions.

14px Regular Secondary content

UI Text

UI Large

UI Large Text

18px Medium Large UI elements

UI Medium

UI Medium Text

16px Medium Standard UI elements

UI Small

UI Small Text

14px Medium Small UI elements

Special Text

Caption

Caption text for images and small details

12px Regular Captions and small details

Overline

OVERLINE TEXT

12px Medium Labels and categories

Usage Examples

Article Layout

Getting Started with Design Systems

Design systems are collections of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

What is a Design System?

A design system is a set of standards for design and code along with components that unify both practices. Think of it as the same set of instructions and Lego kit for everyone.

Benefits of Design Systems

• Consistency across products
• Faster development cycles
• Better user experience
• Easier maintenance

Last updated: March 15, 2024

Component Documentation

Button Component

FORM ELEMENTS

Interactive button component with multiple variants and sizes.

Props

variant 'primary' | 'secondary' | 'outline'

size 'sm' | 'md' | 'lg'

フォントファミリー

メインフォントスタック

font-family: 'Noto Sans JP', 'Noto Sans', 'Inter', 'IBM Plex Sans',
             system-ui, -apple-system, 'Segoe UI', Arial,
             'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
             'Helvetica Neue', 'Yu Gothic UI', 'Yu Gothic',
             Meiryo, sans-serif;

フォントサイズ

• H1: 48px - メインタイトル
• H2: 36px - セクションタイトル
• H3: 28px - サブセクションタイトル
• Body: 16px - 本文テキスト
• Caption: 14px - キャプション・補足情報
• UI Small: 14px - 小さなUI要素
• UI Medium: 16px - 標準UI要素

フォントウェイト

• Regular: 400 - 本文テキスト
• Medium: 500 - 強調テキスト
• Bold: 700 - 見出し・重要テキスト

使用方法

CSS変数

タイポグラフィトークンはCSS変数として定義されており、一貫した実装が可能です：

:root {
  --font-family-sans: 'Noto Sans JP', sans-serif;
  --font-size-h1: 48px;
  --font-size-body: 16px;
  /* ... */
}

Vanilla Extract

型安全なCSS-in-JSで、コンパイル時にタイポグラフィの整合性を保証：

import { style } from '@vanilla-extract/css';
import { tokens } from './tokens';

export const heading = style({
  fontFamily: tokens.typography.families.sansJP,
  fontSize: tokens.typography.sizes.h1,
  fontWeight: tokens.typography.weights.bold,
  lineHeight: tokens.typography.lineHeights.h1,
});

デザイン原則

可読性の最優先

日本語と英語が混在する文章でも、適切な行間と文字間隔で読みやすさを確保。

一貫性の維持

すべてのテキスト要素が統一されたスケールに基づいて設計され、視覚的な調和を実現。

アクセシビリティ

様々なデバイスとユーザーの視覚的ニーズに対応した、包括的なタイポグラフィ設計。

ベストプラクティス

• 階層の明確化: 見出しレベルを適切に使用し、情報の構造を明確に
• 行長の最適化: 1行あたり45-75文字を目安に、読みやすい行長を維持
• コントラストの確保: テキストと背景のコントラスト比を適切に設定
• レスポンシブ対応: デバイスサイズに応じた適切なフォントサイズの調整