近年、優れたタイポグラフィの作成は、デザインにおいて欠かせない要素になってきました。多くのデザイナーは、「コンテンツ・ファースト」でのユーザーアプローチを重視しはじめたのです。

世界に名を馳せるクリエイティブエージェンシーiAのCEOであるオリバー・ライヒェンシュタイン氏は、Web上の情報の95%は「言葉」であるとしています。その95%の内容をよりよく伝えるために必要なのが、タイポグラフィなのです。

しかしタイポグラフィは、特に新人にとっては簡単に扱えるものではありません。そこで今回は、フォント、フォントの組み合わせとスタイリング、スケール、インスピレーションという4つの項目に沿って、タイポグラフィをよりデザインしやすくするタイポグラフィツールを12個ご紹介します。

フォント選び

タイポグラフィのプロセスは、まずデザインに適したフォントを選ぶところから始まります。フォントはデザイナーがユーザーにメッセージを伝えるときに、非常に重要な役割を果たします。

1. ソート機能も充実!フォントを探すなら:Google Fonts

typographytool-1

フリーフォントをお探しの方にぜひおすすめしたいのが、フォントのコレクションを有するGoogle Fontsです。

紹介されているフリーフォントはなんと、850種類以上。「線の太さ」などのカテゴリーからフォントを検索することも可能です。タイポグラフィを扱う上で、一度試してみても損はないはず。

Google Fonts

2. 既存フォントの名前を知りたい!フォント探しの名探偵:FontFace Ninja

フォント

Webサイトを閲覧していて、「このフォントの名前が知りたい」と思ったことはありませんか?もちろん自力でフォントを探すことも可能ですが、このツールを使えば、はるかに手軽にフォントを探し当てることができます。

FontFace NinjaはGoogle Chromeの無料拡張機能で、閲覧しているWebサイトのフォントを調べてブックマークできます。

FontFace Ninja

3. 飛び抜けてユニーク!伝えたい感情でフォントを探すなら:Emotype

typographytool-3

Emotypeは、Webサイトで伝えたい感情に基づいたフォントを探せるユニークなツールです。

フォントは「自信(confident)」「歓迎(welcoming)」「ユニーク(unique)」「ニュートラル(neutral)」の4つのグループに分類され、カテゴリーごとにフォントを探せます。

Emotype

4. 無ければ作ってしまおう!フォント作成なら:Calligraphr

typographytool-2

もし理想的なフォントが見つからなければ、作ってしまうという方法もあります。Calligraphrを使って手書きの文字をベクターフォントに変換すれば、オリジナルのフォントを簡単に作成できます。

Calligraphr

フォントの組み合わせとスタイリング

通常のプロジェクトには複数のフォントが必要ですが、理想的な組み合わせを見つけるのは簡単ではありません。それぞれのフォントがお互いを補完しあい、ユーザーにとって心地よい環境を作るように気を配る必要があります。フォントの組み合わせもまた、タイポグラフィのデザインにおいて避けては通れない課題です。

5. フォント配置を自動でスタイリングする:Archetypeapp

typographytool-4

複数のフォントを使ったプロジェクトにぜひ活用したいのが、このArchetypeappです。一貫したタイポグラフィのスタイリングと行間調整を実現してくれます。

Archetypeapp

6. フォントの適切な組み合わせを提案する:Font Joy

typographytool-5

Font Joyのスローガンは「フォントの組み合わせをシンプルに」。フォントの適切な組み合わせを提案してくれます。

操作は簡単で、「Generate」で新しいフォントの組み合わせを作成し、「Lock」でフォントをロックし、「Edit」で手動でフォントを選択します。

Font Joy

スケール

理想的なフォントの組み合わせを見つけたら、次は見出しと本文のフォントサイズについて考えましょう。見出しと本文のヒエラルキーを適切に設けることによって、コンテンツ同士の関係をユーザーに伝えることができ、可読性が向上します。

7. フォントの適切な大きさを提案:Material Design Type Scale

typographytool-6

プロダクトのニーズをサポートするさまざまなスタイルを提供しているがこのツール。タイプシステムでサポートされている13のスタイルの組み合わせを提案してくれます。

Material Design Type Scale

8. 定規のようにスケール計算を行う:Modularscale

typographytool-7

定規のように使うことが可能な、スケール計算ツールです。

Modularscale

9. 全体的なスケールを計算して提案する:Type Scale

typographytool-8

こちらもModularscaleと同じく、スケール計算のためのツールです。

基本のフォントサイズを入力してから、ヘッダーや小さい文字のサイズを選択することで操作できます。

Type Scale

インスピレーション

インスピレーションはデザインのプロセスにおいて重要な役割を果たします。インスピレーションなしで魅力的なプロダクトを作ることは難しいでしょう。タイポグラフィについても、必要なデザインだけに縛られず、インスピレーションを得るための時間を作りましょう。

10. 優れたタイポグラフィを見て知見を深めたいなら:Typewolf

typographytool-9

Typewolfは、タイポグラフィのアイデアを集めたサイトです。Webサイトやポスターがどのような仕組みになっているのか知りたいデザイナーにぴったり。

「Site of the day」のセクションからは、毎日異なるインスピレーションを得られます。

Typewolf

11. ポスターからインスピレーションを得たいなら:Typographic posters

typographytool-10

世界中の魅力的なポスターを集めたWebサイトです。優れたデザインの数々は、きっとタイポグラフィのアイデアを刺激してくれるはず。

Typographic posters

12. フォントで遊べるゲーム:Kerntype

typographytool-11

Kerntypeは、なんとツールではなくゲームです。内容はシンプルで、文字間のスペースを分散させることによって、快適で読みやすいテキストを実現するというもの。

ゲームをプレイして、よりよいデザインのアイデアに繋がるインスピレーションを得ましょう。

Kerntype

おわりに

今回ご紹介した12個のツールは、デザインに役立つタイポグラフィツールのうちのほんの一部にすぎません。

既存のフォントを探すためのツールから、オリジナルのフォントを作成するツール、理想的な組み合わせやサイズを提案してくれるツール、そしてインスピレーションを刺激してくれるWebサイト。

フォントを探すことだけにこだわらず、さまざまなサービスを利用して、より魅力的なデザインを目指しましょう。

(原文:Nick Babich 翻訳:Asuka Nakajima)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