カラーフォントってなに？（イワタテックノート #2）

こんにちは。
イワタ技術部の野原です。

前回のイワタテックノート「フォントテーブルってなに？」という記事には、予想以上に多くの反響をいただき、技術部一同とても喜んでいます！
フォントの「舞台裏」の話、楽しんでいただけたでしょうか。

第2回となる今回は、テーブルの深掘り……
の前に、2026年4月10日発売の書体「イワタつづり」にも搭載されているカラーフォントの解説です！

前回はテーブルを舞台裏で働く人たちに例えましたが、今回のカラーフォントは照明担当のような、文字をババーンと目立たせる特別なテーブルを搭載したフォントです。

カラーフォントってなに？という方でも大丈夫！
カラーフォントの概要から、その仕組みと魅力をお届けします！

カラーフォントとは？実はすでに皆さん使っています！

実は皆さん、すでにカラーフォントを使っているんです。それは…

🌟🤩🩵カラー絵文字です🩷🤗🌍

カラー絵文字は、イラストと色の情報を持ったフォントなので、これもカラーフォントの一種なんです。

ちなみに私はガラケー世代でして、絵文字といえば猫が手で×をしている絵文字だったり、丸い黄色い人？キャラクター？の絵文字を思い出します。もう20年前ぐらいの話ですね。
無い絵文字は〓になってしまったり、微妙に違うニュアンスの表情の顔で表示されたりということがありました。その頃はまだ絵文字と文字コードの対応づけがキャリアごとにバラバラで、表示できる絵文字が違っていたためです。

2010年10月にリリースされたUnicode 6.0で、絵文字が正式に採用されたことにより、デバイスやOSを問わず共通の文字コードが使われるようになり、現在ではキャリアの違いによって文字化けが起きることもなくなっています。

お話が少し逸れましたが、絵文字と聞いてとっつきやすくなったのではないでしょうか。

あの頃のドット絵もエモいですが、今の絵文字はとってもキレイで表現できる色も豊富！

そのワケを次にお話します！

カラーフォントの歴史。開発企業によってテーブルの種類が異なります。

2010年頃から主要なIT企業が、絵文字をスマホやパソコンで豊かな表現を可能にするための拡張を独自に提唱し実装を進めていましたが、2016年の OpenType 1.8で4つの方式が正式にOpenType規格の一部として採用されました。

方式ごとに異なるテーブルを使用します。

１. Apple
　　テーブル名　sbix
　　グリフのデータ形式　ラスター（png/jpeg/tiff）

グリフをラスター形式、つまりドットで描かれているピクセル画像で収容します。

sbixというテーブルに、ピクセル数別（大きさ別）で収容してあります。たとえば20px用 ×ピクセル画像にする全文字分、26px用 × ピクセル画像にする全文字分…160px用 ×ピクセル画像にする全文字といった感じです。

PCの画面に文字を出力する行程は、次のようになります。

ユーザーが画面に絵文字を入力すると、文字のポイント数から使用する大きさのピクセル画像を判断します。そしてその大きさにあった画像にアクセスし、直接画面に出力をします。

シンプルな仕組みですが、絵文字のサイズが変わるたびに、
大きさ判断
　↓
絵文字を表示
　↓
（ユーザーがポイント数変更する）
　↓
大きさ判断
　↓
絵文字を表示…

と画面に描画する工程を繰り返し行います。

２. Google
　　テーブル名　CBDT/CBLC
　　グリフのデータ形式　ラスター（png）

こちらもグリフをラスター形式、つまりドットで描かれているピクセル画像で収容します。CBDTとCBLCはセットで使用します。CBDTにはカラーのピクセル画像のデータ、CBLCには文字の大きさとデータの位置情報が載っています。

PCの画面に文字を出力する行程ですが、まずCBLCを参照します。CBLCにはあらかじめカラーのピクセル画像の大きさ（幅、高さ）と何バイト目にあるかの情報が載っていて、CBLCで必要な情報を判断したあと、CBDTのカラーのピクセル画像にアクセスします。

表示のたびに大きい画像を読み込むのではなく、一旦、CBLCという索引からCBDTを参照しカラーのピクセル画像を描画するので、メモリ消費を最小に抑えることができるのです。

ちなみに、白黒画像のビットマップを搭載するためのテーブル名はEBDT/EBLCです。CBDT/CBLCの下位互換になります。まだPCの画面解像度が十分でなかった20年ほど前、イワタでもEBDT/EBLCを搭載したフォントを開発していました。

小さいポイント数では文字が潰れて読めなくなることがないように、そのサイズ用のビットマップ（※1）を使用するようになっていました。

３. Microsoft
　　テーブル名　COLR/CPAL
　　グリフのデータ形式　ベクター

この方式はドットではなく、ベクターでカラー文字を表示できます。
グリフの形状（アウトライン）を数式で収容しているため、拡大してもギザギザに粗く表示されることはありません。
COLRとCPALはセットで使います。カラーとカラーパレットという意味です。
COLRは、レイヤー、つまり重ね順の情報が載っています。例えば、GID（※2）1というグリフは、GID100の上にGID101を、さらにその上にGID102を重ねるという情報を入れます。

CPALはカラーパレットという意味です。カラー情報はB（ブルー）G（グリーン）R（レッド）A（アルファ＝不透明度）の順で指定します。

たとえば、スイカの絵文字を作る場合…

① CFFテーブルにスイカのレイヤー素材を設定する

② CPAL（カラーパレット）にカラー情報を設定する
　カラー情報をBGRA順で以下のように設定します。
　　・カラーパレット0番：B=60 G=110 R=0 A=255
　　・カラーパレット1番：B=40 G=40 R=230 A=255
　　・カラーパレット2番：B=0 G=0 R=0 A=200

