WEB APPLICATION

Forest Academy Quiz

Webアプリ一覧へ戻る

Forest Academy Quiz

WEB APPLICATION / QUIZ — 初学者向け学習UI設計

Forest Academy Quiz
対象 初学者・学習継続者 / 社内教育・研修ツールとしての活用も想定

制作背景

座学だけでは定着しにくい知識を、ゲーム感覚で繰り返し習得できる学習ツールを設計したかった。個人の自習はもちろん、社内教育・研修用途にも転用できる汎用的なクイズ型学習プラットフォームとして、「楽しく続けられる」仕掛けを中心に設計した。

制作概要

動物をテーマにした4択クイズWebアプリです。300問のバンクから毎回10問をランダム抽出し、難易度3段階(かんたん・ふつう・むずかしい)に対応。個人学習から教育用途まで幅広く活用できる設計にしています。

主な機能

正誤判定時にはアニメーションフィードバックを表示し、直感的に結果を把握できます。マスコットのフクロウキャラクターは画像3種・アニメーション3種を持ち、回答状況に応じて音声でリアクションします。全問終了後はスコアに応じて4パターンのリザルト画像が表示され、SVGアニメーションによるスコアリング演出でゲームとしての達成感を高めています。

活用シーン

個人の知識定着チェックや繰り返し学習はもちろん、出題内容の差し替えにより社内研修・教育ツールとして転用可能な設計にしています。難易度3段階の選択と300問バンクにより、初心者から上級者まで段階的な学習をサポートします。

デザインのこだわり

「Forest Academy」というコンセプトに合わせ、深い森の緑・琥珀・パーチメントクリームを基調としたカラーパレットを採用。全画面背景にはオリジナルのイラストを使用し、世界観を統一しました。フォントにはアカデミックでありながら温かみのある雰囲気のあるものを選出し、演出を際立たせています。

ユーザーへの価値

ゲーム設計の達成感が学習継続を支援します。ランダム出題と難易度設定で繰り返し学習に対応し、音声・アニメーションフィードバックが記憶定着を促進します。「楽しくなければ続かない」という前提のもと、エンタメとしての完成度を追求した教育UIです。

課題

座学だけでは定着しにくい知識を「楽しく・続けたくなる」UIとして設計する必要があった。単なる問題表示では離脱しやすく、学習効果も上がらない。

解決策

300問ランダム出題・難易度3段階・アニメーションフィードバック・マスコット音声リアクション・SVGスコア演出でゲーム感を付与。研修転用も想定した汎用設計に。

結果

達成感と学習効果を両立した教育UIが完成。個人学習から教育・研修用途まで対応できる汎用性と、飽きずに続けられる設計を実現。

CATEGORY

Webアプリケーション

TARGET

初学者・社内研修・教育用途

DATE

2026年4月

TOOL

VS Code Claude Code Photoshop nanobanana

TECH STACK

HTML CSS Vanilla JavaScript Web Speech API Google Fonts