10/3(Thu)

今日の生放送

Webデザイナー Google Chrome 拡張機能

 

Webで仕事をする方に愛用されているブラウザ、GoogleChrome。このGoogleChromeは、拡張機能(アドオン)を追加することでより便利に、そして自分好みにカスタマイズすることが出来ます。この拡張機能を上手く使いこなせば、作業スピードを大幅にUPすることが出来ます。こちらの記事ではよりWebデザインの効率化に特化して、作業スピードをUPしてくれる便利なGoogleChromeの拡張機能8個を紹介します。

 

〈目次〉


■拡張機能の追加方法

■拡張機能の紹介

1)ColorZilla 簡単にWebページの色情報を拾える!

2)User-Agent Switcher Chrome上で様々なブラウザでの表示をチェック出来る

3)PageRank Status  Googleページランクをいつでも一目で確認出来る

4)Push bullet PCとスマホでさくっとデータ同期出来る! 

5)MeasureIt 定番の定規ツール!

6)Image Properties Context Menu 一発で画像の情報を取得出来る

7)Clear Cache  ボタン1つでキャッシュをクリア出来る! 

8)Appspector Webサイトの構成要素を簡単にチェック出来る

 

■拡張機能の追加方法


 

①ダウンロードしたい拡張機能のURLをクリックする

②「+無料」という青いボタンをクリックする

Webデザイナー Google Chrome 拡張機能

③追加をクリック

Webデザイナー Google Chrome 拡張機能

これだけです。

 

ダウンロードした拡張機能を確認・整理するには

①GoogleChromeの右上にある三本線をクリック

②その他のツール

③拡張機能をクリック

拡張機能のページから出来ます。

 

■拡張機能の紹介


 

1)簡単にWebページの色情報を拾える!


Chromeウェブストア- ColorZilla

デザイナーの方なら、ネットサーフィンをしていると「この色気になるな〜。」というシーンがよくあると思います。そんな時に役立つのがこの「ColorZilla」という拡張機能。こちらは閲覧しているwebページで、指定した場所の色情報を取得出来るツールです。カラーピッカーやスポイト、webページの色分析などの機能があり、まさにWeb開発者やWebデザイナーのための機能ですね。

Webデザイナー Google Chrome 拡張機能

右上のメニューバーから「Page Color Picker Active」をクリックし、

Webデザイナー Google Chrome 拡張機能

色情報を取得したい部分(上の画像だとスクーのロゴの紫の部分)にカーソルを合わせると色情報がこのように表示されます。また、クリックすると色情報をコピー出来ます

こちらを活用して様々なサイトを研究すれば、色彩感覚が磨かれそうですね。

 

2)Chrome上で様々なブラウザでの表示をチェック出来る!


Chromeウェブストア - User-Agent Switcher

こちらは、Chrome上でiPhone、Androidでの様々なブラウザの表示を確認出来る拡張機能です。デザイナーの方ならiPhone版のレイアウトの作成をする機会もあると思いますが、毎回iPhoneを取り出して実際に確認するのは不便ですよね。この拡張機能を使えば、iPhone版のレイアウトをChrome上で確認することが出来ます

Webデザイナー Google Chrome 拡張機能

このように右上メニューバーにある仮面のようなアイコンをクリックすれば変換したいバージョンの一覧が出てくるので、それをクリックすればOKです。

IEやFirefox、Operaの表示確認も行えるので、Webデザイナーには必須のツールですね。

 

3)Googleページランクをいつでも一目で確認出来る!


Chromeウェブストア - PageRank Status  

通常、Googleページランクを確認するためには専用のWebサイトで確認したいページのURLを打ち込むなどの作業が必要になります。しかし、「PageRank Status」を入れておけば、右上のツールバーに目をやるだけでいつでもGoogleページランクを確認することが出来ます

Webデザイナー Google Chrome 拡張機能

このように右上のメニューバーに常時ページランクが表示されます。

Webデザイナー Google Chrome 拡張機能

クリックするとAlexa Rankも確認出来ます

