ピクセルフォント製作入門
この記事ではドット絵を扱ったことがあり、フォントにしてみたい人向けに「PixelType」を使用したピクセルフォント製作のポイントを解説します。
1. 目的｜こういうものを作ります！
まず0～9までの数字だけのフォントを作り、作業の流れを掴みます。
チュートリアルなどいらぬ！という人はスキップしてもOK！
そして「5x5ピクセルフォントチャレンジ」のフォント化に挑戦します。
英数字、ひらがな、カタカナと基本的な記号をテキスト上で扱える、とても楽しいピクセルフォントになりますよ！
2. 準備｜インストールするソフト
■透過png画像を作れる画像編集ソフト
EDGE や Aseprite などのドット絵エディタがおすすめ！
お手持ちの慣れたソフトでも大丈夫。透過pngを作成できることは必須で、グリッド機能のあるものが便利です。
■PixelType
爆速で画像をフォントの形式に変換できます！
とにかく早く作れて、複雑なフォント製作ソフトを学ぶ手間も省けるので、定価で購入しても圧倒的なコストパフォーマンスがあります。
3. 練習｜数字だけのフォントを作る！
■Step 1 数字10個の文字シート作成
数字を描き、同じサイズの枠に10個、横に並べた形の画像を作ります。
0から順に並べたら、背景を透過色にしたpng形式で保存して下さい。
幅8px、高さ16pxで作る場合のテンプレート画像もご用意しました。
必要な人は、以下のファイルを保存して作成して下さい。
数字を配置する下敷きとしても良いですし、次のステップの操作方法を習得する目的で、手を加えずそのまま使用してもOKです。
■Step 2 PixelTypeでフォント化
PixelTypeを起動し、新規プロジェクトを作成します。
次の画面で、右上にあるプロジェクト設定から、グリフ（文字）の幅と高さを設定します。数字を並べたpng画像の、数字ひとつあたりの枠のサイズをピクセル単位で入力します。その後、右下の＋をクリックして下さい。
次の画面では、シート選択からpng画像を読み込みます。（相対参照の確認が出ますがとりあえず無視して下さい）
数字の区切りごとにグレーの背景が色分けされていることを確認できたら、開始文字をクリックして下さい。
この画面で、文字コードと開始位置を指定します。
今回はUnicode 基本多言語面、0x0030とし、選択をクリックします。
これで、画面上部ためしがきテキストボックスに数字を入力すれば、ドットで描かれた数字が表示されるはずです。
画面右上フォントを書き出すボタンから、TTF形式のフォントにファイル名を付けて書き出すことができます。
フォント名も必要に応じてプロジェクト設定から好きな名前を付け直すとよいでしょう。（個人的には、ファイル名とフォント名は同一にしておくと、色々な面で楽だと思っています）
これでPixelTypeの基本的な操作方法はマスターできました。
数字ピクセルフォントの完成です！
数字だけのフォントは作る規模が小さいので、尖ったデザインやひとつの用途に特化したものを作ることにも向いています。
（ゲーム画面で、ひとつの部分のスコア数字を表示するため、など）
たった10文字でも実用性と奥の深さがあるフォントなのです。
ぜひいろいろな数字の形を作ってみましょう！
4. 製作｜5x5ピクセルからの文字作り
「5x5ピクセルフォントチャレンジ」を参考に文字を作っていきます。
今回は英数字、ひらがなカタカナを収めた2枚の文字シートを作ります。
5x5ピクセルの文字を収めていく枠は、今回は幅6px、高さ8pxのグリッドとし、濁点と半濁点は上に乗せる形で進めていきます。
これは判読性が良く、作るのも楽に済むアプローチですが、自由なサイズとレイアウトで作っていただいても構いません。
自由なサイズで作る場合、高さは4の倍数で作っておくのがオススメです。
（96dpi環境でのピクセルパーフェクト表示に対応できるため）
■Step 1 英数字の文字シート作成
まずは、英数字と記号を収めた文字シート画像を作成します！
下のテキストをコピーしたり、テンプレート画像を自由に活用して下さい。
!"#$%&'()*+,-./0123456789:;<=>?
@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_
`abcdefghijklmnopqrstuvwxyz{|}~小文字のアルファベットは若干難しいので、はじめは作らずにおいたり、大文字をそのままコピーして配置してしまうのも選択肢になります。
■Step 2 ひらがな・カタカナの文字シート作成
次に、ひらがな・カタカナなどを収めた文字シート画像を作成します！
下のテキストをコピーしたり、テンプレート画像を自由に活用して下さい。
、。 「」『』【】 〜
ぁあぃいぅうぇえぉおかがきぎくぐけげこごさざしじすずせぜそぞた
だちぢっつづてでとどなにぬねのはばぱひびぴふぶぷへべぺほぼぽまみ
むめもゃやゅゆょよらりるれろゎわゐゑをん
゠ァアィイゥウェエォオカガキギクグケゲコゴサザシジスズセゼソゾタ
ダチヂッツヅテデトドナニヌネノハバパヒビピフブプヘベペホボポマミ
ムメモャヤュユョヨラリルレロヮワヰヱヲンヴ ・ー今回は使用頻度が高い文字を選別し、作りやすくしてあります。
本来の配置はUnicode一覧などを参照して下さい。
ゐ、ゑ、ヰ、ヱ、などは作らずに済ませたり、まずはひらがなカタカナの片方だけを作ってもOK。1度に全てを作り切らなくても、途中でフォントを一度完成させてから追加しても大丈夫です。
2枚の画像が作成できたら、
それぞれを背景色を透過色に指定したpng形式で保存して下さい。
5. 実装｜複数の文字シートの実装
PixelTypeで新規プロジェクトを作成し、プロジェクト設定で
グリフ幅6、高さ8、ベースライン位置0、下線高さ0に設定します。
次の画面のシート選択から、英数字のシート画像を読み込み、
コードポイント範囲の開始位置をUnicode、0x0020にします。
画面右側や上部のためしがき欄で、それぞれの文字が反映されていることを確認できたら、画面左上の戻るボタンでシート一覧画面へ戻ります。
1枚目のシートでは英数字などの96文字が登録されたことが分かります。
右下の＋をクリックして、2枚目のシートを追加していきます。
ひらがな・カタカナのシート画像を読み込み、
コードポイント範囲の開始位置をUnicode、0x3000にします。
英数字や記号、ひらがなカタカナの扱えるフォントになりました！
画面右上の3つのボタンから必要に応じてフォント名を付けたり、プロジェクトを保存して、フォントファイルを書き出して下さい。
6. 完成｜使ってみて改良していく！
完成したフォントを、テキストや画像エディタで使ってみましょう。
画面dpiやOS、使うソフトにもよりますが、今回は文字サイズは6か8の倍数にすることで、ピクセルパーフェクトな文字表示も可能。
これはもう本当に楽しい。最高です。ドッターの夢の世界！
ですが「全角の記号が出ないの、ちょっと不便」と感じるかも。
全角の記号も使えるようにして、気楽に扱えるフォントに改良してみましょう。今回は新たなシート画像は作らずに流用して、半角英数と全角英数で、全く同じ文字が表示されるフォントにしていきます。
（使用目的に応じて、以下のステップは行わずに完成でもOKです）
シート一覧画面、右下の＋から、3枚目のシートを追加していきます。
ひらがな・カタカナのシート画像を読み込み、
コードポイント範囲の開始位置をUnicode、0xFF00にします。
こうすることで「どうですか！？」（うわ～！！）といったテキストでも、記号部分を半角に置き換えずに、気楽に扱えるフォントになりました。
ひらがなカタカナを含んだ最小規模のフォントとしては、それなりに作るのが簡単で、扱いやすいものになったと思います。お疲れさまでした！
おわりに
素敵なピクセルフォントを作ることができましたか？
あなたが作ったフォントをゲーム制作に活用したり、フリーフォントや有償フォントとしてリリースするのもオススメです。ぜひ楽しんで下さいね！
後記｜文字とフォントの著作権
最後に、文字とフォントの著作権、模倣について、
その特性と私の考えをお話させて下さい。
まず前提として、フォントのデータは著作物です。
しかし、文字のデザイン（字形）と複数の文字デザインがひとまとまりになったタイプフェイス（書体）自体は著作物にはなりません。
（書などの極めて美的創作性を備えていると認められるものを除いて）
ピクセルフォントでは制約が大きいこともあり、ひとつの文字の形を表現しようとするとき、既存のフォントの文字に極めて似る、あるいは配置が完全に同一になることも数多くあります。
多少サイズが大きくなったとしても「その文字であることを見て認識できるものにする」以上は、必然的に重複は発生する。無理に避けようとすれば、歪んだ字形ばかりになってしまう
このような近似や一致を見掛けたとき。安易に「盗作では」「模倣された」と感情的に反応することは、文字やフォントの持つ公益性や可能性を損ないかねず、極めて慎重になるべきと考えています。
文字は情報の伝達に広く用いられる公共性の高いものであり、多少の固有性では「これは私だけが権利を主張できるデザイン」とは認められません。
また表現上の制約が厳しいピクセルフォントでは、文字が似た形や同じ形になるケースが起こることは、必然的ですらあります。
しかし同時に、このことを逆手に取って、既存のレトロゲームなどから文字の形を抜き取り、独自にフォントとして配布してしまうような行為についても、厳に慎むべきだと考えています。
技術的には簡単にフォント化することができます。
製作元が「この文字の形はゲームから盗まれた」と動くケースも多くはないかもしれません。文字の形自体に権利を主張することが難しいためです。
とはいえ、製作元を尊重せずにそのような行為が横行するようになったときの悪影響や懸念は、想像するに難くないでしょう。
法的に守られることが難しい「文字のデザイン」
だからこそ、好き放題にはせず。
しかしまた、過度に権利を主張したり嫌疑をかけず。
互いに尊重し大切にされることを願っています。
ここまでお読みいただき、本当にありがとうございました！
今回は入門編ということで、内容や作る規模を非常に絞り込みました。
そのため、一般的なフォントと比較するとイレギュラーな部分や、足りない部分も数多くあります。その点についてはご了承下さい。
より規模を大きくしたフォントを作成するための考え方や、プロポーショナルな字幅のピクセルフォントの作成など、補足・応用編も書きたいと思っているので、疑問点やご要望などありましたら、お気軽にコメントやご連絡をお寄せください。
またPixelTypeという素晴らしいソフトウェアを開発・リリースして下さった るっちょ氏に、この場を借りて御礼申し上げます。
この記事があなたのピクセルフォント製作の第一歩となれたのなら、とても嬉しく思います。
患者長ひっく
この記事が気に入ったらサポートをしてみませんか？