AI生成UIに違和感を覚える理由 — 表面的なAI臭さの奥にある「判断の不在」という本質

// AI臭い実装: 色を直接指定
interface ButtonProps {
  color?: string; // 'blue' | 'red' | 'green' ...
  children: React.ReactNode;
}
 
export function Button({ color = 'blue', children }: ButtonProps) {
  return (
    <button className={`bg-${color}-500 text-white px-4 py-2 rounded-lg`}>
      {children}
    </button>
  );
}

// 判断を型に宿した実装
type ButtonVariant = 'primary' | 'secondary' | 'destructive' | 'ghost' | 'link';
type ButtonSize = 'sm' | 'md' | 'lg';
 
interface ButtonProps {
  variant?: ButtonVariant; // 意味のある選択肢のみ
  size?: ButtonSize;
  isLoading?: boolean;
  disabled?: boolean;
  children: React.ReactNode;
}
 
export function Button({
  variant = 'primary',
  size = 'md',
  isLoading = false,
  disabled = false,
  children
}: ButtonProps) {
  const baseStyles = 'font-medium transition-all duration-200 focus:ring-2';
 
  const variantStyles = {
    primary: 'bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-300',
    secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-400',
    destructive: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-300',
    ghost: 'bg-transparent text-gray-900 hover:bg-gray-100 focus:ring-gray-300',
    link: 'bg-transparent text-blue-600 underline hover:no-underline focus:ring-blue-300',
  };
 
  const sizeStyles = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base min-h-[44px]', // 高齢者対応タッチターゲット
    lg: 'px-6 py-3 text-lg min-h-[48px]',
  };
 
  return (
    <button
      className={`${baseStyles} ${variantStyles[variant]} ${sizeStyles[size]} ${
        isLoading ? 'opacity-70 cursor-wait pointer-events-none' : ''
      } ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
      disabled={disabled || isLoading}
    >
      {isLoading ? '処理中...' : children}
    </button>
  );
}

// tailwind.config.ts - デザイントークンに判断を宿す
export default {
  theme: {
    colors: {
      // ブランドパレット: Antigravity の世界観を表現
      surface: 'oklch(0.98 0.002 0)',      // 真白ではなく、わずかに温い白
      'surface-alt': 'oklch(0.94 0.002 0)', // サブ背景
 
      // セマンティックカラー: 「役割」に基づいた色
      primary: 'oklch(0.55 0.2 260)',      // ブランドプライマリ（青紫）
      secondary: 'oklch(0.65 0.1 260)',    // セカンダリ（淡い青紫）
 
      success: 'oklch(0.58 0.15 142)',     // 成功（緑）
      warning: 'oklch(0.68 0.15 65)',      // 警告（黄）
      error: 'oklch(0.55 0.2 25)',         // エラー（赤）
      info: 'oklch(0.60 0.15 250)',        // 情報（青）
    },
    spacing: {
      // 判断的な余白スケール: フィボナッチ比率ベース
      'xs': '0.25rem',   // 4px - テキスト内余白
      'sm': '0.5rem',    // 8px - 密集要素間
      'md': '1rem',      // 16px - 標準間隔
      'lg': '1.5rem',    // 24px - セクション間隔
      'xl': '2.5rem',    // 40px - メジャーセクション
      'xxl': '4rem',     // 64px - ページ余白
    },
    fontSize: {
      // タイポグラフィ: 読みやすさへの判断
      'xs': ['0.75rem', { lineHeight: '1.5' }],   // 12px / 1.5
      'sm': ['0.875rem', { lineHeight: '1.5' }],  // 14px / 1.5
      'base': ['1rem', { lineHeight: '1.6' }],    // 16px / 1.6
      'lg': ['1.125rem', { lineHeight: '1.6' }],  // 18px / 1.6
      'xl': ['1.375rem', { lineHeight: '1.5' }],  // 22px / 1.5
      'h2': ['1.75rem', { lineHeight: '1.3' }],   // 28px / 1.3
      'h1': ['2.25rem', { lineHeight: '1.2' }],   // 36px / 1.2
    },
  },
};

// FormInput.tsx - アクセシビリティへの判断が条件分岐に宿る
interface FormInputProps {
  label: string;
  value: string;
  onChange: (val: string) => void;
  error?: string;
  isLoading?: boolean;
  required?: boolean;
}
 
export function FormInput({
  label,
  value,
  onChange,
  error,
  isLoading,
  required,
}: FormInputProps) {
  const inputId = `input-${label.replace(/\s/g, '-')}`;
 
  return (
    <div className="flex flex-col gap-md">
      <label htmlFor={inputId} className="font-medium text-gray-900">
        {label}
        {required && <span className="text-error ml-1">*</span>}
      </label>
 
      <input
        id={inputId}
        type="text"
        value={value}
        onChange={(e) => onChange(e.target.value)}
        disabled={isLoading}
        // エラー状態への判断:
        // 1. 視覚的に区別（赤い枠）
        // 2. スクリーンリーダー利用者に伝達（aria-invalid）
        // 3. aria-describedby でエラーメッセージを関連付ける
        aria-invalid={!!error}
        aria-describedby={error ? `${inputId}-error` : undefined}
        className={`
          px-3 py-2 border-2 rounded-md transition-colors
          ${error
            ? 'border-error bg-error/5 focus:ring-error/30'
            : 'border-gray-300 focus:ring-primary/30'
          }
          ${isLoading ? 'cursor-wait opacity-70' : ''}
          focus:outline-none focus:ring-2
        `}
      />
 
      {/* エラー表示: role="alert" で即座に読み上げさせる */}
      {error && (
        <div
          id={`${inputId}-error`}
          role="alert"
          aria-live="polite"
          className="text-error text-sm font-medium"
        >
          {error}
        </div>
      )}
    </div>
  );
}

# プロンプト例: デザイントークンを先に渡す
 
上記の tailwind.config.ts を参照してください。
 
以下の要件で Button コンポーネントを実装してください:
- variant: 'primary' | 'secondary' | 'destructive' | 'ghost' | 'link'
- size: 'sm' | 'md' | 'lg' (最小タッチターゲット 44px)
- isLoading 状態では cursor-wait + opacity-70 + disabled
- role, aria-* 属性で支援技術対応
- デザイントークンの色・余白・タイポグラフィのみ使用
 
実装後、「なぜこの条件分岐を選んだか」をコメントで説明してください。