自分のWebサイトだけでなく他のサイトのページランクも確認出来るので、他のサイトを研究する際にもぜひ役立ててください。

 

4)PCとスマホでさくっとデータ同期出来る! 


Chromeウェブストア - Push bullet

「スマホから画像をPCに送りたい」「PCで見ているサイトURLをスマホに送りたい」Webで仕事をしている方ならよくある場面ですね。そんな時「Push bullet」を使えば、わざわざメールで転送しなくてもボタン一つでさくっとデータを同期出来ます。PCで拡張機能をインストール、スマホで専用アプリをダウンロードすればOK。わずらわしいデータ転送をさくっと完結出来る環境を整えておきましょう。

 

5)定番の定規ツール!


Chromeウェブストア - MeasureIt

こちらはブラウザ上で簡単にサイズを測ることが出来る拡張機能です。Webサイトの大きさや画像の大きさを、その場でサクッと測りたいとき役に立ちます。ソースを見れば確認は出来ますが、時短も大事。そんなときは使ってみてください。

Webデザイナー Google Chrome 拡張機能

右上のメニューバーから定規のアイコンをクリックし、範囲を指定すればサイズを測ることが出来ます

 

6)一発で画像の情報を取得出来る!


Chromeウェブストア - Image Properties Context Menu

「この画像サイズってどれくらいだろう?」ソースのチェックも、ダウンロードも必要ありません。画像ファイルの情報を取得出来る機能です。

画像の上で右クリックしてメニューにある「image Properties」をクリックすると、

Webデザイナー Google Chrome 拡張機能
 

このように画像のサイズや種類などの情報をサクっと詳細に取得出来ます

一見地味な機能ですが、あるとないとでは日々の作業スピードが変わってくると思います。時短作業の積み重ねですね。

 

7)ボタン1つでキャッシュをクリア出来る! 


Chromeウェブストア - Clear Cache  

こちらは「キャッシュが溜まりすぎてページの動作が遅い」「古いキャッシュのせいでWebページの表示が崩れてる」などのよくある場面で役立ちます。この拡張機能を利用すると、ツールバーの拡張機能アイコンを押すだけでキャッシュを削除出来ます。Webデザイナーの方は、「デザインを更新したのに、古いキャッシュが残ってるせいで最新状態が見れない」なんて事態に迅速に対応出来るように準備しておきましょう。

 

8)Webサイトの構成要素を簡単にチェック出来る!


Chromeウェブストア - Appspector 

現在見ているWebサイトがどのような技術で構成されているかをアイコン表示してくれるツールです。これは、Webサイトで使用されている技術が確認出来ます

Webデザイナー Google Chrome 拡張機能

何か特定の動作が必要なわけではなく、インストールするとこのように検索バーの右端に常時表示されるようになります。

他のサイトの研究に使ったり、Webディレクターとのコミュニケーションに役立てましょう。
 

おわりに


以上、GoogleChromeを使う方へ作業効率をUPさせるための拡張機能を特にWebデザイナーの方に向けて8つ紹介しました。これらを活用して普段の作業スピードをUPさせ、その分をデザインを考える時間などに割いてWebデザイナーとしてのスキルアップを目指していきましょう。

また、他にも便利な拡張機能はたくさんあります。WEBデザイナー学部では現役で活躍するウェブデザイナーの先生がおすすめするツールや小技が掲載されたメルマガを配信しております。そちらでも便利なGoogleChromeの拡張機能が紹介されています。Webデザインに興味のある方はぜひチェックしてみてくださいね。

「イシジマ先生のQ&Aとオススメツール」

 


 

WEBデザイナー学部では毎週Webデザインについての分かりやすい授業をお届けしております♪

初心者でWebデザインを学びたい方、自分のWebデザインの技術を磨きたい方は是非チェックしてみてください。

学部登録(無料)すると、自分のカリキュラムの進捗が一目で分かるようになり、先生がイチオシするツール紹介などの役立つコラムつきメールが受け取れるようになります!



スクー教務課:田代

今日の生放送

  • このエントリーをはてなブックマークに追加

デザイン学部の記事一覧