③ COLRテーブルでGID1にGID100とGID101のレイヤー素材を引用するように指定する。

④ カラー絵文字が完成！
CPAL（カラーパレット）の3番に黄色の設定を追加し、実の部分のGID101に当てれば黄色いスイカも表現できます。同じレイヤー素材で別の色を表現出来るのも強みです。

４. Adobe/Mozilla
　　テーブル名　SVG
　　グリフのデータ形式　ベクター/ラスター

このテーブルはベクターとラスター、どちらでもカラー文字を表現することができます。

COLR/CPALと大きく違う所は、SVGというテーブルにグリフの情報がSVG（Scalable Vector Graphics）で記述されている点です。SVGはXMLで記述されているため、可読性はありますが、ファイルサイズが大きくなる傾向があります。

Microsoft公式サイトに掲載されているSVGのXMLテキストをに以下に引用します。

この ↑ 結果が気になる方はこちらをご覧下さい。

以上が、開発企業と各テーブルの概要です。まとめると下図のようになります。

イワタのカラーフォント「つづり」のテーブルの概要について

さて、イワタのカラーフォント「つづり」（以下「つづり」）がどのテーブルを採用したかというと…

COLR/CPALです！

「つづり」は文字数がOpenType StdN の9,499文字もあるので、複数のサイズの画像を収録するsbixやCBDT/CBLCはファイルサイズが膨大になり現実的ではありません。
ベクター形式のほうが向いています。

では、同じベクター形式のSVGではなく、なぜCOLRを選んだのか。
それは、Google がChromeで「COLRv1」のサポートを積極的に進めているからです。

先ほどの各企業のカラーフォントの説明を素直に読むと、「Googleは自社推しのCBDT/CBLC（ビットマップ）を推進しているのでは？」と思われるかもしれません。
しかし、Googleの開発者ブログでは、WOFF2（※3）形式において、ビットマップよりCOLRv1（バージョン1という意味、以下、バージョン）の方がデータサイズを圧倒的に軽量化できるという事例が紹介されています。つまり、Googleも積極的にCOLRをサポートする方針に舵を切っているのです。

ちなみに「つづり」は、塗りのみのシンプルな構造なので、グラデーションも可能なバージョン1ではなくバージョン0で制作しています。
（グラデーションなどのリッチな表現をしたい場合などはバージョン1を使用することで実現できます。）

「つづり」のカラーフォント内のアウトライン構造について

この「つづり」、ただ色を設定しているだけのカラーフォントではありません。

インクの濃淡も表現しているのです！

筆圧が強くなる起筆・収筆や、交差してインクが濃くなるところを表現しているのです。
本当に万年筆で書いたかのような文字を、フォントで再現しています。

どのようにしてこのようなインクの濃淡を表現することができているのか、テーブルをかいつまんで説明すると…

① CFFテーブルにインクの濃度別に分けたアウトラインを用意

例えば「あ」でしたら、「あ」というアウトラインと「あ」のインクで濃くなるところだけのアウトラインを2つ用意します。

　これを9,499文字分用意します（下駄文字の〓や罫線素片などインクで濃くなる表現が適さない文字には用意していません）。

濃くなる部分の抽出には、文字の起筆や収筆、交差する部分を自動で検出し処理を行う、新規開発のツールを使用しました。

このツールの開発についても長～く語れるので、機会があれば詳しくご紹介したいと思います。

② CPAL（カラーパレット）でアウトラインの色を指定

「つづり」の場合、「あ」本体の色と「あ」のインクが濃くなる部分の色の2色分の情報を持っています。9,499文字すべて同じ配色のため色情報はこの2つのみです。

③ COLRでどのグリフ番号にどのパレットの色を使うか指定

COLRで、①で作ったレイヤー素材にCPALの色を指定します。

④ cmapでCFFのグリフにUnicodeを対応づけ

こうしてインクの濃淡の表現したカラーフォントが完成しました。

「つづり」はこのようにインクの濃淡まで再現した手書き風のリッチな表現を可能にしていますが、グラフィックではなくカラーフォントとして実現しているため、テキスト情報も保持することができます。

このため、検索や情報交換等、通常のフォントの機能はそのままに、より豊かな表現を実現することができます。

気を付けること

このイワタのカラーフォント「つづり」、テストをしていて気を付けた方が良いなと思ったことがあります。

カラーフォントは新しい技術のため、まだ対応が追いついていない、対応してないアプリケーションがあります。

macOSでは、画面表示と印刷・PDF生成に目立った不具合はありませんが、Windowsの場合は、画面表示と印刷・PDF生成でフォントの取り扱いが異なる場合があり、問題が発生しやすい傾向があります。

ウェブフォントにしてブラウザでの表示は問題ないのですが、アプリ内での表示では非対応のものがあります。

Adobe社のIllustratorは問題無くカラーで表示できましたが、InDesignでは黒の文字で表示されてしまいました。Excelも黒の表示でした。
また、フォント情報を保ったままPDF化すると文字が化けたり、黒になってしまったものもあります。

カラーフォントの歴史は、ガラケー時代から始まり現在も各社が注目して開発を進めていますので、まだまだ進化しそうですね。

この記事を書くために色々調べたのですが、あのときの技術がここに活きるんだ！という発見があってとても面白かったです。

今回は、「つづり」を例に、カラーフォントの内部の構造を説明させていただきました。

長くなりましたが、ご覧いただきましてありがとうございました！

次回の「イワタテックノート」もお楽しみに！