【仕事効率があがる】WEBデザイナーにおすすめの【Chrome拡張機能9選】

【仕事効率があがる】WEBデザイナーにおすすめの【Chrome拡張機能9選】

2021年10月10日

私が実際に使ってるChromeの拡張機能で、WEBデザイナーの仕事に役立つものを使用頻度の高い順にご紹介します。

WhatFont(WEBサイトのフォントチェック)

The easiest way to identify fonts on web pages.
chrome.google.com

「WhatFont 」は、ウェブページ上の気になるフォントにカーソルを持っていくとフォント名を表示してくれます。参考にしたいウェブサイトのフォントがすぐわかるので便利です。

FireShot(スクリーンショット)

ウェブページ全体をスクリーンショット撮影。PDF/JPEG/GIF/PNGでキャプチャ、編集、保存やアップロード、印刷、そしてOneNote、クリップボード、メ…
chrome.google.com

おなじみかと思いますが、スクリーンショットをとれる機能です。
ページ全体、表示部分、選択部分と範囲を選んでスクリーンショット。保存はPNG/JPG/PDFなど。
プロの有料もありますが、無料でも十分使えます。

Wordmark Extension(自PCのフォントチェック)

This extension enables you to see your fonts on Wordmark.it
chrome.google.com

こちらの記事でも紹介していますが、自分のPCに入っているフォント全てが目で見て選べます。
実際のテキストを入力して比較して選べるのでフォント選びがスムーズです。

OneTab(タブをまとめて管理)

メモリ使用量を95%減少させ、タブを整理します
chrome.google.com

これに出会った時は感動しました!めちゃくちゃお気に入り。
仕事をしているとChromeのタブが膨大になっていることが多いと思います。開きすぎるとPCのリソースも大量に消費されてしまううえに、探すのにウロウロして効率も悪くなります。

これは、開いているタブを一括してくれてリスト化してくれる機能で、メモリの消費も抑えられるし、何より見たいページをすぐに見つけられるので効率が良い~。

一度作ったタブは削除しない限り、Chromeを開き直してもまた「OneTab」のアイコンをクリックすると一覧が出てくるので、翌日以降でも「あのページどこだっけ?」とならないのです。

リストは複数作ることができたり、編集したり。とっても便利な機能です。

Pinterest(ピンタレスト保存ボタン)

オンラインで見つけたお気に入りのアイデアを保存すると、いつでも簡単にアクセスすることができます。
chrome.google.com

こちらもおなじみピンタレストの保存ボタンです。チェックしておきたいサイトや画像などをボタン一つで保存。使用するには、ピンタレストのアカウントが必要です。

Discover recipes, home ideas, style inspiration and other ideas to try.
www.pinterest.jp

ColorZilla(カラーピッカー)

高度なスポイトツール、カラーピッカー、グラデーション生成ツールなどの多彩で魅力的な機能
chrome.google.com

ページ上の気になる色のコードをチェックできるツール。スポイドで吸い取ってくれるイメージです。
このサイトのカラーコードが知りたい!という時にぜひ。

HTMLエラーチェッカー

HTMLの開始・終了タグの過不足などを検出する拡張機能です。エラーがある場合、数値が表示されます。JSでソースを確認するので、外部送信は行ってません。※form…
chrome.google.com

作ったサイトの開始タグ・閉じタグ忘れなどをチェックできます。
WordPressのオリジナルテンプレートだと、タグが抜け落ちていたりすることがあるので、最終これでチェックするとすぐに分かって便利ですよ。

Quick QR(QRコード作成)

Chrome上で高評価のQRコード作成器、ページをそのままQPコードにすることも、どんな文章でもURLでも作成可能。自分の好きなのもをQRコードに!
chrome.google.com

これも便利!見ているページのQRコードを画面上に出してくれて、スマホで読み込めば実機ですぐに確認できます。URLをスマホに送るなどしなくていいので効率がよくて便利な機能です。

Page Ruler Redux(サイズを計測)

https://chrome.google.com/webstore/detail/page-ruler-redux/giejhjebcalaheckengmchjekofhhmal

「このサイトのベースの幅はいくつだろう?」という時にソースを見なくても、ページ上で計測できます。
サイト幅だけでなく、パーツなども測れるので、初心者WEBデザイナーさんはデザイン作成の参考になると思います。

【Chrome拡張機能について】まとめ

私が実際に仕事で頻繁に使うChromeの拡張機能をご紹介しました。
拡張機能は入れすぎると動作が重くなるので気をつけながら試してみてください。

それぞれの使い方は、触ってみると感覚的にわかるものが多いですがほとんどですが、わからないものについては、すみませんがググってみてください。ほとんど簡単に使い方が出てきます。

また、便利そうなものを見つけたらご紹介しますね。