Chrome拡張機能「WhatFont」で気になるサイトのフォントを調べる方法

Chrome拡張機能「WhatFont」で気になるサイトのフォントを調べる方法

Webデザイナーのうっちーです。
前回に引き続き、今回もWebデザインでとっても役に立つツールを紹介したいと思います。
 
ネットで色んなサイトを見ていると、たまにすごくかっこいいサイトに出会うことってありませんか?
私はしょっちゅうあります。
 
今後の参考にと思い、サイトの構造を見てみたりするのですが、特に気になるのがサイトで使われているフォント。
フォント次第でそのサイトの雰囲気がガラッと変わりますからね〜。
 
ということで今回は、他のWebサイトで使用しているフォントを簡単に調べられる便利機能「WhatFont」を紹介したいと思います。
 
 

WhatFontをGoogle Chromeに追加する

 
WhatFontは、Google Chromeの拡張機能の一つです。
まず、以下からWhatFontをChromeに追加しましょう。
 
WhatFont – Chrome ウェブストア
 

WhatFont - Chrome ウェブストア
WhatFont – Chrome ウェブストア

 
ChromeにWhatFontを追加すると、以下のように検索アドレスバーの横にアイコンが表示されます。
 
検索アドレスバーの横にWhatFontのアイコンが表示される
検索アドレスバーの横にWhatFontのアイコンが表示される

 
 

WhatFontの使い方

 
それでは、当サイトのトップページを例にWhatFontの使い方を解説します。
 
検索アドレスバーの横にあるWhatFontのアイコンをクリックしましょう。
 

WhatFontのアイコンをクリック
WhatFontのアイコンをクリック

 
以下のように「Exit WhatFont」という表示が出れば準備はOKです。
 
「Exit WhatFont」という表示が出る
「Exit WhatFont」という表示が出る

 
あとは、フォントを調べたいテキストの上にマウスオーバーするだけです。
 
テキストの上にマウスオーバーすると、フォントが表示される
テキストの上にマウスオーバーすると、フォントが表示される

 
この場合、「実績」の部分のフォントは「Helvetica Neue」が使われているのが分かりますね。
 
ここでさらにテキストをクリックしてみましょう。
すると、以下のようにさらに詳しくフォントの情報が表示されます。
 
テキストをクリックすると、フォントの詳細情報が表示される
テキストをクリックすると、フォントの詳細情報が表示される

 
いちいちソースコードを見なくても、簡単にテキストの「Size」や「Color」まで確認することができます。
 
 
WhatFontを終了する場合は、再度、検索アドレスバーの横にあるアイコンをクリックしましょう。
 
終了する場合は、検索アドレスバーの横にあるアイコンをクリック
終了する場合は、検索アドレスバーの横にあるアイコンをクリック

 
 

まとめ

 
今回は、Google Chromeの拡張機能「WhatFont」の使い方を解説しました。
Webデザイナーに限らず、サイトを運営している方なら知っておいて損はない機能ですので、気になった方はぜひ使ってみてください。
 
 

 

●認定支援業務の実践&売り上げUP方法なら
「認定支援ビジネス実践会」
 http://nintei.org/jissen/

 

●認定支援ビジネス実践会の情報がLINEに届く!
(既存会員様はご利用いただけません)
友だち追加

 

●公式Facebookページ
https://www.facebook.com/wakasugicpa/