【Webデザイナー向け】Chrome拡張機能13選【2020年版】
作業を効率化したり、様々な機能が用意されているGoogleのChrome拡張機能を上手く使いこなしていますか？
今回は2020年版、Webデザイナー向けにChrome拡張機能13選ということでおすすめするChrome拡張機能について紹介していきます。
拡張機能を有効に使うことでデザインやサイト制作が効率化できたり、参考にするサイトの情報を取得・確認するなど色々な拡張機能が揃っています。
紹介するChrome 拡張機能一覧はこちら
- ColorZilla
- CSS Peaper
- HTMLカラーチェッカー
- What Font
- Gyazo
- FireShot
- Image Downloader
- Page Ruller Redux
- Save to Pocket
- What Runs
- Clear Cache
- Page load time
- Google翻訳
ではそれぞれの拡張機能について解説していきます。
目次
1.ColorZilla
ColorZillaは、Webページ上のカラーデータを取得することができるカラーピッカーの拡張機能です。
取得したカラーをヒストリーとして保存するなどの機能も用意されています。
サイトデザインの制作中に他のサイトを参考にするケースが多いと思いますが、気になるページのカラーデータをcolor Pickerで簡単に取得することができます。
photoshopやAdobeXDでデザインカンプを作成しているなら、取得したカラーデータをコピーして適用させることができるので非常に便利な機能です。
2.CSS Peeper
CSS Peeperは、Webサイトの要素をクリックするだけで、その要素のパディングやマージン、フォントサイズやカラーまで確認することができる拡張機能です。
優れたサイトデザインなどを調べて気になったものはCSS Peeperで確認してデザインアイデアに反映させていきましょう。
3.HTMLエラーチェッカー
HTMLエラーチェッカーは、現在表示しているWebページのHTMLコードに文法上のミスがないかを手軽に調べることができる拡張機能です。
制作中のWebページにエラーがないかすぐに確認することができるのでおすすめです。
4.What Font
What Fontとは、Webページ上で使用されているフォントの種類を確認することができる拡張機能です。
確認したいWebページでWhat Fontのアイコンをクリックすると、文字上にカーソルを置くだけで使用されているフォントが吹き出しに表示されます。
気になるフォントを確認したり、サイトの修正が必要な時などにフォントをさっと把握することができるのでおすすめです。
5.Gyazo
Gyazoとは、Webページの一部や全体のスクリーンショットを撮影することができる拡張機能です。
撮影したスクリーンショットの画像データはpngとなります。
サイトの気になる部分をスクリーンショットで取得してチームメンバーと情報を共有したり、個人的に気になるページや一部を画像として保存することができるので重宝しています。
6.Fireshot
Fireshotは、表示部分やページの一部、ページ全体を画像データまたはPDFで保存することができる拡張機能です。
FireshotはWebデザイナーを目指している方向けにもおすすめできる拡張機能です。
Webデザイナーを目指してポートフォリオサイトを作成したら企業へ応募する際に提出を求められることがほとんどです。
直接、サイトのURLを送る方法もありますが、場合によっては面接担当者はURL内まで確認してくれない可能性があります。
サイト全体をFireshotで画像データまたはPDFデータとして送っておくと面接担当者が確認する可能性も上がりますので画像データもFireshotで作成しておいて提出するといいでしょう。
ウェブページ全体をスクリーンショット – FireShot – Google Chrome
7.Image Downloader
Image Downloaderは、Webページ上で使用されている画像やフォントデータ、画像リンクなどを取得することができる拡張機能です。サイトリニューアルが必要なサイトで素材を収集するときにも重宝します。
またImage DownloaderはWebデザイナーを目指しサイトの模写コーディングを行なっている方には素材を簡単に取得することができるのでおすすめです。
なお、画像を取得して模写したサイトを公開すると著作権の侵害に当たりますのであくまで学習の一環として利用するようにしましょう。
Image Downloader – Chrome ウェブストア – Google Chrome
8.Page Ruller Redux
Page Ruller Reduxは、Webページの要素のwidthやheight、位置をピクセル単位で測ることができる拡張機能です。
制作中のWebサイトのwidthやheightを確認したり、参考にしているWebサイトのサイズなどからアイデアを得るために利用することができます。
Page Ruler Redux – Google Chrome
9.Save to Pocket
Save to Pocketは、気になったWebサイトや記事をPocketに直接、保存することができる拡張機能です。
気になったWebサイトや記事はEvernoteで保存している方もいらっしゃるでしょう。
Evernoteはテキストのメモ機能としてSave to Pocketはサイトの記事をそのまま保存する用として使い分けることをおすすめします。
Pocketは保存したサイトをタグなどでジャンル別に管理したりすることもできるので、あとで参考にしたいサイトを簡単に調べることができます。
Webデザイナーは常にトレンドのデザインやイケてるサイトなどからアイデアを得たり、情報収集をしたりする必要があります。
気になったサイトや今後の案件で使ってみたいデザインなどがあればPocketに保存することでデザインを作るときにすぐに参考にすることができます。
Save to Pocket – Google Chrome
10.What Runs
What Runsは、Webサイトで使われているCMSやツール、プログラミング言語やフレームワークなどを確認することができるツールです。
イケてる企業のサイトや気になったサイトが、どのようなツールやプラグインや言語で作られているのか確認するのは勉強になりますし、何より楽しいです。
まだ使ったことのないプラグインやツールが導入されていたら興味を持って調べてみたり、案件に使ってみる提案をすることができるかもしれません。
変化の激しいWeb業界では新しい情報などは自分から掴みにいかないといけません。検索から調べる場合はなかなか想定された情報ばかり取得することになります。
What Runsを使ってみることで、今まで知らなかった便利なプラグインやツールの存在を知ることに繋がるかもしれません。
11.Clear Cache
Clear Cacheは、Webサイトのキャッシュやクッキーを簡単に削除することができる拡張機能です。
特にWebサイト制作においてコードを追加したり修正したときにキャッシュが残っていると変更した内容が反映されません。
開発ツールなどを立ち上げてキャッシュを削除することもできますが、何度も立ち上げて削除する作業は面倒です。
そこでClear Cacheを導入することで、サクッとキャッシュを削除できるので時間短縮にもつながります。
12.Page load time
Page load timeは、Webページのロードスピードをさっと計算してくれる便利な拡張機能です。
ページの表示速度を計測してアイコン上に表示してくれます。
Page load time – Google Chrome
またChromeの拡張機能ではありませんが、Googleが提供しているSight Speed InsightsというWebサイトのページ速度を分析してくれるサイトがあります。
こちらはサイトの表示速度に影響している画像やコンテンツなどが表示されるので、どこを改善すればいいのか把握することができます。
１秒でもページの表示が遅いだけでユーザーの離脱につながると言われており、ページの表示速度はバカにできないです。
Page load timeは拡張機能としてさっと調べることができて便利ですが、時間があればSight Speed Insightsでページの表示速度を確認してみてください。
14.Google翻訳
最後に紹介するのは、Google翻訳の拡張機能です。
「え、最後にGoogle翻訳？」と感じられた方やGoogle翻訳が拡張機能として存在したことを知らなかった方もいらっしゃるでしょう。
Google翻訳で検索して直接翻訳することもできますが、Google翻訳の拡張機能を追加しておくことでサイト全体をまるっと翻訳してくれるので非常に便利です。
Webデザイナーが情報収集をするとき、海外の情報からトレンドや最新の情報を取得するケースがありますが、英語が苦手は方は情報収集だけでも骨の折れる作業になります。
GitHubは英語ですし、海外で作られたツールやプラグインも多いので英語が苦手な方は苦労されていると思います。
Google翻訳の拡張機能でさっとサイトを翻訳してくれたら理解できるプラグインやツールのページなどもありますので、追加しておくといいでしょう。
（もちろん、英語なんて余裕！という方や英語で読むことで英語力も鍛えてやる！という強者の方は導入しなくて結構です笑）
最後に
現役Webデザイナーの僕が普段利用しているおすすめのChrome拡張機能について紹介してきました。
改めて紹介した拡張機能13選をまとめております。
- ColorZilla
- CSS Peaper
- HTMLカラーチェッカー
- What Font
- Gyazo
- FireShot
- Image Downloader
- Page Ruller Redux
- Save to Pocket
- What Runs
- Clear Cache
- Page load time
- Google翻訳
ここに紹介したものより自分にとって使いやすい拡張機能もきっとあるでしょう。
日々の仕事をより効率的に進めるためにも拡張機能を有効に使うことは大事ですね。
今回は以上になります。
