Promotee — 面接練習用フラッシュカードアプリの設計・開発

練習フローと状態管理

• CSVから質問と回答を読み込み、登録順、ランダム、カテゴリ別で練習できるフローを実装
• 各カードを「覚えた／まだ覚えていない」に分け、リロードするまでは覚えていないカードを続けて練習できるようにした
• 読み込んだデータと練習状態をZustand storeで管理し、永続保存は行わない構成とした

画面構造とキーボード操作

• `header`、`main`、`footer`などのランドマークを使って画面構造を整理
• 本文へ直接移動するスキップリンクを実装
• フォームに`label`や`fieldset`を使用
• 主要画面の基本操作をTab、Shift＋Tab、Enter、Space、矢印キーで確認
• フォーカス位置が分かるよう`:focus-visible`を設定

状態変化と通知

• カードの状態変更など、画面上で発生する動的な更新をLive Regionで通知
• React Toastifyに、`role="alert"`と`aria-live`を扱う独自ラッパーを実装
• 通知の種類が読み上げだけでも分かるよう、文脈を補うテキストを追加

コントラストとモーション

• WebAIM Contrast Checkerを使って色の組み合わせを確認
• WCAG AAのコントラスト比を満たしていなかったテキスト色と背景色を調整
• カード反転と完了時のアニメーションに、OSの`prefers-reduced-motion`とアプリ内設定を反映
• Reduced Motionが有効な場合は、回転や紙吹雪を使用せずに状態を切り替えるよう実装

動画とパフォーマンス

• 画面内で使用していたGIFをWebMとMP4の動画へ置き換え
• ファーストビューと説明用動画の用途に合わせ、ページごとに`preload`を調整

確認と検証

• 主要画面について、デスクトップとモバイルのLighthouse監査を実施
• クライアント側の状態を必要とする画面では、ローカル環境にダミーデータを読み込んで操作中の状態を再現
• VoiceOverで主要画面の基本操作、フォーム、ナビゲーション、状態通知を手動確認

ログインと永続保存を必要としない構成

ユーザーが読み込んだ面接用データをZustand store内だけで扱い、サーバーには送信・保存しない構成にしました。リロードすると、読み込んだデータと練習状態が消去されます。

視覚以外でも伝わる状態変化

色やアニメーションだけに依存せず、カードの状態変更やToast通知をテキストとLive Regionでも伝えるようにしました。

画面ごとの読み込み調整

すべての動画に同じ読み込み方法を適用せず、表示位置と用途に合わせて動画形式と`preload`を設定しました。