僕も音楽サイトを作ろうと思うのですが、楽譜を作ってサイトに乗せる方法が分かりません。具体的な手順を知りたいです。
この記事の目次
楽譜作成にはFinaleを使っています
2018年まではFinale2003、2019年からFinale25を使って作っています。
Finale公式サイト(https://www.finalemusic.jp/)
市販されている楽譜にも使われるソフトなのでやりたいことがすべてできます。
もしお使いのOSがWindowsならライト版のPrintMusicでも楽譜作りが可能です。
https://www.finalemusic.jp/products/printmusic/
購入は最安値のサウンドハウスがおすすめです。
楽譜フォント
Finaleには3つのフォントが付いています。
出版譜風
手書き風
ジャズ風
jazzguitarstyle.comではジャズ風を採用しています。
コードダイアグラム
Finaleに付いているのは海外仕様の縦型ダイアグラムのみ。

そのためjazzguitarstyle.comではタブ譜を活用して独自にダイアグラムを作っています。
ダイアグラム作成手順
- 空のタブ譜のみの楽譜を作る
- 音部記号を非表示にして小節数を増やす。ナットは複縦線に
- 文字発想記号で度数を作る
- 作った度数を小節線の上に置く
五線譜の上にダイアグラムを記譜する楽譜は、五線譜とダイアグラムを別々に作り画像編集ソフトで仕上げています。
サイトに楽譜を載せるまでの手順
Finaleで作った楽譜をそのファイルのままサイトに載せる方法はないので、jazzguitarstyle.comでは以下6つの手順を踏んでいます。
- Finaleで楽譜を作る
- パソコンの画面をキャプチャして画像として保存
- 無料画像編集ソフトGIMP(https://www.gimp.org)を使ってサイズ調整
- tinypng(https://tinypng.com)で画像の容量を減らす
- FTPでサーバーにアップロード
- 画像のURLをリンクして公開
Finaleで作った楽譜をキャプチャする
サイトに載せたい楽譜を開いてキャプチャします。WinならPrintScreenボタンで全画面キャプチャ。Macならcommand+shift+4で範囲を選択できます。
このままだと余白が多く、右側に灰色の鍵マークが入っているので、GIMPを使って編集します。
GIMPを使った画像編集
まずはキャプチャした画像をドラッグドロップします。
灰色の鍵マークを消すために、ツールボックスから「鉛筆で描画」を選び
色の選択をクリックし、
白を選びます。
「鉛筆で描画」、カラーが「白」になっていることを確認して灰色の鍵マークをゴシゴシ消していきます。
灰色の鍵マークを消したらツールボックスから「切り抜き」を選んで余白を無くします。
範囲を選択してenterキーを押すと切り抜かれます。
最後に「名前をつけてエクスポート」を選びpngとして保存します。
Winなら標準ソフト「ペイント」を使って同じことができます。
tinypngで容量を減らす
キャプチャした画像は容量が大きいので、楽譜の表示速度を速めるためにも容量を減らします。
tinypngにアクセスして減らした画像をドラッグドロップ。70〜80パーセント容量を減らしてくれるすぐれものです。
FTPでアップロード
私はFileZila(https://filezilla-project.org)というソフトを使ってアップロードしていますが、どんなFTPソフトでも構いません。アップロード後、アップロードした画像のアドレスをHTMLで打ち込みます。
HTMLサンプル
<img src="https://www.jazzguitarstyle.com/column/qanda/screen-shot-9.png">
ブラウザでの表示
これでサイトに楽譜を公開できます。ぜひ楽しんでみてください。