WEBデザイナーはもちろん、WEB業界に携わっていると、あるサイトの配色が気に入ったり、このサイトのデザインを参考にしたいと思うこともあるでしょう。
それらを調査するのに、Google Chromeの開発者向けデベロッパーツールで、サイトに使用されているフォントやカラーコード、余白サイズを調べたりするのが一般的です。
ただ、デベロッパーツールは開発者向けなので、高機能ゆえに見づらいと感じることもあるでしょう。特に初心者の方には慣れるまで少し時間がかかります。
でも、初心者でも「このサイトの色いいな」「この画像サイズ、いくつだろう？」と知りたいときもあると思います。特にTCDのようなWordPressテーマは万人が使いますので。
そこで今回は、直感的で楽チンに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の確認作業をしたい初心者の方はデベロッパーツールを使う前に、こちらのツールで慣れ親しんでおくのも良いかもしれません。
また、TCDテーマでサイトを作る時も、デモで使われている画像サイズを調べることがよくあると思います（推奨のサイズは管理画面に載っています）。そんな時にCSS Peeperがあるとサイト作成が捗ると思います。
WordPressテーマ集
