サイトが文字化けした日──原因はフォントだった

気づいた瞬間

2026年8月9日。デザインをやり直して（第4話）、サイトを公開したその日です。

公開したトップページを見ると、計器盤（公開記事数などを自動で数えて表示している欄）の説明文が、読めない漢字の並びになっていました。記事数の単位も「本」ではなく「棒」。ほかにデザインのズレもあって、それも一緒に見つけました。

当時のチャットの記録では、説明文はこう読み取られています。

兄貴隼 ｅｅ シハキ獅く詩湯綬兄…

本来は「ビルド時に自動集計した実数のみ」という一文です。化けた状態のスクショは残っていません（理由は最後に書きます）。

ぼくが送ったもの

スクショを送って、化けていると伝えました。それだけです。原因の見当は付いていませんでした。

AIへの指示文（原文）

ぼくの工場では、相談役のAI（Claude）が指示文を整え、作業役のAI（Claude Code）が実際に直します。この指示文を書いたのも相談役のAIで、ぼくは中身を見て通しただけです。

1.【最優先】トップの計器盤キャプションが文字化けしている
   （「兄貴隼ｅｅシハキ…」）。原因を特定して修正
   （正: 「ビルド時に自動集計した実数のみ・2026-08-09」等の説明文。
   フォントサブセット化かビルド時のエンコーディングを疑うこと）
2. 計器盤の単位「棒」→「本」に修正（公開記事 1本／制作ログ 0本）

最後の行に、当たりの仮説（フォント）と外れの仮説（文字コード）が両方入っています。この時点ではどちらか分かっていませんでした。

AIの切り分け（原文）

作業役のAIからの報告です。

調査結果、これはエンコーディングの問題ではありませんでした:本番HTMLを直接取得してバイト列を検査 → 正しいUTF-8、content-type: text/html; charset=utf-8 も正常当方のブラウザで本番を開くと正常表示「UTF-8をSJIS/EUCで誤読」等の再現実験でも報告の文字列と一致せず決め手は化けた2箇所の共通点です。キャプションと単位「本」は、日本語なのに IBM Plex Mono（日本語グリフを持たない欧文Webフォント）の指定内にある唯一の要素でした。HTMLが正しいのに特定要素だけ別の漢字に見えるのは、CDN側のフォント最適化（サブセット化・差し替え配信）でグリフ対応がずれた時の症状です。

ぼくの言葉に直すと、こうです。

「文字化け」には2種類あります。ひとつは、文字のデータそのものが壊れているケース（文字コードの問題）。もうひとつは、データは正しいのに、文字の形を描く段階で壊れるケースです。

今回は後者でした。サイトの数字や日付には、英語用の等幅フォント（IBM Plex Mono）を使っています。このフォントは日本語の文字の形を持っていません。ところが、説明文と単位「本」の2箇所だけ、日本語なのにこの英語用フォントの指定の中に入っていました。日本語の形を持たないフォントに日本語を表示させると、配信の途中でフォントを軽量化する仕組み（サイトのフォントを必要な文字だけに削る処理）を通ったときに、別の文字の形に差し替わることがある──それが起きていた、という判定です。

「棒」も同じ理由でした。元の文章はずっと「本」で、表示だけが化けていました。

直し方

日本語を含む部分は全部、日本語に対応した書体（本文と同じもの）に戻し、英語用の等幅フォントは数字と日付だけに限定。さらに、同じことを繰り返さないように、スタイルの設定ファイルに「日本語を含む要素にこのフォントを使わない」という注意書きを入れました。修正の記録は2026年8月9日18:07です。

その後、作業役のAIの推奨で、Cloudflare（サイトの配信に使っているサービス）側のフォント最適化の機能をオフにしました。

ぼくがやったこと

気づいて、スクショを送って、直ったのを見て「直った」と言う。あとは設定をひとつオフにする。この日ぼくがやったのはそれだけで、原因を見つけたのも直したのもAIです。

コードを一行も読まずに直した、という話ではあります。ただ、気づかなければ化けたまま公開が続いていました。確かめる役だけは、まだ誰にも渡していません。

残っていないもの

化けた状態のスクショは、残っていません。その日のスクショで一番古いものは22:34撮影で、修正（18:07）より後です。残っているのは、指示文・調査報告・修正の記録・当日のメモの4つです。

第4話のボツ案に続いて、これで2回目です。作っている最中は、直すことに気が向いていて、壊れた状態を残そうとは思わない。そのあと「ボツも化けも、消さずに日付をつけて残す」というルールを作りました（2026年8月23日）。この連載を書いてみて分かったことのひとつです。

全5話を終えて

名前とドメインを決め、倉庫（コードの保管場所）と自動公開の仕組みを作り、デザインを一度全部ボツにして、文字化けを直した。ここまでで、サイトはひととおり動く状態になりました。

5話を通してぼくがやったことを並べると、決めること（名前・デザインの採否）と、確かめること（化けている・ズレている）に尽きます。コードはこの連載のどこにも、ぼくの手で書いた行がありません。

いいものを作ろうと思ったら、それなりに手間はかかる。とくにデザインとかクリエイティブなことについては、余計にそうなのかなと思った。でも出来には満足してる。いいものができたと思う。

この連載はここで完結です。全5話の目次はこの下にあります。