デザイナー向けガイド

CodeConnect Design Systemは、デザイナーと開発者の協働を円滑にするために設計されています。このガイドでは、デザイナーがデザインシステムを活用する方法を説明します。

デザインシステムの概要

CodeConnect Design Systemは、モダンで一貫性のあるUIコンポーネントライブラリです。デザイントークンベースの設計により、プロダクト全体で統一されたデザイン言語を実現します。

主な特徴

デザイントークン

デザインシステムの基盤となるデザイントークンは、style-dictionaryで管理されています。

カラートークン

デザインシステムでは、以下のカラーパレットを提供しています:

• ブランドカラー: プライマリーアクションや強調表示
• テキストカラー: primary, secondary, tertiary の3段階
• 背景カラー: primary, secondary, tertiary の3段階
• ボーダーカラー: primary, secondary の2段階
• セマンティックカラー: success, warning, error, info

詳細は カラー ページをご覧ください。

タイポグラフィ

フォントスケールは以下の通りです:

• Heading: 6レベル (H1〜H6)
• Body: 3サイズ (body-lg, body, body-sm)
• Label: フォームラベル用
• Caption: 補足テキスト用

詳細は タイポグラフィ ページをご覧ください。

スペーシング

一貫したスペーシングスケール (4px基準):

• xs: 4px
• sm: 8px
• md: 16px
• lg: 24px
• xl: 32px
• 2xl: 48px
• 3xl: 64px

詳細は スペーシング ページをご覧ください。

コンポーネント

コンポーネントカテゴリ

レイアウト

基本的なレイアウトプリミティブ:

• Box: 基本的なボックスコンテナ
• Stack: 垂直・水平スタック

アクション

ユーザーアクションを促すコンポーネント:

• Button: 5つのバリアント (primary, secondary, outline, ghost, link)

フォーム

フォーム入力コンポーネント:

• Input: テキスト入力（8種類のタイプ）
• Textarea: 複数行テキスト入力
• Select: ドロップダウン選択（Radix UI）
• Checkbox: チェックボックス（Radix UI）
• RadioGroup: ラジオボタン（Radix UI）
• Switch: トグルスイッチ（Radix UI）
• FormControl: フォームフィールドラッパー

表示

コンテンツ表示コンポーネント:

• Card: コンテンツカード
• Typography: テキストスタイル
• Badge: ステータスバッジ
• Divider: セクション区切り

フィードバック

フィードバックと通知:

• Alert: アラートメッセージ（4種類のセマンティックタイプ）
• Toast: 一時的な通知（Radix UI）
• Tooltip: 補足情報（Radix UI）

オーバーレイ

オーバーレイコンポーネント:

• Dialog: モーダルダイアログ（Radix UI）

全コンポーネントの詳細は コンポーネント一覧 をご覧ください。

Storybook

CodeConnect Design Systemは、Storybook 8でコンポーネントドキュメントを提供しています。

Storybookでできること

1. コンポーネントのプレビュー: 全コンポーネントをインタラクティブに確認
2. バリアントの確認: 各コンポーネントのバリアント、サイズ、状態を一覧表示
3. Props の編集: リアルタイムでpropsを変更して動作を確認
4. アクセシビリティチェック: a11y アドオンでアクセシビリティを検証
5. コードスニペット: 実装コードをコピー可能

Storybookは こちら からアクセスできます。

デザインワークフロー

1. デザインの探索

まずStorybookで利用可能なコンポーネントを確認し、デザインに活用できるパーツを探索します。

2. デザイントークンの活用

Figmaや他のデザインツールで、デザイントークンに基づいた値を使用します:

• カラー: /foundations/colors を参照
• スペーシング: /foundations/spacing を参照
• タイポグラフィ: /foundations/typography を参照

3. コンポーネントの組み合わせ

既存のコンポーネントを組み合わせて、ページやフローをデザインします。

4. 開発者との連携

デザインが完成したら、開発者にコンポーネント名とバリアントを伝えます。例:

• “この部分は Button variant="primary" size="lg" を使用”
• “このカードは Card コンポーネントで実装”

Figma統合 Coming Soon

現在、Figmaライブラリを準備中です。リリース時には以下が利用可能になります:

• コンポーネントライブラリ: 全UIコンポーネントのFigmaコンポーネント
• デザイントークン: Figma Variablesとしてカラー・スペーシング・タイポグラフィを提供
• Auto Layout: 実装と同じレイアウトロジック
• バリアント: Figma Variantsで全バリアントに対応

進捗は 最新情報 ページでご確認ください。

デザイン原則

CodeConnect Design Systemは以下の原則に基づいています:

1. 一貫性: 全プロダクトで統一されたデザイン言語
2. アクセシビリティ: すべてのユーザーが利用できるUI
3. スケーラビリティ: 大規模なプロダクトにも対応
4. パフォーマンス: 軽量で高速なコンポーネント

詳細は デザイン原則 をご覧ください。

リソース

デザイン作業に役立つリソース:

• コンポーネント一覧 - 全コンポーネントの詳細
• 基礎 - カラー、タイポグラフィ、スペーシング
• Storybook - インタラクティブなカタログ

次のステップ