ベスト10プラスアルファ。Google Chrome拡張機能がデザイナーの強い見方

せっかくGoogle Chromeを使っているのなら、拡張機能を使いこなさない手はありません。Webデザインをする上で非常に役立つオススメのGoogle Chrome拡張機能です。

1. FireShot

ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。

キャプチャなら、これ。どんなに長いランディングページだって、一発で撮影できます。いま表示されているところを撮ったり、ページの全体部分を撮ったり、自由自在。

2. PerfectPixel by WellDoneCode

Webページの好きな場所に、選んだ画像を重ねることができます。どんな画像がレイアウト上必要なのか、どんなボタンやロゴがフィットするのか、迷っている時に、画像の移動、サイズ変更、透過具合などを確認できるものです。

3. Window Resizer

レスポンシブ・デザインの確認のために。スマホ、タブレット、パソコン上の画面表示を確認できます。作業ブラウザのサイズを指定できるので、便利。決めたウィンドウのテンプレも作れます。

4. WhatFont

フォントの情報入手なら、この拡張機能です。マウスオーバーするだけで、そのフォントがどういうものかが分かります。

5. ColorZilla

Webサイト上のさまざまなオブジェクトのカラー情報抽出なら、これ。スポイトで色彩情報を吸い取ります。カラーコードは作業履歴からもたどれますので、後々の作業にも便利。

6. Page Ruler

Webページ上のある領域を選択すると、その幅や高さ、その他情報を入手できます。デザイン上で画像の適正配置を考えたり、全体のレイアウトを最終調整したりする際に便利です。

7. Yet Another Lorem Ipsum Generator

ダミーのカンプやレイアウト叩き台は、これで楽々。フォームエリアにフォーカスしてこの拡張機能を働かせると、自動でダミーテキストが流し込めます。テンプレートに自分の作成したダミーテキストを記憶させることも可能。メールアドレス、年月日も入れることができるスグレモノ。

8. Clear Cache

Webサイトを制作していて、画像変更やCSSの変更設定がうまく反映されないことがよくあります。これはサーバー側でブラウザのキャッシュを有効にしている場合に多いです。Clear Cacheはその名の通り、ブラウザのキャッシュをクリックひとつで消すことのできる拡張機能です。

9. META SEO inspector

SEO対策に配慮しているならば、これは必需品です。いま開いているサイトのmeta情報が手に取るように分かります。これで、SEO的に問題のある箇所はたちどころに修正できますね。

10. Check My Links

ページ内のリンクチェックは、これ。リンク切れ部分が赤字で表示されちゃいます。正しくリンクが貼れているところは緑色表示。逐一クリックして調べる手間を考えると…天国です。

以上がベスト10でした。

ちょっと高度な使い方ですが、あればなおさら便利、という拡張機能が、こちら。

11. User-Agent Switcher for Google Chrome

たとえばPC上での表示とモバイルでの表示とをユーザーエージェント判定で切り替えているサイトであれば、この拡張機能を使うことでユーザーエージェントを即座に切り替えて表示確認できます。

12. Image Size Info

画像にポインタを合わせて右クリックするだけで、その画像の解像度、表示サイズ、本来のサイズがわかります。

いかがでしたか。コレ以外にもWebデザイン作業で役に立つGoogle Chromeの拡張機能はたくさん見つかるはずです。あなたなりの拡張機能、手に入れてみて下さい。