CodeConnect Design System

Typography

テキストのスタイリングを一貫して管理するコンポーネント。HeadingとTextの2つのコンポーネントを提供します。

Heading

見出しのためのコンポーネント。6つのレベルを提供します。

基本的な使い方

Preview

すべてのレベル

Preview

セマンティクスとプレゼンテーションの分離

Headingコンポーネントでは、セマンティクス（HTMLタグ）とプレゼンテーション（視覚的なサイズ）を完全に分離して制御できます。

  • as: h1〜h6のHTMLタグを指定し、文書構造上の意味を定義します（必須）。
  • size: 6xl〜xlの視覚的なサイズを指定します（任意、デフォルトは5xl）。

これにより、例えば「意味的にはh3だが、見た目は少し小さくしたい」といったデザイン要件に柔軟に対応できます。

Preview

Text

本文や補足テキストのためのコンポーネント。5つのバリアントを提供します。

基本的な使い方

Preview

すべてのバリアント

Preview

HTML要素の変更

as propでHTML要素を変更できます。

Preview

組み合わせ例

HeadingとTextを組み合わせた実際の使用例。

Preview

カスタムスタイル

className propでカスタムスタイルを適用できます。

Preview

Props

Heading

PropTypeDefaultDescription
as'h1' | 'h2' | ...-必須: HTML要素（セマンティックな意味）
size'6xl' | '5xl' | ...'5xl'見出しの視覚的なサイズ
classNamestring-追加のCSSクラス
childrenReactNode-テキスト内容

Text

PropTypeDefaultDescription
variant'body' | 'body-sm' | 'body-lg' | 'label' | 'caption''body'テキストのバリアント
as'p' | 'span' | 'div' | 'label''p'HTML要素
classNamestring-追加のCSSクラス
childrenReactNode-テキスト内容

アクセシビリティ

  • セマンティックHTML: 適切な見出しレベルを使用
  • 階層構造: 見出しレベルをスキップせず、論理的な順序を維持
  • 視覚とセマンティックの分離: as propで視覚的なスタイルとセマンティックな意味を独立して指定可能

見出しレベルのベストプラクティス

// ✅ 良い例 - 論理的な階層
<Heading as="h1" size="6xl">ページタイトル</Heading>
<Heading as="h2" size="5xl">セクション1</Heading>
<Heading as="h3" size="4xl">サブセクション1.1</Heading>
<Heading as="h3" size="4xl">サブセクション1.2</Heading>
<Heading as="h2" size="5xl">セクション2</Heading>


// ❌ 悪い例 - レベルをスキップ
<Heading as="h1" size="6xl">ページタイトル</Heading>
<Heading as="h3" size="4xl">セクション1</Heading> {/* h2をスキップ */}

使用例

ブログ記事の実装例:

import { Heading, Text } from '@codeconnect-llc/design-system'


export function BlogPost() {
  return (
    <article className="max-w-3xl mx-auto space-y-6">
      <header>
        <Heading as="h1" size="6xl">
          React 19の新機能を解説
        </Heading>
        <Text variant="caption" className="mt-2">
          2024年12月15日 | 開発チーム
        </Text>
      </header>


      <Text variant="body-lg">
        React 19では、いくつかの重要な新機能が導入されました。
        この記事では、主要な変更点について解説します。
      </Text>


      <section>
        <Heading as="h2" size="5xl" className="mt-8">
          Server Components
        </Heading>
        <Text variant="body">
          Server Componentsにより、サーバーサイドでのレンダリングが
          より柔軟になりました。
        </Text>
      </section>


      <section>
        <Heading as="h2" size="5xl" className="mt-8">
          新しいHooks
        </Heading>
        <Text variant="body">
          use()フックなど、新しいAPIが追加されています。
        </Text>
      </section>


      <footer className="mt-12 pt-6 border-t border-border">
        <Text variant="caption">
          この記事が役に立ちましたか？フィードバックをお待ちしています。
        </Text>
      </footer>
    </article>
  )
}