ツール
Web制作がはかどるGoogle Chromeおすすめの拡張機能14選
2018年09月27日 20:00 2018年09月28日
こんばんは！社員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とモバイル端末でファイルやリンク、通知などを簡単に共有できるアプリです。
スマホでページや写真を確認したいときも、わざわざメールなどで送らなくてもこの拡張機能ひとつで共有できます。
主に下記のような情報が共有できます。
- 写真、動画、音楽、PDF など各種ファイルの共有
- サイトのURL の共有
- コピーした文章の共有
- 地図アプリで表示した住所の共有
- スマホの通知をPC に表示・削除
まとめ
WEB制作の際に便利な拡張機能をご紹介しました。
毎年どんどん便利な拡張機能が出ているので、使うだけで作業効率化できますね。
今回は本当に使えるものだけを厳選したので、ぜひインストールしてみてください！
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
