おんがくランド|子ども向け音楽学習ツール
遊びながら音楽の基礎が身につく!無料のブラウザ音楽教育ツール
おんがくランドとは?
おんがくランドは、お子さまがスマートフォンやタブレット、パソコンのブラウザだけで音楽の基礎を楽しく学べる、完全無料の音楽学習ツールです。
インストール不要、会員登録不要。URLを開くだけで、ピアノ演奏、リズム体験、音楽クイズ、名曲メロディの再生まで、4つの本格的な学習モードを体験できます。
対象年齢は3歳〜10歳ですが、音楽初心者の大人の方にも「音感トレーニングツール」として活用していただけます。
なぜ「おんがくランド」が選ばれるのか? ― 5つの特長
1. 完全無料・広告なし・インストール不要
ブラウザで開くだけ。アプリのダウンロードも、アカウント登録も必要ありません。iPhone、iPad、Androidスマートフォン、パソコン、どの端末でも同じように動作します。通信が不安定な場所でも、一度読み込めばオフラインで遊べるシングルファイル設計です。
2. 4つの学習モードで飽きない設計
ピアノ、リズム、クイズ、曲の再生。それぞれ異なるアプローチで音楽の要素に触れるため、お子さまの「もっとやりたい!」が自然に引き出されます。
3. 視覚×聴覚×触覚のマルチモーダル学習
鍵盤の色分けドット、音名のひらがな表示、波形アニメーション、振動するビートドットなど、目と耳と指先を同時に使う設計。幼児教育の研究で効果が実証されている多感覚アプローチを採用しています。
4. 学習データの自動保存とエクスポート
クイズの正解数、連続記録、設定内容はすべてブラウザに自動保存されます。ブラウザを閉じても、次に開いたとき前回の続きからスタートできます。JSON形式でのエクスポート・インポートにも対応しているため、端末を買い替えても記録を引き継げます。
5. プロ品質のUI/UX
Apple・Googleのデザインガイドラインに準拠した、モダンで洗練されたインターフェースです。ダークモード対応、アクセシビリティ配慮(WCAGAA準拠のコントラスト比、キーボード操作対応、ARIAラベル)も万全です。
4つの学習モード ― 詳細操作ガイド
🎹 モード1:ピアノ
画面下部のナビゲーションバーで「🎹ピアノ」をタップすると表示される、おんがくランドの中核機能です。
画面構成
画面上部に楽器セレクターがあり、4種類の音色を切り替えられます。その下に音名表示エリア(丸いノートサークル)、オクターブコントロール、そしてピアノ鍵盤が並びます。
楽器を選ぶ
鍵盤の上に横並びで表示されるチップ型のボタンで、演奏する楽器の音色を選択します。
🎹ピアノが初期設定です。倍音を含むリアルなピアノサウンドで、いちばん自然な響きを楽しめます。🎹オルガンは教会のパイプオルガンのような、持続する厚みのある音です。長く鍵盤を押さえたい練習に向いています。🔔ベルはオルゴールや鉄琴のような、キラキラした透明感のある音色です。高いオクターブで弾くと、とても美しい響きになります。🎛️シンセはシンセサイザー風の電子音です。現代的なサウンドに興味のあるお子さまに人気があります。
選択中の楽器はチップが紫色にハイライトされます。楽器を切り替えても鍵盤の配置は変わらないため、同じ曲を異なる音色で弾き比べる体験ができます。
ノートサークル(音名表示)
鍵盤をタップすると、画面中央の大きな丸いサークルが演奏した音に対応する色に変化し、音名がアニメーション付きで表示されます。
サークルの中には日本語の音名(ド、レ、ミなど)が大きく表示され、その下に日本語音名と英語音名の両方(例:「ド©」)、さらにオクターブ番号と周波数(例:「C4 262Hz」)が小さく表示されます。
サークルの周囲にはリング状のエフェクトが広がるアニメーションが再生され、音を出した実感が視覚的にも得られます。その下にある波形バーも音に反応して上下に動き、「音が出ている」ことを直感的に伝えます。
オクターブ操作
鍵盤の上にある「−」「+」ボタンで、オクターブを2〜6の範囲で変更できます。中央に現在のオクターブ番号が表示されます。
オクターブ2は大人の男性の低い声くらいの音域、オクターブ4がピアノの中央付近、オクターブ6はとても高いキラキラした音域です。お子さまには、まずオクターブ4(初期設定)で遊んでいただき、慣れてきたら上下に変えて「同じドでも高さが違う」ことを体感していただくのがおすすめです。
鍵盤の操作
白鍵7つと黒鍵5つの1オクターブ分の鍵盤が表示されます。スマートフォンでは左右にスクロールして全体を確認できます。
それぞれの白鍵にはひらがなの音名ラベル(ド、レ、ミ、ファ、ソ、ラ、シ)が表示され、色分けされた小さなドットも付いています。これにより、文字が読めるお子さまは音名で、まだ読めないお子さまは色で音を識別できます。
鍵盤をタップ(またはクリック)すると、選択中の楽器音色で音が鳴ります。鍵盤はタップ中に色が変わり、押している実感が得られます。複数の鍵盤を素早くなぞるようにタップすると、グリッサンド(滑らかに音をつなげる奏法)のような演奏もできます。
パソコンをお使いの場合は、キーボードでも演奏できます。キーの対応は次のとおりです。ド=A、ド♯=W、レ=S、レ♯=E、ミ=D、ファ=F、ファ♯=T、ソ=G、ソ♯=Y、ラ=H、ラ♯=U、シ=J。
設定による表示変更
設定画面の「おんめいひょうじ」をオフにすると鍵盤上のドレミ表示が消え、「いろドット」をオフにすると色分けドットが非表示になります。音名を見ないで弾く練習をしたいときに活用してください。
🥁 モード2:リズム
画面下部のナビゲーションバーで「🥁リズム」をタップすると切り替わります。リズム感を育てるための3つの機能が1つの画面にまとまっています。
ビートビジュアライザー
画面上部のカード内に、丸いドット(ビートドット)が横一列に並んでいます。ドットの数は選択中のリズムパターンの拍子に対応しています。4拍子なら4つ、3拍子(ワルツ)なら3つです。
リズムを再生すると、現在のビートに対応するドットが紫色に大きく光り、周囲にリング状の波紋が広がります。拍の強弱も視覚的に表現されるため、「1拍目が強い」「2拍目と4拍目にスネアが入る」といったリズム構造を目で見て学べます。
テンポコントロール
スライダーを左右に動かして、テンポ(速さ)を60〜200BPMの範囲で調整できます。BPMとは「BeatsPerMinute」の略で、1分間に何拍打つかを表す単位です。
60BPMはゆっくり歩くくらいの速さ。100BPM(初期値)は普通の行進曲くらい。200BPMはかなり速いテンポです。最初はゆっくりのテンポからはじめて、慣れてきたら少しずつ速くしていくのがおすすめです。リズム再生中にテンポを変えると、自動で新しいテンポに切り替わります。
スタート/ストップとタップ
「▶スタート」ボタンを押すとリズムの自動再生が始まります。再生中はボタンが「⏸ストップ」に変わり、もう一度押すと停止します。
「👏タップ!」ボタンは、リズムに合わせて自分で叩くためのボタンです。押すと手拍子(クラップ)の音が鳴り、すべてのビートドットが一瞬ハイライトされます。自動再生されるリズムに合わせてタップすることで、リズム感のトレーニングになります。
リズムパターン選択
6種類のリズムパターンが3列×2行のグリッドで表示されます。
🎵シンプルは4拍子の基本パターンです。バスドラムとスネアが交互に入る、もっともオーソドックスなリズムで、最初に試すのに最適です。💃ワルツは3拍子のパターンです。「ズン・チャッ・チャッ」という独特のリズムで、バレエや舞踏会の音楽でおなじみです。🎸ロックは4拍子ですが、シンプルとは微妙にアクセントの位置が異なり、力強いロック音楽のビートを再現しています。🌴サンバはブラジル音楽のリズムです。クラップ(手拍子)が入る軽快なパターンで、自然に体が動き出します。🎺マーチは行進曲のリズムです。バスドラムとスネアが力強く交互に入り、きちんとした拍の感覚をつかむのに適しています。🐰スキップは弾むようなリズムです。スキップをしているときの「タッタ、タッタ」という感覚を音で再現しています。
選択中のパターンは紫色のボーダーでハイライトされ、カード内の小さなドットでリズムの強弱が視覚的に示されます。
ドラムパッド
画面下部に4つの大きなパッドが2×2で配置されています。それぞれが異なるドラム音に対応しており、タップすると即座にその音が再生されます。
🦶バスドラムは赤系グラデーションのパッドで、「ドン」という低く重い音です。ドラムセットの足で踏むペダルの音に相当します。🥁スネアは青〜紫系のパッドで、「タン」という歯切れのよい音です。リズムの核となる音で、ロックでは2拍目と4拍目に入ることが多い音です。🥏ハイハットは緑系のパッドで、「チッ」という短く鋭い金属音です。シンバルを2枚合わせた楽器の音で、リズムの刻みに使われます。👏クラップはオレンジ系のパッドで、手拍子の音です。バンド音楽やダンスミュージックでよく使われます。
パッドをタップすると、白いフラッシュが一瞬光るエフェクトが再生され、叩いた実感が得られます。自動再生のリズムに合わせてドラムパッドを叩くことで、即興のドラム演奏体験ができます。
🧠 モード3:クイズ
画面下部のナビゲーションバーで「🧠クイズ」をタップすると切り替わります。4つの出題モードで音楽知識をゲーム感覚で身につけます。
スコア表示バー
画面上部に3つのバッジとプログレスバーが表示されます。
「⭐」バッジは累計の正解数です。正解するたびに1ずつ増えていきます。「🔥」バッジは現在の連続正解数(ストリーク)です。不正解になるとゼロに戻ります。「👑」バッジはこれまでの最高連続正解記録です。自分のベストを超えることが目標になります。プログレスバーは正解率を視覚的に表示するもので、正解の割合が高いほど紫色のバーが右に伸びていきます。
クイズモードの選択
4つのモードが2×2のカードで表示されます。
👂おとあてモードでは、ピアノの音が1つ再生され、4つの選択肢(ドレミ表記)から正しい音名を当てます。「この音はドかな?レかな?」と考えることで、音感(音の高さを聞き分ける力)が育ちます。画面中央の🔊マークをタップすると何度でも音を聴き直せるので、焦らずじっくり考えられます。
🎻がっきモードでは、楽器の絵文字が大きく表示され、その楽器の名前を4つの選択肢から当てます。ピアノ、ギター、バイオリン、トランペット、ドラム、フルート、サクソフォン、マラカス、ハープ、アコーディオンの10種類が出題されます。ヒントとして楽器の分類(げんがっき、かんがっき、けんばんがっき、だがっき、もっかんがっき)も表示されるため、楽器の仲間分けも自然と学べます。
🎼おんぷモードでは、音楽記号が表示され、その名前を当てます。全音符、二分音符、四分音符、八分音符の4種類の音符と、シャープ、フラット、ト音記号、ヘ音記号の4種類の記号、合計8種類が出題されます。それぞれの役割がヒントとして表示されるため、記号の意味も同時に学べます。
📏たかさモードでは、2つのピアノ音が順番に再生され、どちらが高い音かを当てます。音の高低を聞き分ける力を鍛える、もっとも実践的な音感トレーニングです。🔊マークをタップすると2つの音をもう一度聴き直せます。
回答の流れ
問題が表示されたら、4つ(たかさモードでは2つ)の選択肢ボタンから答えをタップします。
正解すると、ボタンが緑色に変わり「✓」マークが表示されます。ふわっと拡大するアニメーションと、「ピロリロリン♪」という上昇する三和音のサウンドが流れます。
不正解の場合、タップしたボタンが赤色に変わり「✗」マークが表示されます。ブルブルと横に揺れるアニメーションと、「ブブー」という低い音が流れます。同時に、正解のボタンが緑色にハイライトされるため、正しい答えがすぐにわかります。
回答後、約1.4秒で自動的に次の問題に切り替わります。
5問連続正解のお祝い演出
5問、10問、15問……と5の倍数で連続正解を達成すると、画面全体にお祝いの演出が表示されます。紙吹雪が画面上から降り注ぎ、中央に大きなお祝いカードがポップアップします。「🎉10もんれんぞくせいかい!」のようなメッセージと、キラキラしたファンファーレサウンドが流れ、お子さまのやる気を強力に後押しします。
🎼 モード4:きょく
画面下部のナビゲーションバーで「🎼きょく」をタップすると切り替わります。誰もが知る名曲のメロディを聴いて、音の流れを視覚的に学びます。
曲の一覧
8曲が縦にカード形式で並んでいます。各カードには曲のアイコン(絵文字)、曲名、英語タイトルまたは説明、そして難易度が星マークで表示されます。
収録曲は次のとおりです。⭐「きらきらぼし」はもっとも有名な童謡で、ドドソソララソの繰り返しで構成されたシンプルなメロディです。🐸「かえるのうた」は音が順番に上がって下がるスケール練習のような曲です。🌷「チューリップ」はドレミの3音からはじまる覚えやすいメロディです。🐑「メリーさんのひつじ」はミレドレミミミの繰り返しで、少しだけ複雑な音の動きが登場します。🐝「ぶんぶんぶん」は軽快なテンポで、ソからはじまる明るい曲です。🎵「よろこびのうた」はベートーヴェンの交響曲第9番より。クラシック音楽への入り口として最適です。🎶「ドレミのうた」は映画「サウンド・オブ・ミュージック」の有名曲で、音名がそのまま歌詞になっている教育的な曲です。🎂「ハッピーバースデー」は世界中で歌われるお祝いの定番曲です。
プレーヤー操作
曲のカードをタップすると、画面上部にプレーヤーパネルが開きます。
プレーヤーパネルの上部にはメロディを構成する音符がひとつずつ小さな四角いチップで横に並びます。各チップにはドレミの音名が表示され、背景色はその音に対応する色で薄く着色されています。「−」と表示されているチップは休符(音を出さない部分)です。
「▶さいせい」ボタンを押すとメロディの再生が始まります。再生中は、現在鳴っている音に対応するチップが紫色のボーダーで囲まれて少し大きくなり、すでに再生された音は緑色に変化します。チップが順番にハイライトされていく様子は、いわば「音の絵巻物」です。音がどの順番で、どのくらいの長さで鳴っているのかが一目でわかります。
再生中にボタンが「⏸いちじていし」に変わり、もう一度押すと停止します。「⏹ストップ」ボタンを押すと、再生位置が最初に戻ります。
速度調整
プレーヤーの下部に「はやさ」コントロールがあります。「−」「+」ボタンで0.5x、0.75x、1x、1.25x、1.5xの5段階に変更できます。
0.5xはとてもゆっくりで、ひとつひとつの音をじっくり聴きたいときに最適です。初めて聴く曲は0.5xか0.75xから始めて、メロディを覚えたら1xに上げていくのがおすすめの使い方です。1.25xや1.5xは、すでに覚えた曲をテンポよく楽しむためのモードです。
ピアノと連動した練習
きょくモードで再生される音は、ピアノモードで選択中の楽器音色で鳴ります。つまり、ベルの音色を選んでからきょくモードで再生すると、オルゴールのような美しいメロディが聴けます。お気に入りの音色で名曲を楽しんでみてください。
設定画面の操作
画面右上の⚙️ボタンをタップすると、画面下からスライドアップする設定パネルが開きます。パネル外の暗い部分をタップするか、上部のバーを下にスワイプすると閉じます。
がめん設定
🌙ダークモードは画面を暗いテーマに切り替えます。夜の時間帯や、明るい画面が苦手なお子さまにおすすめです。暗い背景に明るい文字で表示され、目の疲れを軽減します。
🏷️おんめいひょうじはピアノ鍵盤上のドレミ表記の表示・非表示を切り替えます。最初はオンにして音名を見ながら弾き、慣れてきたらオフにして音名を見ずに弾く練習ができます。
🎨いろドットはピアノの白鍵上に表示される色分けドットの表示・非表示を切り替えます。色と音の対応を覚えるために有効ですが、音名表示と同様、慣れてきたらオフにすることで視覚に頼らない演奏力が育ちます。
おと設定
🔊おとはすべての音(ピアノ音、ドラム音、クイズの効果音など)をまとめてオン・オフします。オフにすると完全にミュートされます。公共の場所で音を出せないときに使います。
🎵UIおとはボタンをタップしたときの操作音(カチッという音)だけをオン・オフします。ピアノの音やリズムの音は鳴るけど、ナビゲーションの操作音は消したい、という場合に使います。
データ管理
📤エクスポートボタンをタップすると、現在のすべての設定とクイズスコアが「ongaku_land_data.json」というファイル名でダウンロードされます。このファイルには、オクターブ設定、テーマ、クイズの累計正解数、連続正解記録、選択中の楽器、テンポ設定など、おんがくランドのすべての状態が含まれます。
📥インポートボタンをタップすると、ファイル選択画面が開きます。先ほどエクスポートしたJSONファイルを選択すると、保存されていた状態がすべて復元されます。端末を変更したときや、きょうだいでデータを共有したいときに便利です。
🗑️リセットボタンは、すべてのデータを初期状態に戻します。確認ダイアログが表示されるため、誤って押してしまっても安心です。リセットすると、クイズのスコアや連続記録、設定内容がすべて消去されます。
使い方ガイド(ヘルプ)
画面右上の❓ボタンをタップすると、4つのモードの簡単な説明が番号付きのステップ形式で表示されます。初めて使うお子さまに見せてあげてください。「わかった!🎶」ボタンで閉じます。
なお、初回アクセス時にはこのガイドが自動で表示されます。2回目以降は自動表示されませんが、❓ボタンからいつでも見返せます。
保護者の方へ ― 教育効果と活用のヒント
年齢別おすすめの使い方
3〜4歳のお子さまには、まずピアノモードで自由に鍵盤をタップさせてあげてください。音と色の対応を自然に覚えていきます。リズムモードでは自動再生を聴きながらタップボタンを叩く遊びがおすすめです。きょくモードで「きらきらぼし」を再生すると、知っている曲が画面で動く楽しさを体験できます。
5〜7歳のお子さまには、クイズモードの「おとあて」からはじめて、聴いた音の名前を当てる練習が効果的です。きょくモードで再生された音を、ピアノモードで自分でも弾いてみる「耳コピ」体験も、この年齢から可能です。リズムモードでは、異なるパターンを聴き比べて「ワルツは3拍子」「ロックは4拍子」といった拍子の概念を学べます。
8〜10歳のお子さまには、クイズの全モードをローテーションで挑戦させ、連続正解記録の更新を目標にすると継続的なモチベーションになります。きょくモードで速度を変えて聴く練習や、ドラムパッドを使った自由なリズム創作も楽しめます。
1日の推奨利用時間
1回あたり10〜15分、1日2〜3回程度が効果的です。短い時間で集中して取り組むほうが、長時間だらだら使うよりも学習効果が高いことが教育研究で示されています。クイズで5問連続正解のお祝いが出たら「今日はここまでにしよう」という区切りにするのも良い方法です。
技術仕様
おんがくランドは、HTML5、CSS3、JavaScript(ES6+)のみで構築された単一のHTMLファイルです。外部ライブラリやCDNへの依存がないため、ファイルひとつをコピーするだけでどこでも動作します。
音声生成にはWebAudioAPIを使用しており、ピアノ音は基本波に倍音(第2倍音、第3倍音)とアタックトランジェントを重ねることで、リアルな音色を再現しています。
データの永続化にはlocalStorageを使用しています。保存されるデータは設定値とスコアのみで、個人情報は一切収集・送信しません。
レスポンシブデザインにより、画面幅320pxのスマートフォンから大型デスクトップモニタまで、レイアウトが自動調整されます。
よくある質問(FAQ)
Q.音が出ません。
ブラウザのセキュリティ仕様により、最初のタップ操作で音声が有効化されます。画面のどこかを一度タップしてから鍵盤を押してみてください。また、設定画面で「おと」がオフになっていないか確認してください。端末本体のボリュームがゼロになっていないかも合わせてご確認ください。
Q.データが消えてしまいました。
ブラウザのキャッシュクリアや、プライベートブラウジングモードでの使用はデータが消える原因になります。大切な記録は設定画面からエクスポートしておくことをおすすめします。
Q.オフラインでも使えますか?
一度ページを読み込んだあとは、ネットワーク接続がなくても動作します。ただし、ブラウザのタブを閉じて再度開く場合は通信が必要です。
Q.対応ブラウザを教えてください。
iOSSafari、AndroidChrome、デスクトップのChrome、Firefox、Edgeで動作確認済みです。InternetExplorerには対応しておりません。
おんがくランドは、すべてのお子さまに音楽の楽しさを届けるために作られました。ぜひ親子で一緒に、画面の中の小さなピアノを弾いてみてください。最初のドレミが、一生の音楽体験のはじまりになるかもしれません。