Noriko Tomita
Portfolio

- より多くの人に届ける -

Works

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

おんがくクイズ

Website

「おんがくクイズ」のモックアップです。

concept

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

design

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

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

contents

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

「おんがくクイズ」レベル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

View All Works
Visit Site