Typography コンポーネント

デザインシステムに準拠したタイポグラフィコンポーネント - 見出し、本文、キャプション、引用

見出しコンポーネント

H1からH6まで、レスポンシブ対応の見出しサンプル

Heading Examples

TSX

<Heading level="h1">H1: ページメインタイトル</Heading>
<Heading level="h2">H2: セクションタイトル</Heading>
<Heading level="h3">H3: サブセクション</Heading>
<Heading level="h4">H4: 小見出し・カードタイトル</Heading>
<Heading level="h5">H5: 小項目見出し</Heading>
<Heading level="h6">H6: 最小見出し</Heading>

Result

H1: ページメインタイトル

H2: セクションタイトル

H3: サブセクション

H4: 小見出し・カードタイトル

H5: 小項目見出し

H6: 最小見出し

テキストコンポーネント

様々なサイズとウェイトのテキストサンプル

Text Examples

TSX

<Text size="lg" weight="semibold">
  大きめテキスト（Semi-bold）- 重要な情報の強調に使用
</Text>
<Text size="base">
  本文テキスト（Normal）- 標準的な段落テキストに使用。
  読みやすさを重視したサイズで、デバイスに応じてレスポンシブに調整されます。
</Text>
<Text size="sm" muted>
  小テキスト（Muted）- キャプションや説明文に使用
</Text>
<Text size="xs" muted>
  極小テキスト（Muted）- メタ情報やフッター情報に使用
</Text>

Result

大きめテキスト（Semi-bold）- 重要な情報の強調に使用

本文テキスト（Normal）- 標準的な段落テキストに使用。読みやすさを重視したサイズで、デバイスに応じてレスポンシブに調整されます。

小テキスト（Muted）- キャプションや説明文に使用

極小テキスト（Muted）- メタ情報やフッター情報に使用

キャプション・補助テキスト

図表のキャプションや補助説明に使用するコンポーネント

Caption Examples

TSX

<Caption>図1: コンポーネント使用例の比較</Caption>
<Caption tiny>※ 画面サイズによって表示が変わります</Caption>
<Caption className="text-center">中央揃えキャプション</Caption>
<Caption className="text-right">右揃えキャプション</Caption>

Result

サンプル図表

図1: コンポーネント使用例の比較

※ 画面サイズによって表示が変わります

中央揃えキャプション

右揃えキャプション

引用コンポーネント

引用文や重要な文言を強調表示するコンポーネント

Quote Examples

TSX

<Quote>
  「良いデザインは、見た目だけでなく、
  どのように機能するかが重要です。」
</Quote>
<Quote author="Steve Jobs">
  「シンプルさは究極の洗練である。」
</Quote>

Result

「良いデザインは、見た目だけでなく、どのように機能するかが重要です。」

「シンプルさは究極の洗練である。」
— Steve Jobs

レスポンシブ対応

デバイスサイズに応じた自動調整の確認

Responsive Examples

TSX

// モバイル: より小さく、タブレット: 中程度、デスクトップ: 大きく
<Heading level="h1">レスポンシブ見出し</Heading>
<Text size="base">
  このテキストはデバイスサイズに応じて
  適切なサイズで表示されます。
</Text>

Result

レスポンシブ見出し

このテキストはデバイスサイズに応じて適切なサイズで表示されます。

※ ブラウザウィンドウのサイズを変更してお試しください

テキスト配置（Alignment）

左寄せ、中央寄せ、右寄せのオプション

Alignment Examples

TSX

<Text>左寄せテキスト（デフォルト）</Text>
<Text className="text-center">中央寄せテキスト</Text>
<Text className="text-right">右寄せテキスト</Text>
<Text className="text-justify">
  両端揃えテキスト。長い文章の場合、行の両端が揃うように
  単語間のスペースが調整されます。可読性を考慮して適切に使用してください。
</Text>

Result

左寄せテキスト（デフォルト）

中央寄せテキスト

右寄せテキスト

両端揃えテキスト。長い文章の場合、行の両端が揃うように単語間のスペースが調整されます。可読性を考慮して適切に使用してください。

Typographyコンポーネントの使用方法

• Heading: ページ構造を表現する見出し（H1〜H6）

• Text: 本文や説明文、様々なサイズとウェイト

• Caption: 図表のキャプションや補助説明

• Quote: 引用文や重要なメッセージの強調

• 全コンポーネントでダークモードとアクセシビリティに対応