Web制作にオススメのChrome拡張機能は6個だけ【効率化】
Web制作の作業を効率化したい人「Web制作にオススメのChrome拡張機能はないかな。多すぎてもジャマなので、厳選したやつを教えてください。」
こういった疑問に答えます。
本記事の内容
この記事を書いている私は、Web開発のフロントエンドエンジニアです。
少しの間ですが、Web制作フリーランスをしていました。
わりとミニマリスト的な思考で、拡張機能もムダなものは入れたくない派の人間です。
こういった私が解説していきます。
Web制作にオススメのChrome拡張機能は6個だけ
Web制作にオススメのChrome拡張機能は6個だけです。
多すぎてもどうせ使わないし、ジャマですからね。
具体的には下記の通り。
- WhatFont
- ColorPick Eyedropper
- HTMLエラーチェッカー
- SEO META in 1 CLICK
- PerfectPixel by WellDoneCode (pixel perfect)
- GoFullPage – Full Page Screen Capture
それぞれ解説します。
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個さえあれば、基本的に不便なことはありません。
もし増やしたい人がいたら、そこはお任せします。