ベテランほど知らずに損してるIllustratorの新常識（12）カラーフォントという新しい道具、そして絵文字

連載

ベテランほど知らずに損してるIllustratorの新常識

カラーフォント（別名「OpenType SVG）は、PhotoshopではCC 2017から、IllustratorはCC 2018から使えるようになっています。
そもそもカラーフォントとは何か？どのように使うのか、また、どのように作るのかなど、主に、Illustrator CC 2018でのカラーフォントの扱いについてまとめます。

カラーフォント

カラーフォントは、別名、OpenType-SVGと呼ばれる新しいフォントフォーマット。

これまでのフォントは「塗るか塗らないか」しか設定できませんでしたが、アウトライン処理をすることなく、文字を構成するパーツごとに指定したカラーで表示されるほか、フォントによっては不透明度が保持されます。

Illustrator CC 2018以降をお持ちの方は、「Trajan Color Concept」フォントを指定し、テキストを入力してみましょう。

https://blog.adobe.com/media_e25722a0f982bda9c897492c90afa1522a77fcaa.gif

テキスト入力するだけで、立体っぽいテキストが入力されます。さらに、テキストですので、アウトライン化することも可能です。

https://blog.adobe.com/media_02bb83e49e4ddea13aa17074c4167c0d9edcee9e.gif

なお、カラーフォントには、ビットマップベースのもの（SBIX = Standard Bitmap Graphics Table）もあり、その場合、アウトライン処理後、ベクトルのオブジェクトにはなりません。

対応するアプリケーション

カラーフォントは、次のアプリケーションで対応しています。

InDesignは、現在、Tech Preview機能として実装。おそらく次のメジャーアップデートにて正式にサポートされると思われます。

また、先日発表されたmacOSの次期バージョン「Mojave」（10.14）では、OSレベルでカラーフォントがサポートされる見込みです（PagesやKeynoteなど、すでにOSレベルでは部分的にサポートされています）。

バンドルフォント

Illustrator CC 2018以降、次のフォントがインストールされています。

macOSでは、「/Applications/Adobe Illustrator CC 2018/Adobe Illustrator.app/Contents/Required/Fonts/」にインストールされています。

このほか、macOSでは「Apple Color Emoji」、Windows環境では「Segoe UI Emoji」というカラーフォントがインストールされています。

https://blog.adobe.com/media_7707875283ffe69a63f1db6e88ed3710652a1753.gif

バンドルフォント以外

有料・無料ありますが、カラーフォントはどんどんリリースされています。

https://blog.adobe.com/media_4e76a0508e61541a75a2926ae6139a3aa9bc70f7.gif

なかには、After EffectsなどでAnimated Fontとして使えるものもあります。

何が嬉しいの？

これまで単色であればロゴやアイコンをフォント化することは行われてきましたが、複数のカラーで構成されるものをフォント化することで、たとえば「aと入力するだけで、複数のカラーで構成するロゴを表示すること」が可能になります。

ただし、カラー指定はRGBで行われるため、スミ（黒）の扱いなど、シビアなCMYKのワークフローではひと手間必要になりますが、ウェブサイトで用いるウェブフォントとしては活躍する場面が増えそうです。

なお、私は黒丸数字の透明部分を白として扱うフォントを自作して運用しています。

どうやって作るの？

廉価なアプリも出てきましたが、得ていてフォント制作のアプリケーションは高価です。

数年前にリリースされた「Fontself Maker」は、IllustratorやPhotoshopのプラグインとして利用できます。

価格も各49ドルとリーズナブルなだけでなく、操作性もよく、すぐに習得できます。さらに、異体字やリガチャの設定も行えます。

https://www.youtube.com/embed/xt1O7nVzk7s

絵文字

さて、日本発祥の「絵文字」ですが、現在、「emoji」としてワールドワイドになっているのはご存じでしょうか？

日本の「今年の漢字」にあたる、Oxfordの「Word of the Year」の2015年版では、“泣き笑い”（Tears of Joy）の絵文字が選ばれるなど、浸透しているようです。

https://blog.adobe.com/media_2632caa77e662e5f1a341e932e0db783e5a7f193.gif

絵文字の入力

アルファベットとは異なり、アイコンフォントの場合にはキーボードから入力できないもあります。これは、PUA（Private Use Area）と呼ばれる領域にあるためです。

その場合には、［字形］パネルを開いて一覧表示し、該当するフォントをダブルクリックして入力します。

https://blog.adobe.com/media_3ad1ca9405f55562fbb716ed1372b581f0005489.gif

カラーフォントとリガチャ

「EmojiOne」は、リガチャ（合字）に対応しています。

リガチャ（Ligature）の身近な例としては、fに続けてf、fに続けてiを入力すると［欧文合字］オプションで字形が変化します。これがリガチャです。

https://blog.adobe.com/media_348e68d12ee45ee25ddcb4bf2b35d9a256c36934.gif

さて、「EmojiOne」では、Uに続けてS、Jに続けてPを［字形］パネルから入力すると、それぞれアメリカ、日本の国旗に変化します。

https://blog.adobe.com/media_2c7aff54c3db2f0f2595626c6a37763a8df92f32.gif

グローバル対応とリガチャ

絵文字がグローバルになると、皮膚の色のバリエーションが必要になってきます。

そこで、「EmojiOne」の場合には、それぞれ6色のカラーをサポートしていますが、これは、デフォルト＋5色と考えます。

https://blog.adobe.com/media_4ebd65f44144a423b5ca9290cc815f172d866944.gif

デフォルトのアイコンに続けて、カラー変更用の文字を入力することでリガチャによって皮膚のカラーが変化します。

カラー変更用の文字は、［字形］パネルにあります。

おまけ（1）：ビャンビャン麺

2017年4月にリリースされた「源ノ明朝」では、変わったリガチャをサポートしています。

「⿺辶⿳穴⿰月⿰⿲⿱幺長⿱言馬⿱幺長刂心」と入力し、「源ノ明朝」を指定すると、次のようにビャンビャン麺の「ビャン」に変化します。

https://blog.adobe.com/media_b0a02df08b74893aaca329eca2fd9585781df9ef.gif

おまけ（2）ハンバーガーの絵文字

「ハンバーガーアイコン」（≡）ではなく、ハンバーガーの絵文字の話です。

2017年10月末からAndroidの絵文字の「ハンバーガーのチーズの位置がおかしい」とTwitterの指摘が評判になり、一ヶ月のスピードで修正されました。

I think we need to have a discussion about how Google’s burger emoji is placing the cheese underneath the burger, while Apple puts it on top pic.twitter.com/PgXmCkY3Yc

— Thomas Baekdal (@baekdal) 2017年10月28日

なお、≡（ハンバーガーアイコン）は「ごうどう」と入力して変換すると（どんなフォントでも）文字として入力することができます。

貂明朝とカラーフォント

2017年11月末に開催されたAdobe MAX Japan 2017で、アドビから「貂明朝」（てんみんちょう）がリリースされました。

現状ではサポートされていませんが、追ってバージョンアップによってカラーフォントとして利用できるようになるそうです。

リンク集

まとめ

今回はカラーフォントについて紹介してきました。