はじめに
Google Chromeは、多くのユーザーが利用する人気のブラウザで、現場でもよく使われているブラウザです。Chromeの拡張機能は、ブラウザの機能を拡張したり、カスタマイズすることができます。これらの拡張機能は、Google Chrome Web Storeからダウンロードしてインストールすることができます。
拡張機能は、アドブロックやページの自動リロードなどがあります。また、ブラウザーのインターフェースのカスタマイズ、ブックマークバーの外観などを変更することができます。
今回はその中でもデザイナーに役立つものを紹介します。
拡張機能追加方法
拡張機能を利用するには、まずGoogle Chrome Web Storeから拡張機能を検索して、インストールする必要があります。インストールが完了したら、Chromeブラウザーのツールバーにある拡張機能のアイコンをクリックすることで、拡張機能を有効化することができます。
多くの拡張機能が無料で提供されているため、自分に必要なものを選んで利用することができます。
1. Wappalyzer
Wappalyzerは、Webサイトの使用言語などを自動的に検出する拡張機能です。
使用用途
私がこれを使っている理由は、他のサイトが何で作られているか勉強するためです。何気なくたどり着いたサイトで使ってみると珍しい言語で書かれていたり、プラグインを発見することができたりしています。
無料で使えますのでぜひ追加してみてください。
2. What Font – find font
WhatFontは、Webサイトで使用されているフォントを簡単に特定できる拡張機能です。
WhatFontを使えば、Webサイト上のテキストをホバーするだけで「何のフォントか」「フォントサイズ」等が表示されます。ソースコードを調査する必要もなく、他のツールを使用する必要もありません。このツールはグラフィックデザイナー、Webデザイナーにとって特に便利です。
使用用途
先ほど書いたように、このサイトはどのフォントを使用しているか気になった時に拡張機能のボタンを押しただけで確認できるのが時間短縮になります。わざわざソースコードを見るのはめんどくさいですよね、、
もちろんこちらも無料です。
3. Color Pick Eyedropper
Color Pick Eyedropperは、Webサイト上の色を簡単に取得するためのブラウザー拡張機能です。Color Pick Eyedropperを使えば、Webページ上の任意の点をクリックして色を選択することができます。選択した色はRGBまたはHEX形式で表示され、コピーすることができます。
使用用途
私は、バナー作成の時によく使用しています。本記事のバナーはPhotoshopで作成していますが、Chromeのロゴを検索し、Color Pick EyedropperでChromeの色を持ってくる時に使用しました。
Web制作の際も「あのサイトの色を試してみたい」となった時に使えるので必須な拡張機能の一つです。
こちらも無料で使えます。ぜひ使ってみてください。
4. TDK Meta Checker
こちらは、フリーランスのWeb制作者でSEOまで見ている方に必須ではないでしょうか。TDK Meta Checkerは、Webサイトのメタデータを確認するための拡張機能です。
Webページのタイトル、メタデスクリプション、キーワードなどの情報の確認や、SEO（サーチエンジンオプティマイゼーション）の最適化に役立つ情報を提供します。
SEO初心者の方でもタイトルの付け方、キーワードの付け方の勉強になると思います。
使用用途
Web制作の際、競合他社がどのようなタイトル、メタディスクリプションにしているか調査しクライアントのサイトに適応していく時に使用しています。また、反映されているか確認の作業にも使っています。
こちらも無料で使えます。ぜひ使ってみてください。
5. Visbug
Visbugは、Webサイトのデザインやレイアウトの調整を行うための拡張機能です。
WebページのHTML要素を簡単に選択してサイズや位置、画像変更をすることができます。実際にコードを変更している訳ではない為、リロードすると元に戻ってしまいます。
使用用途
私は、バナー変更や、クライアントのサイトを写真変更した際の見た目の変化を提案する際に使用することが多いです。デザインの変更を試してみたい時はChromeに元々入っている”デベロッパーツール”を使用します。
こちらも無料。ぜひこの機会に使ってみてください。
まとめ
5つの拡張機能を紹介しました。上記の類似のものもたくさんありますが、上記に挙げたものが1番手軽でした。デザイナーでも担当業務が違うと必要な拡張機能が違いますので色々試してみてください。
