Guitar Chord Diagram Builder

初めに

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

作成途中の状態は JSON ファイルとして保存・再読み込みでき、完成したダイアグラムは個別 PNG、1 枚にまとめた PNG、段数区切りの複数 PNG (ZIP)、または複数ページ PDF としてエクスポートできます。

自動コード生成 (Auto) と手動コード辞書は Standard チューニング (E-A-D-G-B-E) 前提です。一方、クリックによる手動編集 (ドット配置、バレー、ミュート/開放、指番号など) は単なる 6 弦グリッドへの書き込みなのでチューニングに依存しません。Auto を使わない運用であれば、Drop D・DADGAD・Open G など任意のチューニングのコードフォームを自由に作図できます。コード名も Custom name フィールドで上書きできるため、表示ラベルも自由に指定可能です。

開発経緯

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

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

概要

主な特長

ブラウザだけで動作 — インストール不要
クリックで押弦編集 — フレット上をクリックするだけでドットの配置・削除が可能
自動コード生成 — ルート音 (Key) とコードタイプ (Type) を選んで Auto ボタンを押すと、理論的に導出された複数の押弦パターン候補が自動で入力されます。左右の矢印ボタンでオープンポジション・バレーコード・ハイポジションなど別の押さえ方に切り替えられ、好みのフォームを選択できます。生成結果はそのまま手動で微調整することも可能です
手動コード辞書 — 代表的なコードについては手動で登録されたフォームを優先表示
バレー (セーハ) 対応 — 同じフレット上の複数弦を1本の指で押さえるバーを描画
指番号表示 — 各ドットに 1～4 の指番号を任意で表示
開放弦 / ミュート切替 — ナット左の ○ / × で各弦の状態を切替
自由モード — 通常は「1弦につきドット1つ」のルールですが、説明用の指板図を作るときなど、同じ弦上に複数のドットを置きたい特別な用途向けにオン/オフできる専用モードを搭載
テキストセル — コードダイアグラムの並びの中にテキスト (例: ⇔ や →) だけのセルを挿入可能。PNG 出力時は自動的に幅が詰まり、コード図の間に注釈として自然に収まります。複製もサポート
形ごとシフト — 通常のフレット番号 +/− はビューを動かすだけですが、専用の ⇐ ⇒ ボタンで押弦位置・バレーを含むコードの形ごと1フレット上下に移動できます (転調や派生フォーム作成に便利)
赤ドット — 特定のドットだけを赤色で強調表示可能 (ルート音やテンション音の強調など)。専用モードで既存ドットをクリックして色をトグル
PNG / PDF エクスポート — ダイアグラム単体の保存、個別 PNG の ZIP 一括保存、列数指定で 1 枚の画像にまとめて保存、さらに「列数 × 1ページあたり段数」で区切った複数 PNG (ZIP) または複数ページ PDF として書き出しに対応
作業状態の保存 / 読込 — 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 / + ダイアグラム追加

新しいコードダイアグラムを追加します。

+ Add Text / + テキスト追加

コードダイアグラムの並びにテキスト専用のセルを追加します。カード内のテキスト入力欄に任意の文字 (例: ⇔、→、or) を入力でき、フォントサイズも数値で調整できます。追加されたテキストセルはコードダイアグラムと同じようにドラッグで並び替え・複製・削除ができ、状態は JSON にも保存されます。

Save / 保存

現在の全ダイアグラムの状態を JSON ファイルとして保存します。一度保存した後は上書き保存として動作します。

Save As / 名前を付けて保存

ファイル名を指定して新規に JSON ファイルを保存します。

Load / 読込

以前保存した JSON ファイルを読み込み、作業状態を復元します。

Export ▼ / 出力 ▼

クリックするとメニューが開き、出力方法を選べます。

