OPEN
Blogブログ
Home / Blog / 制作のこと / 職種別!WebデザイナーとコーダーにおすすめなChrome拡張機能10選
2019.07.08

職種別!WebデザイナーとコーダーにおすすめなChrome拡張機能10選

ろく ろく Other Blog

 

Webデザインとコーディング、どちらの制作をする時もChromeの拡張機能にはとてもお世話になっているのですが、
いくつも拡張機能を入れておくとブラウザの動作が重たくなる原因になります。

Web制作をする中で拡張機能が厳選されてきたので、
今回はデザイナー・コーダー両方の視点から、それぞれオススメなChrome拡張機能をまとめてみました!

デザイナー向け拡張機能4選

Pinterest 保存ボタン

Pinterest保存ボタン:Chromeウェブストア

Pinterest公式謹製!Webサイト上の画像をPinterestに保存するための拡張機能です。
Webデザインに限らずDTPやロゴ、制作tips画像など、何でもPinterestにまとめています。
※コーディング中やサイト表示の確認の際は、画像ホバー時に干渉することがあるのでオフにしています。

 

Fire Shot

Fire Shot:Chromeウェブストア

Webサイトの一部、または全体のキャプチャーを撮影することができます。
ステキなデザインのWebサイトはFireShotで撮ってPinterestでアーカイブしたり、
制作させていただいたサイトを実績ページにアップする際のキャプチャーを撮ったり、という使い方を頻繁にします。

 

CSS Peeper

CSS Peeper:Chromeウェブストア

フォント・配色・画像など、css情報が分かりやすく表示されます。
ページ全体のカラーパレットやフォント設定だけでなく、調べたい要素を選択するとサイズやpadding、marginなどを表示させることもできます。

このように感覚的に操作ができて多機能なので、特にオススメな拡張機能です。

 

NoCoffee

NoCoffee:Chromeウェブストア

色覚特異性を持つ人の見え方をシミュレートすることができます。
色覚の多様性に配慮し、より多くの人が利用しやすい配色にするためのチェックツールとして使っています。

Color deficiencyの横のセレクトボックスから見え方のタイプを選択して使います。
・Protanopia:P型強度 (1型2色覚)
・Protanomaly:P型弱度 (1型3色覚)
・Deuteranopia:D型強度 (2型2色覚)
・Deuteranomaly:D型弱度 (2型3色覚)
・Tritanopia:T型強度 (3型2色覚)
・Tritanomaly:T型弱度 (3型3色覚)
・Achromatopsia:A型 (杆体1色型色覚)

★カラーユニバーサルデザイン対応については、PhotoshopやIllustrator用の推奨配色セットも併用しています。

Webコーダー向け拡張機能6選

Clear Cashe

Clear Cashe:Chromeウェブストア

ボタンを1回クリックするだけで、キャッシュと閲覧データを消去できます。
もちろんChromeのメニューからでも消せるのですが、確認ダイアログやポップアップが一々面倒なのでアドレスバー横に必ず置いています。
消去する内容は、拡張機能の設定画面から細かく選択できます。

 

Alt & Meta viewer

Alt & Meta viewer:Chromeウェブストア

画像に設定されたAlt、Title属性をツールチップで表示することができます。
また、ヘッダのTitle、Meta情報を一覧表示させることができます。
設定漏れが無いかどうかのチェックに。

 

PerfectPixel by WellDoneCode

PerfectPixel by WellDoneCode (pixel perfect):Chromeウェブストア

表示しているWebサイトの上に任意の%で透過した画像を重ねることができます。
制作中のページとカンプ画像を比較する際に使用しています。

 

Wappalyzer

Wappalyzer:Chromeウェブストア

Webサイトが使用しているサーバー・CMS・ツールなどをワンクリックで解析することができます。

 

Web Developer

Web Developer:Chromeウェブストア

とにかく何でも揃っています。

・CSSやjsなどを無効化したときの表示確認
・画像を非表示
・画像のAlt、サイズ、パスの表示
・altが空だったり無かったりする画像に枠線を表示
・HTML5文書のアウトラインを表示
・カラーパレット表示、カラーピッカー
・block、table、float、外部リンクなど任意の要素に枠線を表示
・ブラウザウィンドウをリサイズ
・W3Cの各種バリデーション

上記は機能のほんの一部です。まさにWeb制作における万能ナイフ。

 

Window Resizer

Window Resizer:Chromeウェブストア

ブラウザウィンドウのサイズを変更してくれます。
↑のWeb Developerでも変更はできるのですが、リサイズの頻度が高いため
少ないクリックで手軽に変えられるWindow Resizerも使っています。

 

気になる拡張機能は見つかりましたか?

今回はデザイナー・コーダーにオススメな拡張機能をご紹介しました。
拡張機能を上手く使って、作業を効率化しちゃいましょう!

 

TOP