Promotee — 面接練習用フラッシュカードアプリの設計・開発
母語以外の言語で面接、スピーキング試験、プレゼンテーションの準備をする人向けに設計・開発したWebアプリ。ユーザー自身が用意した質問と回答をCSVから読み込み、登録順、ランダム、カテゴリ別で発話練習ができる。アカウント作成やサーバーへのデータ保存を必要とせず、キーボード操作、Reduced Motion対応、動的な更新のLive Region通知も実装した。
期間：2025年6月〜9月
この実績が活きるご相談
WebアプリのUX設計、フロントエンド実装、状態管理、アクセシビリティ対応、検証に関する実績です。
- ユーザーが用意したデータを扱うWebアプリの設計
- フォームのキーボード操作対応と、動的な状態変化のスクリーンリーダーへの通知
- 設計上の判断と実装・検証を一貫して進めること
概要
Promoteeは、母語以外の言語で面接、スピーキング試験、プレゼンテーションの準備をする人向けのフラッシュカードアプリです。ユーザー自身が用意した質問と回答をCSVから読み込み、登録順、ランダム、カテゴリ別で発話練習ができます。長文の回答と多言語の文字に対応し、1回の読み込みにつき最大300件まで扱えます。質問と回答をCSVファイルから読み込むため、さまざまな言語で利用できます。アカウントは必要ありません。読み込んだ内容と練習状態はZustand storeで一時的に管理され、サーバーには保存されません。ページをリロードすると、これらのデータは消去されます。
背景
英語を母語としない自身の経験から、就職面接などに向けて、準備した回答を繰り返し練習できる方法が必要だと感じていました。既存のツールには、この目的で利用するには難しい点がありました。AIによる模擬面接では一般的な質問しか提示されず、多くのフラッシュカードアプリは、文章としての回答ではなく短い単語やフレーズの学習を想定していました。また、回答を読むだけでなく、実際に発話する練習を支援するツールが必要でした。このアプリでは、あらかじめ決められた教材に頼らず、ユーザー自身が用意した質問と回答を使用できます。面接準備に関する内容を扱うため、アカウントを必要とせず、読み込んだデータをサーバーに保存しない構成にしました。また、練習そのものへの集中を妨げるゲーミフィケーションやソーシャル機能も設けていません。
課題
- CSVから質問と回答を読み込み、最大300件の長文回答と多言語の文字に対応したうえで、複数の練習モードを提供する
- 各カードを覚えたかどうか一時的に記録し、まだ覚えていないカードを繰り返し練習できるようにする
- アカウントやサーバー側の保存を必要とせず、練習フローを成立させる
- フォームとカード操作をキーボードで利用できるようにし、状態変化と通知をLive Regionで伝える
- アニメーションや動画を含む複数の画面で、モーションと読み込みの挙動を調整する
対象となる利用者
- 母語以外の言語で面接を受けるための準備をしている人
- IELTSやTOEFLなどのスピーキング試験を準備している人
- 自分で用意した質問と回答を使って練習したい人
- 登録順、ランダム、カテゴリ別で内容を復習したい人
- 面接準備の内容をサーバーに保存したくない人
実施内容・進め方
練習フローと状態管理
- CSVから質問と回答を読み込み、登録順、ランダム、カテゴリ別で練習できるフローを実装
- 各カードを「覚えた／まだ覚えていない」に分け、ページをリロードするまでは、まだ覚えていないカードを続けて練習できるようにした
- 読み込んだデータと練習状態をZustand storeで管理し、永続保存は行わない構成とした
画面構造とキーボード操作
- `header`、`main`、`footer`などのランドマークを使ってページ構造を整理
- メインコンテンツへ直接移動するスキップリンクを実装
- フォームに`label`や`fieldset`などの要素を使用
- 主要画面の基本操作をTab、Shift＋Tab、Enter、Space、矢印キーで確認
- 現在のフォーカス位置を識別できるよう、一貫した`:focus-visible`スタイルを追加
状態変化と通知
- 「覚えたと記録しました」などのカード状態の更新に`aria-live="polite"`を使用
- React Toastifyを独自コンポーネントでラップし、ToastメッセージをLive Regionから即時通知できるようにした
- 通知の種類を識別できるテキスト接頭辞を追加し、装飾用アイコンをスクリーンリーダーから隠した
- 一部のエラーメッセージは自動的に消さず、ユーザーが閉じるまで表示を維持するようにした
コントラストとモーション
- WebAIM Contrast Checkerを使って色の組み合わせを確認
- WCAG AAのコントラスト比を満たしていなかったテキスト色と背景色を調整
- カード反転と完了時のアニメーションに、OSの`prefers-reduced-motion`設定とアプリ独自のモーション設定を反映
- Reduced Motionが有効な場合は、状態変化から回転と紙吹雪のアニメーションを除外
動画とパフォーマンス
- インターフェース内で使用していたGIFをWebMとMP4の動画ファイルへ置き換え
- ヒーロー動画と説明用動画の目的に応じて、ページごとに`preload`設定を調整
確認と検証
- ESLintとeslint-plugin-jsx-a11yを使用し、ソースコード上のアクセシビリティ上の問題を静的にチェック
- 主要画面について、デスクトップとモバイルの両方でaxeによる自動レビューツールでの確認を実施
- クライアント側の状態に依存する画面では、ローカル環境にダミーデータを読み込み、必要な操作状態を再現
- VoiceOverを使用し、主要画面の基本操作、フォーム、ナビゲーション、状態通知を手動で確認
設計・実装上のポイント
アカウントと永続保存を必要としない構成
ユーザーが読み込んだ面接用データはZustand store内で扱い、サーバーへの送信や保存は行いません。ページをリロードすると、読み込んだ内容と現在の練習状態の両方が消去されます。
視覚的な表現だけに依存しない状態変化
カードの状態変化とToast通知は、色やアニメーションだけに依存せず、テキストとLive Regionを通じても伝えられます。
ページごとの読み込み挙動
すべてのページに同じ読み込み方法を適用するのではなく、各動画の表示位置と用途に応じて、動画形式と`preload`設定を選択しました。
練習への集中を重視した設計
Promoteeには、ゲーミフィケーション、ソーシャル機能、ログインがありません。パフォーマンスやエンゲージメントの指標ではなく、反復と発話練習に集中できる、意図的に落ち着いたインターフェースとしています。
成果物
- 公開Webアプリ
- CSV読み込みとフラッシュカード練習機能
- 登録順、ランダム、カテゴリ別の練習モード
- 一時的な「覚えた／まだ覚えていない」状態の管理と再練習機能
- キーボード操作と可視フォーカス
- Reduced Motion対応
- Live Regionを使用した通知
- アクセシビリティ実装のデモ
- axeおよびコントラスト確認結果
- デスクトップとモバイルに対応したレスポンシブレイアウト
結果
Best Practices / SEO
主要画面で100（2025年）
Performance
動的画面を含めて97以上（2025年）
- アカウントを作成せずにCSVを読み込み、複数のモードで面接用の質問を練習できるWebアプリを公開
- 読み込んだCSVの内容と練習状態をサーバーに保存しない構成を実装
- 主要画面の基本操作をキーボードとVoiceOverで確認
- コントラスト、モーション、フォーカス、フォーム、動的通知に関する対応を実装
掲載資料
コントラストの確認と修正
白背景上のTailwind green-500は2.27:1だったため、WCAG AAのコントラスト要件を満たす5.01:1のgreen-700へ変更しました。
振り返り
- 色のコントラストは視覚的な判断だけでは十分に評価できず、コントラスト比を計測する必要があることを実装を通して確認した
- 自動レビューツール、キーボード操作、スクリーンリーダーによる確認では、それぞれ確認できる範囲が異なる
- 動的な状態変化を含む画面では、コードレビューや自動レビューツールに加えて、実際の操作フローに基づく確認が必要だった
検証範囲
- 動的画面は、ローカル環境でダミーデータを使用し、必要なアプリケーション状態を再現してレビューツールで確認した
- スクリーンリーダーによる確認は、macOSのVoiceOverを使用した主要画面の基本操作を対象とした