デザイン

デザイン

デザイナー/フロントエンドエンジニアなら絶対に入れておきたいChrome拡張機能14選

1,058 views

Mozli

 1-86kgibdgrbximmimmaku6q

 

Web中のデザインに関する新着記事やコンテンツを表示してくれるニュースfeedです。海外記事なのでほぼ英語記事ですが、英語が苦手な方でも画像やイラスト、Webコンテンツは楽しめますので、海外のWebデザイン動向をチェックするのに役立ちます。

http://muz.li/join/

 

 

Responsive Web Design Tester

 

1-pahzmd_smmdmsfk-24hfvw

 

レスポンシブデザインの簡易な表示チェックができる拡張機能です。表示が確認できるデバイスも豊富なのでサクっとチェックできますね!

http://responsivewebdesigntester.com/

 

 

Window Resizer

1-umodgt8xo2klfagviqpagq

 

いろいろなディスプレイのウィンドウサイズをエミューレートして表示してくれる機能です。

https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=en

 

 

Page Ruler

1-2k8qrguqfaxix6q12k-2tw

 

あらゆるWebページをピクセル単位の定規で計ることができる機能です。

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

 

 

Dimensions

1-ssq6bqm2epkejt8-g9ds8w

 

スクリーンの寸法を測れる機能です。

https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj

 

 

ColorZilla

 1-6hm9eognmxrpp_wxmxq7oq

Webページから色を拾えたり、使われている色の分析、グラデーションをCSSでジェネレートできるなど多機能な拡張機能です。

https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp

 

 

WhatFont

1-5mpbnxbn3lbi2hqkhknvew

 

Webページ上に使われているフォントを識別してくれる機能です。

https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm

 

 

TypeWonder

 1-ryjafgtwobyb2jn7jxeuya

 

Webフォントを使うときにテストできる機能です。

https://chrome.google.com/webstore/detail/typewonder/ohgmapelghofmbacalgamfbejaghdilh

 

 

CSS — Shack

1-ryjafgtwobyb2jn7jxeuya

 

画像編集ソフトと同じようにレイヤースタイルで制作して、CSSファイルで吐き出せる機能です。

http://www.css-shack.com/

 

 

PerfectPixel by WellDoneCode

 

1-lxx2n6r9e8hcepzte9b-pw

半透明の画像をWebサイトに重ねて表示することができ、ピクセル単位で調整することができます。

https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en

 

 

LightShot

1-eg_ejnwjemzjt5m4c3v6tw

 

スクリーンショットを撮りたい箇所を選択でき、またスクリーンショット画像をサーバーにアップすることもできる機能です。

https://chrome.google.com/webstore/detail/lightshot-screenshot-tool/mbniclmhobmnbdlbpiphghaielnnpgdp

 

UX Check

 1-6jpgyrl_j4p5ipb2dtu7nw

WebサイトのUX的な改善点を見つけることができる機能です。

http://www.uxcheck.co/#

 

 

Code Cola

 1-7lbmzrhmvovpdz9ujndxzw

オンラインページのCSSスタイルを視覚的に編集できる機能です。

https://chrome.google.com/webstore/detail/code-cola/lomkpheldlbkkfiifcbfifipaofnmnkn

 

Pendule

1-a47gscoeulysxt2uq-t5pa

 

Chromeの拡張機能を開発するためのツールです。

https://chrome.google.com/webstore/detail/pendule/gbkffbkamcejhkcaocmkdeiiccpmjfdi

 

 

 

(※本稿は「15 Must-have Chrome extensions for web designers and front end developer」を翻訳・再編集したものです)

関連記事

おすすめ記事