綺麗な等幅フォントをウェブサイトで見せたいだけな件
公開 2023/11/03 19:36
最終更新
2025/10/06 22:34
私は
ライブアライブ（リメイク版） 攻略メモ帳
https://livealivem.stars.ne.jp/
というゲーム攻略サイトをやっているんですが、このゲーム、戦闘は7×7のマス目上でキャラが移動するんですね。
下はリメイク版のスクリーンショット。
だから戦闘でキャラの配置や動きを説明する時、文字でマス目を書いて……
こんな感じに説明ができます。
（実を言えば、これはスーファミ版のデータを公開なさっていてRTAなどもやっておられる方がやっている表記をぱくっております。便利だなと思いまして）
……まあ、ファミコン・スーファミくらいまでのゲームならマップだって全部マス目だから、何でもマス目で表現できるけど。
ただ横幅の問題、つまり改行が入るので洞窟マップなどを再現するのは無茶なのですが、ライブアライブの戦闘は7×7なので、どれだけ横幅が狭い端末でも改行されることは普通ないはず。
リメイク版はスクエニさんが利用規約を出しているので、それを守ればスクリーンショットを掲載してもOKなのですが、スーファミ版はそういう訳にもいかず……（スーファミ版のプレイ動画とか、検索するとたくさんありますけど、私が調べた限り、スクウェアさんの古いゲームの規約は見当たらない）。
そもそも3DSのバーチャルコンソール版しか所持してないから、スクショを撮るも何もできないんだけども。画面直撮りしたとしても、それをウェブサイトに掲載して良いかどうかは別の話になりますしね。
それはそれとして、とにかく、戦闘の解説を書く時に■とか□でマス目を表現するというのはお手軽で便利なんです。
画像を作るよりお手軽だし、直しやすいし、容量も食わないし。
ただひとつだけ問題がありまして、当然ながら、マス目を書く時に文字の幅が等幅じゃないと綺麗に表示されません。
今どきのパソコン・スマホ等で、ブラウザでウェブページを表示する時、標準的に使われるフォントというのは等幅フォントではありません。プロポーショナルフォントという文字毎に幅が設定されたフォントが使用されます。
等幅フォントを表示したいのなら、スタイルシートでフォントを指定すればOK。
例えばスタイルシートに以下を入れておいて、
font-familyに「monospace」を指定すると、パソコンまたはスマホ等の中にインストールされている等幅フォントが選ばれて表示されます。
また、「serif」って入れておくと、等幅フォントが一回り小さくなる現象を防げます。
これで、<div class="mono">～</div>の間が等幅フォントにできます。
で、実際にブラウザで表示させると、
えぇ……Windowsで等幅フォント指定するとWindows10でもＭＳゴシックになってしまうんすか……
ＭＳゴシックといったら、それこそスーファミの時代、Windowsパソコンに搭載されたドットフォント。アンチエイリアスのかかったフォントが当たり前の時代にこれか……
Windows以外ではもちろん異なる等幅フォントが表示されますが、何にせよ、プロポーショナルフォントと違和感のないフォントで表示させたい。
そうなるとWebフォントを使うか、それともサーバーに何らかのフォントファイルをアップロードして使うかのどちらかですね。
ただ、個人的には、日本語のフォントファイルって大きめなので、あまり使いたくないなという気持ちがありまして。
今は無料で使えるGoogle Fontなど、いろんなウェブサイトで導入していますが、日本語というのはひらがな・カタカナ・漢字の分、フォントファイルが大きくなりがちです。
実際、
申し訳ないけどタイッツー＆シンプルブログのフォントを変える設定の話 | ほそぼそのブログ
https://simblo.net/u/Vr7KSB/post/20794
で書いた日本語フォントは4MB前後のものばかりです。もっと大きなサイズの日本語フォントファイルもたくさんあります。
ガラケー向けに1ページ5KBに容量を押さえましょうなんて頃にウェブサイトを作り始めた私なんかにしてみたら、4MBとか何言ってるんすかって話ですよ。ｗ
それでも、スマホがパソコン並の機能を持つようになり、動画もスマホで見るのが当たり前の時代になりましたから、4MBの日本語フォントを使ってウェブページの見栄えをより良くできるようになったってのは、ウェブデザインをする側にはありがたい話です。
ただ、通信量を抑えることができるなら、それに越したことはありません。
そこでやったのが、フォントをWOFFに変換することと、サブセット化です。
WOFFというのは「Web Open Font Format」の頭文字で、フォントデータを圧縮する技術です。
フォントのサブセット化は、「フォントファイルの中で使うフォントだけ抜き出す」ことですね。これで容量が減ります。
日本語フォントは、ひらがな・カタカナ・漢字だけではなく、アルファベットに記号など、様々なフォントを含んでいるのですが、この中で漢字については、日常で使われる「JIS第1水準」に分類された2,965字分があればだいたい事足ります（事足りないようなウェブサイトさんもあるかもしれませんが）。
※ちなみに私は「JIS第2水準」にある「囮」という文字及び、斜め方向の矢印（↙とか）も使いたかったのでサブセット化時に足しています。
そこで、フォントから「JIS第1水準」と、ひらがな・カタカナ・記号だけを抜き出すサブセット化、更にそれをWOFFで圧縮してみました。
もちろん、フォントを好き勝手に改造してはいかんので、それぞれのフォントのライセンスを確認しなければなりません。
今回は以下の、
【フリーフォント】源暎モノゴ/モノコード - 御琥祢屋
https://okoneya.jp/font/genei-mono-go.html
「源暎モノゴ」さんを使いましたが、こちらのフォントは「SILオープンフォントライセンス」です。
ライセンスの説明は、
「SILオープンフォントライセンス」って何？という方のためのざっくり解説 – たぬきフォント
https://tanukifont.com/sil/
こちらがとてもわかりやすいので参考にさせていただきました。
今回私がやりたいのは、サブセット化＆WOFF圧縮してWebサイトで使用することになりますが、「SILオープンフォントライセンス」において引っかかるのは、
『SILライセンスでは、改変したファイルに「予約フォント名」を入れることが禁じられている』
この一点だけです。他は自由に改変可能です。
「源暎モノゴ」のReadmeには、
とありますので、改変したファイルの名前に上のフォント名を使わなければ問題ありません。
※何で元のフォント名を使っちゃいけないの？ という話も、上の『「SILオープンフォントライセンス」って何？』の解説でわかりやすく書かれています。
サブセット化＆WOFF圧縮はどうやるのか？ については解説しているウェブサイトさんがたくさんありますが、メモついでに書いておきます。
ありがたいことに、武蔵システムさんがフリーソフトの「サブセットフォントメーカー」「WOFFコンバータ」を公開されています。
サブセットフォントメーカー
https://opentype.jp/subsetfontmk.htm
WOFFコンバータ
https://opentype.jp/woffconv.htm
※フリーソフトの使用は自己責任でお願いします。
「サブセットフォントメーカー」では、収納したい文字を入力する必要がありますが、こちらについても、サブセット化用に文字列を公開してくださっている方がいらっしゃいますので、以下からコピペするなどしてください。
第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな
https://gist.github.com/bungasnail/a7e484d220b6539d9c1d875dc7c5edd6
自身のウェブサイトで、他に使う文字があるなら適宜足してください。
「サブセットフォントメーカー」「WOFFコンバータ」どちらもインストールして、「源暎モノゴ」の「GenEiMonoGothic-Regular.ttf」を変換してみます。
ちなみに「GenEiMonoGothic-Regular.ttf」は4.78 MB (5,014,640 バイト)。
「サブセットフォントメーカー」を起動したら、下のような感じに入力。
「フォントに格納する文字」には上の「第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな」を入力します。
テキストファイルで保存している場合は「参照」から読み込みもできます。
ここまでやったら「作成開始」。
「作成終了後、WOFFコンバータを起動する」にチェックを入れておけば、出来上がると「WOFFコンバータ」が自動で起動します。
「woff2を作成する」ですが、woff2の方が圧縮率が高く、現在は主要なブラウザに対応しているので、こっちも作っておきます。
これで「Subset.woff」「Subset.woff2」というフォントファイルになりました。
「Subset.woff」は490 KB (502,340 バイト)、「Subset.woff2」は387 KB (396,860 バイト)と、劇的に軽量化しています。
これなら画像ファイルとさほど変わりないくらいですね。
これを、スタイルシートで適当に指定して使えばOKです。
woff2未対応ブラウザもあるかもしれないので、woffも指定。
「line-height」諸々は適当に。
これで最初のスクショのように綺麗な等幅フォントでマス目表示が可能になりました。
まあ、ここまでやる必要あったか？ って気がしなくもないんだけど。ｗ
でもフォントのサブセット化とか、これまた勉強になったので良しとしましょう。
ライブアライブ（リメイク版） 攻略メモ帳
https://livealivem.stars.ne.jp/
というゲーム攻略サイトをやっているんですが、このゲーム、戦闘は7×7のマス目上でキャラが移動するんですね。
下はリメイク版のスクリーンショット。
だから戦闘でキャラの配置や動きを説明する時、文字でマス目を書いて……
こんな感じに説明ができます。
（実を言えば、これはスーファミ版のデータを公開なさっていてRTAなどもやっておられる方がやっている表記をぱくっております。便利だなと思いまして）
……まあ、ファミコン・スーファミくらいまでのゲームならマップだって全部マス目だから、何でもマス目で表現できるけど。
ただ横幅の問題、つまり改行が入るので洞窟マップなどを再現するのは無茶なのですが、ライブアライブの戦闘は7×7なので、どれだけ横幅が狭い端末でも改行されることは普通ないはず。
リメイク版はスクエニさんが利用規約を出しているので、それを守ればスクリーンショットを掲載してもOKなのですが、スーファミ版はそういう訳にもいかず……（スーファミ版のプレイ動画とか、検索するとたくさんありますけど、私が調べた限り、スクウェアさんの古いゲームの規約は見当たらない）。
そもそも3DSのバーチャルコンソール版しか所持してないから、スクショを撮るも何もできないんだけども。画面直撮りしたとしても、それをウェブサイトに掲載して良いかどうかは別の話になりますしね。
それはそれとして、とにかく、戦闘の解説を書く時に■とか□でマス目を表現するというのはお手軽で便利なんです。
画像を作るよりお手軽だし、直しやすいし、容量も食わないし。
ただひとつだけ問題がありまして、当然ながら、マス目を書く時に文字の幅が等幅じゃないと綺麗に表示されません。
今どきのパソコン・スマホ等で、ブラウザでウェブページを表示する時、標準的に使われるフォントというのは等幅フォントではありません。プロポーショナルフォントという文字毎に幅が設定されたフォントが使用されます。
等幅フォントを表示したいのなら、スタイルシートでフォントを指定すればOK。
例えばスタイルシートに以下を入れておいて、
.mono{
font-family:monospace, serif;
}font-familyに「monospace」を指定すると、パソコンまたはスマホ等の中にインストールされている等幅フォントが選ばれて表示されます。
また、「serif」って入れておくと、等幅フォントが一回り小さくなる現象を防げます。
<div class="mono">
<span style="background-color:#f0b4b4;">デデ</span>□□□<span style="background-color:#d6d6d6;">岩</span>□<br>
<span style="background-color:#f0b4b4;">デデ</span>□□□□□<br>
<span style="background-color:#f0b4b4;">デデ</span>□□□□□<br>
□□<span style="background-color:#b8e3cb;">ダ</span>□□<span style="background-color:#fce090;">サ</span>□<br>
□□<span style="background-color:#b8e3cb;">ダ</span><span style="background-color:#d6d6d6;">岩</span>□↑□<br>
□□□□□↑<span style="background-color:#95aaf5;">マ</span><br>
□□□□□□□
</div>これで、<div class="mono">～</div>の間が等幅フォントにできます。
で、実際にブラウザで表示させると、
えぇ……Windowsで等幅フォント指定するとWindows10でもＭＳゴシックになってしまうんすか……
ＭＳゴシックといったら、それこそスーファミの時代、Windowsパソコンに搭載されたドットフォント。アンチエイリアスのかかったフォントが当たり前の時代にこれか……
Windows以外ではもちろん異なる等幅フォントが表示されますが、何にせよ、プロポーショナルフォントと違和感のないフォントで表示させたい。
そうなるとWebフォントを使うか、それともサーバーに何らかのフォントファイルをアップロードして使うかのどちらかですね。
ただ、個人的には、日本語のフォントファイルって大きめなので、あまり使いたくないなという気持ちがありまして。
今は無料で使えるGoogle Fontなど、いろんなウェブサイトで導入していますが、日本語というのはひらがな・カタカナ・漢字の分、フォントファイルが大きくなりがちです。
実際、
申し訳ないけどタイッツー＆シンプルブログのフォントを変える設定の話 | ほそぼそのブログ
https://simblo.net/u/Vr7KSB/post/20794
で書いた日本語フォントは4MB前後のものばかりです。もっと大きなサイズの日本語フォントファイルもたくさんあります。
ガラケー向けに1ページ5KBに容量を押さえましょうなんて頃にウェブサイトを作り始めた私なんかにしてみたら、4MBとか何言ってるんすかって話ですよ。ｗ
それでも、スマホがパソコン並の機能を持つようになり、動画もスマホで見るのが当たり前の時代になりましたから、4MBの日本語フォントを使ってウェブページの見栄えをより良くできるようになったってのは、ウェブデザインをする側にはありがたい話です。
ただ、通信量を抑えることができるなら、それに越したことはありません。
そこでやったのが、フォントをWOFFに変換することと、サブセット化です。
WOFFというのは「Web Open Font Format」の頭文字で、フォントデータを圧縮する技術です。
フォントのサブセット化は、「フォントファイルの中で使うフォントだけ抜き出す」ことですね。これで容量が減ります。
日本語フォントは、ひらがな・カタカナ・漢字だけではなく、アルファベットに記号など、様々なフォントを含んでいるのですが、この中で漢字については、日常で使われる「JIS第1水準」に分類された2,965字分があればだいたい事足ります（事足りないようなウェブサイトさんもあるかもしれませんが）。
※ちなみに私は「JIS第2水準」にある「囮」という文字及び、斜め方向の矢印（↙とか）も使いたかったのでサブセット化時に足しています。
そこで、フォントから「JIS第1水準」と、ひらがな・カタカナ・記号だけを抜き出すサブセット化、更にそれをWOFFで圧縮してみました。
もちろん、フォントを好き勝手に改造してはいかんので、それぞれのフォントのライセンスを確認しなければなりません。
今回は以下の、
【フリーフォント】源暎モノゴ/モノコード - 御琥祢屋
https://okoneya.jp/font/genei-mono-go.html
「源暎モノゴ」さんを使いましたが、こちらのフォントは「SILオープンフォントライセンス」です。
ライセンスの説明は、
「SILオープンフォントライセンス」って何？という方のためのざっくり解説 – たぬきフォント
https://tanukifont.com/sil/
こちらがとてもわかりやすいので参考にさせていただきました。
今回私がやりたいのは、サブセット化＆WOFF圧縮してWebサイトで使用することになりますが、「SILオープンフォントライセンス」において引っかかるのは、
『SILライセンスでは、改変したファイルに「予約フォント名」を入れることが禁じられている』
この一点だけです。他は自由に改変可能です。
「源暎モノゴ」のReadmeには、
「予約されたフォント名」は日本語表記では「源暎」、アルファベット表記では「GenEi」とします。
とありますので、改変したファイルの名前に上のフォント名を使わなければ問題ありません。
※何で元のフォント名を使っちゃいけないの？ という話も、上の『「SILオープンフォントライセンス」って何？』の解説でわかりやすく書かれています。
サブセット化＆WOFF圧縮はどうやるのか？ については解説しているウェブサイトさんがたくさんありますが、メモついでに書いておきます。
ありがたいことに、武蔵システムさんがフリーソフトの「サブセットフォントメーカー」「WOFFコンバータ」を公開されています。
サブセットフォントメーカー
https://opentype.jp/subsetfontmk.htm
WOFFコンバータ
https://opentype.jp/woffconv.htm
※フリーソフトの使用は自己責任でお願いします。
「サブセットフォントメーカー」では、収納したい文字を入力する必要がありますが、こちらについても、サブセット化用に文字列を公開してくださっている方がいらっしゃいますので、以下からコピペするなどしてください。
第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな
https://gist.github.com/bungasnail/a7e484d220b6539d9c1d875dc7c5edd6
自身のウェブサイトで、他に使う文字があるなら適宜足してください。
「サブセットフォントメーカー」「WOFFコンバータ」どちらもインストールして、「源暎モノゴ」の「GenEiMonoGothic-Regular.ttf」を変換してみます。
ちなみに「GenEiMonoGothic-Regular.ttf」は4.78 MB (5,014,640 バイト)。
「サブセットフォントメーカー」を起動したら、下のような感じに入力。
「フォントに格納する文字」には上の「第一水準漢字＋記号＋ローマ字＋カタカナ＋ひらがな」を入力します。
テキストファイルで保存している場合は「参照」から読み込みもできます。
ここまでやったら「作成開始」。
「作成終了後、WOFFコンバータを起動する」にチェックを入れておけば、出来上がると「WOFFコンバータ」が自動で起動します。
「woff2を作成する」ですが、woff2の方が圧縮率が高く、現在は主要なブラウザに対応しているので、こっちも作っておきます。
これで「Subset.woff」「Subset.woff2」というフォントファイルになりました。
「Subset.woff」は490 KB (502,340 バイト)、「Subset.woff2」は387 KB (396,860 バイト)と、劇的に軽量化しています。
これなら画像ファイルとさほど変わりないくらいですね。
これを、スタイルシートで適当に指定して使えばOKです。
woff2未対応ブラウザもあるかもしれないので、woffも指定。
@font-face{
font-family:Subset;
src:url('../font/Subset.woff2') format('woff2');
src:url('../font/Subset.woff') format('woff')
}
.mono{
line-height:initial;
font-family:Subset, monospace, serif;
line-height:1.1;
margin:.3rem;
padding:.3rem;
}「line-height」諸々は適当に。
これで最初のスクショのように綺麗な等幅フォントでマス目表示が可能になりました。
まあ、ここまでやる必要あったか？ って気がしなくもないんだけど。ｗ
でもフォントのサブセット化とか、これまた勉強になったので良しとしましょう。
