creatersnest

Webデザイナーに使ってほしいChromeの拡張機能15選


Google Chromeは「拡張機能」として、さまざまな便利機能を追加することができます。今回はWebデザイナー向けに、Web制作や制作後の確認、他社サイトの研究や情報収集に役立つ拡張機能をご紹介します。

 

Firebug Lite for Google Chrome

firebug

Firebug Lite for Google Chrome
入れていない人はいないと思われるほどの定番拡張機能。表示しているページのHTMLと対応するCSSを表示し、そのまま修正と確認が可能です。他の人が作ったサイトだったり、CSSをどう宣言しているのか忘れてしまったときに大活躍。広いディスプレイだとさらに捗ります。

 

 

Page Ruler

pageruler

Page Ruler
表示しているWebページにオーバーレイする形でガイドラインが表れ、画像の大きさ(ピクセル数)や上下左右からの位置を簡単に計ることができます。本来ならピクセル数をキッチリと計算して仕様書を作った後で設計してマークアップすべきですが、そうもいかない現場も多いので役立っています。

 

 

Window Resizer

windowrisizer

Window Resizer
ブラウザのウィンドウサイズを一発で任意の大きさに変更でき、レスポンシブサイトを作っているときの動作確認が捗ります。キーボードの数字キーを使ってウィンドウサイズを選ぶこともできるので、パパパっと変更していけばクライアント先でのデモのときなどに話が早くなります。

 

 

User-Agent Switcher

uaswitcher

User-Agent Switcher
ブラウザから送出されるユーザーエージェント(UA)を変更できます。ユーザーエージェントだけを見て挙動を振り分けるのでは、すべてにおいて万全とはいえません。ケースバイケースで使ってみましょう。

 

 

PerfectPixel

perfectpixel

PerfectPixel
表示しているWebページの上に任意の画像を重ねることができる拡張機能。透明度の設定も可能で、「ここにボタンが入ったらどうなるのだろう」というのを手軽にイメージできます。画像を重ねた状態で別途スクリーンキャプチャを撮ればイメージ資料の作成が捗ります。

 

 

Pasty

pasty

Pasty
コピー&ペーストで大量のURLを一気に開くことができる拡張機能。たとえば、ソースコード内にリンクが30個含まれていたとき、ひとつずつ新しいタブで開いて確認していくのは面倒です。リンクURLを全選択してコピーして、Pastyのボタンを押すことでクリップボードに保存されたすべてのURLが新しいタブで開かれます。大量のURLを含んだメルマガの制作時などに大活躍。

 

 

Clear Cache

clearcache

Clear Cache
CSSやJavaScriptを修正したのにブラウザで表示させると変わっていない、という体験は誰しもあると思います。本来ならCSSやJavaScriptを呼び出す際にユニークなクエリー文をつけてキャッシュを回避すべきですが、どうにも忙しいときにはこの機能拡張を使えばボタンひとつで根強いキャッシュを消去できます。

 

 

WhatFont

whatfont

WhatFont
表示しているWebページで使用されているフォント名を取得することができます。日本語環境はまだまだな感じですが、Google FontsのようなWebフォントを使用して、画像には極力頼らないのが本来のWebページのあるべき姿。このフォントかっこいい!というのがあればどんどん調べてメモしておきましょう。

 

 

SEOquake

seoquake

SEOquake
Webページを表示させて「Diagnosis」ボタンを押すことでSEOの診断結果と改善アドバイスを出してくれます。SEO対策はなかなかクライアント先には伝わりづらいものなので、こういったツールで可視化できると便利です。ほかにも、「Googleページランク」や「Googleのインデックス数」の表示もできるので、目標設定を作るときに役立ちます。

 

 

PageSpeed Insights (by Google)

pagespeedinsights

PageSpeed Insights (by Google)
Webページのパオフォーマンスを確認できる機能拡張。Chromeのデベロッパーツール画面内で表示され、解析の結果や改善の対応策説明まで、すべて日本語化されているので非常に分かりやすいです。ブロードバンドが普及したとはいえ、少しでも軽いサイトを心がけたいですね。

 

 

Appspector

appspector

Appspector
表示しているサイトが使っているCMSの名前や組み込まれている機能を解析してくれる機能拡張。Chromeのアドレスバー右側にアイコンとして表示されるだけなのでジャマになりません。「これがWordPressなんだ!」というように、気になるサイトが出てきたときはじっくりと調べてみることにしています。

 

 

SimilarWeb

similarweb

SimilarWeb
マーケティングツールとして人気の「SimilarWeb」の機能拡張版。ワンクリックするだけで即座にアクセス数や離脱率を表示してくれます。画面デザインもキレイで見やすいです。「他社サイトに比べて離脱率はこんなに低いんですよ」といったアピールに使える一方、本当に丸裸で解析されてしまうので墓穴を掘ることにもなりえるツールです。

 

 

ato-ichinen

ato-ichinen

ato-ichinen
ふつうに検索すると更新日(作成日)が古い情報でも検索結果上位に表示されることがあります。この拡張機能を使えば、1年以内に更新されたページのみを絞り込んで表示できるため、Facebookのように頻繁に技術仕様が変わるサイトの情報などを調べたいときに便利です。

 

 

Tutorialize

tutorialize

Tutorialize
月額課金制ながら、Webページのチュートリアルを簡単に作成できる拡張機能。大規模なWebサイトを作成した際など、「ここにはこういう機能があります」という紹介をチュートリアルとしてブラウザ上で実現できるので、紙のマニュアルを作る必要がなくなります。

 

 

Awesome Screenshot: キャプチャーと注釈

awsomescreenshot

Awesome Screenshot: キャプチャーと注釈
ブラウザで表示している範囲内はもちろん、縦に長いページであってもページ全体のスクリーンショットを撮ることができます。○や矢印といった簡単な記号や、ちょっとしたテキストをそのまま追加できるので、簡単なやり取りの作成ならこの拡張機能だけで簡潔させることも可能です。

 

 

まとめ

いかがでしたでしょうか。Chromeの拡張機能は本当にたくさんあって、使いこなせばブラウザという範疇を超えた業務ツールにパワーアップできます。さらにGoogleアプリを活用することで、本当にすべての業務がChromeだけで完結できる日が近づいてきています(もうやっている人もいますよね?)。みんなでよりよいWebの世界を作っていきましょう!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article自然な視線導線を生みだすレイアウト、「Z」と「F」の活用例まとめ