WEBデザイナーはもちろん、WEB業界に携わっていると、あるサイトの配色が気に入ったり、このサイトのデザインを参考にしたいと思うこともあるでしょう。それらを調査するには、開発者向けのデベロッパーツールなどを活用して、サイトに使用されているフォントやカラーコードを調べたり、レイアウトが気になる場合は、余白のサイズなどを調べる必要があります。
Google Chromeのデベロッパーツールについては、下記の記事をご覧ください。
ウェブサイトの構造（HTML）や適用されているスタイル（CSS）を確認するには、デベロッパーツールが便利です。構造がわかれば、一部を編集して簡単にテスト・検証することも可能です。 そこで当記事では、Google Chromeのデベロッパーツールの基本的な使い方を解説いたします。 基本的な...
しかし、デベロッパーツールでは、高機能なゆえに必要以上の情報が表示され、目をくらまされることもあります。初心者にとっては見た目もごちゃごちゃっとしていて、直感的に操作できるツールとは言い難いでしょう。
そこで今回は、直感的でよりスマートにWebデザインに関する情報を調べることのできるGoogle Chromeの拡張機能「CSS Peeper」をご紹介いたします。
「CSS Peeper」のインストール
このツールは、Google Chromeの拡張機能ですので、事前にブラウザ「Google Chrome」をダウンロードしておく必要があります。「CSS Peeper」については、ブラウザで検索して公式サイトから「Chromeに追加」を選んでいただくか、下記のボタンから公式サイトへジャンプしインストールすることが可能です。
「CSS Peeper」の使い方
Chromeに追加できると、Chromeの画面右上に下記のアイコンが表示されますので、クリックして起動します。
調べたいサイト上で起動すると下記のようなコンパクトなウィンドウが表示されます。
サイトの基本情報が表示されるデフォルトの画面
デフォルトで表示されている上記の「GENERALタブ」では、サイトの基本情報が表示されます。上から順に説明いたします。
- サイトのOGP画像（SNS上で表示されるサムネイル画像）
- タイトル
- 見出しに使われているフォントファミリー
- bodyに使われているフォントファミリー
- CSSファイルの容量、読み込み時間
サイト全体の配色の調べ方
2つ目の「COLORSタブ」（水玉のアイコン）を選択すると自動でカラーパレットが生成され、サイト全体の配色を瞬時に把握することができます。
この画面に表示されている気になるカラーコードは、任意のカラーパレットにカーソルを合わせて下記箇所をクリックするだけで、簡単にコピーできます。ご自身のWebサイトにすぐに反映可能ですね。
ページ上に存在する画像素材のサイズの調べ方
3つ目の「ASSETSタブ」を開くとそのページに使用されている画像やメディアファイルを一挙に抽出し、一覧で表示可能です。それぞれの画像にカーソルを合わせるとファイル形式やサイズが表示されるだけでなく、上部に表示されている「Export All」をクリックすると、すべてのアセットをダウンロード可能です。
ページ上の画像やメディアファイルを一括でダウンロードできるので、Webサイトをコピーしたり、サイトを模してデザイニングの練習をするときなどに便利な機能ですね。
特定の要素の余白や行間、フォントサイズの調べ方
タブ以外の機能としては、表示しているページ内の任意の要素を指定し、CSSのプロパティを簡単に表示することができます。CSS Peeperを起動している状態で、任意の箇所をクリックするだけです。赤の点線枠で囲まれている箇所のCSSの大まかな情報を表示できます。デベロッパーツールを使わなくても、インスタントに情報を得られるので効率的ですね。
まとめ
CSS Peeperの良いところは、その洗練されたUIの心地いい使い勝手でしょう。普段からWebサービスをお使いの方であれば、特に難しい操作などはないので、WEBデザイン初心者の方でも非常に直感的に使えるツールです。CSSの確認作業をしたい初心者の方はデベロッパーツールを使う前に、こちらのツールで慣れ親しんでおくのも良いかもしれません。
