Works

たのしく音楽の世界へみちびく

おんがくクイズ

Website

concept

音楽講師時代は、楽譜の読み方を教えるのにいつも苦労していました。特に小さな子供は、楽譜を読む必要性もなかなか理解できず、五線の細かな部分を認識するのも難しいため、どうにか楽しく学ぶ方法はないだろうかと模索していました。JavaScriptを学びながら、その経験を活かした音当てクイズゲームを思いつき、作成しました。4段階のレベル別で、楽しくステップアップできるゲームが完成しました。

design

対象年齢は幼児〜小学校低学年の児童のため、シンプルに、分かりやすいデザインを心がけました。配色はカラフルなおもちゃが揃っているキッズルームをイメージしました。

  • #AECFED
  • #00A0E8
  • #153692
  • #FED500
  • #EA6088
  • #EFA72B
  • #DE6C31
  • #008542

contents

音域別に4つのレベルに分け、スモールステップで進めることができます。

「おんがくクイズ」レベル1の画像です。 「おんがくクイズ」レベル2の画像です。 「おんがくクイズ」レベル3の画像です。 「おんがくクイズ」レベル4の画像です。

レベルを確認してスタート!

PC版「おんがくクイズ」のレベル確認時の画像です。
スマートフォン版「おんがくクイズ」のレベル確認時の画像です。

正解?不正解?
間違えていても正解を教えてもらえます。

「おんがくクイズ」の正解時の画像です。 「おんがくクイズ」の不正解時の画像です。

最後は正答数に応じてメッセージが!

PC版「おんがくクイズ」の正答率が8割以上だった時の画像です。
スマートフォン版「おんがくクイズ」の正答率が5割以上8割未満だった時の画像です。

全問正解するとお祝いの風船が上がります。

PC版「おんがくクイズ」の全問正解時の画像です。
スマートフォン版「おんがくクイズ」の全問正解時の画像です。

data

  • 制作範囲 企画・サイト設計・デザイン・コーディング
  • 制作期間 2022年10月〜 約3週間
  • 使用ツール Figma(デザイン),
    Visual Studio Code(コーディング)
  • 使用言語 HTML, CSS, JavaScript
  • url https://tomatonft.github.io/countdown-music-quiz/

Other Works

Visit Site