みなさんは、Google Chromeの拡張機能をどのくらい使用していますか?

Webデザインや、Web制作を行う時に、Chromeの拡張機能を活用することによって作業効率がアップしたり、デザインの参考になる情報を表示することができたりするなど、メリットがたくさんあります。

今回は、デザインやWeb制作を行っている人におすすめのChrome拡張機能をご紹介していきたいと思います。

1. CSS Pepper

CSS Pepperは、Webサイト内の要素をクリックするだけで、幅や高さ、padding、margin、font-family、色などを調べることができる拡張機能です。

ボタンや見出しなど、気になったデザインのCSSがどのように書かれているのかチェックする時に役立ちます。

2. What Font

What Fontは、Webサイト上のテキストのfont-familyを簡単に確認することができる拡張機能です。

気になるフォントを見つけたら、すぐにチェックしてしまいましょう。

3. HTML エラーチェッカー

HTML エラーチェッカーは、表示中のページのHTMLが正しく書かれているのかを手軽に確認できる機能です。

Web制作中にエラーを確認する時に役立ちます。

4. Muzli 2

Muzliは、InVisionが提供する優れたデザインのアイデアを収集することができる拡張機能です。

Muzliをインストールすると、Chromeで新しいタブを開いた時に最新の情報が表示されたり、新規タブページでスクロールすると海外のデザインメディアの最新記事やDribbbleの優れたデザインなどが表示されます。

5. ColorPick Eyedropper

ColorPick Eyedropperは、Webページの色を抽出できるカラーピッカーが使えるようになる拡張機能です。

他のサイトの配色を参考にしたい時に活躍します。

6. Page Ruler Redux

Page Rulerは、Webサイトを要素のサイズや位置をピクセル単位で測ることができる拡張機能です。

7. Awesome Screenshot

Awesome Screenchotは、Webページのスクリーンショットを撮ることができる拡張機能です。

ウィンドウで表示中のエリアのみスクリーンショットを取ったり、ページ全体のスクリーンショットを撮ったりすることもできます。

8. Web Maker

Web Makerは、Chrome上でCodePenのように簡易的にHTML、CSS、JavaScriptを書いて表示を確認できる拡張機能です。

9. WhatRuns

WhatRunsは、表示中のWebサイトに使われているツールやプラグイン、ライブラリ、フレームワークなどをチェックすることができる拡張機能です。

気になるWebサイトがどのようにして作られているのか、どういったツールが使われているのかチェックする時に役立ちます。

10. Clear Cache

Clear Cacheは、キャッシュやクッキーを簡単に削除することができる拡張機能です。

Web制作中に、最新の画像が反映されない場合などに簡単にキャッシュを削除することができるので、作業効率が向上します。

11. Palette Creator


Palette Creatorは、表示中のWebサイトの画像からカラーパレットを作成することができる拡張機能です。

カラーパレットを作成したい画像を右クリックして、「Palette Creator」のメニューから何色のカラーパレットを作成するか選択すると、カラーパレットが表示されます。

下記のようなカラーパレットツールと組み合わせて使うことによって、配色の様々なアイデアを見つけることができるのではいないでしょうか。

12. Site Palette

Site Paletteは、開いているWebページから色を抽出してカラーパレットを作成することができるプラグインです。

13. ato-ichinen

有効にしておくと、Googleで検索した時に自動で公開日が1年以内のページに絞って検索することができるようになるプラグインです。

手動で期間を指定することもできますが、ワンクリックで簡単に切り替えることができ、新しく検索した時に自動で適用されるので最新情報を集めている時に役立ちます。

14. Save to Pocket

表示中のWebサイトをワンクリックでPocketに保存することのできる拡張機能です。

気になる記事を見つけた時にPocketに保存しておけば、後からもう一度見たくなった時にすぐ見つけることができますね。

15. Loom

Loomは、ブラウザやウィンドウの動画を撮影することができるプラグインです。Web制作中に、アニメーションなどを共有する時にサクッと動画を取りたい時に役立ちます。

撮影した動画は、URLをシェアするだけで簡単に共有することができ、パスワードをかけてセキュリティを向上させることもできるようになっています。

おすすめの記事