DOE HOME > Web技術Tips > ブラウザ > WEB制作者の役に立つChrome拡張機能 20選

category_15_m

WEB制作者の役に立つChrome拡張機能 20選

Pocket

WEB制作者にとって役に立ちそうなChrome拡張機能をまとめてみました。

 

画像を目いっぱい使ったら縦に長い記事になってしまいました。

 

 

それではどうぞ。

WEBサイト制作補助

Clear Cache

chrome_extension-image05

 

ワンクリックでキャッシュやクッキーの削除をします。

 

そのあと自動リロードもやってくれるので、作業効率にけっこう影響あるんじゃないでしょうか。

Dimensions

chrome_extension-image06

 

 

要素間の距離を調べるときに便利なプラグイン。

 

解除するときはもう一度アイコンをクリックします。

IE Tab

chrome_extension-image07

 

本当は無視したいところですが、そうはいかないのが古いバージョンのIEでのチェック。

 

IE8以下のIEのサポートは終わっているとは言え、まだまだ使っている人はいます。

 

IE TabはChrome上でIEでの表示を確認できる拡張機能です。

 

chrome_extension-image08

 

オプションからIEのバージョンを変更できます。

PerfectPixel by WellDoneCode

chrome_extension-image09

 

ブラウザ上にローカルの画像を配置できる拡張機能。

 

ホイールを回して透明度を変更できます。

 

デザイン通りにコーディングできているかのチェックなどにどうぞ。

SEO META in 1 CLICK

chrome_extension-image10

 

見出し要素やmetaタグの内容など、SEO対策に関わる要素を一覧で確認できる。

 

見出し要素は入れ子で表示してくれて、なかなか分かりやすいです。

Web Developer JP

chrome_extension-image11

 

コーディングに役立つ機能が詰まった十徳ナイフのような拡張機能です。

 

オリジナルは英語しかないので、日本語に翻訳したものです。

 

含まれる機能の多くは他の拡張機能で代替可能ですが、[画像] タブの中の機能はユニークなものが多くて重宝しています。

情報収集系

Wappalyzer

 chrome_extension-image17

 

そのサイトに使われているWEB技術を表示する拡張機能です。

 

常にトレンドの先端をチェックしていたいWEB制作者にとって、強力なツールになるのでは無いでしょうか。

 

検出できるWEB技術のリストはこちらから確認できます。

 

似たような拡張機能の『Appspector』と比較すると、

 

  • 検出できるWEB技術の数が多い
  • Appspectorはアイコンだけで、Wappalyzerはアイコンと名前とカテゴリを表示する
  • アイコンのチョイスもWappalyzerのほうがイケてる気がする

 

などなど勝っている面が多く、WappalyzerはAppspectorの上位互換というイメージです。

WordPress Theme and Plugins Detector

chrome_extension-image18

 

WordPressのテーマを調べる拡張機能です。

 

もちろんWordPressが入っていないサイトでは反応しません。

 

WordPressのバージョンが見えてしまっている場合がありますが、放置しておくとハッカーに狙われるなど良いことがないので、セキュリティプラグインなどで隠してしまうのをおすすめします。

セキュリティ系

HTTPS Everywhere

そのサイトがHTTPS接続に対応している場合は自動でHTTPS接続に切り替えるプラグインです。

 

対応していない場合は通常通りHTTPで接続します。

 

HTTPS接続にすると暗号化通信で接続するので、セキュリティレベルのアップが期待できます。

 

特に設定もなく使えるので、とりあえず入れておくのをおすすめします。

パスワード アラート

Googleアカウントで設定したパスワードを他のサイトで入力しようとした場合に警告を発する拡張機能です。

 

chrome_extension-image01

 

Google以外でGoogleのパスワードを入れた瞬間にエラー画面に移動します。

 

Googleのサービスと見せかけたフィッシングサイトに引っかかるリスクが減るので、これもとりあえず入れておくのをおすすめします。

 

検索系

Personal Blocklist (by Google)

検索結果から特定のドメインを除外する拡張機能です。

 

インストールすると、検索結果に『(そのサイトのドメイン)をブロック』というリンクが追加されます。

 

内容は薄いのにSEOだけは優秀なコピペブログなど、毒にも薬にもならないサイトはあまり役に立たないので検索結果から除外しておきます。

 

chrome_extension-image28

DuckDuckGo for Chrome

chrome_extension-image03

 

Googleの検索結果ってその人の国や地域によって最適な検索結果を表示してくれますよね?

 

DuckDuckGoという検索エンジンはその逆で、個人情報を一切収集しないことを目的として開発された検索エンジンで、すべてのパーソナライズを無効化にした検索結果を表示してくれます。

 

『Bangs』という機能について

chrome_extension-image04

 

パーソナライズの無効化とは関係ないですが、DuckDuckGoには『Bangs』という機能があります。

 

