Webデザイナー必見！便利なGoogleChrome拡張機能１０選！

Webデザイナーにおすすめしたい拡張機能１０選！

１．WhatRuns：Webサイトの情報をワンクリックで検索

Chromeウェブストア：WhatRuns

Webサイトを見ていると、「このサイトはどんなテーマやフォントを使っているんだろう？」と気になりますよね。デベロッパーツールを毎回開いて調べるのは、意外と時間がかかってしまいます。

WhatRunsは、Webサイトで使われているCMS・フレームワーク・サーバー・アナリティクス・フォントなどがワンクリックで検索できる優れもの。検索時間をグッと短縮できますよ。

調べたいサイトを表示したら、バーに表示されているアイコンをクリック。これだけで、様々な情報が一目瞭然です。サインアップが必要になりますが、サイト名の右側にあるプラスマークをクリックするとサイトの情報を保存できますよ。

２．ColorPick Eyedropper：色コードを簡単に抽出

Chromeウェブストア：ColorPick Eyedropper

Webサイトで使われている気になったカラーコードを、カーソルを移動させるだけで簡単に検索できます。

サイトを開いたら、アイコンをクリック。カーソルが変わるので、調べたい色のところまで移動させましょう。エンターキーを押すと、カラーコードを自動で選択してくれます。

３．ato-ichinen：１年以内に作成された記事を表示

Chromeウェブストア：ato-ichinen

Googleで検索をするときに、ワンクリックで1年以内に作成された記事のみを表示できます。最新情報を調べたいときに便利です。

４．その本、図書館にあります。

Chromeウェブストア：その本、図書館にあります。

Amazonで本を検索したときに、近所の図書館に在庫があるか調べてくれます。参考書は意外と借りれることが多いので、検索のついでにぜひチェックしてみてください。

５．View Image Info：画像の情報を検索

Chromeウェブストア：View Image Info

Webサイトで使われている画像の情報について検索できます。調べたい画像の上で右クリックをして、View Image Infoをクリック。

画像のファイルサイズや、Altにどんな説明を入れているのかなどがわかります。

６．FireShot：Webページをスクリーンショットする

Chromeウェブストア：FireShot

ワンクリックで簡単にスクリーンショットできます。下記の3つから選択可能です。

• ページ全体をキャプチャ
• 表示部分をキャプチャ
• 選択範囲をキャプチャ

保存ファイル形式やショートカットキーを設定しておくと、さらに使いやすくなりますよ。

７．PerfectPixel：デザイン確認する時間を短縮

Chromeウェブストア：PerfectPixel

デザインカンプとコーディングデータを比較しておこなう確認作業を、効率よくしてくれます。ブラウザ上で比較しながら、デベロッパーツールも同時に確認できますよ。

1. デザインカンプをあらかじめ画像で書き出しておく
2. コーディングデータをWeb上で表示させ、Perfect Pixelのアイコンをクリック
3. レイヤーに画像を貼り付ける
4. 透明度を変えたり、配置を変えたりしながら確認する

８．OneTab：開きすぎたタブを簡単整理

Chromeウェブストア：OneTab

調べ物をしているとつい溜まってしまうタブ。OneTabを使えば、ワンクリックでたくさんのタブをひとまとめにしてくれます。リスト化された中からひとつだけページを開いたり、すべてのタブを一度に復元したりできます。

「あとでもう一度見たいけど一度電源を落としたい！」というときも、OneTabでまとめておけば後から簡単に復元可能です。

９．WhatFont：フォントを検索する

Chromeウェブストア：WhatFont

ワンクリックでフォントを検索できます。使い方は、アイコンをクリックしてフォントの上までカーソルを移動させるだけ。

クリックをすると、フォントサイズや太さなどのさらに詳細な情報が確認できます。

１０．Linkclump：複数のリンクを一括で表示

Chromeウェブストア：Linkclump

「検索して出てきた複数のサイトを一回で開きたい。」そんなときに便利な機能です。Z＋右クリックしながらドラッグでリンクを囲みます。

GoogleChromeの拡張機能を使いこなそう

ダウンロード方法は簡単

1. Chromeのウェブストアにアクセス
2. 「ストアを検索」と書かれている検索バーにダウンロードしたい拡張機能の名前を入力
3. 表示された拡張機能をクリックして、画面右上にある「Chromeに追加」ボタンをクリック
4. 「拡張機能を追加」ボタンをクリックで完了です！

拡張機能は入れすぎに注意

便利な機能がたくさん用意されているので、つい気軽に登録してしまいますよね。しかし、たくさん入れてしまうとPCの動きが遅くなってしまうことも。管理も難しくなりますので、自分に必要な分だけを選んでダウンロードしましょう。

アイコンを非表示にする方法

バーに表示が必要ない拡張機能については、ピンマークのチェックをはずすと表示されなくなります。

1. バーの右側にあるパズルマークをクリック

2. ピンマークをクリック

アイコンと名前が一致していなくても大丈夫です。アイコンにカーソルを乗せれば、名前が表示されますよ。

まとめ

WebデザイナーにおすすめしたいGoogleChromeの拡張機能を10選ご紹介しました。拡張機能をうまく使えば、時間のかかっていた作業も少しずつ減らしていけるはずです！気になったものから気軽にダウンロードしてみてください。

Webデザインの勉強方法でもしお悩みなら、ぜひコードキャンプへ！現役で活躍中の講師がマンツーマンであなたをサポートします。無料体験でWebデザインの面白さを体感してみてくださいね。