Web制作者のためのおすすめChrome拡張15

普段使っているChromeをより便利にしてくれる拡張機能。私も様々なものを入れていますが、その中でもWeb制作時に使える便利拡張をいくつか紹介します。Firefoxに対応しているものもありますよ!

LETS

Web Developer

Chrome拡張Firefox Add-onGitHub公式サイト

Webに携わる人は入れておいて損はない拡張のひとつ!長年利用させていただいてます。1クリックでCSSやJavaScriptを無効化したり、画像の非表示、様々なデバイスサイズでの表示、クラスやID名の表示、定規やカラーピッカーまで揃っています!カラーピッカーはCSSで定義されたものだけでなく、画像からも抽出できるのがすごい。日本語版もあるので試してみてくださいね。

CSS Peeper

Chrome拡張公式サイト

UIの美しさが魅力のデザイナー向け拡張。今開いているサイトで使われているフォント、配色、画像など調べられます。グラデーションカラーのチェックもできるのが素敵。要素のボックスモデルも確認できます。

Web Maker

Chrome拡張GitHub公式サイト

HTMLやCSS、JavaScriptのコードを書けば、リアルタイムでプレビュー表示できるChrome拡張。オフラインでも使えます!詳しい使い方は過去記事「CodePenっぽいコードプレビュー・管理のできるChrome拡張【Web Maker】」で紹介しています。

WhatRuns

Chrome拡張公式サイト

開いているWebサイトが使用しているCMSやそのプラグイン、ウィジェット、JavaScriptライブラリー、Webサーバーなど、様々な情報を1クリックで閲覧できます。Webサイトの調査が楽になりますよ!

FireShot

Chrome拡張Firefox Add-on公式サイト

Webサイトの一部、または全画面のキャプチャーが撮影できる拡張。PDF/JPEG/GIF/PNGで保存できます。Webデザインギャラリーページ作成時に大活躍しています!画面キャプチャーはChromeのデベロッパーツールでも使えますが、固定要素があるとうまく撮影できないことがあるのでこちらの拡張がおすすめです。

Create Link

Chrome拡張GitHub

現在開いているWebサイトのURLを、HTMLやマークダウンなど様々な形式でコピーできます。ブログを書き始めてからずっと重宝している拡張のひとつ。Webサイトを紹介する機会が多いブロガーさんには特におすすめ!

GetTabInfo

Chrome拡張

ひとつのサイトだけではなく、今開いているすべてのタブのWebサイトのURLをコピーしたい時におすすめの拡張。全タブのタイトルとURLを一括取得可能です。テンプレートで自由に出力内容を編集できます。ちなみにこんな経緯で開発されましたw

CodeCopy

Chrome拡張Firefox Add-onGitHub

GithubやStack Overflow、MDNなどのWebサイトに掲載されているコードをクリックひとつでコピーできるようになります。地味に便利。

ChromeLens

Chrome拡張GitHub公式サイト

目の不自由な方がどのように見えているのかを検証できるDeveloper Toolの拡張。インストールするとDeveloper Toolに「Chrome Lens」のタブが表示されます。「Enable Lens」にチェックを入れて視覚の種類を選択すると画面全体の表示が変わります。

PrintWhatYouLike

Chrome拡張公式サイト

Webページの不要なところを削除し、必要な部分だけを選択して印刷できるスグレモノ。私は印刷ではなく、必要な部分だけをEvernoteに保存する時に使っています。

WhatFont

Chrome拡張公式サイト

カーソルを合わせるだけで何のフォントかを表示してくれます。クリックするとサイズや太さ、色などの詳細とフォントのサンプルが表示。デベロッパーツールでも確認できますが、この拡張を使えばもっと手軽にできちゃいます。

JSON Viewer

Chrome拡張GitHub

JSON形式のファイルをWeb上で表示する時に読みやすくしてくれます。テーマは選択可能。長いURLが折りたたまれているだけでも見やすいですね。

Clear Cache

Chrome拡張

ブラウザーのキャッシュをはじめ、履歴やパスワードなど、あらゆるデータをクリックひとつで消去する拡張。デフォルト機能でもできることですが、こちらはダイアログなどが出ないので本当に楽ちんです。

GitHub File Icon

Chrome拡張Firefox Add-onGitHub

GitHubのファイル一覧ページに、各ファイル毎にアイコンを付与できる拡張。アイコンがないとめちゃくちゃ困る…というわけでもないですが、あると見やすくなりますね。GitHubをよく使う人は導入してみては?

xvg

Chrome拡張GitHub公式サイト

Webサイト上で使用されているSVGのパスやアンカーポイントが視覚的に見えるようになります。カーソルを合わせると拡大表示されます。


どれもより便利に開発が進められる便利ツールばかり!手軽に試せるのもいいですよね。お気に入りは見つかりましたか?おすすめがあれば教えてくださいね!

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)