かわしまのブログ Written by Hiroyuki Kawashima

Web制作にオススメのChrome拡張機能は6個だけ【効率化】

Web制作

Web制作の作業を効率化したい人「Web制作にオススメのChrome拡張機能はないかな。多すぎてもジャマなので、厳選したやつを教えてください。」

こういった疑問に答えます。

本記事の内容

この記事を書いている私は、Web開発のフロントエンドエンジニアです。
少しの間ですが、Web制作フリーランスをしていました。
わりとミニマリスト的な思考で、拡張機能もムダなものは入れたくない派の人間です。

こういった私が解説していきます。

Web制作にオススメのChrome拡張機能は6個だけ

検索エンジンの画像
Web制作にオススメのChrome拡張機能は6個だけです。

多すぎてもどうせ使わないし、ジャマですからね。

具体的には下記の通り。

それぞれ解説します。

WhatFont


WhatFont』は、ブラウザ上の文字をカンタンに調べることができるChrome拡張機能です。
ぶっちゃけ、フォント関係はこれさえあればあとはいらないです。

WhatFontで調べることができる項目

  • font-family
  • font-style
  • font-weight
  • font-size
  • line-height
  • color

ColorPick Eyedropper


ColorPick Eyedropper』は、カラーピッカーのChrome拡張機能です。
ブラウザ上にあるものなら、なんでも色を取得できます。
もちろん画像からも色を取得できます。
動作もシンプルで最強です。

ColorPick Eyedropperで調べることができる項目

  • ブラウザ上の色

HTMLエラーチェッカー


HTMLエラーチェッカー』は、現在開いているページ上のHTMLに、エラーがないかをチェックすることができるChrome拡張機能です。
エラーがあれば、赤文字でエラーの内容を示してくれます。
逆に、エラーがなければ、「タグはおそらく完璧です」と、少し不安になる回答をしてくれます。

HTMLエラーチェッカーで調べることができる項目

  • HTMLのエラー

SEO META in 1 CLICK


SEO META in 1 CLICK』は、現在開いているページのメタ情報を調べることができるChrome拡張機能です。
Web制作で「メタディスクリプションを書き忘れていた\(^o^)/」とか「見出しタグの構造がぐちゃぐちゃだった\(^o^)/」といったミスを減らすことができます。

SEO META in 1 CLICKで調べることができる項目

  • タイトル
  • メタディスクリプション
  • メタキーワード
  • 見出しタグの構造

PerfectPixel by WellDoneCode (pixel perfect)


PerfectPixel by WellDoneCode (pixel perfect)』は、デザインカンプの画像をブラウザ上にうすく表示して、ずれをチェックできるChrome拡張機能です。
上の画像は、少しズラして表示しています。
画像のように、ズレていたらわかるようになっています。

PerfectPixel by WellDoneCode (pixel perfect)で調べることができる項目

  • デザインカンプとのズレ

GoFullPage – Full Page Screen Capture


GoFullPage – Full Page Screen Capture』は、現在開いているWebページをスクリーンショットできるChrome拡張機能です。
Chromeのデベロッパーツールでもスクリーンショットは撮れるのですが、SnowMonkey等で作られたWebサイトは、画像がバグることがあります。
そんな時はこのツールで対処できます。
Chromeのデベロッパーツールと違い、拡張機能のアイコンをクリックするだけでスクリーンショットが撮れるので、こちらの方が便利かもです。

GoFullPage – Full Page Screen Captureでできること

  • Webページのスクリーンショットを保存

Web制作でChrome拡張機能が20個とかは多すぎる件

[Web制作 拡張機能]でググったところ…。

いやいやいや。
Chromeの拡張機能20個とか多すぎでしょ。
こんなに使いませんよ。

拡張機能が多すぎても、探すのに時間がかかるので、逆に作業が遅くなります。

厳選して、必要最小限の拡張機能でいきましょう。

まとめ:Chromeの拡張機能は6個で十分

Chromeの拡張機能は6個で十分です。

今回紹介した6個さえあれば、基本的に不便なことはありません。

もし増やしたい人がいたら、そこはお任せします。