WEB APPLICATION
WEB APPLICATION / QUIZ — 初学者向け学習UI設計
座学だけでは定着しにくい知識を、ゲーム感覚で繰り返し習得できる学習ツールを設計したかった。個人の自習はもちろん、社内教育・研修用途にも転用できる汎用的なクイズ型学習プラットフォームとして、「楽しく続けられる」仕掛けを中心に設計した。
動物をテーマにした4択クイズWebアプリです。300問のバンクから毎回10問をランダム抽出し、難易度3段階(かんたん・ふつう・むずかしい)に対応。個人学習から教育用途まで幅広く活用できる設計にしています。
正誤判定時にはアニメーションフィードバックを表示し、直感的に結果を把握できます。マスコットのフクロウキャラクターは画像3種・アニメーション3種を持ち、回答状況に応じて音声でリアクションします。全問終了後はスコアに応じて4パターンのリザルト画像が表示され、SVGアニメーションによるスコアリング演出でゲームとしての達成感を高めています。
個人の知識定着チェックや繰り返し学習はもちろん、出題内容の差し替えにより社内研修・教育ツールとして転用可能な設計にしています。難易度3段階の選択と300問バンクにより、初心者から上級者まで段階的な学習をサポートします。
「Forest Academy」というコンセプトに合わせ、深い森の緑・琥珀・パーチメントクリームを基調としたカラーパレットを採用。全画面背景にはオリジナルのイラストを使用し、世界観を統一しました。フォントにはアカデミックでありながら温かみのある雰囲気のあるものを選出し、演出を際立たせています。
ゲーム設計の達成感が学習継続を支援します。ランダム出題と難易度設定で繰り返し学習に対応し、音声・アニメーションフィードバックが記憶定着を促進します。「楽しくなければ続かない」という前提のもと、エンタメとしての完成度を追求した教育UIです。
課題
座学だけでは定着しにくい知識を「楽しく・続けたくなる」UIとして設計する必要があった。単なる問題表示では離脱しやすく、学習効果も上がらない。
解決策
300問ランダム出題・難易度3段階・アニメーションフィードバック・マスコット音声リアクション・SVGスコア演出でゲーム感を付与。研修転用も想定した汎用設計に。
結果
達成感と学習効果を両立した教育UIが完成。個人学習から教育・研修用途まで対応できる汎用性と、飽きずに続けられる設計を実現。