frontend-ui-ux-engineer

フロントエンド UI/UX エンジニア

目的

デザインモックアップなしで、視覚的に魅力的でユーザー中心のインターフェースを作成することに特化した、フロントエンドの設計・開発に関する専門知識を提供します。創造的なデザイン思考、高度なスタイリング、アニメーション、アクセシビリティのベストプラクティスを活用し、最新の Web アプリケーション向けに美しい UI/UX を作り上げます。

使用する場面

• 機能的な UI を視覚的に魅力的なインターフェースに変える必要がある
• デザインモックアップはないものの、美しい UI が求められている
• 見た目の仕上げやマイクロインタラクションを優先したい
• コンポーネントのスタイリングに創造的なデザイン思考が必要
• 専任デザイナーなしでユーザー体験を改善したい

クイックスタート

このスキルを呼び出す場面：

• 機能的な UI を視覚的に魅力的なインターフェースに変える必要がある
• デザインモックアップはないものの、美しい UI が求められている
• コードの美しさよりも、見た目の仕上げやマイクロインタラクションを優先したい
• コンポーネントのスタイリングに創造的なデザイン思考が必要
• 専任デザイナーなしでユーザー体験を改善したい

呼び出さない場面：

• バックエンドロジックや API の開発が必要
• 見た目を変更しない純粋なコードのリファクタリング
• パフォーマンス最適化のみが優先事項
• セキュリティ重視の開発が必要
• データベースやインフラストラクチャの作業

---

---

主なワークフロー

ワークフロー 1：機能的なコンポーネントを魅力的な UI に変える

使用例： シンプルな React コンポーネントを、見た目に優れたものにする

入力例：

// Before: Functional but plain
function ProductCard({ product }: { product: Product }) {
  return (
    <div>
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <p>${product.price}</p>
      <button>Add to Cart</button>
    </div>
  );
}

手順：

1. 見た目の分析（2 分）

Questions to answer:
- What emotion should this evoke? (Premium? Playful? Trustworthy?)
- What's the visual hierarchy? (Image > Name > Price > CTA)
- What interactions delight users? (Hover effects, smooth transitions)
- Where's the whitespace needed? (Breathing room around elements)

2. 色とタイポグラフィの強化

// After: Visual foundation established
import { motion } from 'framer-motion';

function ProductCard({ product }: { product: Product }) {
  return (
    <motion.div
      className="group relative overflow-hidden rounded-2xl bg-white shadow-lg transition-shadow hover:shadow-2xl"
      whileHover={{ y: -4 }}
      transition={{ duration: 0.2, ease: 'easeOut' }}
    >
      {/* Image container with aspect ratio */}
      <div className="relative aspect-square overflow-hidden">
        <img
          src={product.image}
          alt={product.name}
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
        />
        {/* Gradient overlay for readability */}
        <div className="absolute inset-0 bg-gradient-to-t from-black/50 to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
      </div>

      {/* Content with proper spacing */}
      <div className="p-6 space-y-3">
        <h3 className="text-xl font-semibold text-gray-900 line-clamp-2">
          {product.name}
        </h3>
        
        <div className="flex items-baseline gap-2">
          <span className="text-2xl font-bold text-blue-600">
            ${product.price}
          </span>
          {product.compareAtPrice && (
            <span className="text-sm text-gray-500 line-through">
              ${product.compareAtPrice}
            </span>
          )}
        </div>

        {/* Enhanced CTA button */}
        <button className="w-full rounded-lg bg-blue-600 px-6 py-3 font-medium text-white transition-colors hover:bg-blue-700 active:bg-blue-800 disabled:bg-gray-300 disabled:cursor-not-allowed">
          Add to Cart
        </button>
      </div>
    </motion.div>
  );
}

3. マイクロインタラクションと仕上げ

// Final: Delightful interactions added
function ProductCard({ product, onAddToCart }: ProductCardProps) {
  const [isAdded, setIsAdded] = useState(false);

  const handleAddToCart = () => {
    onAddToCart(product);
    setIsAdded(true);
    setTimeout(() => setIsAdded(false), 2000);
  };

  return (
    <motion.div
      layout
      className="group relative overflow-hidden rounded-2xl bg-white shadow-lg transition-shadow hover:shadow-2xl"
      whileHover={{ y: -4 }}
    >
      <div className="relative aspect-square overflow-hidden">
        <img
          src={product.image}
          alt={product.name}
          className="h-full w-full object-cover transition-transform duration-500 group-hover:scale-110"
        />
        
        {/* Sale badge with animation */}
        {product.onSale && (
          <motion.div
            initial={{ scale: 0, rotate: -180 }}
            animate={{ scale: 1, rotate: 0 }}
            className="absolute top-4 right-4 rounded-full bg-red-500 px-3 py-1 text-sm font-bold text-white shadow-lg"
          >
            SALE
          </motion.div>
        )}
      </div>

      <div className="p-6 space-y-3">
        <h3 className="text-xl font-semibold text-gray-900 line-clamp-2 transition-colors group-hover:text-blue-600">
          {product.name}
        </h3>
        
        <div className="flex items-baseline gap-2">
          <motion.span
            className="text-2xl font-bold text-blue-600"
            key={product.price} // Re-animate on price change
            initial={{ scale: 1.2, color: '#ef4444' }}
            animate={{ scale: 1, color: '#2563eb' }}
          >
            ${product.price}
          </motion.span>
          {product.compareAtPrice && (
            <span className="text-sm text-gray-500 line-through">
              ${product.compareAtPrice}
            </span>
          )}
        </div>

        {/* Button with success state */}
        <button
          onClick={handleAddToCart}
          className={`
            w-full rounded-lg px-6 py-3 font-medium text-white transition-all
            ${isAdded 
              ? 'bg-green-500 scale-105' 
              : 'bg-blue-600 hover:bg-blue-700 active:scale-95'
            }
          `}
        >
          {isAdded ? (
            <span className="flex items-center justify-center gap-2">
              <CheckIcon className="h-5 w-5" />
              Added!
            </span>
          ) : (
            'Add to Cart'
          )}
        </button>
      </div>
    </motion.div>
  );
}

