本当に使えるChromeアドオン12選【タスク別】
はじめまして！Webディレクターの佐藤です。
これまでWebディレクターは「業務で使える少しマニアックなツール」を紹介してきました。今回は番外編として、ちょっと毛色を変えた記事にしてみようと思います。
最近、新卒採用のための説明会や面談などに参加させていただく機会があるのですが、「Webディレクターの仕事って何をやってるの？」という疑問を持っている学生さんが多くいることに気づきました。たしかにわかりづらいですね…。私も学生時代だったら想像がつかないと思います。
ということで、今回はWebディレクターの仕事について解説しながら「実際に使用しているChromeアドオン」を紹介できればと思います。
※GoogleおよびGoogleロゴはGoogleLLCの登録商標であり、同社の許可を得て使用しています。
1.調査
プロジェクトにアサインされると、まず企画や施策を提案するために、商材は？ターゲットは？競合は？市場は？など、様々な観点からたくさんの調査をして、最適解を出すことが求められます。
1-1.Wappalyzer
(C) Google
使用頻度：★★★☆☆
閲覧しているサイトがどんなサーバー、システム、言語を使って作られているのかがひと目でわかるアドオンです。こんなサイトを作りたい！でもどうやって、どんなシステムで？ということを知りたいときに活用できます。
1-2.Google翻訳
(C) Google
使用頻度：★★★☆☆
言わずもがな、閲覧しているサイトの文章を簡単に翻訳できるアドオンです。ベタですが、かなり便利です。調査時に、英語のサイトから情報を引っ張ってこなければならないときや、使いたいツールの説明が英語で書かれている…なんてこともしばしば。
そんなときは、これ！閲覧しているWebサイトのテキスト部分を選択するだけで、本当に簡単に翻訳ができます。いちいち翻訳サイトに飛ばなくてもよいので、本当に便利です。
1-3.OneTab
(C) Google
使用頻度：★★★★☆
OneTabでできることはたくさんありますが、ざっくり言うと「ワンクリックで、閲覧しているタブをまとめることができるアドオン」です。ワイヤーフレームや企画・提案書を作成しているときなど、競合や参考となるサイトを調査する際によく使用しています。
案件ごとに参考にしていたサイトをまとめることで、作業を一旦中断したときも、前まで見ていたサイトを一気に開くことができます。また、カテゴリごとにまとめておくと「参考サイト集」をさくっと作れてしまいます。
2.企画・提案
調査が終わると、企画制作や提案のフェーズに入ります。
実際に頭と手を使って各種資料や提案書などに情報を落とし込んでいく作業になります。
2-1.Awesome Screenshot
(C) Google
使用頻度：★★★★★
様々なブラウザで使用できるキャプチャ用のアドオンです。
参考サイトのここを真似したい！提案書でこのサイトのキャプチャが必要！というときなど、いろんな場面で活躍します。制作後半のデバッグ段階でも使用することがあります。
ページの一部・全体などキャプチャ範囲を調整することもできますし、保存形式もPNG、JPEGと選択が可能です。キャプチャした画像にメモや指示を入れることもできます。
3.制作（ライティング・デザイン・コーディング）
企画・提案がクライアントから承認され、対応施策が決定すると、その企画・提案で設定した目標を達成するための制作物を作るフェーズに入ります。
プロジェクトによって対応するものは変わってきますが、ライティング、デザイン、コーディングなどがメインになります。
3-1.文字数カウンター
(C) Google
使用頻度：★★★☆☆
Web上の文字数を数えることができるアドオンです。
Webライティングで重要となってくるのはコンテンツの中身ではありますが、同様に気にしたいのが文字数です。長すぎず、短すぎず、ユーザーにとって最適か？コンテンツの狙いから外れていないか？などを、文字数の観点からチェックするときに使います。
Web上のテキストを選択→右クリック→【文字数カウンター】選択、のステップで簡単に文字数をチェックすることができ便利です。実際に作成した文章のチェックはもちろん、競合コンテンツのボリューム感を見るときにも使用します。
3-2.ColorZilla
(C) Google
使用頻度：★★★☆☆
Webページ上で使用されている色を調べることができるアドオンです。
該当箇所の色コードをワンタッチでコピーできるので、デザイン配色のイメージをデザイナーさんに伝えたいとき、色の修正指示を出したいときなど様々な場面で使用できます。
3-3.The QR Code Extension
(C) Google
使用頻度：★★★★★
閲覧しているWebサイトのURLをQRコード化して表示してくれるアドオンです。
Webデザインを作成し終えると、ようやく「Webサイト」として機能させるためのコーディングが始まります。コーディングでは、PC版だけでなくスマホ版も作成するのがほとんどですので、スマホでの確認が必須になります。
そんなときはどうするでしょう？PC版でURLを確認・コピーしてスマホに送る→そこからスマホでブラウザを立ち上げて確認…なんてことはしません。このアドオンを使えば、PCでQRコードを生成→スマホのリーダーで読み取り、一瞬でスマホ版のページを開くことができます。
4.デバッグ、サイトリリース～分析
デザイン、ライティング、コーディングなどWebサイトの制作フェーズが完了すると、いよいよデバッグ＆サイトリリースです！
もちろん、これまでに各フェーズで担当者がチェックをしてきていますが、Webディレクターは制作物の最後の砦。最終のデバッグを行ってからサイトをリリースします。
4-1.META SEO inspector
(C) Google
使用頻度：★★★☆☆
Webサイトの内部で、特にSEO周りについて使用するタグや設定についてチェックしてくれるアドオンです。SEOは特に施策に紐づくところなので、入念なチェックが必要です。Titleタグ、Description、Keywordの確認、OGP設定の確認、ファビコンなどもチェックできます。
4-2.User-Agent Switcher
(C) Google
使用頻度：★★★☆☆
ユーザーエージェント（※）を、ほかのOSやブラウザに切り替えることができるアドオンです。最終チェック時に以外と見落としがちなのが、自分の使用していないブラウザや、スマホでの表示チェックです。最後の最後に、一度確認しておくのに便利です。
※ユーザーエージェント（User Agent）とは、利用者のOSやブラウザなどの情報です。
4-3. Tag Assistant
(C) Google
使用頻度：★★★★☆
GoogleAnalyticsやGoogle広告などの計測タグが正しく設置されているかを確認するのに使用します。Webサイトリリース後に、動作確認用として使用します。
サイトリリース後は、アドオン以外にもGoogleAnalyticsなどのツールを使って、分析や効果検証をしていきます。そうしてPDCAを回して、より良いWebサイトに改変していきます。
5.その他
最後に、Webディレクターの業務をまたいで使うものや、業務とは関係のないもので「これは！」と思ったアドオンをご紹介します。笑
5-1.Elegantt
(C) Google
使用頻度：★★★☆☆
前回のツール紹介記事で紹介されていたタスク管理ツール「Trello」をガントチャート化するアドオンです。Trelloに登録したタスクが、ガントチャートで見られるようになるので、誰が・いつまでにがわかりやすくなります。
営業・お客さん・制作などそれぞれとやりとりをして、1つのプロジェクトを進めていくリスペクトのWebディレクター。自分はもちろん、プロジェクトメンバーのタスク状況や、その進捗管理はプロジェクトを通して非常に重要なものになります。リスペクトのWebディレクター課では、現在タスク管理ツールは特に定まっておらず人それぞれ使いやすいものを使用していますが、Trelloで管理する場合はこのアドオンを使うのも有効かもしれません。
5-2.Tabby Cat
(C) Google
使用頻度：★★★★★（一部の人に）
個人的におすすめなので最後に紹介させてください。笑
ブラウザで新しいタブを開くたびに可愛い猫が出てくるアドオンです。100%癒やし用です。
タブを開くたびに（？）猫を装飾できるアイテムが増えたり、特定の条件でないと出現しない子猫がいたりして楽しいです。Webディレクター内では流行ってませんが、リスペクト社内では導入してる人がじわっといる気がします。
6.まとめ
Webディレクターの業務についてアドオンを通して紹介しましたが、いかがだったでしょうか？ 少しでもリスペクトのWebディレクターの仕事の流れについて、伝わるといいのですが…。
中途入社の方や、他社の方の話を聞いていると、リスペクトのWebディレクターの業務範囲はかなり広いようです。そのため、入社後に様々なことを勉強して身につける必要があるのですが、その分、企画や提案の幅に制限がないこと、様々な人を巻き込んでプロジェクトを推進していけることなど、やりがいに溢れています。
枠に囚われたくない！様々な人と関わりたい！新しいことをどんどん取り入れたい！という人に向いているのではないかな、と思います。
少しでも興味を持ってくれた方は、ぜひ、座談会や説明会に来てみてくださいね。
