サイト制作で便利な拡張機能4選！

こんにちは！
本日はサイト制作の上で欠かせないGoogleの拡張機能をご紹介いたします！
この機能を入れているだけでちょっとだけ楽になるので必見ですよ。

幅を調べる【Page Ruler Redux】

コンテンツの幅によって受ける印象は随分と変わります。
ですのでサイトデザインを考えるうえでコンテンツの幅はとても大切になってきます。

「このサイトはいくつの幅で作っているのだろう？」だったり「このエリアはいくつに設定したかな？」といった
ちょっとした疑問を解決してくれるのが【Page Ruler Redux】です。
以前までは別の機能を使用しておりましたが、そちらが使えなくなってしまったので
最近はこの機能を使用しています。

使い方は簡単、拡張機能を追加しアプリを起動。
気になる箇所でクリックして領域を広げて測るだけ。

こんな感じで選択した箇所の幅や高さを表示してくれます。
正確に測るのは場合によっては難しいですが、
粗方数値が絞れたらキリのいい数で考えられるので
重宝している機能です。

色を抽出【ColorPick Eyedropper】

サイトに使われている色を調べる時に便利なのが【ColorPick Eyedropper】です。
アプリを起動してカーソルを気になる箇所に合わせるだけで色を抽出してくれます。

サイトで使用するカラーコードを教えてくれる他、別の形式でも色を教えてくれます。
カラーコードを目測だけで当てるのは至難の業…
一口に「赤」と言っても様々な赤があるので「この赤が使いたい！」となった時に
すぐにカラーコードが分かるのでとても便利です。

フォントを調査【WhatFont】

名前の通り何のフォントが使用されているかを調べられる機能です。
テキストになっている箇所にカーソルを合わせると、
使用されているフォント、色、サイズなどフォントに関する情報が一瞬で分かります。

※画像に埋め込まれている文字はもちろん読み取りは出来ません
この機能を使用することで見出しの文字サイズをいくつにしようか決めたり、
本文はどのサイズやフォントが読みやすいかなどを考える目安になります。

ページ全体をスクリーンショット【FireShot】

スクリーンショットはショートカットを利用することでできますが、
スクロールが必要な場合、ページ全体を撮影することはできません。
そんな時に便利なのが【FireShot】

キャプチャをとりたいエリアを選択できます。
表示部分の他にもカーソルで選択した範囲だけをキャプチャしたり、
この機能最大の特長である「ページ全体をキャプチャ」することが可能です。

こんなかんじで本来スクロールがあってキャプチャが取れない部分も、
自動でスクロールして全体をとる事ができます！
全体を確認することができるのでページ全体のバランスの参考や、
どこにどんなコンテンツを配置しているのか確認したりと
結構便利に活用できるのでオススメです。

本日ご紹介した拡張機能は日頃お世話になっているものばかりです。
痒い所に手が届く機能ばかりでこれがないとちょっと不便、と感じるくらいには重宝しています。
本日ご紹介した機能と似たような機能を持つものはいくつかありますので、
自身に合ったものをお選びください。

Googleの拡張機能には他にも便利な機能が色々ありますので探してみてくださいね。