見出し画像

GUIデザインのフォントをつくる

前回GUIデザインにおけるフォントのお話をしましたが、フォントの導入に関しては現実の業務では様々な縛りがあり、実際にはなかなか上手くいかないことのほうが多いのではないでしょうか。

よくあるフォントの悩みとして、

・ライセンスが商用or私用なのかがわからない
・媒体の適用範囲がわからない
(製品への組み込みOK?ラスタライズすればOK?など…)
・WebフォントなどはPV数に依存する
・そもそもフォントを購入できる環境/権限では無い
 ※岩崎は社長のクレジットカードに頼ります。

上記のようなことを考えて悩ましい思いをしたことがある方は多々いると思います。そんな状況に悩むのであれば、自作してしまったほうが全然早くデザインのコントロールも効きやすいのかなあ、と考えております。

有名どころのネットサービスも続々とオリジナルフォントをつくっており、コンセプトを見ているだけでも面白いです。(大規模サービスはブランディングとコストカットの意味合いが大きいですね。)

Youtube(YouTube Sans)

Netflix(Netflix Sans)

Airbnb(Airbnb Cereal)

_____________

Glyphsを使う

自分は「Glyphs」というドイツからやってきた書体制作ソフトをつかっています。「Glyphs mini」という5,000円ほどの廉価版でも必要最低限の機能を備えており、こちらでも十分かと。(無料体験版もあるのです。)

書体デザイナーの大曲都市さんの動画が大変分かり易いチュートリアルになっています。(※大曲さん、いつもありがとうございます!)

_____________

文字種のこと

無尽蔵にフォントの作字はかなり気が滅入ります。GUIデザインで最低限必要だと思う文字種は下記のとおり。

英数字はもちろんなのですが、ソレ以外にも約物(?や!)や記号といった、案外見逃しがちな文字種もあったりするので要注意。それなりの数をつくったらフォントデータ(OTFなど)にパッケージをするのですが「Glyphs mini」なら書き出しも簡単楽ちんちん!
岩崎はIllustratorでチクチクチクチクつくって、そのままGlyphsにコピペしております。また「℃」などの全角でしか対応してない字種に対して別の文字コードを割り当てたりする裏技もできます。(岩崎はバックスラッシュなどに割り当ててます。)

_____________

フォントデザインで考えているところ

フォントを作る際に考えていることは、

-「i」や「j」の字面が持つ点が丸いか四角いか
-「C」や「S」の持つストロークの終わりが開いているか閉じているか
- エレメントが持つ垂直・水平の比率
- Xハイトの高さ

、、などなどを悶々と考えております。

あとはフォントを選びつつ、DINはよく見かけるし、ちょっと無機質だなあ、直線が強いくて少し面白みに欠けるなあ…とか。
FrutigerやMyriadは単語としてのカタマリになったときに柔らかい印象になるけど(ストローク開いている)、GUIで使う数字単体だと存在感が弱いなあ…とか思ったり。

↑フォント制作の過程
最初はDINを改良していって、字面がつまらないなあ、もうちょっとコンデンスドにしたいなあ、Xハイトをあげようかなと、チクチクしました。

岩崎も専門のタイプデザイナーでは無いのでそこまで専門的にフォントをつくれるわけではありませんが、フォントを使うだけでは無くひと手間くわえるだけでも有機的・ユニークなGUIになってくるかと思います。

_____________

岩﨑が働く株式会社モフでは、Webやスマホアプリだけではない広義なGUIデザインについて研究をしながら日々の業務に取り組んでおります。上記以外のノウハウに興味ある方はコーヒーでも飲むついでにオフィスに遊びに来ませんか?
http://moff.jp/join

この記事が気に入ったらサポートをしてみませんか?