Skip to content

🎨 コアダッシュボードUIフレームワークの開発 #7

Open
Open
🎨 コアダッシュボードUIフレームワークの開発#7
Labels
UI/UXreactダッシュボードフロントエンド高優先度

Description

@Wanko-IT
Wanko-IT
opened on Jun 11, 2025

📋 タスク概要

優先度: 高
ステータス: 保留中
依存関係: プロジェクトリポジトリのセットアップ

🎯 説明

React.js、Next.js、Tailwind CSSを使用したレスポンシブなダッシュボードUIを構築し、すべてのAIプラットフォーム機能の基盤を確立します。

🏗️ 実装詳細

UIフレームワークスタック

  • Next.js 14 with App Router
  • React 18 with 最新フック
  • TypeScript for 型安全性
  • Tailwind CSS for スタイリング
  • Shadcn/ui for コンポーネント
  • Radix UI for アクセシビリティ
  • Framer Motion for アニメーション

コアレイアウトコンポーネント

// app/layout.tsx
import { Inter } from 'next/font/google'
import { ThemeProvider } from '@/components/theme-provider'
import { Sidebar } from '@/components/layout/sidebar'
import { Header } from '@/components/layout/header'

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="ja">
      <body className={inter.className}>
        <ThemeProvider>
          <div className="flex h-screen bg-background">
            <Sidebar />
            <main className="flex-1 flex flex-col overflow-hidden">
              <Header />
              <div className="flex-1 overflow-auto p-6">
                {children}
              </div>
            </main>
          </div>
        </ThemeProvider>
      </body>
    </html>
  )
}

// components/layout/sidebar.tsx
import { NavItem } from '@/components/nav-item'
import { Icons } from '@/components/icons'

export function Sidebar() {
  return (
    <div className="w-64 bg-card border-r shadow-sm">
      <div className="p-6">
        <h2 className="text-2xl font-bold text-primary">AI Hub</h2>
      </div>
      <nav className="px-4 space-y-2">
        <NavItem href="/dashboard" icon={Icons.home}>
          ダッシュボード
        </NavItem>
        <NavItem href="/chat" icon={Icons.messageSquare}>
          AIチャット
        </NavItem>
        <NavItem href="/images" icon={Icons.image}>
          画像生成
        </NavItem>
        <NavItem href="/voice" icon={Icons.mic}>
          音声AI
        </NavItem>
        <NavItem href="/documents" icon={Icons.fileText}>
          ドキュメントAI
        </NavItem>
        <NavItem href="/code" icon={Icons.code}>
          コードアシスタント
        </NavItem>
        <NavItem href="/workflows" icon={Icons.workflow}>
          ワークフロー
        </NavItem>
        <NavItem href="/settings" icon={Icons.settings}>
          設定
        </NavItem>
      </nav>
    </div>
  )
}

ダッシュボードページ

  1. メインダッシュボード (/dashboard)

    • 使用統計
    • 最近のアクティビティ
    • クイックアクセスタイル
    • システムステータス

  2. AIチャット (/chat)

    • マルチモデルチャットインターフェース
    • 会話履歴
    • モデル切り替え
    • エクスポート機能

  3. 画像生成 (/images)

    • プロンプト入力インターフェース
    • 生成画像ギャラリー
    • スタイルプリセット
    • 画像編集ツール

  4. 音声AI (/voice)

    • 音声録音インターフェース
    • 転写表示
    • テキスト読み上げコントロール
    • 音声履歴

デザインシステム

// styles/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }
  
  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
  }
}

body {
  font-feature-settings: "rlig" 1, "calt" 1;
}

レスポンシブ機能

  • モバイルファーストデザイン
  • 適応的サイドバー（モバイルで折りたたみ可能）
  • タッチフレンドリーコントロール
  • プログレッシブWebアプリ機能
  • ダーク/ライトモード切替

コンポーネントライブラリ

// components/ui/button.tsx
import { cn } from '@/lib/utils'
import { ButtonHTMLAttributes, forwardRef } from 'react'

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost'
  size?: 'default' | 'sm' | 'lg' | 'icon'
}

const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant = 'default', size = 'default', ...props }, ref) => {
    return (
      <button
        className={cn(
          'inline-flex items-center justify-center rounded-md text-sm font-medium',
          'ring-offset-background transition-colors focus-visible:outline-none',
          'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
          'disabled:pointer-events-none disabled:opacity-50',
          {
            'bg-primary text-primary-foreground hover:bg-primary/90': variant === 'default',
            'bg-destructive text-destructive-foreground hover:bg-destructive/90': variant === 'destructive',
            'border border-input bg-background hover:bg-accent hover:text-accent-foreground': variant === 'outline',
            'bg-secondary text-secondary-foreground hover:bg-secondary/80': variant === 'secondary',
            'hover:bg-accent hover:text-accent-foreground': variant === 'ghost',
          },
          {
            'h-10 px-4 py-2': size === 'default',
            'h-9 rounded-md px-3': size === 'sm',
            'h-11 rounded-md px-8': size === 'lg',
            'h-10 w-10': size === 'icon',
          },
          className
        )}
        ref={ref}
        {...props}
      />
    )
  }
)

Button.displayName = 'Button'
export { Button }

日本語対応

  • 完全日本語ローカライゼーション
  • 日本語フォント最適化（Noto Sans JP）
  • 右から左の読み取り対応
  • 日本の文化に配慮したUX

🧪 テスト戦略

  1. コンポーネントテスト

    • React Testing Library
    • Storybook コンポーネントドキュメント
    • ビジュアル回帰テスト

  2. アクセシビリティテスト

    • スクリーンリーダー互換性
    • キーボードナビゲーション
    • カラーコントラスト検証

  3. レスポンシブテスト

    • クロスデバイス互換性
    • モバイルデバイスでのパフォーマンス

📚 完了条件

  • Next.js 14 app router設定完了
  • サイドバーとヘッダー付きレスポンシブレイアウト
  • ダーク/ライトモード実装
  • すべてのメインナビゲーションページ作成
  • 一貫性のあるスタイリングのコンポーネントライブラリ
  • モバイルレスポンシブデザイン
  • アクセシビリティ機能実装
  • ローディング状態とエラーバウンダリ
  • SEO最適化
  • パフォーマンス最適化（Core Web Vitals）
  • 日本語ローカライゼーション完了

🔗 関連タスク

有効化するタスク:

  • OpenAI APIのチャットとテキスト処理統合
  • マルチモーダルAIチャットインターフェース実装
  • 画像生成・編集スイート追加
  • 音声AI機能実装

📝 技術的注意事項

  • レイアウトにはCSS GridとFlexboxを使用
  • 適切なTypeScriptインターフェース実装
  • Atomic Design原則に従う
  • WCAG 2.1 AA準拠を確保
  • 動的インポートでバンドルサイズ最適化
  • パフォーマンス監視とメトリクス実装

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    UI/UXreactダッシュボードフロントエンド高優先度

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions