コード譜メーカー – インタラクティブコード譜 | 生成+編集ツール

TOOL
この記事は約4分で読めます。

“コード譜メーカー” とは

“コード譜メーカー” は、ChordPro記法でテキストを入力すると、歌詞付きコード譜をプレビュー可能で、ワンクリックでHTMLファイルに書き出しできます 。ライト/ダーク切替対応、多段組、メタ(title/subtitle/key)の自動見出し化もOK。

主な特徴

  • ChordProテキスト → 即プレビュー[Cm7] など角括弧のコードと歌詞を解析して整形表示
  • ワンクリック書き出し:単一HTMLで保存。演奏者はそのHTMLファイルを開くだけ
  • ライト/ダーク切替作る前も作った後も自由自在。現場の明るさに合わせて切り替え
  • 多段組対応{colbreak} で視線移動を短く、横置きタブレットにも最適化可能
  • メタ情報の自動見出し化{title:} / {subtitle:} / {key:} はHTML生成時にヘッダースペースに展開(本文には重複表示しません)
  • スマホ最適化:大きめ文字、横幅が収まらなくても勝手に改行されず読みやすい

使用イメージ

■ダークテーマ

■ライトテーマ

使い方(Quick Start)

  1. 上下の「コード譜メーカーを開く」からツールを開く
  2. 左のChordPro入力に歌詞+コードを貼る。段組は{colbreak}、メタは{title:} {subtitle:} {key:}で入力
  3. 「プレビュー更新」で見た目を確認
  4. 「HTMLとしてダウンロード」で単一HTMLを出力
  5. 編集ページは右上、生成HTMLでは右下の「🌙/☀」でライト/ダーク切替
  6. テキストエリアにはデフォルトで “使い方を歌った” 見本のコード譜を同梱。読み終えたらあなたの曲で上書いてください。

コード譜メーカーにアクセス

補足

  • ファイル名:空ならtitleを採用します。拡張子(.html) は自動付与されます
  • テーマ記憶:ツール本体/出力HTMLともに選択テーマ(ライト/ダーク)をブラウザに保存

よくある質問

Q. ブラウザだけで使えますか?
はい。ページを開いて左にChordProを貼る→プレビュー→HTMLを書き出すだけ。アップロードは行わず、処理は端末のブラウザ内だけで完結します。

Q. 対応ブラウザは?
Chrome / Edge / Firefox / Safari を推奨します。最新版の利用が安心です。

Q. どんな記法に対応?(ChordPro)

  • 角括弧コード:[C#dim] [Fbm7] など
  • メタ:{title:} → H1、{subtitle:} → H2、{key:} → H3(本文には出しません)
  • その他のディレクティブはそのまま注記として表示

Q. 段組の作り方
{colbreak} を入れるたびに段が増えます。(例)2回入れると3段構えになります。

Q. ライト/ダーク切替
ツールの上部で切替、書き出したHTMLの下部で切替が可能。つまり、作る前も作った後も自由に切り替え可能です。選択結果はブラウザに保存されます。

Q. ファイル名の扱い
入力が空のときは {title} で指定した曲名を採用します。拡張子(.html) は自動付与します。

Q. 既存のChordPro記法を取り込みする場合は
テキストをそのまま貼り付ければOKです。また、生成済みHTMLの逆変換機能は実装していせん。

Q. 印刷について
ブラウザの印刷機能でOK。A4横やA4縦で見やすいサイズに調整可能です。

Q. 利用に必要な技術的スキルはありますか?
特別なスキルは不要です。基本的なHTMLの知識があれば、配色・構成のカスタマイズも可能です。

Q. 移調/カポについて
現ツールでは自動的に移調対応やカポ対応の変換を行うことはできません。手動対応でお願いします。

Q. セキュリティはどのように担保されていますか?
データはブラウザ内で処理され、外部サーバーに送信されません。ただし、各自の端末にHTMLファイルを保存することになりますので、公共端末でのご利用や、ブラウザ拡張・企業ポリシーによるダウンロード制限などにはご注意ください。

Q. 更新や改善は定期的に行われますか?
はい、作者の気まぐれや気づきにより、不定期的に機能の更新や改善が行われる場合があります。

Q. 料金は発生しますか?
無料でご利用いただけます。フッタの「Powered by」表記は残していただけると幸いです。

タイトルとURLをコピーしました