4/19(Fri)
Webで仕事をする方に愛用されているブラウザ、GoogleChrome。このGoogleChromeは、拡張機能（アドオン）を追加することでより便利に、そして自分好みにカスタマイズすることが出来ます。この拡張機能を上手く使いこなせば、作業スピードを大幅にUPすることが出来ます。こちらの記事ではよりWebデザインの効率化に特化して、作業スピードをUPしてくれる便利なGoogleChromeの拡張機能８個を紹介します。
〈目次〉
■拡張機能の追加方法
■拡張機能の紹介
１）ColorZilla 簡単にWebページの色情報を拾える！
２）User-Agent Switcher Chrome上で様々なブラウザでの表示をチェック出来る！
３）PageRank Status Googleページランクをいつでも一目で確認出来る！
４）Push bullet PCとスマホでさくっとデータ同期出来る！
５）MeasureIt 定番の定規ツール！
６）Image Properties Context Menu 一発で画像の情報を取得出来る！
７）Clear Cache ボタン1つでキャッシュをクリア出来る！
８）Appspector Webサイトの構成要素を簡単にチェック出来る！
■拡張機能の追加方法
①ダウンロードしたい拡張機能のURLをクリックする
②「＋無料」という青いボタンをクリックする
③追加をクリック
これだけです。
ダウンロードした拡張機能を確認・整理するには
①GoogleChromeの右上にある三本線をクリック
②その他のツール
③拡張機能をクリック
拡張機能のページから出来ます。
■拡張機能の紹介
１）簡単にWebページの色情報を拾える！
デザイナーの方なら、ネットサーフィンをしていると「この色気になるな〜。」というシーンがよくあると思います。そんな時に役立つのがこの「ColorZilla」という拡張機能。こちらは閲覧しているwebページで、指定した場所の色情報を取得出来るツールです。カラーピッカーやスポイト、webページの色分析などの機能があり、まさにWeb開発者やWebデザイナーのための機能ですね。
右上のメニューバーから「Page Color Picker Active」をクリックし、
色情報を取得したい部分（上の画像だとスクーのロゴの紫の部分）にカーソルを合わせると色情報がこのように表示されます。また、クリックすると色情報をコピー出来ます。
こちらを活用して様々なサイトを研究すれば、色彩感覚が磨かれそうですね。
２）Chrome上で様々なブラウザでの表示をチェック出来る！
Chromeウェブストア - User-Agent Switcher
こちらは、Chrome上でiPhone、Androidでの様々なブラウザの表示を確認出来る拡張機能です。デザイナーの方ならiPhone版のレイアウトの作成をする機会もあると思いますが、毎回iPhoneを取り出して実際に確認するのは不便ですよね。この拡張機能を使えば、iPhone版のレイアウトをChrome上で確認することが出来ます。
このように右上メニューバーにある仮面のようなアイコンをクリックすれば変換したいバージョンの一覧が出てくるので、それをクリックすればOKです。
IEやFirefox、Operaの表示確認も行えるので、Webデザイナーには必須のツールですね。
３）Googleページランクをいつでも一目で確認出来る！
Chromeウェブストア - PageRank Status
通常、Googleページランクを確認するためには専用のWebサイトで確認したいページのURLを打ち込むなどの作業が必要になります。しかし、「PageRank Status」を入れておけば、右上のツールバーに目をやるだけでいつでもGoogleページランクを確認することが出来ます。
このように右上のメニューバーに常時ページランクが表示されます。
クリックするとAlexa Rankも確認出来ます。
自分のWebサイトだけでなく他のサイトのページランクも確認出来るので、他のサイトを研究する際にもぜひ役立ててください。
４）PCとスマホでさくっとデータ同期出来る！
「スマホから画像をPCに送りたい」「PCで見ているサイトURLをスマホに送りたい」Webで仕事をしている方ならよくある場面ですね。そんな時「Push bullet」を使えば、わざわざメールで転送しなくてもボタン一つでさくっとデータを同期出来ます。PCで拡張機能をインストール、スマホで専用アプリをダウンロードすればOK。わずらわしいデータ転送をさくっと完結出来る環境を整えておきましょう。
５）定番の定規ツール！
こちらはブラウザ上で簡単にサイズを測ることが出来る拡張機能です。Webサイトの大きさや画像の大きさを、その場でサクッと測りたいとき役に立ちます。ソースを見れば確認は出来ますが、時短も大事。そんなときは使ってみてください。
右上のメニューバーから定規のアイコンをクリックし、範囲を指定すればサイズを測ることが出来ます。
６）一発で画像の情報を取得出来る！
Chromeウェブストア - Image Properties Context Menu
「この画像サイズってどれくらいだろう？」ソースのチェックも、ダウンロードも必要ありません。画像ファイルの情報を取得出来る機能です。
画像の上で右クリックしてメニューにある「image Properties」をクリックすると、
このように画像のサイズや種類などの情報をサクっと詳細に取得出来ます。
一見地味な機能ですが、あるとないとでは日々の作業スピードが変わってくると思います。時短作業の積み重ねですね。
７）ボタン1つでキャッシュをクリア出来る！
こちらは「キャッシュが溜まりすぎてページの動作が遅い」「古いキャッシュのせいでWebページの表示が崩れてる」などのよくある場面で役立ちます。この拡張機能を利用すると、ツールバーの拡張機能アイコンを押すだけでキャッシュを削除出来ます。Webデザイナーの方は、「デザインを更新したのに、古いキャッシュが残ってるせいで最新状態が見れない」なんて事態に迅速に対応出来るように準備しておきましょう。
８）Webサイトの構成要素を簡単にチェック出来る！
現在見ているWebサイトがどのような技術で構成されているかをアイコン表示してくれるツールです。これは、Webサイトで使用されている技術が確認出来ます。
何か特定の動作が必要なわけではなく、インストールするとこのように検索バーの右端に常時表示されるようになります。
他のサイトの研究に使ったり、Webディレクターとのコミュニケーションに役立てましょう。
おわりに
以上、GoogleChromeを使う方へ作業効率をUPさせるための拡張機能を特にWebデザイナーの方に向けて８つ紹介しました。これらを活用して普段の作業スピードをUPさせ、その分をデザインを考える時間などに割いてWebデザイナーとしてのスキルアップを目指していきましょう。
また、他にも便利な拡張機能はたくさんあります。WEBデザイナー学部では現役で活躍するウェブデザイナーの先生がおすすめするツールや小技が掲載されたメルマガを配信しております。そちらでも便利なGoogleChromeの拡張機能が紹介されています。Webデザインに興味のある方はぜひチェックしてみてくださいね。
WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪
初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください。
学部登録（無料）すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります！
スクー教務課：田代