期待される成果：

• 視覚的な魅力が 5 倍に向上
• エンゲージメント指標が 20～40％向上（一般的な目安）
• マイクロインタラクションによるユーザーの満足度向上
• アクセシビリティを維持（ARIA ラベル、キーボード操作）

---

---

パターンとテンプレート

パターン 1：グラスモーフィズムカード

使用場面： モダンで高級感のあるデザイン（カラフルな背景と好相性）

function GlassCard({ children, className = '' }: GlassCardProps) {
  return (
    <div className={`
      relative overflow-hidden rounded-2xl
      backdrop-blur-xl backdrop-saturate-150
      bg-white/10 border border-white/20
      shadow-xl shadow-black/5
      ${className}
    `}>
      {/* Optional gradient overlay */}
      <div className="absolute inset-0 bg-gradient-to-br from-white/20 to-transparent opacity-50" />
      
      <div className="relative z-10 p-6">
        {children}
      </div>
    </div>
  );
}

---

---

パターン 3：シマー効果付きスケルトンローディング

使用場面： カードやリストの読み込み状態（スピナーよりも優れた UX）

function SkeletonCard() {
  return (
    <div className="relative overflow-hidden rounded-xl bg-gray-200 p-6">
      {/* Shimmer effect */}
      <div className="absolute inset-0 -translate-x-full animate-shimmer bg-gradient-to-r from-transparent via-white/50 to-transparent" />
      
      {/* Skeleton content */}
      <div className="space-y-4">
        <div className="h-4 w-3/4 rounded bg-gray-300" />
        <div className="h-4 w-1/2 rounded bg-gray-300" />
        <div className="h-32 w-full rounded bg-gray-300" />
      </div>
    </div>
  );
}

// Tailwind config (add to tailwind.config.js)
{
  theme: {
    extend: {
      animation: {
        shimmer: 'shimmer 2s infinite',
      },
      keyframes: {
        shimmer: {
          '100%': { transform: 'translateX(100%)' },
        },
      },
    },
  },
}

---

---

❌ アンチパターン 2：色のコントラストを無視する

例：

/* ❌ Gray text on light gray background = unreadable */
.subtle-text {
  color: #999999;
  background: #f0f0f0;
  /* Contrast ratio: 2.1:1 (FAILS WCAG AA 4.5:1 requirement) */
}

問題点：

• WCAG AA のアクセシビリティ基準に適合しない（テキストのコントラスト比は 4.5:1）
• 視覚に障害のあるユーザーがコンテンツを読めない
• 明るい日差しの下での UX が悪い（モバイル端末）

適切な方法：

/* ✅ Sufficient contrast */
.readable-text {
  color: #333333;
  background: #ffffff;
  /* Contrast ratio: 12.6:1 (PASSES WCAG AAA) */
}

/* Or use design system tokens */
.text {
  color: var(--color-text-primary);    /* Guaranteed 4.5:1 */
  background: var(--color-bg-surface); /* Against text color */
}

---

---

品質チェックリスト

見た目の仕上げ

• カラーパレットは基本色を最大 3 色とニュートラルカラーで構成
• タイポグラフィの階層が明確（フォントサイズは 3～5 種類）
• 一貫した間隔のスケールを使用（4px、8px、16px、24px、32px...）
• すべてのインタラクティブ要素にホバー状態を設定
• 非同期アクションに読み込み状態を設定
• 空の状態に役立つメッセージを表示

アクセシビリティ

• テキストの色のコントラスト比が 4.5:1 以上（WCAG AA）
• すべてのインタラクティブ要素でフォーカスインジケーターが表示される
• アニメーションが prefers-reduced-motion に対応
• すべての画像に代替テキストを設定
• キーボード操作が機能する（Tab、Enter、Esc）

レスポンシブデザイン

• モバイルファーストのアプローチ（基本幅 320px）
• ブレークポイント：sm（640px）、md（768px）、lg（1024px）、xl（1280px）
• タッチターゲットが 44x44px 以上（モバイル）
• モバイルで横スクロールが発生しない
• 画像がレスポンシブ（max-width: 100%、height: auto）

パフォーマンス

• アニメーションに transform と opacity を使用（GPU アクセラレーション）
• 画像を最適化（WebP、遅延読み込み）
• CSS バンドルが 50KB 未満（圧縮後）
• レイアウトシフトが発生しない（CLS <0.1）
• フォントを事前読み込み（<link rel="preload">）