Open2ヶ月前にコメント追加3

個人プロジェクトのUIデザインシステム構築

 🎨 デザインシステム構築の目的と進め方
 🎯 目的個人プロジェクトのUIを統一し、効率的な開発を実現する
オープンソースとして公開し、フィードバックを受けながら成長させる

Vite + React + TypeScript および Next.js に対応可能なデザインシステムを構築する

 🛠 進め方
 フェーズ1: 基本設計とトークン管理✅ デザイントークンの設計と管理方法を定義
カテゴリ分け: カラー、フォント、スペーシング、スタイルガイド
JSON形式で管理し、コードに統合可能にする

✅ トークンの基本値とエイリアスを作成
再利用可能な名前付けで柔軟性を確保

✅ ドメインごとのカスタマイズを設計
デフォルトトークンセットを用意し、オーバーライド可能にする


 フェーズ2: コンポーネント設計🧩 基本的なUIコンポーネントを構築
Atoms, Molecules, Organisms の階層を意識

🎛 トークンを活用した柔軟なデザイン
カスタマイズ可能でアクセシビリティを考慮


 フェーズ3: ドキュメントと公開📖 Storybookでドキュメント作成
🚀 GitHubでオープンソース公開
🌟 フィードバックを受けて改善

 ✍️ 要件定義
 🛠 技術スタック
フロントエンド: Vite + React + TypeScript, Next.js

スタイル: Tailwind CSS または SCSS

トークン管理: JSON形式、Style Dictionary使用

ドキュメント: Storybook, Markdown

 🎨 デザイントークン
 基本トークン例以下は、基本トークンの例です。
{
  "color": {
    "primary": "#6200ee",
    "secondary": "#03dac6",
    "background": "#ffffff"
  },
  "font": {
    "size": {
      "small": "12px",
      "medium": "16px",
      "large": "20px"
    }
  }
}

 エイリアス設計例用途別のエイリアスを活用することで、柔軟なカスタマイズが可能になります。
{
  "color": {
    "button": {
      "background": "{color.primary}",
      "text": "{color.background}"
    }
  }
}

 📝 命名規則
 📁 ファイル名
形式: パスカルケース（例: Button.tsx, Header.tsx）

スタイル: コンポーネントごとにフォルダ内で管理
components/
├── Button/
│   ├── Button.tsx
│   ├── Button.styles.scss
│   └── Button.stories.tsx

 🎨 トークン名カテゴリ名を先頭に付与（例: color.primary, font.size.medium）
再利用可能なエイリアスを活用
{
  "color": {
    "button": {
      "background": "{color.primary}",
      "text": "{color.background}"
    }
  }
}

 🧩 CSSクラス名
BEM規則を採用

Block（例: button）: UI要素の基盤

Element（例: button__icon）: Blockの一部

Modifier（例: button--primary）: BlockやElementの状態やバリエーション


 🔧 APIやユーティリティ
関数名: キャメルケースで動詞から始める
例: fetchData, updateUserInfo


定数名: スネークケースまたは全大文字
例: API_URL, MAX_RETRIES

eemlis7-ke

 （要修正）フェーズ1: 基本設計とトークン管理
 デザインシステム構築: トークン設計と管理方法
 🎯 目的一貫性のあるデザインを実現し、アクセシビリティと柔軟性を両立
「4の倍数」に基づいたサイズ設計を採用し、標準的なUI設計と整合性を確保
カラー心理学や状態に応じた配色設計で、ユーザー体験を向上

 🔑 トークンカテゴリと設計基準
 🎨 カラー
 ブランドカラー

名前
値
用途例


プライマリ
#6200ee
ブランド主要要素

セカンダリ
#03dac6
補助的な要素

アクセント
#ff4081
強調要素


 UIカラー

名前
値
用途例


プライマリアクション
#6200ee
CTA（主要アクション）

セカンダリアクション
#03dac6
サポート的なアクション

ネガティブアクション
#f44336
エラー時

メイン背景
#ffffff
ページ全体の背景


 状態カラー

状態
値
用途例


緊急エラー
#f44336
エラーメッセージ

重要警告
#ff9800
警告通知

成功/完了
#4caf50
成功通知


 🅰️ フォントサイズ

名前
値
用途例


xsmall
12px
サブテキスト、注釈

medium
16px
標準的な本文、ボタン

large
20px
小見出し、強調テキスト


 📏 スペーシング

名前
値
用途例


small
8px
ボタンや入力フィールド内の余白

medium
16px
要素間の標準スペース

large
24px
セクション間の余白


 🔳 ラディウス

名前
値
用途例


small
4px
小ボタンや入力フィールド

medium
8px
カード、モーダル

large
16px
コンテナ


 📂 トークンの管理方法
 管理形式JSON形式でトークンを管理し、再利用可能にする
{
  "color": {
    "primary": "#6200ee",
    "secondary": "#03dac6"
  },
  "font": {
    "size": {
      "small": "12px",
      "medium": "16px",
      "large": "20px"
    }
  },
  "spacing": {
    "small": "8px",
    "medium": "16px",
    "large": "24px"
  }
}

名前	値	用途例
プライマリ	#6200ee	ブランド主要要素
セカンダリ	#03dac6	補助的な要素
アクセント	#ff4081	強調要素

名前	値	用途例
プライマリアクション	#6200ee	CTA（主要アクション）
セカンダリアクション	#03dac6	サポート的なアクション
ネガティブアクション	#f44336	エラー時
メイン背景	#ffffff	ページ全体の背景

状態	値	用途例
緊急エラー	#f44336	エラーメッセージ
重要警告	#ff9800	警告通知
成功/完了	#4caf50	成功通知

名前	値	用途例
xsmall	12px	サブテキスト、注釈
medium	16px	標準的な本文、ボタン
large	20px	小見出し、強調テキスト

名前	値	用途例
small	8px	ボタンや入力フィールド内の余白
medium	16px	要素間の標準スペース
large	24px	セクション間の余白

名前	値	用途例
small	4px	小ボタンや入力フィールド
medium	8px	カード、モーダル
large	16px	コンテナ

eemlis7-ke

 デザイントークンの構築を進行中トークンは、3段構成にする予定

・Base・・・リテラルな数値のセット

・Semantic・・・セマンティックエイリアス（これが基本構成）

・Domain・・・・セマンティックを各ドメイン毎に調整する
Semanticを基本としてプロジェクトで使い回す予定

 流れNotionでリストアップ
リストから基本的な構成と内容を作成
Figmaでローカルバリアブルに登録

今ここFigmaからエクスポートして、JSONでデザイントークン化
Figma および Storybookで検証
UIコンポーネントの作成へ進む