ウェブデザインに欠かせない本当に使える Google Chrome 拡張機能 01

Google Chrome Icon

最近世界中で Google Chrome のシェア率も拡大しております。アメリカではシェア率は他のブラウザを上回り1位となっていますね。それはやはりGoogle Chrome のウェブサイト表示の速さ、豊富な拡張機能のお陰ではないでしょうか。日々Chromeの制作に携わっている人々、また拡張機能を開発している人には本当に頭が上がりません。
かくいう管理人も約3年前にChrome ユーザーになり、様々な拡張機能を使ってきました。今までもウェブデザインで使える拡張機能は色々目にしたと思います。そんな中で今となってはもうこれなしではウェブ制作のに支障が出るほどの拡張機能を紹介します。


Eye Dropper

Eye Dropper Icon

拡張機能ウェブサイト

こちらはウェブサイト上のどんな色でもカラーコードを取得できるツール。色使いのきれいなウェブサイトを見て、色合いの研究にはもってこいです。

Image Properties Context Menu

Image Properties Context Menu Icon

拡張機能ウェブサイト

Chromeには右クリックで画像のプロパティを参照する機能がデフォルトではありません。手っ取り早く画像サイズや情報を取得したい人におすすめです。

MeasureIt!

MeasureIt! Icon

拡張機能ウェブサイト

こちらは立ち上げるとウェブサイトのどんなパーツでもピクセル形式で図る事が可能です。Inspect Elements を立ち上げる必要も無く、手っ取り早くウェブサイトのパーツのサイズを知りたい人に非常にお勧め。超便利です。

Lorem Ipsum Generator

Lorem Ipsum Generator Icon

拡張機能ウェブサイト

ウェブサイトを制作時レイアウトで仮文字を入れる事も多いかと思います。そんな時はわざわざ検索して文字を持ってくる必要もありません。たったワンクリックでレイアウト用の文字をコピペできます。(英語限定)

PageSpeed Insights (by Google)

PageSpeed Insights (by Google) Icon

拡張機能ウェブサイト

こちらGoogle Developerにあるウェブサイトのスピードを測定する機能です。立ち上げ方は Inspect Element を右クリックで立ちあげると、最上部に項目が見えると思います。その一番右にPageSpeedという項目が追加されています。後はクリックしてページスピードを測定すると、ページが何故重いかという原因を判定してくれます。

また正式にいうと拡張機能ではないのですが、右クリックのInspect Element(デバッグツール)は非常にお勧め、最近はこれで html/css をデバッグし、レイアウトの変更をした後CSSにファイルに直接張り付け。という流れでウェブサイトの制作をしています。こちらの詳しい使い方についてはまた後日記述したいと思います。


今まで様々な拡張機能を試してきましたが、上記の拡張機能は本当に使える拡張機能です。こんな便利ツールが豊富のGoogle Chromeはウェブサイト制作の効率化に欠かせません。まだの人は是非一度お試し下さい。