Web制作がはかどるGoogle Chromeおすすめの拡張機能14選

ツール

Web制作がはかどるGoogle Chromeおすすめの拡張機能14選

2018年09月27日 20:00 2018年09月28日

Web制作がはかどるGoogle Chromeおすすめの拡張機能14選

こんばんは!社員Aです👩

弊社では10月初旬から社員旅行でタイに行くのですが、いよいよあと数日となったのでワクワクしています!

タイのおすすめスポットなどあれば、TwitterやFacebookなどでぜひぜひ教えてください!



さて、今回は「Web制作がはかどるChromeおすすめの拡張機能」をまとめてみました。

 

WhatFont

この拡張機能は、カーソルを合わせるだけでサイト上で使っているフォントが何のフォントかを教えてくれます。

また、TypekitとGoogle Font APIをサポートしており、WEBフォントサービスまで検出してくれます。

「このサイトのフォント、気に入ったけど何のフォントだろう?」って言うときに活躍しますね!

 

IE Tab

多くのエンジニアを悩ませる、IE対応。

この拡張機能では、ブラウザ上でIEの動作確認ができます。わざわざIEを開きたくないときや、IEのないMAC環境でのテストにも最適です。



CSS Peeper

CSS Peeperは、デザイナー向けのCSSビューアです。

使われているフォント、配色、画像などを調べることができ、デザインの際に参考になります。

デベロッパーツールでコードを掘り下げることなく使えるのが手軽で良いです。

 

ColorZilla

500万回以上ダウンロードされている人気のプラグインで、サイト上でクリックするだけでカラーコードを調べることが出来ます。

また、CSSのグラデーションジェネレーターなどもついているので、マルチに活用できます。

 

Web Maker

インターネット接続がなくても、HTML / CSS / JSで実験や実践をすばやく行いたいときに使えます。

Codepenのようなイメージです。

コードを書けば、リアルタイムでプレビュー表示されるので、ちょっとしたコーディングでも活用できます。

 

Full Page Screen Capture

ワンクリックでどんなに長いページでもスクリーンショットを撮ってくれる拡張機能です。

拡張機能のアイコンをクリックするか、ショートカットキーAlt + Shift + Pでも使えるので便利です。

また、保存方法も画像やPDFなど選べるので、お客さんにjpgでサイト確認をしたいときなどに使っています。



Copy All Urls

現在タブで開いているURLをまとめてコピーできる拡張機能です。

参考サイトを見つけたときや、ページのリストアップをしたいときなどにも使えて便利です。

また、コピーだけでなく貼り付けてまとめてタブで開くこともできます。

 

WhatRuns

今開いているサイトで使用しているフレームワークや分析ツール、Wordpressプラグイン、フォントなどをまとめて表示してくれます。

「このアニメーションはどうやって実装しているんだろう?」とか「このサイトはWordpressで作られているのかな?」というときに使えます。

 

Clear Cache

ワンクリックでキャッシュをクリアできる拡張機能です。

キャッシュ、Cookie、ダウンロード、ファイルシステム、フォームデータ、履歴、インデックス付きDB、ローカルストレージ、プラグインデータ、パスワード、WebSQLなど、カスタマイズして削除することもできます。

 

Design Mode

HTMLエディタのようにページ全体を編集することができます。

テキスト量が増えたときにページレイアウトが変化するかどうかや、画像やボタンが見やすくなるかどうかなど、デザインを修正する前に確認できるので便利です。



Image Downloader

ページ内で使われている画像をまとめてダウンロードできる拡張機能です。

ダウンロードしたくない写真は除外してダウンロードすることもできます。

お客様から、現行サイトの写真を使ってほしいなどの依頼が来たときにまとめてダウンロードして、デザイン制作に入ります。

 

GraphiTabs

今開いているタブを、ツリー構造で可視化してくれる拡張機能です。

タブを開きすぎて今何を開いているかわからなくなったときに使えます。

同サイト内でのページも構造化してくれるので、とても見やすいです。

 

SimilarWeb

ワンクリックでエンゲージメント率、キーワード ランク、トラフィック ソースなどサイトのトラフィックなどあらゆるサイトの主要指標を表示してくれます。

自分のサイトだけでなく、競合サイトの情報も知ることができるので、対策が練りやすいです。

 

PushBullet

PCとモバイル端末でファイルやリンク、通知などを簡単に共有できるアプリです。

スマホでページや写真を確認したいときも、わざわざメールなどで送らなくてもこの拡張機能ひとつで共有できます。

主に下記のような情報が共有できます。

  1. 写真、動画、音楽、PDF など各種ファイルの共有
  2. サイトのURL の共有
  3. コピーした文章の共有
  4. 地図アプリで表示した住所の共有
  5. スマホの通知をPC に表示・削除

 

まとめ

WEB制作の際に便利な拡張機能をご紹介しました。

毎年どんどん便利な拡張機能が出ているので、使うだけで作業効率化できますね。

今回は本当に使えるものだけを厳選したので、ぜひインストールしてみてください!

 

スポンサーリンク

この記事を書いた人

社員A

社員A

フロントエンドエンジニア・デザイナーの社員Aです。 多分一番更新頻度が多いかと思います。このブログのテーマも作成しました。ブログの執筆を通じて、やっと日本語Lv.20くらいになれた気がします。 家ではデグーとチンチラという小動物を飼っていて、かなり溺愛しています…!小動物が好きな皆さん、小動物トークしましょう!