
デザイナーの仕事は、バナーやLP制作からモックアップの作成、LPの本番チェックまで多岐にわたります。そんな中で「もっと作業効率を上げたい!」と考えている方も多いのではないでしょうか。
Google Chrome拡張機能を活用することで、デザイン業務をよりスムーズに進めることができます。
今回はアナグラムのデザイナーが厳選した、とくに活躍することが多いGoogle Chrome拡張機能を9個厳選して紹介します。


目次
縦長LPでもきれいに撮れる「FireShot」
Webページのスクリーンショットを撮る拡張機能です。長いLPをキャプチャしても崩れにくいことが特徴です。
他のツールでは、画像が分割されたり、フローティングボタンが繰り返し映り込んでしまうことがありますが、FireShotではそのような問題が発生しづらく、比較的綺麗なスクリーンショットを撮ることができます。
LPの追加コンテンツを制作する際に、FireShotでスクリーンショットし、画像編集ツールでコンテンツを擬似的に配置することで、追加イメージを確認することが可能です。
この工程をスキップすると、LPが公開された際にコンテンツの流れに違和感を感じたり、デザインの統一感が崩れてしまう恐れがあります。
結果、作り直すことになり大幅に時間がかかってしまう可能性があるため、実装する前に擬似的に配置してみるのがおすすめです。
Webページのカラーコードを取得する「ColorPick Eyedropper」
https://chrome.google.com/webstore/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg
色情報を知りたい場所にカーソルを合わせてクリックするだけで、瞬時にコピーできます。
こちらの拡張機能を使うまでは、スクリーンショットをPhotoshopで開き、スポイトツールでカラーコードを取得していましたが、この拡張機能のおかげでその手間を大幅に短縮できました。
特にバナーやLPをデザインする際に、サイトの配色に合わせて統一感のあるデザインを制作する時に非常に使用するツールです。
カラーコードを取得する拡張機能は他にもいくつかありますが、こちらはプレビューウィンドウが大きく表示され、細かい部分の色も拾いやすくなっています。また、最近選択した色の履歴が残るのも一押しポイントです。
Webページのフォント情報を取得する「What Font」
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja
カーソルを合わせるだけで、使用されているフォント情報を知ることができる便利なツールです。クリックすると、フォントのサイズ、太さ、色などの詳細も確認ができます。
デベロッパーツールを開いて確認をすることも可能ですが、こちらを使用すればワンクリックで情報を取得できます。
デザインの統一感を出す際にフォントはとても重要な要素です。バナーやLPのコンテンツ追加など、統一感が求められるデザインをする際はぜひ活用してみてください。
ただし、HTMLで書かれたウェブページ上のテキストは読み取ることができますが、写真や画像の中の文字は読み取ることができません。
コンテンツ幅を瞬時に測る「Designer Tools」

https://chrome.google.com/webstore/detail/designer-tools/jiiidpmjdakhbgkbdchmhmnfbdebfnhp?hl=ja
カーソルを合わせるだけで、LPのコンテンツ幅や画像のサイズを確認できるツールです。
こちらの拡張機能を使用する前は画像ダウンロードをしたりスクリーンショットを撮って画像編集ツールでサイズを測っておりましたが、使用してからは、コンテンツ幅が瞬時に測れるようになり、コンテンツ追加や差し替えをする際の時短に繋がってます。
PC版はカーソルを合わせるのみでサイズを知ることが出来ますが、スマートフォン版のサイズを測りたいときは、検証ツールを開いた後にカーソルを合わせてクリックしましょう。
画像ダウンロードを効率的にする「Image Downloader」
https://chrome.google.com/webstore/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj
こちらの拡張機能を使用する前は、画像を原寸大で保存する場合、デベロッパーツールを使用して画像のURLを開いてから保存するという手間がありました。
こちらを使えば、拡張機能のアイコンをクリックするだけで、ページに表示されている画像をすぐにダウンロードできるため、そのような手順が不要になります。
バナーや既存LPをブラッシュアップする制作の際に、ページ上の素材を使用することがあります。そのような時に活用できる拡張機能です。
QRコードを生成する「The QR Code Extension」

