ツール

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

WhatFont, 使い方

この記事ではWEBサイトのフォントを調べる「WhatFont」というGoogle Chrome拡張機能の使い方をご紹介します。

ブログを運営しているとデザインの参考として他のブログやサイトを目にする機会も多いかと思います。「このブログすごいオシャレだな」と思うことも一度や二度ではないはず。

パッと見て目を惹かれるのはブログやサイトからはレイアウトなどのデザインだけではなくフォントまで参考にしたいものです。

ただ、毎回ウェブブラウザの検証機能を用いてCSSをチェックするのは大変ですので、気になるフォントが出てきた時はWEBサイトのフォントを調べる「WhatFont」を使ってみましょう。

WEBサイトのフォントを調べる「WhatFont」とは

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

「WhatFont」は表示しているWEBサイトのフォントを簡単に調べることができるGoogle Chromeの拡張機能です。

WhatFontのポイントは何と言っても「2クリック」でフォントが調べられてしまう簡単さです…!通常はブラウザの検証機能と使い、少し複雑な画面を操作しつつ使用しているフォントを見つけなくてはいけませんが、WhatFontを使用すると本当に一瞬でフォントの設定が見れてしまいます。

「WhatFont」の設定方法と使い方

「WhatFont」の設定方法はGoogle Chromeに拡張機能を追加をするだけなのでとても簡単です。

ここではインストール手順や実際にどのように使うのかをご紹介します。

インストール

インストールはChromeウェブストアから行います。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

検索窓に「whatfont」と打ち込んで検索しましょう。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

同じ名前の拡張機能が3つ出てきましたが今回はいちばん上の「WhatFont」を選びましょう。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

「Chromeに追加」をクリックしてください。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

「WhatFontを追加しますか?」と聞かれるので「拡張機能を追加」をクリックします。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

「WhatFontが追加されました」と表示されたらインストール完了です。Chromeのブラウザにアイコンが追加されていることを確認しましょう。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

WEBサイトのフォントを調べる方法

Chromeの右上に表示されている「WhatFont」のアイコンをクリックします。するとカーソルを当てた所のフォント名が表示されるようになります。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

サイトのタイトル文字に近づけると「メイリオ」と表示されました。この状態でクリックをすると、別枠で以下の様にフォントの詳細が表示されます。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧
  1. family:指定フォントが表示できない場合の代替フォント
  2. style:文字のスタイル(参考画像は標準なのでnormalと表示されています)
  3. weight:文字の太さ
  4. size:文字の大きさ
  5. line-height:文字の行間
  6. color:文字の色

このようにフォントの種類だけではなく、本来ソースコードを開かなければわからない細かい装飾情報を1クリックで知ることができます。

文字のないところでクリックすると、bodyタグ、ページ全体に指定されているフォント情報が表示されます。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

特定の文字を調べたい時はドラッグして範囲を指定しましょう。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

「WhatFont」を終了する時は画面右上の「Exit WhatFont」をクリックします。

サイトによっては機能がうまく使えない場合もあるようです。その場合はアイコンをクリックすると以下のような表示になります。

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

WEBデザイン/フォントが秀逸な参考サイト

色々なサイトを見ていると、デザインが綺麗なサイトはフォントにもこだわっていることに気付くのではないでしょうか。

フォントにこだわっている綺麗なサイトデザインを見ると自分のサイトにも取り入れたくなりますよね…!そんな秀逸なサイトをまとめてある参考サイトを今回はいくつかをご紹介します。

是非、WhatFontで使用してるフォントを調べてみて自サイトの参考にしてみてください。

SANKOU!

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

SANKOU!はWEBデザインの参考サイト集です。

WEBサイトだけでなく、ランディングページやコンテンツページなどWEBデザイン全般のオシャレなサイトへのリンクが掲載されています。カテゴリも細かく分かれているので自サイトと同じジャンルのサイトも簡単に探すことができます。

直感的にこのサイトが気になるなと思ったらサイト画像をクリックして参考サイトへ移動し、WhatFontを使ってフォントを調べていきましょう。

LIG

WEBサイトのフォントを調べる『WhatFont』の使い方と秀逸な参考サイト一覧

WEBデザインの綺麗なサイトをまとめたギャラリーサイトをもっと知りたい…!そんな人におすすめなのがLIGというWEB制作会社サイトの記事です。

SANKOU!と同じ様にデザインの綺麗なWEBサイトをまとめたギャラリーサイトが30も紹介されています。

また、一つ一つのサイトに対してLIGの編集者の方のおすすめ度やポイントなどがまとめられているのがありがたいですね。

時間に余裕のある場合は各サイトを順番にチェックしてみても良いと思いますし、パッと気になるサイトを見つけたい場合はコメントを参考に自分の嗜好に合うものを絞っていけば良いですね。

まとめ

Webサイトのフォントを調べる「WhatFont」の設定方法や使い方、そしてフォントを含めたWEBデザインが参考になるサイトをご紹介しました。

「WhatFont」を使うと普段見慣れないフォントがどんなものなのかすぐに調べられるのでとても便利ですよね。

今すぐに自サイトのフォントを変更しないとしても、各フォントとそれらが与えるサイトイメージを知るのは純粋に知的好奇心が満たされます。

記事の後半でご紹介したサイトではWEBデザインが参考になるオシャレなサイトがたくさん見れます。

気になるフォントがあれば「WhatFont」を使って調べながら自分のサイトにも活かしていきましょう。ぜひ、自サイトのコンセプトに合った素敵なデザインを作ってみてくださいね。

PC1台で自由なライフスタイルを実現する無料メルマガ

RELATED POST
『ブログ×外注化』で月40万円を稼ぎ、独立起業するための思考や情報を学ぶメールマガジン
無料登録はコチラ
ブログで月40万円を稼ぎ、自由なライフスタイル目指す無料メルマガ
登録はコチラ