MyPortfolio

デザインシステム基盤

デジタル庁デザインシステム（DADS）のFoundationsを参考に設計された、本プロジェクトのカラー、タイポグラフィ、およびコーディング規則のリファレンスです。

カラーパレット (Semantic Colors)

セマンティック（意味・役割）に基づいて定義されたCSS変数群です。テーマセレクターを切り替えると各色見本の色も連動して変化します。

Surface--color-surface

主要な背景色。カードやコンテンツセクション用。

Surface Subtle--color-surface-subtle

控えめな背景色。ヘッダーやフッター、コード領域用。

Border--color-border

境界線や分割線用のカラー。

Text Default--color-text-default

メインとなる標準テキスト用カラー。高いコントラスト。

Text Muted--color-text-muted

サブテキスト、説明文などの控えめな文字用カラー。

Text On Action--color-text-on-action

アクションボタン等の背景上のテキスト用。

Action Primary--color-action-primary

プライマリボタンやブランドアクセント色。

Action Secondary--color-action-secondary

セカンダリの補助的なボタン用。

Action Danger--color-action-danger

削除などの注意を促すアクション用。

タイポグラフィ (Typography)

サイト内で定義されているフォントサイズスケール。Tailwind v4 の `@theme` 定義から、以下のユーティリティクラスが利用可能です。

text-display(2.5rem (40px))

Display (大見出し)

Display Title

text-heading(1.5rem (24px))

Heading (中見出し)

Heading Title

text-body(1.0rem (16px))

Body (本文)

これは本文用のテキストサンプルです。

text-caption(0.75rem (12px))

Caption (注釈)

※注釈や詳細情報用のキャプション

レイアウト・角丸設計規約 (Spacing & Corner Radius)

デザインシステムを一貫させつつ、コードの肥大化を防ぐため、**余白（間隔）や角丸の指定は独自の変数化をせず、Tailwind CSS v4の標準ユーティリティクラスに完全に依存します。**

余白 (Margin / Padding): 主に `p-4`, `p-6`, `p-8` / `gap-4`, `gap-6` 等を使用し、要素同士の規則的なジャンプ（4の倍数ピクセル）を徹底します。
角丸 (Border Radius): カード類は `rounded-xl`、バッジ等は `rounded-full` を適用して、プロダクトに一貫したソフトな印象を与えます。

アクセシビリティ・アイコン規約 (Accessibility & Icons)

デジタル庁（DADS）のアクセシビリティ設計方針にならい、情報がすべての人に正しく伝わるよう実装します。

アイコン用SVGマークアップ: 装飾目的のアイコンには `aria-hidden="true"` を必ず付与します。
代替テキストの提供: 文字を含まないアイコンのみのボタン（例: `RoundButton`）では、必ず適切な `aria-label` を渡して何をおこなうボタンかをスクリーンリーダーに明示します。
コントラスト比: すべての背景色とテキスト色の組み合わせは、WCAG 2.1 レベルAA（コントラスト比4.5:1以上）を保証します。

共通コンポーネント

ポートフォリオサイト全体で使用されている再利用可能な UI パーツ群です。 CVA (Class Variance Authority) と Tailwind v4 を活用し、高い拡張性と型安全性を実現しています。

SimpleButton

基本となる長方形のボタンコンポーネント。インテント（種類）とサイズを指定可能です。

Primary

<SimpleButton.Primary>Primary Button</SimpleButton.Primary>

Secondary

<SimpleButton.Secondary>Secondary Button</SimpleButton.Secondary>

Danger

<SimpleButton.Danger>Danger Button</SimpleButton.Danger>

Small Size

<SimpleButton.Primary size="sm">Small Button</SimpleButton.Primary>

Loading State

<SimpleButton.Primary loading>Loading</SimpleButton.Primary>

Disabled State

<SimpleButton.Primary disabled>Disabled Button</SimpleButton.Primary>

RoundButton

アイコン表示に最適な、円形のボタンコンポーネント。

Primary Icon

<RoundButton.Primary aria-label="Add item">
  <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
  </svg>
</RoundButton.Primary>

Secondary Icon

<RoundButton.Secondary aria-label="Settings">
  <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
  </svg>
</RoundButton.Secondary>

Danger Icon

<RoundButton.Danger aria-label="Delete">
  <svg className="w-5 h-5" fill="none" stroke="currentColor" strokeWidth="2" viewBox="0 0 24 24">
    <path strokeLinecap="round" strokeLinejoin="round" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
  </svg>
</RoundButton.Danger>

Badge

ステータスやタグ情報を示すバッジコンポーネント。インテントに応じた配色バリエーションを持ちます。

Primary

Active

<Badge variant="primary">Active</Badge>

Secondary

Draft

<Badge variant="secondary">Draft</Badge>

Danger

Error

<Badge variant="danger">Error</Badge>

Outline

Secondary Info

<Badge variant="outline">Secondary Info</Badge>

Card

コンテンツを囲むパネルコンポーネント。枠線の有無やホバーエフェクトの選択が可能です。

Default Card

Default Card Title

ホバー時に影が強調される標準的なカードレイアウトです。

<Card>
  <h4 className="text-body font-bold text-text-default mb-2">Default Card Title</h4>
  <p className="text-caption text-text-muted">ホバー時に影が強調される標準的なカードレイアウトです。</p>
</Card>

Subtle Card

Subtle Card Title

枠線がなく、控えめな背景色のみのカードスタイルです。

<Card variant="subtle">
  <h4 className="text-body font-bold text-text-default mb-2">Subtle Card Title</h4>
  <p className="text-caption text-text-muted">枠線がなく、控えめな背景色のみのカードスタイルです。</p>
</Card>