フォント選びに悩んでいる方へ。インプットの引き出しを増やすおすすめフォントツール

2018.5.25

今回は、「フォント」に関するおすすめのツールをご紹介したいと思います。

重要なデザインリソースの一つである「フォント」。皆さんはどのように情報を集めていますか？フォントが変わるだけで、印象がガラッと変わりますよね。これからフォントを学びたい人や情報源が多くどのフォントを選んでいいのかわからない使ってみたいけど情報が多くてわからないという方向けに、便利なフォントのWebサービス、ブラウザの拡張機能をご紹介します。

フォントを比較したい方へ
フォントの引き出しを増やしたい方へ
新しいフォントと出会いたい方へ

フォントを比較したい方へ

1. Wordmark.it

Wordmark.itは、現在利用しているPCにインストールされているフォントを抽出し、インストールされているフォントで入力したキーワードを表示させることができます。一目でフォントの比較をすることができるため、このページを見せながら、ロゴなどのディスカッションをすると、よりイメージが湧きやすく議論が弾みます。Goodpatchメンバーもオススメのサービスです！

2. iOS Fonts

iOS FontsはiOSで使えるフォントの一覧を表示することができるサービスです。バージョン別でインストールされているフォントも検索でき、iOS SDK 3 からSDK 9まで選択できます。Previewのテキストボックスに文字を入力すると、フォントが表示されどのiOSバージョンまで適応されるか一目で確認することが可能です。iOSのアプリデザイン、開発をしている方にオススメです。

3. Fontface Ninja (Google Chrome 拡張機能）

Fontface NinjaはWebサイト上のフォントにカーソルを合わせると、フォントの種類やサイズ、色を確認することができるGoogle Chromeの拡張機能です。そのWebサイトで利用されているフォントが何なのか、行間、ポイント数などを知ることができます。また、テキストスペースに打ち込めば、そのサイトで利用しているフォントで表示され、サイズ感や行間などをすぐに試すことが可能です。

さらに、Fontface Ninjaでは選択したフォントのダウンロードページへ誘導してくれます。わざわざ自分で検索する必要がなく、その場で価格もわかるのでとても便利です。

フォントの引き出しを増やしたい方へ

4. Font in Use

Fonts in Useは過去実際に作られた作品を閲覧することができる人気のWebサービスです。検索の性能がすばらしく、Industries（業種）・Formats（媒体）・Typefaces（フォント）別で過去のアーカイブをカテゴリー別に閲覧も可能です。

例えば業界の「食品/飲料」を選択すると、アイスクリームやパンに使われてるパッケージのフォントのデザインを30種類以上の業種、20種類の媒体からフィルタリングして検索ができます。

それぞれの業界でどんなフォントを使用しているのかを瞬時に検索できるとても便利なサービスです。新しいアイディアをインプットしたいときにぜひ活用してみてはいかがでしょうか？

5. Typ.io

Typ.ioは実際にリリースされているWebサイトのフォントやデザインを新しい順に閲覧することができます。どんなフォントが今、トレンドなのか知りたい方、見出しと本文に使うフォントの組み合わせに迷っている方におすすめのWebサービスです。ページ下部では、サイトで使われているCSSの情報とフォントの購入サイトへのリンクも掲載されています。

右上のSearchからは「人気のフォント、人気のタグ、フォントサービス」を検索することもできます。最近人気のフォントを探してみてください！

6. Tyepespiration

Tyepespirationではフォントの見出しや本文の組み合わせの他に、フォントの色や背景色を合わせて比較することができます。

“Basegrid”を選択すると、表示されているページのフォント情報が表示されます。font-sizeの他に、font-weight, line-height, margin, letter-spacingも確認することができます。

“Quick Use” を選択すると、そのサイトで使われているHTMLやCSSの記述が表示されますのでぜひ参考にしてみてください。

新しいフォントと出会いたい方へ

7. GoogleFont

GoogleFontは、Googleが提供する完全無料・登録不要のWebフォントサービスです。
Webフォントは、ダウンロードするのではなく、フォントデータをサーバーから読み込み、ブログやWebサイトに表示させることができるフォントです。
Windows, Android, Mac, iPhone などの端末に標準搭載されているフォントしか、Webページには表示させることができません。しかしWebフォントを使用すると、どの端末でも共通のフォントを表示させることができます。日本語のフォントはまだ少ないため、英数字の利用に特にオススメです。

8. DESIGNCUTS

DESIGNCUTSは世界中のトップデザイナーたちが厳選した素材やフォントを最大99%オフで購入することができます。定期的にセールが開催されており、以前は18万円分の有料フォントや素材を約200円で購入することもでき、話題になりました（参考: https://coliss.com/articles/products/2-dollar-holiday-extravangaza-bundle.html）。これらのフォントやデザイン素材はWebデザイン、動画、ゲーム、紙、アプリのデザインなどに利用でき、商用利用も可能です。会員登録をすると、新しいフォントの商品やセール情報が届くのでチェックしてみてください。

9. フロップデザイン

フロップデザインは、ひらがな・カタカナ等が100万種類以上あるバラエティ豊富なフォント紹介サイトです。
ポップな手書き風フォント、コミカルなオノマトペ風の日本語フォント、ゴシックな筆記体、欧文フォント、漢字まで様々な種類のフォントがあります。会員登録をすることでこれらのフォントを無料でダウンロードをすることができます（商用不可）。商品への利用、デザイン料など金銭の発生する使用、ビジネス用のサイト・動画への利用などの場合には製品版もあるようです。自分の作りたいデザインにあったフォントを探してみてはいかがでしょうか？

新しいツールを見つけることはできましたか？ぜひこれからのフォントのインプットに活用してみてください。

Goodpatch Blogではデザインを勉強している方へ様々な記事をご紹介してきました。