誰でも簡単!自作フォント作成の「PaintFont」が、あまりにも手軽だったのでフォントを作ってみました

PaintFont.comというフォント作成サービスを最近知りました。

このサービスは、手書きの文字でも、イラストレーターなどで作成した文字でも、無料で手軽にフォントに変換してくれるサービスです。

僕も、以前からちょっとフォントの作成に興味があったので、試しに作ってみることにしました。

photo by Connie Ma

スポンサーリンク
レクタングル(大)広告

フォント作成の主な手順

PaintFontでフォントを作成するのに必要な、主な手順は以下の6手順です。

  1. 必要な文字を追加して選択
  2. 不要な文字を削除
  3. テンプレートをダウンロード
  4. テンプレートにフォントとなる文字を書き込む
  5. 文字を書き込んだテンプレートファイルをアップロード
  6. フォーマットを選んでフォントを作成

これだけの手順がありますが、半角英数字のみのフォント作成でしたら、30分ほどで作ることができました。

※今回僕は、マウスで結構適当に文字を書いたので30分で済みましたが、丁寧に作ると、もっと時間がかると思います。

では、一つ一つの手順を説明します。

必要な文字を追加して選択

PaintFont.com

まずは、PaintFontにアクセスして、必要な文字を選択します。

  1. チェコ語
  2. ドイツ語
  3. ギリシャ語
  4. スペイン語
  5. フランス語
  6. イタリア語
  7. ポーランド語
  8. ヘブライ語
  9. ポルトガル語
  10. スカンジナビア語
  11. 日本語(ひらがな、カタカナなど、漢字は少ない)
  12. トルコ語
  13. キリル文字
  14. 合字
  15. 算術文字
  16. 句読点文字

使用する文字の選択

これらの文字の中から、使用したい文字を選択すると、以下のデフォルトの文字に

デフォルトの文字

追加されます。

文字を追加

日本語には、ひらがな、カタカナ、漢字などもありますが、漢字はかなり少なくこれだけです。

追記:コメントにて教えていただいたのですが、カタカナの「エ」と「ッ」の文字も無いようです。海外サイトとはいえ、カタカナ二文字が足りないという、少し残念な状態になっています。

追記(2015年11月):「エ」「ッ」「ヰ」「ヱ」の文字は追加されたようです。「ゐ」「ゑ」はまだないようです。
「PaintFont」に新しく追加されたフォント

追記(2016年1月):「ゐ」「ゑ」も追加されました。
「ゐ」「ゑ」

日本語の漢字

とりあえず、半角英数字でよく利用する文字だけを選びたい場合は、デフォルトの文字セットと、「Mathmatics(算術文字)」と「Punctuation marks(句読点系の文字)」を選択しておけばOKだと思います。

半角英数字でよく利用する文字列

プログラムなどで利用する文字などは、たいていこれでカバーできます。

不要な文字を削除

使えそうなフォントセットを追加したら、使用しないフォントも削除することもできます。

文字をクリックすると削除

クリックすると、確認もなしに削除されるので注意してください。

テンプレートをダウンロード

文字の設定が済んだら、テンプレートを作成しダウンロードします。

ダウンロード前に、以下のようなアドバンス設定をすると手軽に利用できます。

  1. 「Show Advanced Setting」でアドバンス設定を開く
  2. 「Output Format(出力フォーマット)」をPNGを選択
  3. 「Creatr template(テンプレート作成)」ボタンを押す

テンプレートの作成

「テンプレート作成」を押すと、PNGファイルがZIPファイルに圧縮されて、ダウンロードされます。(※1つのPNGファイルのみの時は、圧縮されません)

font_template_20150204_0310

テンプレートにフォントとなる文字を書き込む

ZIPを解凍すると、文字数に応じて、以下のようにPNGファイルテンプレートが作成されています。

作成されたPNGファイル

1つのテンプレートにつき、最大64文字です。

こんな感じのテンプレートです。

font_template_20150204_031001

これに、文字を書き込んでいきます。(※選択した文字が多少違うので、上のものと配置は違いますが、やることは同じです)

テンプレートに文字を書き込む

僕の場合は、マウスで書きましたが、「ペンタブレットなどで書いて、自分の筆跡のフォントを作成する」とか、「筆で書いた文字を合成する」とかすると面白いのではないかと思います。

もちろん、イラストレーターや、フォトショップなどを用いてガッツリ作成してもOKです。

