【Gラボ流】音楽理論を美しく、正確に伝えるためのフォント設計

目標
CSS（コードネーム表記のコア設計）
記号のみを上付き文字にする場合（本文中のシンプルな表記向け – パターンA）
spanで全体を囲む場合（複雑な和音表記向け – パターンB）
サイトの表示を支える技術的な設計

目標

Gラボでは、音楽記事の正確性と可読性の効率を求め、フォントと表記法を研究しています。特に、複雑なコードネームや変化記号を、紙の楽譜のような自然なバランスで、どの環境でも美しく表示することを目指しました。

CSS（コードネーム表記のコア設計）

コード

/* ========================================================= */
/* 1. 基本フォント設定（Notoファミリーで統一）              */
/* ========================================================= */

/* 本文（pタグ）: Noto Serif JP（明朝体）で落ち着いた印象に */
body, .entry-content p, .article-content p {
    font-family: 'Noto Serif JP', serif !important;
}

/* 見出し（h1〜h6）: Noto Sans JP（ゴシック体）でメリハリをつける */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Noto Sans JP', sans-serif !important;
}

/* 音楽記号のフォント指定（.noto-music-symbolクラスでNoto Musicを適用） */
.noto-music-symbol {
    font-family: 'Noto Music', sans-serif !important;
}

/* ========================================================= */
/* 2. 和音記号（コードネーム）のサイズと位置調整              */
/* ========================================================= */

/* ▼ パターンA: 記号のみを上付き文字にする場合（本文中のシンプルな表記向け） */
/* HTML: C(sup class noto-music-symbol sharp)♯(/sup) */
sup.double-sharp,
sup.sharp,
sup.natural,
sup.flat,
sup.double-flat {
    font-size: 100%; /* 上付き文字のサイズを標準に戻す */
}

/* ▼ パターンB: (span class noto-music-symbol)で全体を囲む場合（複雑な和音表記向け） */
/* HTML: (span class noto-music-symbol)G(sup class sharp)♯(/sup)(span class suffix>maj7(...)(/span)(/span) */

/* ルートの変化記号のサイズ調整 */
span.noto-music-symbol > sup.double-sharp { font-size: 130%; }
span.noto-music-symbol > sup.sharp,
span.noto-music-symbol > sup.flat,
span.noto-music-symbol > sup.double-flat { font-size: 100%; }

/* サフィックス（maj7など）のサイズと縦位置調整 */
span.noto-music-symbol > span.suffix {
    font-size: 70%;
    vertical-align: 0.5em;
}

/* サフィックス内の変化記号（♯5など）のサイズと縦位置調整 */
span.noto-music-symbol > span.suffix > span.suffix-sharp {
    vertical-align: 0.2em;
    font-size: 110%;
}
span.noto-music-symbol > span.suffix > span.suffix-flat {
    vertical-align: -0em;
    font-size: 110%;
}
/* ========================================================= */

記号のみを上付き文字にする場合（本文中のシンプルな表記向け – パターンA）

音名の例

音名で使用する変化記号は、アルファベットによる表現（C sharp）も可能ですが、上付き文字のスタイルを使用することで可読性が保たれます。

コード

G<sup class="noto-music-symbol double-sharp">𝄪</sup>（これはG𝄪です）｜<br>
G<sup class="noto-music-symbol sharp">♯</sup>（これはG♯です）｜<br>
G<sup class="noto-music-symbol natural">♮</sup>（これはG♮です）｜<br>
G<sup class="noto-music-symbol flat">♭</sup>（これはG♭です）｜<br>
G<sup class="noto-music-symbol double-flat">𝄫</sup>（これはG𝄫です）｜

実行結果

G^𝄪（これはG𝄪です）｜
G^♯（これはG♯です）｜
G^♮（これはG♮です）｜
G^♭（これはG♭です）｜
G^𝄫（これはG𝄫です）｜

Noto Musicフォントを使用することで、変化記号（sharp, flat, naturalなど）のサイズをきれいにそろえることができます。また、通常のsupタグのスタイルをCSSで上書きし、記号と本文の文字サイズのバランスを考慮し、自然な可読性を保っています。

単語の例

コード

F<sup class="noto-music-symbol double-sharp">♯</sup> major key｜
C<sup class="noto-music-symbol double-sharp">♯</sup> major scale｜

実行結果

F^♯ major key｜ C^♯ major scale｜

本文中の調性や音名（F^♯minor keyなど）が連続する場合でも、変化記号（♯）が本文（major key）とバランスがとれており、文章の流れを妨げずに自然に溶け込んでいます。

コードネームの例

コード

F<sup class="noto-music-symbol sharp">♯</sup>maj7<span class="noto-music-symbol"><span class="suffix">(<span class="suffix-sharp">♯</span>5)</span></span>｜
F<sup class="noto-music-symbol sharp">♯</sup>maj7｜
F<sup class="noto-music-symbol sharp">♯</sup>7｜
F<sup class="noto-music-symbol sharp">♯</sup>m7｜
F<sup class="noto-music-symbol sharp">♯</sup>m7<span class="noto-music-symbol"><span class="suffix">(<span class="suffix-flat">♭</span>5)</span></span>｜
F<sup class="noto-music-symbol double-sharp">♯</sup>dim7｜

実行結果

F^♯maj7(♯5)｜ F^♯maj7｜ F^♯7｜ F^♯m7｜ F^♯m7(♭5)｜ F^♯dim7｜

