generic-fullstack-ux-designer

フルスタック UX デザイナー

Next.js／NestJS のフルスタックアプリケーションに関する、プロフェッショナルな UX の専門知識です。

拡張元： 汎用 UX デザイナー — デザイン思考のプロセス、調査手法、インタラクションパターン、批評のフレームワークについては、基本スキルをお読みください。

フルスタック UX に関する考慮事項

サーバーサイドレンダリングの UX

シナリオ	UX パターン
初回ページ読み込み	ハイドレーションに安全なスケルトン画面
データ取得	静的コンテンツにはサーバーコンポーネント、動的コンテンツにはクライアントを使用
認証	リダイレクト UX を伴う保護されたルート
フォーム送信	プログレッシブエンハンスメント

ハイドレーションに安全なパターン

// ✓ Avoid hydration mismatch
function Timestamp({ date }: { date: Date }) {
  const [formatted, setFormatted] = useState("");

  useEffect(() => {
    setFormatted(date.toLocaleString()); // Client-side only
  }, [date]);

  return <span>{formatted || "Loading..."}</span>;
}

API の読み込み状態とエラー状態

読み込み状態の階層

所要時間	パターン	例
< 100ms	インジケーターなし	ボタンクリック
100ms - 1s	目立たないスピナー	フォーム送信
1s - 5s	スケルトン画面	ページ取得
> 5s	プログレスバー	ファイルアップロード

エラー状態の設計

API Error → Parse Error → User-Friendly Message → Recovery Action

エラーの種類	ユーザーメッセージ	復旧方法
400 バリデーション	フィールドエラーを表示	修正して再試行
401 未認証	「ログインしてください」	ログイン画面にリダイレクト
404 見つかりません	「アイテムが見つかりません」	前の画面に戻る
500 サーバーエラー	「問題が発生しました」	再試行ボタン

楽観的 UI パターン

// Show immediate feedback, rollback on error
async function toggleLike(postId: string) {
  // 1. Update UI immediately
  setLiked(true);
  setLikeCount((c) => c + 1);

  try {
    // 2. Call API
    await api.like(postId);
  } catch {
    // 3. Rollback on failure
    setLiked(false);
    setLikeCount((c) => c - 1);
    showToast("Failed to like");
  }
}

楽観的 UI を使うタイミング

操作	楽観的に処理するか	理由
いいね／お気に入り	はい	リスクが低く、よくある操作
コメント追加	はい	保留中の状態を表示できる
アイテム削除	いいえ	破壊的な操作で、確認が必要
支払い	いいえ	重要な操作で、検証が必須
フォーム送信	場合による	複雑さによって異なる

フォーム送信の UX

クライアント → サーバーのフロー

User Input → Client Validation → Submit → Server Validation → Response
     ↓              ↓              ↓              ↓              ↓
  Feedback    Inline errors   Loading...   Field errors    Success/Error

複数ステップのフォーム

// Show progress and allow back navigation
<FormStepper
  steps={["Details", "Payment", "Confirm"]}
  currentStep={step}
  onBack={() => setStep((s) => s - 1)}
/>

認証の UX

ログインフローのパターン

状態	UX
認証を読み込み中	全画面スケルトン
未ログイン	ログインフォームを表示
ログイン中	フォームを無効化し、スピナーを表示
成功	トーストを表示してリダイレクト
エラー	インラインエラーを表示し、フォームデータを保持

保護されたルートのパターン

// Redirect unauthenticated users
if (!user && !loading) {
  return <Navigate to="/login" state={{ from: location }} />;
}

リアルタイム更新

パターン	ユースケース
ポーリング	低頻度の更新（通知など）
WebSocket	チャット、リアルタイムコラボレーション
SSE	サーバーからの一方向更新

プレゼンスインジケーター

• オンライン状態を示すドット
• 「ユーザーが入力中…」インジケーター
• 共同編集カーソル

フルスタック設計の批評

項目	質問
読み込み状態	API 呼び出し中は何を表示するか？
エラーからの復旧	ユーザーはエラーから復旧できるか？
オフライン時の動作	ネットワークがない場合、どうなるか？
認証の遷移	ログイン／ログアウトはスムーズか？
データの鮮度	古いデータが明確に示されているか？

関連項目

• 汎用 UX デザイナー — 基本的な方法論
• UX の原則 — 調査手法、ヒューリスティクス
• デザインパターン — ビジュアルパターン