Webデザイナーが実際に使用しているおすすめのアドオン
ブラウザの拡張機能「アドオン」とは？
アドオンとは既存ブラウザに新たな機能を追加するプログラムのことです。様々な機能を持ったアドオンが用意されていますので、作業効率をアップさせたい人におすすめです。
Google Chrome でおすすめのアドオン 6選
ブラウザには、Google Chrome、Safari、firefox、Internet Explorerなどありますが、中でも国内外で高いシェア誇っている「Google Chrome」を例に紹介したいと思います。
１.サイトで使用しているフォントを簡単に調べる「CSS Peeper」
デベロッパーツール（検証モード）でも調べられますが、こちらの機能を使用すると、フォント名、サイズ、行間、色などフォントに関する情報が一瞬で確認できます。また、フォントだけではなく、ページ内の要素のサイズも調べることもできます。
２.サイトで使用している色を簡単に抽出「ColorPick Eyedropper」
こちらもデベロッパーツールでも調べることができますが、より簡単に色情報を調べることができます。テキスト、画像などWebページ要素のカラーコードを簡単に抽出する事ができます。調べたい部分にカーソルを持っていくと、拡大されますので細かい部分の色の抽出も可能です。
３.ウィンドウのサイズを変更「Window Resizer」
Webデザインを考える上で、様々な画面サイズでの表示に配慮する必要があり、それらをチェックする時に便利なアドオンです。ファーストビューの見え方の確認にも役に立ちます。頻繁に使用するウィンドウサイズは登録しておくことも可能です。
４.スマートフォンや様々なPCブラウザ表示の確認「User-Agent Switcher」
デベロッパーツールにもスマートフォン表示などデバイスの見え方を確認する機能がありますが、上手く機能しない場合にこのアドオンで確認しています。また、スマートフォンだけではなく様々なPCブラウザ表示に対応しているのもWebデザインを行う上でとても便利です。注意が必要なのは、表示の変更をして確認し終わったら、必ずデフォルトの状態に戻すことです。戻すのを忘れていて、サイトが崩れているように見えて焦ったことがありますので気をつけましょう。
５.QRコード生成「The QR Code Extension」
PCで閲覧しているWebページをスマートフォンで見たい時に活躍する機能です。ブラウザのボタンをクリックするだけで、ページURLから一瞬でQRコードを生成してくれます。生成されたQRコードは画像として保存も可能です。
６.Webページを簡単にスクリーンショット「FireShot」
スクリーンショットの範囲はページ全体・表示部分・選択範囲から選ぶ事ができます。Webページをまるごとスクリーンショットできるので、Webページを画像として残しておきたい場合に便利です。
以上がWebのデザインを行う時によく使うアドオンです。
他のブラウザにも同じようなアドオンが用意されているかと思いますので、いつも使用しているブラウザにあったものを探してみてください。
アドオンのデメリットと対処方法
アドオンは作業効率が上がる便利機能ですが、アドオンが多すぎるとブラウザが重くなってしまい、逆に効率が下がるため注意が必要です。本当に必要なものを選んで使いましょう。
また、個人情報を抜き取ったり、不要のアドオンを追加させたり…と危険なアドオンがあります。信頼できるアドオンだったがアップデート後に仕様が変わるケースや開発元が変わって悪質なアドオンに変更するケースがあるようです。
悪質なアドオンの被害にあわないためにも、下記の方法で対策を行いましょう。
- 不要なアドオンが追加されていないか定期的にチェックする。
- 個人情報を入力する場合は、アドオンの入っていないブラウザに切り替える。
アドオンを正しく安全に使い、ブラウザを自分用にカスタマイズして、より便利に使いこなしましょう。
- アドオンのインストールは自己責任でお願いします。
- 企業でアドオンをインストールする場合は、企業ごとのセキュリティポリシーに従って検討しましょう。
WEBデザイナー ／ C.Y