拡張機能のアイコンをクリックするだけで、閲覧中のページのQRコードが生成されます。
QRコードを生成後、スマートフォンのカメラで読み取り、簡単にページを開くことができるため、スマートフォンでの実機チェックに非常に便利な拡張機能です。
こちらの拡張機能を使用する前は、PC上でSlackなどにURLを貼ってスマートフォンでアクセスしていましたが、こちらの機能により実機チェックがスムーズになりました。
BtoCの商材では、多くのユーザーがモバイルからアクセスすることが考えられます。実機でのチェックを行い、テキストや要素のサイズに違和感がないか、挙動に問題ないかなどをチェックし、ユーザビリティを向上させましょう。
キャッシュを削除する「Clear Cache」
https://chrome.google.com/webstore/detail/clear-cache/cppjkneekbjaeellbfkmgnhonkkjfpdn?hl=ja
Webページを更新した際に画像の変更が直ちに反映されなかったり、表示崩れが起こることがありますが、そのような表示のトラブルは、画像のキャッシュが残っていることで起こっている可能性が考えられます。この拡張機能を活用することで、ワンクリックでキャッシュをすばやく削除できるため、Webページを最新の状態でチェックすることができます。
初期設定では最新1時間のデータが対象となっていますが、拡張機能のアイコン上で右クリックし「オプション」を選択することで、変更可能です。また、デフォルトではキャッシュのみが削除対象ですが、必要に応じてCookieや閲覧履歴の削除も可能です。
「Automatically reload active tab after clearing data」の部分にチェックを入れると、選択したデータの削除とページの再読み込みを一度に行うことができ、作業効率が向上します。
Webページをシークレットモードで表示する「Incognito This Tab」
https://chrome.google.com/webstore/detail/incognito-this-tab/nhockicmnnjibbhgcpphjicilgcfehdi?hl=ja
先ほど、Webページ更新後の表示トラブルを避けるためにキャッシュの削除をお勧めしましたが、ブラウザのシークレットモードを使うことで、キャッシュを削除するのと同じようにWebページを最新の状態で確認することが可能です。
通常のブラウザとは違い、シークレットモードではキャッシュやCookieが保存されないため、Webページを最新の状態で見ることができます。そのため、Webページ更新後はシークレットモードでチェックするデザイナーも少なくありません。
シークレットモードを利用する際、開いているWebページのURLをコピーして、シークレットモード上でペーストしてページを開く方が多いかと思いますが、こちらの拡張機能はアイコンをクリックするだけで、現在開いているWebページをシークレットモードで開くことができます。
普段からシークレットモードで確認を行なっている方は、こちらの拡張機能がおすすめです。
複数の画面サイズを同時に確認できる「Responsive Viewer」
https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb
Webページを更新後、デバイス毎に確認を行い表示崩れが起きていないかチェックをしますが、そのような時にブラウザ上で複数の画面サイズを表示し確認が行える拡張機能です。
検証ツールを使用しても同様の確認はできますが、毎回画面サイズを切り替えてチェックする手間がかかります。
こちらの拡張機能を利用することで、そのような切り替え作業をせずに効率的に複数の画面サイズを一覧で確認することができます。
「INACTIVE SCREENS」にある各機種にカーソルを合わせると表示される+ボタンをクリックすると、画面サイズを追加することができます。
「Sync Scrolling」や「Sync Clicks」機能では、複数の画面で同時にスクロールやクリックが行えます。必要に応じてオフにすることもできます。
「Stack screens horizontally」をクリックすると、画面を横一列に整列させることができ、再クリックで元の状態に戻すことも可能です。
こちらの拡張機能を使用して内容を確認した後、もし手元にスマートフォンがあれば、実機での確認も推奨します。実機で確認することで、表示や動作に関する問題を発見することができる可能性があります。
もし「Responsive Viewer」をシークレットモードで使用したい場合は、拡張機能のアイコンを右クリックして「拡張機能を管理」を選択し、「シークレット モードでの実行を許可する」のオプションにチェックを入れてください。
まとめ
「拡張機能を知らなかった」もしくは「使わなくても作業自体は行えるから問題ない」という方もいるかもしれません。
しかし、一つ一つの作業を効率化して制作時間を短縮していくことで、新しい施策のデザインに着手できたり、今まで手が回っていなかった業務を進めることが可能になります。
拡張機能の他にも、「制作スピードを上げる方法が知りたい」という方は、下記の記事でバナーの制作スピードを上げる具体的な方法を紹介しているので、ぜひ参考にしてみてください。