パターンAの表記は、ルート音の変化記号のみを調整するシンプルな用途に限定されます。サフィックス内部に複雑な変化記号（例：♯5, ♭5）を含む場合は、次のパターンBを使用し、縦位置の調整を適切に行う必要があります。

spanで全体を囲む場合（複雑な和音表記向け – パターンB）

音名の例

幹音と変化記号に一体感が欲しい場合などに使用します。

コード

<span class="noto-music-symbol">G<sup class="double-sharp">𝄪</sup></span>（これはG𝄪です）｜<br>
<span class="noto-music-symbol">G<sup class="sharp">♯</sup></span>（これはG♯です）｜<br>
<span class="noto-music-symbol">G<sup class="natural">♮</sup></span>（これはG♮です）｜<br>
<span class="noto-music-symbol">G<sup class="flat">♭</sup></span>（これはG♭です）｜<br>
<span class="noto-music-symbol">G<sup class="double-flat">𝄫</sup></span>（これはG𝄫です）｜

実行結果

G^𝄪（これはG𝄪です）｜
G^♯（これはG♯です）｜
G^♮（これはG♮です）｜
G^♭（これはG♭です）｜
G^𝄫（これはG𝄫です）｜

spanで全体を囲むパターンBでは、ルートの変化記号に個別のサイズ調整（ダブルシャープは130%に拡大など）が適用されます。これにより、最も複雑な記号でも視認性が確保され、一目で記号を認識できます。

単語の例

単語をひとまとまりとして認識させたい時に使用します。

コード

<span class="noto-music-symbol">G<sup class="double-sharp">𝄪</sup> note</span>｜<br>
<span class="noto-music-symbol">G<sup class="sharp">♯</sup> minor key</span>｜<br>
<span class="noto-music-symbol">G<sup class="natural">♮</sup> major key</span>｜<br>
<span class="noto-music-symbol">G<sup class="flat">♭</sup> major triad</span>｜<br>
<span class="noto-music-symbol">G<sup class="double-flat">𝄫</sup> note</span>｜

実行結果

G^𝄪 note｜
G^♯ minor key｜
G^♮ major key｜
G^♭ major triad｜
G^𝄫 note｜

このパターンは、コードネームのように記号全体を音楽の塊として表現したい場合に使用します。全体にNoto Musicフォントが適用されることで、コード表記の統一感が生まれます。

コードネームの例（このCSS設計の最大の特長）

コード


<span class="noto-music-symbol">G<sup class="sharp">♯</sup><span class="suffix"> maj7(<span class="suffix-sharp">♯</span>5)</span></span>｜<br>
<span class="noto-music-symbol">G<sup class="sharp">♯</sup><span class="suffix"> maj7</span></span>｜<br>
<span class="noto-music-symbol">G<sup class="sharp">♯</sup><span class="suffix"> 7</span></span>｜<br>
<span class="noto-music-symbol">G<sup class="flat">♭</sup><span class="suffix"> m7</span></span>｜<br>
<span class="noto-music-symbol">G<sup class="flat">♭</sup><span class="suffix"> m7(<span class="suffix-flat">♭</span>5)</span></span>｜
<span class="noto-music-symbol">G<sup class="flat">♭</sup><span class="suffix"> dim7</span></span>｜<br>
<br>
<span class="noto-music-symbol">G<sup class="sharp">♯</sup><span class="suffix">△7(+5)</span></span>｜<br>
<span class="noto-music-symbol">G<sup class="sharp">♯</sup><span class="suffix">△7</span></span>｜<br>
<span class="noto-music-symbol">G<sup class="sharp">♯</sup><span class="suffix">7</span></span>｜<br>
<span class="noto-music-symbol">G<sup class="flat">♭</sup><span class="suffix">-7</span></span>｜<br>
<span class="noto-music-symbol">G<sup class="flat">♭</sup><span class="suffix">-7(-5)</span></span>｜<br>
<span class="noto-music-symbol">G<sup class="flat">♭</sup><span class="suffix">ø7</span></span>｜<br>
<span class="noto-music-symbol">G<sup class="flat">♭</sup><span class="suffix">o7</span></span>｜<br>

実行結果

G^♯ maj7(♯5)｜
G^♯ maj7｜
G^♯ 7｜
G^♭ m7｜
G^♭ m7(♭5)｜ G^♭ dim7｜

G^♯△7(+5)｜
G^♯△7｜
G^♯7｜
G^♭-7｜
G^♭-7(-5)｜
G^♭ø7｜
G^♭o7｜

このCSS設計の最大の特長です。サフィックス（maj7,m7♭5など）をルート音に対して小さく（70%）、かつ上に揃える（vertical-align: 0.5em）ことで、コードネーム全体のバランスを整えています。さらに、サフィックス内の(♯5)や(♭9)$の変化記号の位置もミリ単位で調整しています。

サイトの表示を支える技術的な設計

最後に、この美しい表記を実現しているCSSの主要なポイントをまとめます。

基本フォントの「Notoファミリー」統一: Googleが開発した高品質なフォントファミリーで本文（Serif JP）と見出し（Sans JP）を使い分けることで、ウェブフォントでありながらも印刷物のようなプロフェッショナルな読み心地を提供します。
Noto Musicの活用: Unicodeの特殊な音楽記号（𝄪, 𝄫）を、システム環境に依存せず正確に表示するために、Noto Music専用のクラスを適用しています。
CSSによる緻密な縦位置調整: コードネームのサフィックスや変化記号は、font-sizeとvertical-alignプロパティを組み合わせて調整することで、どの文字もベースラインから浮くことなく、最適な位置に表示されるように設計されています。