個別保存 (ZIP) — 全ダイアグラムをそれぞれ個別の PNG 画像として書き出し、1 つの ZIP ファイルにまとめてダウンロードします。テキストセルはこの出力では対象外となります。
1枚にまとめて保存 — 列数をドロップダウンで指定するダイアログが表示され、そのグリッドに全ダイアグラム (およびテキストセル) を配置した 1 枚の PNG 画像として書き出します。テキストセル列は自動的に幅が詰まるため、[C] [⇔] [Am] のような横並びレイアウトが自然に作れます。ドロップダウンはマウスホイールでも値を変更できます。
段ごとに分割保存 — 「列数」と「1ページあたり段数」をドロップダウン (ホイール対応) で指定し、さらに出力形式を PNG (ZIP) か PDF (複数ページ) から選べます。PNG を選ぶと段数ごとに区切られた複数 PNG が ZIP で、PDF を選ぶと同じ区切りで1つの複数ページ PDF として書き出されます。全ページ共通のページサイズで、印刷や配布用の楽譜・資料作成に便利です。

Default Folder / 既定フォルダ

PNG や JSON の既定の保存先フォルダを設定します。設定後はフォルダ選択ダイアログなしで保存できます (File System Access API 対応ブラウザのみ)。

ヘッダー

JP / EN ボタン: UI の言語を日本語 / 英語で切り替えます。

曲のキー

ヘッダー下の Song Key / 曲のキー ドロップダウンで曲のキーを選択すると、各ダイアグラムの Key ドロップダウンがそのキーに応じたシャープ系 / フラット系の12キーに絞り込まれます。「All / 全て」を選ぶと、シャープ系・フラット系の異名同音を含む17キー全てを表示します。

ダイアグラムの編集

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

フレット上をクリック — 指の位置 (ドット) を配置します。同じ位置をもう一度クリックすると削除します。
ナット左の ○ / × 領域をクリック — その弦を開放弦 (○) / ミュート (×) / 未指定の状態で切り替えます。
Barre / バレー — バレーボタンを押してバレーモードに入り、同一フレット上の1本目の弦をクリックすると開始弦が仮選択されます (赤い破線丸)。続いて同じフレット上の別の弦をクリックすると、その2弦間を覆うバーが生成されます。既にバーがあるフレットでさらに別の弦をクリックすると、その弦を含むようにバーが拡張されます (例: 1弦 → 3弦の2クリック、あるいは 1弦 → 2弦 → 3弦の3クリックで、どちらも 1〜3弦のバーになります)。既存のバーの端点となっている弦を再度クリックするとバーは削除されます。
Start Fret / 開始フレット — ダイアグラム左端に表示する開始フレット番号を変更します (常に4フレット分表示)。フレット番号の − / + はビュー (表示窓) のみを動かすため、ドットは絶対フレット位置に留まります。
形ごとシフト (⇐ ⇒ ボタン) — 開始フレットの隣にある専用ステッパー。クリックするとドット・バレーの絶対フレットも一緒にシフトされ、ダイアグラムの「形」全体が1フレット上下に動きます。転調や派生フォームを作るときに便利です。上下の端 (1 フレット以下 / 24 フレット超) に到達する方向へのシフトは無効化されます。
Finger / 指番号 — 指番号ボタンを押して指番号モードに入り、既存のドットをクリックすると、そのドット上に表示される指番号が 0 (非表示) → 1 → 2 → 3 → 4 → 0 の順にトグル表示されます。バレーについても同様に、バレーの任意の位置をクリックすることでバレー全体に対する指番号をトグル表示できます。
自由モード (●● ボタン) — 通常は 1 本の弦上にドットを 1 つしか置けませんが、このボタンを押して自由モードに入ると、同じ弦上に複数のドットを置けるようになります。説明用の指板図で「このスケールでは 5 弦のここと、あそこを押さえます」のような図を作るときに便利です。バレー・指番号・赤モードとは相互排他で、いずれかを ON にすると他のモードボタンは自動的に OFF になります。ボタンにはマウスオーバーで説明のツールチップが表示されます。
赤モード (Red / 赤ボタン) — このボタンを押して赤モードに入ると、既存のドットをクリックするたびに黒 ⇔ 赤が切り替わります。ルート音・テンション音など特定の押弦位置を視覚的に強調したいときに使います。空セルをクリックしても何も起きないので、先に通常モードでドットを置いてから色を変える流れになります。他の編集モードとは相互排他です。
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 ボタンだけで即座に上書き保存できます。