このサイトで公開している楽譜はどのようなソフトを使っているのでしょうか?
僕も音楽サイトを作ろうと思うのですが、楽譜を作ってサイトに乗せる方法が分かりません。
具体的な手順を知りたいです。
楽譜作成にはFinaleを使っています
2018年まではFinale2003、2019年からFinale25を使って作っています。
市販されている楽譜にも使われるソフトなのでやりたいことがすべてできます。
もしお使いのOSがWindowsならライト版のPrintMusicでも楽譜作りが可能です。
2022年現在、最新版はFinale27です。
楽譜フォント
Finaleには3つのフォントが付いています。
出版譜風

手書き風

ジャズ風

jazzguitarstyle.comではジャズ風を採用しています。
タブ譜に白玉をつける方法
TAB譜に全音符や2分音符を記譜する場合、◯で数字を囲む必要があります。Finaleには自動機能がついていないので、発想記号から自作します。
打ち込んだままの楽譜

メインツールパレットから発想記号を選び、楽譜をダブルクリック。

カテゴリからその他を選び(ここは何を選んでも構いません)

その他の発想記号の作成を選びます。

図形を選び、小節の幅に合わせて伸縮のチェックを外して作成を押します。

円ツールを選んで丸を描いたらOK。

作成した丸を選んで配置を押します。

タブ数字の大きさに合わせて丸を調整します。

丸をダブルクリックすると大きさを変更できます。

タブ譜の丸が完成しました。

ハーモニクスの菱形をつける方法
五線譜のハーモニクスは符頭変更ツールを選んで変更します。

253番の菱形を選択(ジャズフォントの場合)。

五線譜の符頭に反映されます。

タブ譜の菱形は白玉と同様に、その他の発想記号作成で菱形を描きます。作成した菱形を配置してタブ数字の大きさに合わせて調整して完成です。

完成した楽譜

コードダイアグラム
Finaleに付いているのは海外仕様の縦型ダイアグラムのみ。

そのためjazzguitarstyle.comではタブ譜を活用して独自にダイアグラムを作っています。
ダイアグラム作成手順
- 空のタブ譜のみの楽譜を作る

2. 音部記号を非表示にして小節数を増やす。ナットは複縦線に

3. 文字発想記号で度数を作る

4. 作った度数を小節線の上に置く

五線譜の上にダイアグラムを記譜する楽譜は、五線譜とダイアグラムを別々に作り画像編集ソフトで仕上げています。
サイトに楽譜を載せるまでの手順
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ドラッグドロップし、ツールボックスから「切り抜き」を選んで余白を無くします。

最後に「名前をつけてエクスポート」を選びpngとして保存します。
Windowsなら標準ソフト「ペイント」を使って同じことができます。
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”>
ブラウザでの表示

これでサイトに楽譜を公開できます。ぜひ楽しんでみてください。
この記事へのコメント
はじめまして。Jakeと申します。いつも勉強させていただいております。ありがとうございます。
そこで私も触発されて楽譜等を作成してWebにアップしようと思ったのですが、ジョーイさんが説明に使用しているCメジャースケールのような楽譜はどのように作成すればよいのでしょうか?
私はfinale2008を利用しているのですが、本当の楽譜になってしまい、譜例のような小節無視の作成法がわかりません。
もし、簡単に譜例のような小節無視、譜割り無視の楽譜(譜例)画像の作り方があれば教えていただけないでしょうか?
小節の拍子を増やすことで作っています。
スケールの場合は7音なので、全音7個入る設定にします。

このままだと拍子記号に1/7と表示されてしまうので非表示にします。

この状態で音符を打ち込めば全音符を使ったメジャースケールになります。
