YakuHanJPと日本語Webタイポグラフィ：約物半角化という地味だが強烈なこだわり

絶滅危惧野菜プロジェクトのHTMLを調べていて気付いたのが、このCDN読み込みです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css">

YakuHanJP は日本語の約物（やくもの）だけを半角幅にするWebフォントです。約物とは、括弧 （）「」 や句読点 、。 など、テキストの構造を示す記号のことです。

問題：全角約物のスカスカ感

日本語のデフォルトフォントでは、約物も漢字やかなと同じ全角幅を持ちます。

全角約物:  「絶滅危惧」の野菜（きゅうり）を守る。
           ↑        ↑   ↑         ↑
           ここに空白が生まれる

括弧の前後に全角分のスペースが入るため、組版としては「ゆるい」印象になります。書籍やポスターの日本語組版では、約物を半角に詰めるのが基本的な処理ですが、Webではフォントの全角幅がそのまま表示されるため、この処理が抜け落ちます。

解決：YakuHanJPの仕組み

YakuHanJPは約物の文字だけを半角幅にしたフォントです。全文字のWebフォントではなく、対象文字は次の約物に限定されています。

、。！？〈〉《》「」『』【】〔〕〖〗
〘〙〚〛（）［］｛｝｟｠

これらの文字だけをカスタムフォントで上書きし、残りの文字は font-family のフォールバックで端末のデフォルトフォントが使われます。

/* YakuHanJPの適用例 */
body {
  font-family: YakuHanJP, "Hiragino Sans", "Noto Sans JP", sans-serif;
}

YakuHanJP が約物だけ受け持ち、それ以外は後続のフォントに落ちる。これが 20KB未満 で実現できるのがポイントです。

見た目の差

同じテキストで比較すると差は明確です。

デフォルト:  気候変動の影響で「伝統野菜」が（静かに）消えている。
YakuHanJP:  気候変動の影響で「伝統野菜」が（静かに）消えている。

文字として書くとフォント差は表現しづらいですが、実際のレンダリングでは括弧周辺の不自然な空白が消え、テキストが引き締まって見えます。特に見出しやキャッチコピーでの効果が大きく、10文字程度の短文で「プロが組んだか素人が組んだか」の印象差が生まれます。

なぜ全文字のWebフォントではダメなのか

「Noto Sans JP を丸ごと読み込めばいいのでは？」と思うかもしれませんが、日本語フォントの全文字セットは数MB〜十数MBあります。

Noto Sans JP (Regular):  約1.8MB（サブセット化前）
YakuHanJP:               約15KB

100倍以上の差です。フォントの読み込みはレンダリングブロッキングになるため、全文字Webフォントはパフォーマンスに直撃します。Google Fontsのサブセット化（&display=swap + Unicode Range）で軽減できますが、それでも数百KB単位。

YakuHanJPは「約物だけ直す」という割り切りで、パフォーマンスへの影響をほぼゼロにしつつ品質を上げています。

使い方

導入は1行です。CDNから読み込むか、npmでインストールします。

<!-- CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/yakuhanjp@3.4.1/dist/css/yakuhanjp.min.css">

# npm
npm install yakuhanjp

/* CSSで適用 */
@import "yakuhanjp/dist/css/yakuhanjp.min.css";

body {
  font-family: YakuHanJP, "Hiragino Sans", sans-serif;
}

バリエーションとして YakuHanJPs（ゴシック体向け）、YakuHanMP（明朝体向け）が用意されています。

このサイトでのこだわり

絶滅危惧野菜サイトがYakuHanJPを入れているのは、**「テキストの品質にも手を抜いていない」**というシグナルです。

Three.jsの3Dレンダリングやスクロール演出に目が行きがちですが、そもそもの日本語テキストの組版が整っていなければ、全体の品格が落ちます。このサイトは：

• 3D表現 → Three.js + WebGL
• スクロール演出 → GSAP + ScrollTrigger
• テキスト品質 → YakuHanJP
• 画像品質 → プロカメラマン + WebP

映像・演出・文字・画像の全レイヤーに手が入っている。どれか1つでも抜けると没入感が崩れますが、全部揃えてきている。制作チームのこだわりが最も端的に見えるのは、実はこのYakuHanJPの1行かもしれません。

---

参考:

• YakuHanJP 公式
• npm: yakuhanjp