今回は、「フォント」に関するおすすめのツールをご紹介したいと思います。
重要なデザインリソースの一つである「フォント」。皆さんはどのように情報を集めていますか？フォントが変わるだけで、印象がガラッと変わりますよね。これからフォントを学びたい人や情報源が多くどのフォントを選んでいいのかわからない使ってみたいけど情報が多くてわからないという方向けに、便利なフォントのWebサービス、ブラウザの拡張機能をご紹介します。
フォントを比較したい方へ 1. Wordmark.it <img class="alignnone size-full wp-image-31554" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/a3fab891cb85b1024ae0f02765de24fb.png" alt="" width="1427" height="772" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/a3fab891cb85b1024ae0f02765de24fb.png 1427w, https://goodpatch.com/blog/wp-content/uploads/2018/05/a3fab891cb85b1024ae0f02765de24fb-768x415.png 768w" sizes="(max-width: 1427px) 100vw, 1427px" /> Wordmark.it は、現在利用しているPCにインストールされているフォントを抽出し、インストールされているフォントで入力したキーワードを表示させることができます。一目でフォントの比較をすることができるため、このページを見せながら、ロゴなどのディスカッションをすると、よりイメージが湧きやすく議論が弾みます。Goodpatchメンバーもオススメのサービスです！
2. iOS Fonts <img class="alignnone size-full wp-image-31552" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/387ad4711a8b937b15cc444aa4d6470a.png" alt="" width="998" height="690" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/387ad4711a8b937b15cc444aa4d6470a.png 998w, https://goodpatch.com/blog/wp-content/uploads/2018/05/387ad4711a8b937b15cc444aa4d6470a-768x531.png 768w" sizes="(max-width: 998px) 100vw, 998px" /> iOS Fonts はiOSで使えるフォントの一覧を表示することができるサービスです。バージョン別でインストールされているフォントも検索でき、iOS SDK 3 からSDK 9まで選択できます。Previewのテキストボックスに文字を入力すると、フォントが表示されどのiOSバージョンまで適応されるか一目で確認することが可能です。iOSのアプリデザイン、開発をしている方にオススメです。
3. Fontface Ninja (Google Chrome 拡張機能） <img class="alignnone size-full wp-image-31559" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/a9edb684b0cb741add780ed5ef2fe7a9.png" alt="" width="1159" height="474" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/a9edb684b0cb741add780ed5ef2fe7a9.png 1159w, https://goodpatch.com/blog/wp-content/uploads/2018/05/a9edb684b0cb741add780ed5ef2fe7a9-768x314.png 768w" sizes="(max-width: 1159px) 100vw, 1159px" /> Fontface Ninja はWebサイト上のフォントにカーソルを合わせると、フォントの種類やサイズ、色を確認することができるGoogle Chromeの拡張機能です。そのWebサイトで利用されているフォントが何なのか、行間、ポイント数などを知ることができます。また、テキストスペースに打ち込めば、そのサイトで利用しているフォントで表示され、サイズ感や行間などをすぐに試すことが可能です。
<img class="alignnone size-full wp-image-31558" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/30a1e5e5590343d885ce8a6947bec97c.png" alt="" width="1126" height="486" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/30a1e5e5590343d885ce8a6947bec97c.png 1126w, https://goodpatch.com/blog/wp-content/uploads/2018/05/30a1e5e5590343d885ce8a6947bec97c-768x331.png 768w" sizes="(max-width: 1126px) 100vw, 1126px" /> さらに、Fontface Ninjaでは選択したフォントのダウンロードページへ誘導してくれます。わざわざ自分で検索する必要がなく、その場で価格もわかるのでとても便利です。
4. Font Changer with Google Web (Google Chrome 拡張機能） <img class="alignnone size-full wp-image-31565" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/41694102ff992c66fdfaac9ca44b3a6b.png" alt="" width="1000" height="571" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/41694102ff992c66fdfaac9ca44b3a6b.png 1000w, https://goodpatch.com/blog/wp-content/uploads/2018/05/41694102ff992c66fdfaac9ca44b3a6b-768x439.png 768w" sizes="(max-width: 1000px) 100vw, 1000px" /> Font Changer はGoodle Chrome上で表示しているWebサイトのフォントを一律に変更することができる拡張機能です。「Global Font」では、全てのChromeページのフォントを変更でき、「Site Specific Font」では現在表示されているChromeページのフォントのみ変更できます。 特定のサイトのフォントを自分好みで表示したい、違うフォントを試してみたいなど様々なシーンで役立ちます。
フォントの引き出しを増やしたい方へ 5. Font in Use <img class="alignnone size-full wp-image-31555" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/cfe02d7e18cff1374ccf0cb5ccefb642.png" alt="" width="963" height="741" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/cfe02d7e18cff1374ccf0cb5ccefb642.png 963w, https://goodpatch.com/blog/wp-content/uploads/2018/05/cfe02d7e18cff1374ccf0cb5ccefb642-768x591.png 768w" sizes="(max-width: 963px) 100vw, 963px" /> Fonts in Use は過去実際に作られた作品を閲覧することができる人気のWebサービスです。検索の性能がすばらしく、で過去のアーカイブをカテゴリー別に閲覧も可能です。
<img class="alignnone size-full wp-image-31564" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/fba0e0599ef485661e8837584f2ccb70.png" alt="" width="971" height="620" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/fba0e0599ef485661e8837584f2ccb70.png 971w, https://goodpatch.com/blog/wp-content/uploads/2018/05/fba0e0599ef485661e8837584f2ccb70-768x490.png 768w" sizes="(max-width: 971px) 100vw, 971px" /> 例えば業界の「食品/飲料」を選択すると、アイスクリームやパンに使われてるパッケージのフォントのデザインを30種類以上の業種、20種類の媒体からフィルタリングして検索ができます。
それぞれの業界でどんなフォントを使用しているのかを瞬時に検索できるとても便利なサービスです。新しいアイディアをインプットしたいときにぜひ活用してみてはいかがでしょうか？
6. Font Combinations <img class="alignnone size-full wp-image-31556" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/c3eca021e9c3d0a86847de1156c497b7.png" alt="" width="1365" height="695" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/c3eca021e9c3d0a86847de1156c497b7.png 1365w, https://goodpatch.com/blog/wp-content/uploads/2018/05/c3eca021e9c3d0a86847de1156c497b7-768x391.png 768w" sizes="(max-width: 1365px) 100vw, 1365px" /> Font Combinations は使いたいフォントを選択すると、そのフォントと相性の良いフォントをレコメンドしてくれるサービスです。
見出しと本文をどのフォントで組み合わせるか悩んでいるときにおすすめです。その組み合わせが実際に使われているWebサイトも掲載されているのでフォント同士の相性の引き出しを増やしたい際などにぜひ使ってみてください。
7. Typ.io <img class="alignnone size-full wp-image-31710" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/02.png" alt="" width="1092" height="919" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/02.png 1092w, https://goodpatch.com/blog/wp-content/uploads/2018/05/02-768x646.png 768w" sizes="(max-width: 1092px) 100vw, 1092px" /> Typ.io は実際にリリースされているWebサイトのフォントやデザインを新しい順に閲覧することができます。どんなフォントが今、トレンドなのか知りたい方、見出しと本文に使うフォントの組み合わせに迷っている方におすすめのWebサービスです。ページ下部では、サイトで使われているCSSの情報とフォントの購入サイトへのリンクも掲載されています。
<img class="alignnone size-full wp-image-31562" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/e363055546cab336b20aec3812eabd01.png" alt="" width="638" height="359" /> 右上のSearchからは「人気のフォント、人気のタグ、フォントサービス」を検索することもできます。最近人気のフォントを探してみてください！
8. Tyepespiration <img class="alignnone size-full wp-image-31567" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/b5b9220449550e5919dbe101ff1f679a-1.png" alt="" width="1355" height="737" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/b5b9220449550e5919dbe101ff1f679a-1.png 1355w, https://goodpatch.com/blog/wp-content/uploads/2018/05/b5b9220449550e5919dbe101ff1f679a-1-768x418.png 768w" sizes="(max-width: 1355px) 100vw, 1355px" /> Tyepespiration では フォントの見出しや本文の組み合わせの他に、フォントの色や背景色を合わせて比較することができます。
<img class="alignnone size-full wp-image-31563" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/d1303ee5498ece994eceee4b631133ed.png" alt="" width="1032" height="579" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/d1303ee5498ece994eceee4b631133ed.png 1032w, https://goodpatch.com/blog/wp-content/uploads/2018/05/d1303ee5498ece994eceee4b631133ed-768x431.png 768w" sizes="(max-width: 1032px) 100vw, 1032px" /> “Basegrid”を選択すると、表示されているページのフォント情報が表示されます。font-sizeの他に、font-weight, line-height, margin, letter-spacingも確認することができます。
<img class="size-full wp-image-31548 aligncenter" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/FireShot-Capture-10-Sand-typespiration.com-http___typespiration.com_design_sand_.png" alt="" width="447" height="623" />
“Quick Use” を選択すると、そのサイトで使われているHTMLやCSSの記述が表示されますのでぜひ参考にしてみてください。
新しいフォントと出会いたい方へ 9. GoogleFont <img class="alignnone size-full wp-image-31553" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/c064397a373207b131c908b5326b288f.png" alt="" width="1431" height="763" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/c064397a373207b131c908b5326b288f.png 1431w, https://goodpatch.com/blog/wp-content/uploads/2018/05/c064397a373207b131c908b5326b288f-768x409.png 768w" sizes="(max-width: 1431px) 100vw, 1431px" /> GoogleFont は、Googleが提供する完全無料・登録不要のWebフォントサービスです。Webフォントは、ダウンロードするのではなく、フォントデータをサーバーから読み込み、ブログやWebサイトに表示させることができるフォントです。 Windows, Android, Mac, iPhone などの端末に標準搭載されているフォントしか、Webページには表示させることができません。しかしWebフォントを使用すると、どの端末でも共通のフォントを表示させることができます。日本語のフォントはまだ少ないため、英数字の利用に特にオススメです。
10. DESIGNCUTS <img class="alignnone size-full wp-image-31549" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/FireShot-Capture-11-You-searched-for-Font-Design-Cuts-Design-Cuts_-https___www.designcuts.com_.png" alt="" width="1089" height="1200" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/FireShot-Capture-11-You-searched-for-Font-Design-Cuts-Design-Cuts_-https___www.designcuts.com_.png 1089w, https://goodpatch.com/blog/wp-content/uploads/2018/05/FireShot-Capture-11-You-searched-for-Font-Design-Cuts-Design-Cuts_-https___www.designcuts.com_-768x847.png 768w" sizes="(max-width: 1089px) 100vw, 1089px" /> DESIGNCUTS は世界中のトップデザイナーたちが厳選した素材やフォントを最大99%オフで購入することができます。定期的にセールが開催されており、以前は18万円分の有料フォントや素材を約200円で購入することもでき、話題になりました（参考: https://coliss.com/articles/products/2-dollar-holiday-extravangaza-bundle.html ）。これらのフォントやデザイン素材はWebデザイン、動画、ゲーム、紙、アプリのデザインなどに利用でき、商用利用も可能です。会員登録をすると、新しいフォントの商品やセール情報が届くのでチェックしてみてください。
日本語サイト
11. フロップデザイン <img class="alignnone size-full wp-image-31551" src="https://goodpatch.com/blog/wp-content/uploads/2018/05/70aa8883a6cf804d3dd2eab43ac6916c.png" alt="" width="1387" height="972" srcset="https://goodpatch.com/blog/wp-content/uploads/2018/05/70aa8883a6cf804d3dd2eab43ac6916c.png 1387w, https://goodpatch.com/blog/wp-content/uploads/2018/05/70aa8883a6cf804d3dd2eab43ac6916c-768x538.png 768w" sizes="(max-width: 1387px) 100vw, 1387px" /> フロップデザイン は、バラエティ豊富なフォント紹介サイトです。 ポップな手書き風フォント、コミカルなオノマトペ風の日本語フォント、ゴシックな筆記体、欧文フォント、漢字まで様々な種類のフォントがあります。会員登録をすることでこれらのフォントを無料でダウンロードをすることができます（商用不可）。商品への利用、デザイン料など金銭の発生する使用、ビジネス用のサイト・動画への利用などの場合には製品版もあるようです。自分の作りたいデザインにあったフォントを探してみてはいかがでしょうか？
新しいツールを見つけることはできましたか？ぜひこれからのフォントのインプットに活用してみてください。
Goodpatch Blogではデザインを勉強している方へ様々な記事をご紹介してきました。
新人デザイナー必見！ときめきとひらめきの源、デザインリソースで作業を効率化しよう
引き出しを増やそう。初心者が配色のインスピレーションを得られるツール9つ
日頃のインプットから自分の中に多くの引き出しを作り、そこから手を動かしてアウトプットすることがデザインのスキルの向上への一歩だと思います。 今後もGoodpatch Blogでは様々な役立つデザインのツールやTIPSを紹介しますのでぜひチェックしてください！
“Basegrid”を選択すると、表示されているページのフォント情報が表示されます。font-sizeの他に、font-weight, line-height, margin, letter-spacingも確認することができます。