文字を書き込んだテンプレートファイルをアップロード

すべての文字を書き込んだら、次は、PNGファイルをアップロードします。

アップロードするには「Upload filled out templates」タブを選択します。

アップロードタブを選択

PDFでなく、PNGファイルでフォントを作成する場合は、「Add auther upload field(アップロードフィールドを追加)」ボタンを押して、必要なだけの、アップロードフォームを表示させます。

そして、表示させたアップロードフォームに、テンプレートに文字を書き込んだPNGファイルをセットします。

PNGファイルをすべてセットする

ダウンロードしたテンプレートにQRコードがない場合は、アップロードに失敗する可能性があります。詳しくは、名無しさんのコメントを参照してください。

フォーマットを選んでフォントを作成

あとは、最後の仕上げの設定です。

フォント作成時の設定は、以下のようなものがあります。

  • Font name(フォントの名前を設定)
  • Font file format (OpenTypeフォントか、TrueTypeフォントか)
  • Basis font file (追加のテンプレートがある場合)
  • Font Family Name (記入しないとFont nameと同じものになる)
  • Copyright notice (著作権表記)

フォント作成前の設定

OpenTypeフォントと、TrueTypeフォントとの違いは、以下に詳しく書かれています。

TrueTypeとOpenTypeの違いを一言で言えば「形式の違い」です。 どちらもWindowsやMacの中でフォントとして機能する点では同じですが、TrueTypeのほうが歴史が長く、広く普及済みのフォント形式。一方、OpenTypeのほうはTrueTypeの弱点を大きくカバーした新たな形式で、高機能かつ余裕のあるフォント形式となっています。

TrueTypeとOpenType – フォント専門サイト fontnav

「Send File」ボタンを押すと、フォントが作成されダウンロードできるようになります。

フォントのダウンロード

完成品「ブレ字フォント」

このような手順で完成したのが以下の「ブレ字フォント」です。ただマウスで書いて文字がブレまくっているので「ブレ字」です。

Bureji ttf fontimage

自分で作っておいて言うのもなんですが、酷いフォントです。

以下からダウンロードできます。

ダウンロードファイルを解凍後、フォントをダブルクリックすると、以下のようなフォームが表示されるので、「インストール」ボタンを押すとインストールされます。

ブレ字をインストール

試しにテキストエディターに設定

ただ、せっかく作ったのでSublime Textに、以下のようにフォントを設定してみました。

実際にエディターに表示させてみると、ひどさが際立つます。

かつて、これほど酷いフォントがあっただろうか。いやない。

CSSの表示

ブレ字

ブレ字でCSS表示

Ricty Diminished

先日紹介した、プログラミング用フォントのRicty Diminishedだとこんな感じ。

Ricty Diminished適用後のCSS

PHPの表示

ブレ字

ブレ字でPHP表示

Ricty Diminished

Ricty Diminishedだとこんな感じ。

Ricty Diminished適用後のPHP

自作フォントを使ってみて

ちゃんと作ってないから、読みにくいったらありゃしないです。

日本語のフォント部分は、通常のフォントなんですけど、日本語部分までおかしな文字に見えてしまいます。そして果ては、正しい英数字フォントまでゲシュタルト崩壊を起こし出しました。

自分で多少やってみたことで、ちゃんと作成されているフォントの凄さを身にしみて感じました。

今回の「ブレ字」のようなフォントでプログラムは絶対したくないです。

まとめ

今回作成したフォントの出来はさておき、上記の方法で、僕のような素人でも30分ぐらいで半角英数字フォントを作成することができました。

ペンタブレットや、印刷してサインペンなどで、テンプレートを記入し、それぞれの筆跡のフォントを作ったりするのも面白そうです。(日本語の漢字は少ないけど)

今回のPaintFontは、世界に1つだけしかない、自分だけのフォントを”手軽”に作成するには、かなり便利なサービスだと思います。

