members

members

自分の文字をフォント化!手書きフォントの作り方

Tweet

みなさんはお気に入りのフォントはありますか?
デザインでも資料でも、フォントが違うだけで印象がガラッと変わりますよね。

ゴシック系・明朝系など様々なフォントがありますが、今回は「手書きフォントの作り方」をご紹介します。

タイトル画像

目次
1.手書き文字を書く
2.データ化して調整する
3.文字をフォント化!

1.手書き文字を書く

まず、白い紙に文字を書きます。
普段文字を書くときは特に気をつける事はないかもしれませんが、
フォント化する時は、以下の3つのポイントを意識して書いてみてください。

●使用するペンは統一する

ペンによる雰囲気の違い

ペンの質感やインクの溜まり方で文字の雰囲気が変わるので、
実際に書いてみて、目指す雰囲気とあったものを選びましょう。

途中でペンを変えると太さやタッチが変わるので注意しましょう。

●文字の大きさにリズムをつける

漢字・ひらがなの大きさにリズムをつける

漢字とひらがな/カタカナのサイズ感を統一しましょう。
漢字を大きく・ひらがなカタカナを小さくしてリズムをつけると、手書きで書いた雰囲気を保つことができます。

●文字の癖を統一する

文字の癖を統一

横画・縦画・角・はね・はらいなど、文字の癖を統一するをように意識して書きましょう。
パーツごとに文字の癖が揃うと、全体的に統一感のあるフォントになります。

2.データ化して調整する

書いた文字をスキャンしてデータ化します。
スキャンするときは、なるべく高解像度(600dpiなど)の設定でスキャンしてください。
解像度の高さで、パスの細かさ・正確さが変わります。

データ化した文字をAdobe Photoshop(以下Photoshop)、Adobe Illustrator(以下Illustrator)で調整していきます。

●文字の色ムラ・濃さを調整

まず、パス化する前に文字の濃さを調整します。
スキャンした画像をPhotoshopで開き、レベル補正で文字の濃さを調整してください。

レベル補正で文字の濃さを調整

今回の場合、スキャンしたままの薄い状態だとアウトラインが綺麗に取れないため、
ペンのムラがなくなる程度に調整してください。

●使う文字をパス化

使う文字を画像として書き出します。
書き出した画像をIllustratorで開き、「画像トレース」の「白黒ロゴ」を選択してパス化します。

書き出し画像をパス化

文字以外の背景などは全て削除し、文字の形や太さなど気になる箇所があれば調整しましょう。
スキャン時に入り込んでしまった「ゴミ」が残らないように気をつけてください。

ここまでで文字が完成しました!
いよいよフォント化していきます。

3.文字をフォント化!

今回はアイコンをフォント化するサイト「icomoon」を使用してフォント化します。
他にもフォントを生成するサービスサイトがいくつかありますが、シェイプが細部まで反映されるこちらのサイトがおすすめです。

●一文字ずつSVGで書き出す

パス化した文字を正方形のアートボードに一文字ずつ配置します。

文字をアートボードに並べる

配置する位置でベースラインが決まるので、ベースラインの取り方はこの時点で意識して配置しましょう。

アートボードごとにSVG形式で書き出しをします。
以下の手順で保存をすると、アートボード1つ1つを画像として保存できます。

「別名で保存>ファイル形式:SVG>アートボードごとに作成 にチェック>保存>設定は変えずにOK」

アートボードごとにSVG形式で保存

●SVGをサイトにアップロード

icomoonのプロジェクト管理画面で、「New Project」をクリックしてプロジェクトを制作し、「Load」をクリックします。

プロジェクトを制作する

プロジェクトを制作したら、SVGデータをインポートします。
選択画面に移動し、画面左上の「Import Icon」ボタンをクリックしてください。
先ほど制作したSVG画像を全て選択し「開く」をクリックすると、まとめてインポートができます。

SVG画像をまとめてインポート

SVG画像を取り込んだら、
全ての文字(フォントにしたい文字)を選択してアクティブにしてください。

フォント化する文字を選択

選択した文字のみがフォント化され、未選択の文字はフォントに組み込まれません。

フォント生成画面に移動して、SVG画像に文字を割り当てます。
SVG画像に対して、該当する文字を入力してください。

画像に文字を割り当てる

ここまでで文字の登録が完了しました。

●最後に生成して完成!

フォントを生成する前に、今回制作したフォントの名前を設定します。
画面左上の「Preferences」ボタンをクリックし、「Font Name」にフォント名を入力してください。(何度でも変更できます。)

フォント名を設定

設定が終わったら、いよいよ生成します!
フォント生成画面のタブにある「Download」をクリックし、ダウンロードします。

フォントをダウンロード

生成されたZIPファイルから、ttfデータをインストールして完了です!

フォント完成

いかがだったでしょうか?
皆さんも是非自分だけのフォントを制作してみてください!

参考

アイコンフォントが手軽に使える「IcoMoon」の使い方

コラム執筆

  • 谷地 みなみ(やち みなみ)
  • 2017年4月入社。第1ビジネスユニット アカウントサービス第13ユニット所属。
  • デザイナーとして日々勉強中!