ENTERTAINMENT

五線譜ドレミclip

五線譜の音符と音階吹鳴を完全同期♪

ABOUT THIS CONTENT

五線譜の音符表示と音階の吹鳴を同期させた、Neko3SE LABの音楽実験コンテンツです。

PROMPT EXAMPLE

この動画を生成する際に利用できる、生成AIへのプロンプト例です。

生成AIへのプロンプト例を見る
# 目的

ト音記号の五線譜上に、ハ長調の「ド・レ・ミ・ファ・ソ・ラ・シ・ド」を音楽理論上正しい位置に配置し、それぞれの音を順番に鳴らす教育用MP4動画を生成してください。

# 最重要条件

音符の位置を画像生成AIの推測で配置しないでください。
五線譜・音符・文字・強調表示は、プログラムによる座標指定で正確に描画してください。
音符の高さと実際に再生する音程は、必ず同じ音高にしてください。

# 五線譜

- 白背景
- 黒色の5本の水平線
- ト音記号
- ハ長調(C Major)
- 左から右へ8個の音符を配置
- 「ド・レ・ミ・ファ・ソ・ラ・シ・ド」の1オクターブ上行
- 各音符の下にカタカナで対応する音名を表示
- シンプルで見やすい教材風デザイン

# 音符の正確な位置

中央ド(C4)から1オクターブ上のC5までを使用してください。

1. ド = C4 — 五線の下にある加線上
2. レ = D4 — 第1線の下の間
3. ミ = E4 — 第1線上
4. ファ = F4 — 第1間
5. ソ = G4 — 第2線上
6. ラ = A4 — 第2間
7. シ = B4 — 第3線上
8. ド = C5 — 第3間

C4からC5まで、音符は線と間を交互に使って半段ずつ連続して上昇します。
特に「ラ・シ・ド」の位置を誤って一段下げないよう注意してください。

# 再生する音

平均律 A4=440Hz を基準とします。

- ド C4 = 261.63 Hz
- レ D4 = 293.66 Hz
- ミ E4 = 329.63 Hz
- ファ F4 = 349.23 Hz
- ソ G4 = 392.00 Hz
- ラ A4 = 440.00 Hz
- シ B4 = 493.88 Hz
- ド C5 = 523.25 Hz

音色は自然なピアノ風としてください。

# 動画演出

ド → レ → ミ → ファ → ソ → ラ → シ → ド の順番に再生してください。

- 1音あたり約0.7秒
- 音の開始と同時に該当する音符を強調表示
- 音符と音声を完全に同期
- 現在鳴っている音符が一目で分かるようにする
- 強調表示は音符を囲むリングなど、五線譜を邪魔しない方法を使用
- 音名も必要に応じて強調
- 最後のドを鳴らしたあと約1秒静止

# 音声

単純なビープ音ではなく、ピアノに近い自然な音色にしてください。
外部音源が利用できない場合は、基音と倍音、アタック、減衰を組み合わせてピアノ風の音を合成してください。
音割れしない適切な音量に調整してください。

# 出力仕様

- MP4形式
- 映像:H.264
- 音声:AAC
- 30fps
- 一般的なPC・Android・iPhoneで再生可能な形式
- 動画時間:約6.6秒
- 最終成果物をダウンロード可能なMP4ファイルとして出力

# 品質確認

生成後、必ず次を確認してください。

- 音符が C4・D4・E4・F4・G4・A4・B4・C5 の順になっている
- 「ドレミファソラシド」が五線上で半段ずつ上昇している
- ラ=A4が第2間
- シ=B4が第3線
- 最後のド=C5が第3間
- 表示される音符と再生音の音高が一致している
- 音と強調表示のタイミングが一致している
- 日本語の「ド レ ミ ファ ソ ラ シ ド」が文字化けしていない

条件を満たしていない場合は成果物として確定せず、修正してからMP4を出力してください。

※生成AIや実行環境によって、結果や利用できる機能は異なります。

LAB NOTE

五線譜ドレミclip

EXPERIMENT THEME

CONTENT ACCURACY × SELF-CONTAINED WEB

01 / WHY

なぜ作った?Why was it built?

五線譜上の音符、ドレミの音階表示、実際に鳴る音を短いコンテンツとして同期させたとき、ブラウザでどこまでシンプルな音楽教材としてまとめられるのか。

表示内容の正確さと、単一HTMLで扱えるコンテンツ形式の両方を試すために制作しました。

How simply can staff notation, solfege labels and sounding notes be synchronized into a short browser-based learning clip?

This experiment focuses on both musical accuracy and a self-contained single-HTML delivery format.

02 / EXPERIMENT

何を試した?What was tested?

ドレミファソラシドの五線譜と音階の吹鳴を同期させた短編動画を制作し、動画データをBase64としてHTMLへ埋め込みました。外部動画ファイルを別途配置せず、ページ単体で再生できる構成を試しています。

A short video synchronizes staff notation for do-re-mi-fa-sol-la-ti-do with the sounding scale. The video data is embedded in the HTML as Base64 so the page can play it without a separate external video file.

03 / FINDINGS

何が分かった?What did we learn?

五線譜では「それらしく見える」だけでは不十分で、音符の位置そのものが音楽的な意味を持つため、表示内容の正確さが特に重要でした。

また、動画をBase64としてHTMLへ埋め込むことで単一ファイルとして扱いやすくなる一方、HTMLファイル自体のサイズは大きくなります。

自己完結性とファイルサイズにはトレードオフがあり、用途に応じて配置方法を選ぶ必要があることが分かりました。

With staff notation, looking plausible is not enough: note position carries musical meaning, so content accuracy is essential.

Embedding the video as Base64 makes the page easier to handle as a single file, but increases the HTML file size.

Self-contained delivery and file size are a trade-off, so the appropriate packaging depends on the use case.

04 / TECHNOLOGY

何を使った?What was used?

HTML5HTML5 VIDEOBASE64DATA URLRESPONSIVE DESIGN

動画データをData URLとしてHTML内へ埋め込み、単一ページで再生できる構成にしています。

Video data is embedded as a Data URL so the clip can be played from a self-contained page.

05 / MORE

さらに詳しくGo deeper