Webデザイナー必見!便利なGoogleChrome拡張機能10選!


Webデザイナー必見!便利なGoogleChrome拡張機能10選!

仕事や勉強中に「もっと効率よく作業出来たらいいのにな…」と感じたことはありませんか?GoogleChromeの拡張機能には、そんなかゆいところに手が届く機能がたくさん用意されているんです!

この記事では、WebデザイナーにおすすめしたいGoogleChromeの拡張機能を10選ご紹介します。仕事や勉強の効率アップに役立ちますので、参考にしてみてください。

目次
  1. Webデザイナーにおすすめしたい拡張機能10選!
  2. 1.WhatRuns:Webサイトの情報をワンクリックで検索
  3. 2.ColorPick Eyedropper:色コードを簡単に抽出
  4. 3.ato-ichinen:1年以内に作成された記事を表示
  5. 4.その本、図書館にあります。
  6. 5.View Image Info:画像の情報を検索
  7. 6.FireShot:Webページをスクリーンショットする
  8. 7.PerfectPixel:デザイン確認する時間を短縮
  9. 8.OneTab:開きすぎたタブを簡単整理
  10. 9.WhatFont:フォントを検索する
  11. 10.Linkclump:複数のリンクを一括で表示
  12. GoogleChromeの拡張機能を使いこなそう
  13. ダウンロード方法は簡単
  14. 拡張機能は入れすぎに注意
  15. アイコンを非表示にする方法
  16. まとめ

Webデザイナーにおすすめしたい拡張機能10選!

1.WhatRuns:Webサイトの情報をワンクリックで検索

image

Chromeウェブストア:WhatRuns

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

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

image

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

2.ColorPick Eyedropper:色コードを簡単に抽出

image

Chromeウェブストア:ColorPick Eyedropper

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

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

image

3.ato-ichinen:1年以内に作成された記事を表示

image

Chromeウェブストア:ato-ichinen

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

4.その本、図書館にあります。

image

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

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

image

5.View Image Info:画像の情報を検索

image

Chromeウェブストア:View Image Info

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

image

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

image

6.FireShot:Webページをスクリーンショットする

image

Chromeウェブストア:FireShot

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

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

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

7.PerfectPixel:デザイン確認する時間を短縮

image

Chromeウェブストア:PerfectPixel

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

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

image

8.OneTab:開きすぎたタブを簡単整理

image

Chromeウェブストア:OneTab

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

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

9.WhatFont:フォントを検索する

image

Chromeウェブストア:WhatFont

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

image

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

image

10.Linkclump:複数のリンクを一括で表示

image

Chromeウェブストア:Linkclump

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

image

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

image

ダウンロード方法は簡単

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

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

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

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

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

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

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

image

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

Webサイト担当者としてのスキルが身に付く

CodeCampの無料体験はこちら

まとめ

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

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


関連記事

高田ナツコ
この記事を書いた人
高田ナツコ
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp