Google Chrome:Webサイトで使われているフォントや色を調べる拡張機能

Webサイトを運営していて、記事を効率よく制作するため、Google Chromeの拡張機能にはとてもお世話になっています。

これまでも、Web制作に役立つ拡張機能をたくさん紹介してきましたが、今回はデザインなどで参考にしたいWebサイトで、どんな色やどんなフォントが使われているのかをサクッと調べられる拡張機能を紹介します。

動作環境

この記事は、以下の環境での動作結果を基にしています。他のエディションやバージョンでは、動作結果が異なる場合があることをご了承ください。

ソフトウェア バージョン
Windows10 Professional 64bit 1809
Google Chrome 72.0.3626.121

WhatFont

WhatFont - Chrome ウェブストア

Webサイトを閲覧していて、かっこいい書体を使っているサイトを発見したときに、そのサイトで使用されているフォントを知りたくなりますよね。

そんな願いをカンタンにかなえてくれるのが「WhatFont」です。

拡張機能をインストールしたら、拡張機能アイコンをクリックしてから、フォントを知りたい箇所にマウスカーソルを合わせると、そこで使われているフォントを表示してくれます。

さらにもう一度クリックすると「Font Family」「Font Weight」「Font Size」「Line Height」「Font Clolor」など、フォントについてのさまざまな情報を確認することができます。

ColorZilla

ColorZilla - Chrome ウェブストア

Webサイトを閲覧していて、かっこいいサイトで参考にしたいところといえば、フォント以外では「色」ではないでしょうか。

そんな時は「ColorZilla」が便利です。

拡張機能をインストールしたら、拡張機能アイコンをクリックしてから、色を知りたい箇所にマウスカーソルを合わせると、そこに使われている色がRGB値やHEX値で表示されます。

さらにもう一度クリックすると、色のHEX値をクリップボードにコピーしてくれます。

あとがき

見やすい文字、統一された配色は、良いWebサイトを制作する上で押さえておきたいポイントではないでしょうか。是非、参考にしたいWebサイトで活用してはいかがでしょうか。

スポンサーリンク
おすすめコンテンツ
トップへ戻る