日々ディレクション業務を行う際に、これは便利すぎて毎日使っているんではないか！？と私なりに思っているブラウザの拡張機能を３つご紹介いたします。
今回はChromeですが、各ブラウザでも呼び名や機能が違うので興味あるものを試してみると良いかもしれません。ちなみに、「アドオン」や「プラグイン」と言うワードもありますがイコール拡張機能という認識でOKかと思います。
また、拡張機能はとても便利ですが、中には個人情報を抜き取るウイルスを含んだ危険な拡張機能もありますので、インストールするきちんと調べて使用することもお忘れずに！
それでは早速・・・
＼レ〜ッツGO！（Youtuber風）／
１.GoFullPage – Full Page Screen Capture
GoFullPage – Full Page Screen Capture
これはブラウザの画面で表示されているWEBサイトのページ全体のスクリーンショットを撮るものですが、以前はずーっとFireShotを使用していました。
しかし、ページがスクロールするごとに動くページなどは真っ白になりうまく撮れていなかったりと使い勝手があまり良くないなと思いながらもなぜか他の拡張機能を探すとまでいかなかったのです。
でもこの子に出会ってからは、なぜもっと早く使っていなかったんだ！というぐらい、快適なスクショ生活が送れております。
ちなみに使い方はとても簡単！
開いたサイトで拡張機能メニュー(右上)のカメラマーク? を押すだけ！パッ○マンみたいな子が現れ、撮影が完了すると上図のように全体が表示された画面に変わります。そしたらメニューバーの下にあるEditメニューが現れますので、PDFか画像(png/jpg)で保存できるので希望のファイル形式のボタンをクリックするとダウンロードされます。
2.WebDeveloper
https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm
「CSS」や「images」など色々なタブがあるのでまだ全ての機能を使いこなせてないのですが、私がよく使っているのが「information」タブになります。その名の通り”情報”に関するデータが見れるのですが、リンクが一覧化されたりとても便利なんです！
そのほか、サイトで使われている色が一覧化できる機能やカーソルを合わせた箇所の色が分かる機能など、ディレクション業務だけでなくデザイナーやコーダー、プログラマーにも活用できる拡張機能ではないかと思います。
↓英語表記なので、解読が必要ですが慣れれば⭕️
View colour information：サイトで使用されている色の一覧
View Link information：リンクの一覧表示
View Meta Tag Information：メタタグの情報一覧
Display Color Picker：マウスを合わせている箇所の色が表示される
3.Responsive Viewer
https://chrome.google.com/webstore/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb
1つのビューに複数の画面を表示する拡張機能ですが、表示するサイズも自分で簡単にカスタマイズできるのも使い勝手が良いポイントかと思います。最近のサイトはレスポンシブ化が進んでいるのでブラウザ検証の際には一気見できて便利ですし、サイトをレスポンシブ化したいという依頼でリニューアルを行う際のチェックにも大活躍です！
しかもこの拡張機能の良いところは、リンクをクリックして遷移する動きなどが連動して確認できることなのです。
▼こんな感じ
以上が私のよく使う拡張機能でした。
他にも安全で使いやすい拡張機能を利用して業務の効率化ができればと思います。
