Guitar Chord Diagram Builder

初めに

ギターのコードダイアグラム（押弦図）をブラウザ上で直感的に作成し、PNG 画像としてまとめて書き出すためのツールです。レッスン資料、曲の譜面、練習ノート、Web 記事など、コードの押さえ方を視覚的に示したいあらゆる場面で利用できます。

作成途中の状態は JSON ファイルとして保存・再読み込みでき、完成したダイアグラムは個別またはまとめて PNG としてエクスポートできます。

本ツールは Standard チューニング (E-A-D-G-B-E) のみに対応しています。変則チューニングには対応していません。

開発経緯

ギター練習ノートや譜面にコードダイアグラムを載せたいと思ったとき、既存のツールでは「マウスで自由に押弦位置を置く」「自動生成されたボイシングから好みのものを選ぶ」「複数のダイアグラムを一枚の画像にまとめる」といった用途を一度に満たすものが見当たりませんでした。

そこで、ブラウザだけで動き、クリック操作だけで編集でき、かつ自動生成されたコードフォームから手動で微調整できる、シンプルで軽量なツールとして本ツールを開発しました。

概要

主な特長

ブラウザだけで動作 — インストール不要
クリックで押弦編集 — フレット上をクリックするだけでドットの配置・削除が可能
自動コード生成 — ルート音 (Key) とコードタイプ (Type) を選んで Auto ボタンを押すと、理論的に導出された複数の押弦パターン候補が自動で入力されます。左右の矢印ボタンでオープンポジション・バレーコード・ハイポジションなど別の押さえ方に切り替えられ、好みのフォームを選択できます。生成結果はそのまま手動で微調整することも可能です
手動コード辞書 — 代表的なコードについては手動で登録されたフォームを優先表示
バレー (セーハ) 対応 — 同じフレット上の複数弦を1本の指で押さえるバーを描画
指番号表示 — 各ドットに 1～4 の指番号を任意で表示
開放弦 / ミュート切替 — ナット左の ○ / × で各弦の状態を切替
PNG エクスポート — 個別保存および全ダイアグラム一括保存に対応
作業状態の保存 / 読込 — JSON ファイルとして保存し、後で続きから再開可能
既定フォルダ設定 — File System Access API 対応ブラウザでは、保存先フォルダを固定してワンクリック保存が可能
曲のキー連動 — Song Key 設定に応じてシャープ系 / フラット系の表記を自動切替
日本語 / 英語 UI — ヘッダーの JP / EN ボタンで即時切替

動作環境

HTML5 / ES6 / SVG / Canvas をサポートする最新のデスクトップブラウザ (Google Chrome、Microsoft Edge、Firefox などを推奨)
既定フォルダ機能を使用する場合は File System Access API 対応ブラウザ (Chrome / Edge 等) が必要です

使い方

ツールバー

画面下部のツールバーから、以下の操作を行います。

+ Add Diagram / + ダイアグラム追加: 新しいコードダイアグラムを追加します。
Save / 保存: 現在の全ダイアグラムの状態を JSON ファイルとして保存します。一度保存した後は上書き保存として動作します。
Save As / 名前を付けて保存: ファイル名を指定して新規に JSON ファイルを保存します。
Load / 読込: 以前保存した JSON ファイルを読み込み、作業状態を復元します。
Export All as PNG / 全て画像保存: 現在配置されている全てのダイアグラムを、それぞれ個別の PNG 画像として書き出します。
Default Folder / 既定フォルダ: PNG や JSON の既定の保存先フォルダを設定します。設定後はフォルダ選択ダイアログなしで保存できます (File System Access API 対応ブラウザのみ)。

ヘッダー

Song Key / 曲のキー: 曲のキーを選択すると、各ダイアグラムの Key ドロップダウンがそのキーに応じたシャープ系 / フラット系の12キーに絞り込まれます。「All / 全て」を選ぶと、シャープ系・フラット系の異名同音を含む17キー全てを表示します。
JP / EN ボタン: UI の言語を日本語 / 英語で切り替えます。

ダイアグラムの編集

追加された各ダイアグラムは独立して編集できます。ダイアグラム上の操作は次のとおりです。

フレット上をクリック — 指の位置 (ドット) を配置します。同じ位置をもう一度クリックすると削除します。
ナット左の ○ / × 領域をクリック — その弦を開放弦 (○) / ミュート (×) / 未指定の状態で切り替えます。
Barre / バレー — バレーボタンを押してバレーモードに入り、同一フレット上の1本目の弦をクリックすると開始弦が仮選択されます (赤い破線丸)。続いて同じフレット上の別の弦をクリックすると、その2弦間を覆うバーが生成されます。既にバーがあるフレットでさらに別の弦をクリックすると、その弦を含むようにバーが拡張されます (例: 1弦 → 3弦の2クリック、あるいは 1弦 → 2弦 → 3弦の3クリックで、どちらも 1〜3弦のバーになります)。既存のバーの端点となっている弦を再度クリックするとバーは削除されます。
Start Fret / 開始フレット — ダイアグラム左端に表示する開始フレット番号を変更します (常に4フレット分表示)。
Finger / 指番号 — 指番号ボタンを押して指番号モードに入り、既存のドットをクリックすると、そのドット上に表示される指番号が 0 (非表示) → 1 → 2 → 3 → 4 → 0 の順にトグル表示されます。バレーについても同様に、バレーの任意の位置をクリックすることでバレー全体に対する指番号をトグル表示できます。
Custom name / カスタム名 — ダイアグラム上部に表示するコード名を任意の文字列に上書きします。
Clear / クリア — そのダイアグラムのドット・バレー・開放/ミュート指定を全て消去します。
Save PNG / 画像保存 — そのダイアグラム単体を PNG 画像として保存します。
Duplicate / 複製 — 同じ内容のダイアグラムを複製して追加します。
Delete (× ボタン) — ダイアグラム右上の × ボタンで、そのダイアグラムを削除します。

自動コード生成 (Auto)

各ダイアグラムの Key と Type ドロップダウンでコードを選び、Auto / 自動 ボタンを押すと、自動的にコードフォームが入力されます。代表的なコードについては手動で登録されたフォームが優先されます。

Auto ロード直後は「Auto 追跡モード」に入り、この状態で Key や Type を変更すると自動的に新しいコードが再ロードされます。手動でフレット上のドットを編集したり、ナット左の ○ / × を切り替えたり、Clear を押したりすると追跡モードは解除され、以後 Key / Type の変更では自動再ロードされません。これにより、自動入力したコードを少し手直しした状態が意図せず上書きされるのを防いでいます。

また、同じコードに複数のポジションが存在する場合は、左右の矢印ボタンで別のポジションへ切り替えることができます。

データの保存

JSON 保存 / 読込

Save / Save As で現在の全ダイアグラム (コード名、押弦位置、バレー、指番号、開始フレット、カスタム名など) をまとめて JSON ファイルに書き出せます。Load で同じファイルを読み込めば、作業状態を復元して続きから編集できます。

既定フォルダ

File System Access API 対応ブラウザでは、Default Folder / 既定フォルダ ボタンで既定の保存先フォルダを指定できます。一度設定すると、それ以降の保存時にフォルダ選択ダイアログを省略でき、ツールバーの Save ボタンだけで即座に上書き保存できます。