コーディング自動化基盤

概要¶

レジュメ変換システムのUIデザインをLINEデザイン言語（LINE Design System）に準拠するよう実装します。LINEデザイン言語の原則、コンポーネント、スタイルガイドラインを詳細に定義し、一貫したユーザー体験を提供します。

作業内容¶

1. LINEデザイン言語の原則と適用

   • デザイン原則
     • シンプル: 必要な要素だけを表示し、視覚的なノイズを最小限に
     • ユニバーサル: 多様なユーザーにとって使いやすいデザイン
     • 親しみやすい: フレンドリーで使いやすい印象
     • 一貫性: 全画面で一貫したデザイン言語
   • カラーパレット
     • プライマリカラー: LINE Green (#06C755)
     • セカンダリカラー: LINE Blue (#1753E6)
     • アクセントカラー: LINE Yellow (#FFDC3C)
     • グレースケール: #FFFFFF, #F7F8F9, #DFE2E6, #ACB5BD, #6B7684, #4D5765, #2D3540, #191F28
   • タイポグラフィ
     • フォントファミリー: 'Noto Sans JP', sans-serif
     • 見出し階層: h1(24px), h2(20px), h3(18px), h4(16px)
     • 本文: 14px
     • 小テキスト: 12px

2. LINEスタイルのUIコンポーネント実装

   • ボタン

     // LINE風プライマリボタン
     const LineButton: React.FC<{
       children: React.ReactNode;
       variant?: 'primary' | 'secondary' | 'outline' | 'text';
       size?: 'small' | 'medium' | 'large';
       onClick?: () => void;
       disabled?: boolean;
       className?: string;
     }> = ({ children, variant = 'primary', size = 'medium', onClick, disabled, className }) => {
       const baseClasses = "rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2";
       
       const variantClasses = {
         primary: "bg-[#06C755] text-white hover:bg-[#05b64c] focus:ring-[#06C755]",
         secondary: "bg-[#1753E6] text-white hover:bg-[#1248c9] focus:ring-[#1753E6]",
         outline: "border border-[#06C755] text-[#06C755] hover:bg-[#e8f7ee] focus:ring-[#06C755]",
         text: "text-[#06C755] hover:bg-[#e8f7ee] focus:ring-[#06C755]"
       };
       
       const sizeClasses = {
         small: "px-3 py-1 text-sm",
         medium: "px-4 py-2",
         large: "px-6 py-3 text-lg"
       };
       
       const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className || ''}`;
       
       return (
         <button
           className={classes}
           onClick={onClick}
           disabled={disabled}
         >
           {children}
         </button>
       );
     };
     

   • フォーム要素

     // LINE風インプットフィールド
     const LineTextField: React.FC<{
       label: string;
       value: string;
       onChange: (value: string) => void;
       placeholder?: string;
       error?: string;
       required?: boolean;
     }> = ({ label, value, onChange, placeholder, error, required }) => {
       return (
         <div className="mb-4">
           <label className="block text-[#2D3540] text-sm font-medium mb-1">
             {label}
             {required && <span className="text-red-500 ml-1">*</span>}
           </label>
           <input
             type="text"
             value={value}
             onChange={(e) => onChange(e.target.value)}
             placeholder={placeholder}
             className={`w-full px-3 py-2 border ${error ? 'border-red-500' : 'border-[#DFE2E6]'} rounded-md focus:outline-none focus:ring-2 focus:ring-[#06C755] focus:border-transparent`}
           />
           {error && <p className="mt-1 text-sm text-red-500">{error}</p>}
         </div>
       );
     };
     

   • カード

   • タブ

   • ナビゲーション

   • ドロップダウン

   • モーダル

   • トースト通知

3. LINE Design System用のTailwindCSS設定

   // tailwind.config.js
   module.exports = {
     theme: {
       extend: {
         colors: {
           'line-green': '#06C755',
           'line-blue': '#1753E6',
           'line-yellow': '#FFDC3C',
           'line-gray': {
             50: '#F7F8F9',
             100: '#DFE2E6',
             200: '#ACB5BD',
             300: '#6B7684',
             400: '#4D5765',
             500: '#2D3540',
             600: '#191F28',
           }
         },
         fontFamily: {
           sans: ['"Noto Sans JP"', 'sans-serif'],
         },
         borderRadius: {
           'line': '6px',
         },
         boxShadow: {
           'line': '0 2px 8px rgba(0, 0, 0, 0.08)',
           'line-hover': '0 4px 12px rgba(0, 0, 0, 0.12)',
         }
       }
     },
     plugins: [],
   }
   

4. レスポンシブデザインのLINEスタイル適用

   • モバイルファースト設計
   • ブレイクポイント定義
     • sm: 640px
     • md: 768px
     • lg: 1024px
     • xl: 1280px
   • タッチフレンドリーな要素サイズ
   • LINEアプリライクなモバイルナビゲーション

5. アニメーションとトランジション

   • LINEスタイルのトランジション
     • 基本トランジション: 0.2s ease-in-out
     • フェードイン/アウト: opacity
     • スライド: transform
   • マイクロインタラクション
     • ボタンホバー/アクティブ状態
     • フォーム要素フォーカス
     • リスト項目アニメーション
     • ローディングアニメーション

成果物¶

• LINE Design Systemスタイルガイド
• TailwindCSS設定ファイル
• UIコンポーネントライブラリ（LINEスタイル）
• レスポンシブデザインガイドライン
• アニメーション・トランジション定義

技術スタック¶

• React
• TypeScript
• TailwindCSS
• LINE Design System
• Emotion/Styled Components（必要に応じて）

参照¶

• 親チケット: #471（フロントエンド基盤構築）
• 関連チケット: #489（UIライブラリ導入・テーマ設定）
• 関連チケット: #492（共通コンポーネント実装）
• 関連チケット: #508（詳細フロントエンドコンポーネント構造定義）