ギター指板ビジュアライザー

概要

ギターの指板に、選んだコードの構成音を色分けで表示するツールです。ルートが赤、3度系が青、5度系が緑、7度系が黄色、と機能ごとに色を変えています。指板を眺めているうちに、コードの「形」と「役割」が同時に頭に入ってくる、という体験を狙いました。

用途

スケール練習やコードフォームの理解を補助するためのツールです。

使用技術

• — PHP / バニラJavaScript
• — CSS Grid（指板レイアウト）

工夫点

技術面

指板を描くロジックを再利用できる形に切り出しているので、別のツール（ダイアトニックコード一覧）からも同じ部品を呼び出せます。指板のセルは6弦×18フレットで100個以上ありますが、コード変更時に再描画ではなくクラスの付け替えだけで済むようにしているので、動きが軽いです。

使いやすさ

実際のギターと同じ位置にポジションマーク（3、5、7、9、12、15、17フレットのドット）を配置して、画面と楽器の対応が直感的に分かるようにしました。