みなさんはChromeの拡張機能を活用していますか？ 拡張機能を使えば面倒な作業でも効率良くこなすことができます。今回はWebデザインのときに使うと仕事が圧倒的に捗るChromeの拡張機能を紹介します。
ダウンロードURL‥FireShot
ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。
ダウンロードURL‥PerfectPixel by WellDoneCode
ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコーディングなしでデザインを確認することができます。
ダウンロードURL‥Window Resizer
PC、スマートフォン、タブレットなど指定したサイズにブラウザのウィンドウを変更することができます。レスポンシブのデザインを確認するときに便利です。オプションで任意のウィンドウサイズのテンプレートも作成することもできます。
ダウンロードURL‥WhatFont
テキストにマウスオーバーすることでフォントの情報を簡単に取得することができます。
ダウンロードURL‥ColorZilla
サイト上のオブジェクトのカラーコードをスポイドで抽出することができます。スポイドで取得したカラーコードは履歴に残るので、後からでも参照することができます。
ダウンロードURL‥Page Ruler
Webページ内の任意の場所の幅と高さを計測することができます。サイトのレイアウトを調整するときや、画像を掲載するときのサイズを考えるときなどに重宝します。
ダウンロードURL‥Yet Another Lorem Ipsum Generator
ダミーテキストを簡単にクリップボード上にコピーしてくれます。また、フォームにフォーカスを当てた状態で拡張機能のボタンを押すことで自動的にフォームにダミーテキストを入力できます。メールアドレスや日付のテキストも用意されています。設定でコピーするダミーテキストのテンプレートを変更することも可能です。
ダウンロードURL‥Clear Cache
ブラウザのキャッシュをワンクリックで削除することができるようになります。サーバーでブラウザキャッシュが効くような設定になっていると、CSSや画像の変更が反映されない場合があります。そういった場合この拡張機能を使うと簡単に反映させることができます。
ダウンロードURL‥META SEO inspector
開いているサイトのmeta情報を確認することができます。SEOをきちんと考慮したサイトを制作する場合は、SEO的に良くない箇所を指摘してくれるので非常に便利です。
ダウンロードURL‥Check My Links
ページ内にリンク切れがないかチェックする機能です。拡張機能のボタンを押すことで正常にリンクが貼られているものは緑色になり、リンク切れの場合は赤色で表現されます。わざわざリンク切れのチェックの際にクリックして調べなくてもいいので、作業時間の短縮になります。
ダウンロードURL‥User-Agent Switcher for Google Chrome
ブラウザのユーザーエージェントを簡単に切り替えることができます。モバイル表示とPC表示をユーザーエージェントの判定で切り替えているサイトの場合は、表示の確認を素早くすることができます。
ダウンロードURL‥Image Size Info
右クリックで画像のプロパティをすぐに確認できる拡張機能です。本来のサイズ、表示しているサイズ、解像度、ファイルサイズを簡単にチェックすることができます。
1. FireShot
ダウンロードURL‥FireShot
ページのキャプチャを撮影できる拡張機能です。ページ全体をキャプチャ、目に見える部分をキャプチャ、選択してキャプチャすることができます。ランディングページなど縦長のページのスクリーンショットを撮影するときに便利です。
2. PerfectPixel by WellDoneCode
ダウンロードURL‥PerfectPixel by WellDoneCode
ページ内に任意の画像を重ねることができる拡張機能です。画像を動かしたり、透過させたり、サイズを変更したりしてレイアウトすることができます。ボタンやロゴの配置を迷っているときにコーディングなしでデザインを確認することができます。
3. Window Resizer
ダウンロードURL‥Window Resizer
PC、スマートフォン、タブレットなど指定したサイズにブラウザのウィンドウを変更することができます。レスポンシブのデザインを確認するときに便利です。オプションで任意のウィンドウサイズのテンプレートも作成することもできます。
4. WhatFont
ダウンロードURL‥WhatFont
テキストにマウスオーバーすることでフォントの情報を簡単に取得することができます。
5. ColorZilla
ダウンロードURL‥ColorZilla
サイト上のオブジェクトのカラーコードをスポイドで抽出することができます。スポイドで取得したカラーコードは履歴に残るので、後からでも参照することができます。
6. Page Ruler
ダウンロードURL‥Page Ruler
Webページ内の任意の場所の幅と高さを計測することができます。サイトのレイアウトを調整するときや、画像を掲載するときのサイズを考えるときなどに重宝します。
7. Yet Another Lorem Ipsum Generator
ダウンロードURL‥Yet Another Lorem Ipsum Generator
ダミーテキストを簡単にクリップボード上にコピーしてくれます。また、フォームにフォーカスを当てた状態で拡張機能のボタンを押すことで自動的にフォームにダミーテキストを入力できます。メールアドレスや日付のテキストも用意されています。設定でコピーするダミーテキストのテンプレートを変更することも可能です。
8. Clear Cache
ダウンロードURL‥Clear Cache
ブラウザのキャッシュをワンクリックで削除することができるようになります。サーバーでブラウザキャッシュが効くような設定になっていると、CSSや画像の変更が反映されない場合があります。そういった場合この拡張機能を使うと簡単に反映させることができます。
9. META SEO inspector
ダウンロードURL‥META SEO inspector
開いているサイトのmeta情報を確認することができます。SEOをきちんと考慮したサイトを制作する場合は、SEO的に良くない箇所を指摘してくれるので非常に便利です。
10. Check My Links
ダウンロードURL‥Check My Links
ページ内にリンク切れがないかチェックする機能です。拡張機能のボタンを押すことで正常にリンクが貼られているものは緑色になり、リンク切れの場合は赤色で表現されます。わざわざリンク切れのチェックの際にクリックして調べなくてもいいので、作業時間の短縮になります。
11. User-Agent Switcher for Google Chrome
ダウンロードURL‥User-Agent Switcher for Google Chrome
ブラウザのユーザーエージェントを簡単に切り替えることができます。モバイル表示とPC表示をユーザーエージェントの判定で切り替えているサイトの場合は、表示の確認を素早くすることができます。
12. Image Size Info
ダウンロードURL‥Image Size Info
右クリックで画像のプロパティをすぐに確認できる拡張機能です。本来のサイズ、表示しているサイズ、解像度、ファイルサイズを簡単にチェックすることができます。
