【2015年版】今、デザイナーが使うべきChromeの拡張機能まとめ


メインブラウザとして使っている人も多いGoogle Chrome。
充実したデベロッパーツールを持ち、そのまま使うだけでも便利なブラウザです。

そんなGoogle Chromeをさらに便利にしてくれるのが拡張機能の数々。
一度インストールすれば「もうこれなしでは作業できない!」と思わせてくれる、イチオシの機能を10個ご紹介します。

デザイン編

 最新トレンドが常にチェックできる「panda  4」

Chrome ウェブストア:Panda 4

まずはデザイナーなら絶対に入れておきたいのがこの「Panda 4」。

設定しておくだけで、新しいタブを立ち上げたときに「dribbble」や「Awwwards」など
世界で活躍するデザイナーの作品を一覧で見ることができるんです。

最新のトレンドを追い続けることはデザイナーにとって必須ですよね。
ブラウザを使うだけで自然と目に入ってくる状況を作っておけば、効率よくチェックすることができます。

 

 panda 4とセットで使いたい!pintarest「[ピン] ボタン」

Chrome ウェブストア:[ピン] ボタン

「panda 4」を見ながら
「このデザインは参考にしたいな」「この配色は自分では思いつかなかったな」
という作品に出会うことがあるかもしれません。

pintarestのアカウントを持っていれば「[ピン] ボタン」を使ってその場で自分のボードにピンすることができるんです。

画像にマウスオーバーすると画像上に「[ピン] ボタン」が現れます。
ボタンをクリックしてどのボードにピンするか選んだらもう完了。
気になるデザインをどんどんピンしていけば自分だけの参考資料が完成です。

 

 ブラウザ上のカラーコードが調べられる「Eye Dropper」

Chrome ウェブストア:Eye Dropper

サイトを見ていて「この色いいな!」と思ったら「Eye Dropper」の出番です。

アイコンをクリックして「Pick color from web page」ボタンを押すとカーソルがカラーピッカーに変身。
好きなところにカーソルを合わせてクリックするだけで、簡単にカラーコードを取得することができます。

いちいちキャプチャをとって画像編集ツールで開いてカラーピッカーで確認…という手間をなくすことができますね。

 

コーディング編

 ページのチェックには絶対欠かせない「Web Developer」

Chrome ウェブストア:Web Developer

コーディングに欠かせないツールが「Web Developer」。

アイコンをクリックするとたくさんの項目が並んでいますね。
例えば「Images」タブの中にある「Display Image Dimensions」を選択すると、ページ上にある画像の幅と高さを表示してくれます。

他にも「Display Alt Attributes」でAltの入れ忘れがないかチェックしたり、
「Display Image Paths」で画像URLを確認したりなど「Images」タブだけでも使えるツールばかり。

他のタブにも同じようにたくさんの便利な項目があります。
これさえ入れてあれば大体のことはカバーできる優秀な拡張機能です。

 

 1クリックでJavaScriptをオフに!「jsoff」

Chrome ウェブストア:jsoff

JavaScriptで機能を実装したとき、つい見落としがちなのがJavaScriptを無効にしている場合の表示。

JavaScriptをオフにしたら実はコンテンツが真っ白だった…なんていうことがないように
「jsoff」も入れておきましょう。

前述のWeb Developerでも確認できますが、「jsoff」はワンクリックでjsのオンオフを切り替えることができ、より便利です。
アイコンをクリックすると黄色いアイコンがグレーに変わり、オン/オフの状態が一目でわかります。

 

 強力なキャッシュも一瞬で消去「Clear Cache」

Chrome ウェブストア:Clear Cache

コードを更新したのにブラウザに反映されない…というとき、実はキャッシュのせいだったということもよくありますよね。

Chromeでキャッシュを消去するには履歴ページから「閲覧データの消去」を選択し
「キャッシュされた画像とファイル」にチェックして更新、という手間のかかる作業が必要です。

そんなとき「Clear Cache」を使えばその作業を全て省くことができます。
アイコンをクリックするとアイコンが緑色になりキャッシュクリア完了。
あっという間ですね。

 

 リンクの設定ミスを防げる「Link Checker」

Chrome ウェブストア:Link Checker

「リンク先のパスが間違っていた」「ダミーで作っていてそのままうっかり設定し忘れていた」
なんてことがあったら大変ですよね。

「Link Checker」を使えばページにリンク切れがないか簡単にチェックできます。
アイコンをクリックして「Start Check!」でリンクが緑色になればリンクが効いている状態、
赤色になればリンク切れの状態です。

 

 サイトが重い…もっとサクサク動かしたいなら「YSlow」

yslow_02

Chrome ウェブストア:YSlow

せっかく作ったサイトが重い…もっとサクサク軽い動きで表示させたい、
というときには「YSlow」でチェックしてみましょう。

アイコンをクリックするとウィンドウが立ち上がり、パフォーマンスに影響する改善点を教えてくれます。
また、何にどれだけの容量がかかっているかも一目で確認できるので対策を見つけやすいですね。

 

業務効率化編

 大量のURLを一気に開ける「Pasty」

Chrome ウェブストア:Pasty

「作成したページを全部表示して見比べたい」「クライアントから参考URLが大量に送られてきた」
なんてとき、URLをひとつひとつコピーして貼り付けて…なんて時間がかかりますよね。

URLをまとめてコピーした後「Pasty」のアイコンをクリックすれば、コピーしたURLを全部一気に開いてくれます。
何十ページ分とあるURLリストでも、時間をかけずにすぐチェックすることができますね。

 

 ページ全体でも一部でも簡単にキャプチャが撮れる「FireShot」

Chrome ウェブストア:FireShot

サイトのキャプチャを撮りたいときは「FireShot」が便利です。

「ページ全体」「目に見える部分」「選択範囲」の3種類のキャプチャを撮ることができるので
作業内容に応じてキャプチャを撮ることができます。
撮ったキャプチャをつなぎ合わせたりトリミングしたり…というひと手間を省くことができて嬉しいですね。

 

最後に

今回紹介した機能以外にも、Chromeウェブストアではたくさんの拡張機能がリリースされています。
「こんな機能があったら便利だな」と思ったとき補完してくれる機能が見つかるかもしれません。

いくつか使ってみて自分にあったものだけを残すのも良いですね。
たくさんの機能を試して、スピードとクオリティのアップを目指しましょう。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


habutako

未経験で入社したWEB制作会社で、マークアップエンジニアとして2年間の修行を積む。現在フリーランス。 ウェブデザイナーと動物ボランティアという2足のわらじを履いて、パソコンとアニマルシェルターと愛猫の間を行き来する毎日。

Next Articleいくらで引き受ける?フリーランスを目指すなら知っておくべきWebデザインの相場