『誰でも簡単!自作フォント作成の「PaintFont」が、あまりにも手軽だったのでフォントを作ってみました』へのコメント

  1. 名前:いしゃま 投稿日:2015/09/06(日) 02:46:37 ID:3f4ca82c3

    paintfont、試させていただきました。
    ちょうどいい機会だったのでひらがなとカタカナのフォントを作ろうとしたのですが、2つのカナ文字(エ&ッ)が日本語を選択しても候補のフォームに出てこないという残念な結果になってしまいました。
    ひらがなフォントだけなら現状でも問題なく作れるようです。

  2. わいひら 名前:わいひら 投稿日:2015/09/06(日) 20:49:11 ID:59bfa35a3

    えっ!そうだったんですね。
    海外のサイトとはいえ、それはちょっと残念な結果ですね^^;
    漢字ならまだしも、カタカナが無いのは痛いですね。
    本文中に追記しておこうと思います。
    教えていただき、ありがとうございます!

  3. 名前:いしゃま 投稿日:2015/09/07(月) 22:08:00 ID:6e38b454b

    本文に追記ありがとうございます。

    当該サイトに「エ」「ッ」の追加の要望を送ってあります。
    基本的な文字なので追加をお願いしたいと。

    「ゐ」「ゑ」「ヰ」「ヱ」についても
    古典的仮名文字(Traditional Japanese characters) として
    追加を要望しました。
    #こちらは追加してくれるとうれしいなー、程度で。

    反映されるといいなぁ。

  4. わいひら 名前:わいひら 投稿日:2015/09/08(火) 13:05:54 ID:ae9b91e56

    おお!それは嬉しい!
    古典的仮名文字があれば、表現の幅も広がるのでできれば、全部採用して欲しいですね。

  5. 名前:名無しさん 投稿日:2015/11/24(火) 04:55:11 ID:c5e2584c8

    「エ」「ッ」「ヰ」「ヱ」は追加されたようです。
    「ゐ」「ゑ」は追加されてないですね

  6. わいひら 名前:わいひら 投稿日:2015/11/24(火) 15:30:50 ID:827893e20

    本当だ。追加されてますね!
    本文中に追記しておこうと思います。
    ありがとうございます!

  7. 名前:名無しさん 投稿日:2016/01/27(水) 15:00:34 ID:ab082ec96

    テンプレートが5枚以上になったときに、アップロード失敗してしまうのですが
    何か良い方法を知っている方いらっしゃいますか?

  8. わいひら 名前:わいひら 投稿日:2016/01/27(水) 18:03:36 ID:d7b2f9950

    すいません。僕はちょっとわからないです。ググっても、解決方法などは出てこないようなので、運営元に問い合わせるしかないかもしれません。

  9. 名前:名無しさん 投稿日:2016/02/03(水) 11:13:40 ID:08ff42f8b

    アップロードができない件について
    おそらくダウンロードしたテンプレートにQRコードがないからでしょう。自分も同じ現象です。

    もう少し詳しく説明しますと、日本語テンプレートをPNG形式でダウンロードし、ZIPファイルを解凍すると数枚のPNGファイルに展開されますが、後ろから3枚分のファイルには右上のQRコードがありません。最後に二枚にいたってはテンプレートの枠すらない有様です。
    おそらくダウンロードした時点でデータが壊れているのでしょう。

    QPコードがついているファイルのみアップロードすれば一応フォントは作れます。
    自分の場合は数字とひらがなはすべてOK、カタカナは「ラリル」までという謎フォントになりました。
    おもにひらがなだけ使いたいのでセーフといえばセーフですが…

    ちなみに「ゐ」「ゑ」、追加されていましたよ。

  10. わいひら 名前:わいひら 投稿日:2016/02/03(水) 12:06:52 ID:3e9757616

    なるほど!そういうことだったんですね。
    どおりで僕の場合は、半角英数字だけで作ったので、出なかったのも納得です。
    「ゐ」「ゑ」が追加されたのもありがたいですけど、そちらもぜひ直して惜しいところですね。
    本文中に追記させていただきました。
    教えていただきありがとうございます!

  11. 名前:名無しさん 投稿日:2016/02/10(水) 22:15:02 ID:8a6b7b388

    アルファベットとひらがなを手書きで作ったのですが、Office2010のWordやExcelで使ってみると、アルファベットだけ変わってひらがなを変えることが出来ません。opentypeにしても無理でした。

  12. わいひら 名前:わいひら 投稿日:2016/02/11(木) 12:51:13 ID:22a075e22

    こちらの方などは、ひらがなが使えているので、作成は大変ですが理由は特に問題ないものかと思っていました。
    自力でフォント作ってみた。 – YouTube

    と言うか、もしかして「Office2010のWordやExcelの固有環境で日本語入力が変換できない症状」と言うことでしょうか。