この記事は、ドット絵 Advent Calendar 2018 2日目の記事となります。
よろしくお願いします。
早いもので、もう12月に入ってしまいました。
12月といえば、アドベントカレンダー。
去年に引き続き、今年も参加させていただいています。
さて、今年のテーマについてですが、何にしようと考えていたときにTwitterの👾の絵文字が目に飛び込んできたので決まりました。 単純ですね。 ちなみに、Twitterの👾の絵文字はこちらになります。
👾
言いたいことはいろいろある
ビットマップフォント
みなさんがドット絵と聞いて一番最初に思い浮かぶものはゲームが主だと思いますが、おそらく一番目にする機会が多いドットで形作られたものは文字だと思います。 最近ではアンチエイリアスがかかってなめらかになっていることが多いですが、少し前のWindowsではなめらかではないフォントでしたよね。
最初期のコンピュータでは文字はビットマップフォントが利用されていました。 ビットマップフォントは文字をドットの配置によって表現したフォントです。 ビットマップフォントでは、文字の情報として白黒の2値情報が使われているので高速に出力できます。そのため、画面表示に用いられていました。*1
なお、最初期のコンピュータと記載していますが、WindowsではXPまでは変則的なフォントの構成だったのでビットマップフォントでした。 WIndows XPで滑らかな文字表示を行うClearTypeという表示技術が採用されましたが、なんと、Windowsでよく使われるMicrosoftの日本語フォント(MSゴシック・MS Pゴシック・MS UI Gothic・MS 明朝・MS P明朝)ではこのClearTypeという表示技術が有効となるのは文字サイズが18ポイント以上に限られていたのです。*2（！）
Vistaで搭載されたメイリオからは小さなサイズでもClearTypeが有効になりますが、Windowsの文字があまりキレイではないと言われていたのはこちらが原因だったのではないでしょうか。ということです。
フリーのビットマップフォント
ビットマップフォントはドットで文字を表現するため、スケーラブルフォントよりも作るのが簡単です。 そのため、個人の方が無料で作って公開しているものが多くあります。 特におすすめというものがあるわけではないのですが、探してみると自分の用途に合ったフォントが見つかったりするので見てみて下さい。 参考程度にまとまっているサイトを挙げておきます。
利用規約などをよく読んだ上でお使い下さい。
アルファベットのフォント
日本語よりも英語のほうがフォントを作るのは簡単ということは感覚としてわかるかと思います。 日本語のフォントを作る場合、ひらがな(83)+カタカナ(83)+漢字(常用漢字2136/常用漢字+人名用漢字2,997/JIS漢字コード第一水準2,965/第二水準6,355/第三水準7,614/第四水準10,050)+その他記号などとたくさんの文字のフォントを作らなければなりません。*3
一方、英語のフォントはアルファベット分だけ作れば良いので、小文字(26)+大文字(26)+その他記号などだけで済みます。 そのため、アルファベットのフォントは日本語よりも種類がたくさんあります。 また、種類が少ないのでドットの数も少なくて済みます。 Wikipediaには3×3のフォントがありました。*4
3×3
ぼくは、上に挙げている3×3のフォントに不満がありました。 それは、違う文字なのに同じ形が使われているところです。 例えばOと0。例えば、Sと5。 確かに普通のフォントでも似ており、アルファベットと数字という違いから文脈で判断はできそうです。 ただ、そこを区別できるならしたフォントを使ったほうが良いと思いませんか？ ということで作りました。
まだ作りかけ*5ですが、このドットフォントを使ったプロフィールサイトもこんな感じに作りました。
パララックス効果とイメージマップを使い、例えば青い鳥を押したらTwitterに飛ぶリンクが表示されるようにしています。 その際の表示に上記のドットフォントを使いました。
終わりに
雑多に書いてしまいましたが、話したかった内容は以上なのでここで終わりとします。
3日目のカレンダーは一体誰なんだろう…と戦々恐々としていますが、できればこんな軽い感じで書いてもいいんだ、ということで今からでも誰かが入ってくれると嬉しいです。
今週は空きがたくさんありますよ！
以上、ドット絵 Advent Calendar 2018 2日目でした。
*1:ビットマップフォント | フォント用語集 | 文字の手帖 | 株式会社モリサワ
*2:http://www.shoai.ne.jp/hirakata-s/it/windows/font.html
*5:一旦動くものを作ったところでやりきった感が出て止まった