これは検索ワードの最初か最後に !g などと付けることによって、検索エンジンを指定して検索できる機能です。

 

指定できる検索エンジンは !g でgoogle検索、!a でamazon検索(co.jpは !ajp)、!yt でYouTube検索など、検索の種類は8,000種類以上らしいです。

自制系

自分を制すると書いて自制と読みます。

 

何かの機能を追加する拡張機能というより、制限をする拡張機能です。

Productivity Owl

仕事中にYouTubeやブログのような仕事に関係ないサイトを、ついつい長時間見てしまうという経験は誰しもあると思いますが、そういった無駄な時間はできれば短いほうが良いですよね。

 

『Productivity Owl』はそのサイトを読み込んだ瞬間からカウントを始め、0になったらタブを強制的に閉じてしまう拡張機能です。

 

chrome_extension-image13

 

演出が無駄に凝っていて、有効化するとブラウザの右下の枝にフクロウが登場し、時間をカウントし始めます。

 

そしてカウントが0になるとフクロウが飛び上がり、タブを閉じてしまいます。

 

フリータイム

とはいえ、四六時中サイトの閲覧を制限されるのはきついですよね。

 

オプションの [FreeTime Scheduler] から、フクロウが登場しないフリータイムというのを設定できます。

 

chrome_extension-image14

WasteNoTime

chrome_extension-image15

 

自分がどのサイトをどのくらいの時間見たかを記録してくれる拡張機能です。

Tab Snooze

 chrome_extension-image16

 

「いま忙しいからあとでこのサイト見よ。」となったとき、タブを一旦閉じて、時間が立ったら自動的に復活させられる拡張機能です。

 

仕事が終わってから、週初めなど、復活する時間は細かく設定できます。

その他

Dream Afar New Tab

chrome_extension-image19

 

Chromeの新規タブの背景に、良い写真をランダムで表示する拡張機能です。

 

chrome_extension-image20

 

写真の切り替わるタイミングは右上のメニューから設定でき、「表示するたび」「1分ごと」「1時間ごと」「1日ごと」から選びます。

 

chrome_extension-image21

 

写真を気に入った場合、左下のアイコンからダウンロードできます。

FireShot

 chrome_extension-image22

 

画面をキャプチャーする拡張機能です。

 

この拡張機能の特徴は、操作が簡単なことです。

 

前回と同じ操作[Ctrl] + [Shift] + [Alt] + [Z] 
ページ全体をキャプチャ[Ctrl] + [Shift] + [Alt] + [V] 
目に見える部分をキャプチャ[Ctrl] + [Shift] + [Alt] + [X] 
選択した領域をキャプチャ[Ctrl] + [Shift] + [Alt] + [C] 

 

全部片手で押せるのが良いですね。

 

画像の保存形式は設定からjpgとpngが選べます。

Image Downloader

chrome_extension-image23

 

ページ内に存在する画像のダウンロードをサポートする拡張機能です。

 

Select Allにチェックをして右上のDOWNLOADを押すと、そのページ内に存在する画像を一括で保存できます。

 

ただ、そのままダウンロードするとダウンロード先が散らかるので、[SAVE TO SUBFOLDER] に保存ファイルの名前を指定してから保存します。

SimpleExtManager

chrome_extension-image24

 

拡張機能を管理する拡張機能です。

 

デフォルトの拡張機能の管理画面と比べるとシンプルなUIです。

 

拡張機能の無効化や削除を行えます。

 

グループで管理

chrome_extension-image25

 

拡張機能をグループとしてまとめることができるので、カテゴリ分けして管理できます。

Stylish

chrome_extension-image27

 

条件にマッチしたサイトに、ユーザーが独自に設定したユーザースタイルシートを追加できる拡張機能です。

 

自己主張の激しい広告や、目がチカチカするような過剰装飾は display: none で非表示にしてしまいます。

 

chrome_extension-image26

 

シンプル・イズ・ベスト。

まとめ

WEB制作者の役に立つGoogle Chrome拡張機能 20選を紹介しました。

 

自分が使っているのばかり紹介していたので技術者よりの拡張機能に傾倒してしまいましたが、デザイナーの方も入れておいて損はないと思います。

 

Chromeウェブストアの直リンク貼っておきます。

 

 

読んでいただきありがとうございました。

Pocket

ホームページ制作のお見積額が40万円以上で、20%OFFキャンペーン

カテゴリ

人気記事ランキング

  1. Google Mapがエラーで表示されなくなった場合の直し方
  2. 無料で使える明朝体の日本語WEBフォント
  3. WordPressの『get_categories』でカテゴリーリストを自由にカスタマイズする
  4. CSS Table displayについて見直してみる
  5. SNSのシェアボタンを自前のコードで設置する際のリンク設定まとめ

最近の投稿

月別アーカイブ

ブログ内検索

ホームページ制作のお問い合わせは横浜のDOEで。