未経験でWebディレクターになった私が最初に知りたかったこと：その２
こんにちは。yubuneです。
今回もWeb未経験ディレクターのテーマで、私が入社して最初に知りたかったこと（その２）を書いていきます。
もしその１から読みたい方はこちらからどうぞ。
その２＝Webディレクター必須、Chrome拡張機能
今回はメチャクチャ便利ツール「Google Chrome拡張機能」の紹介です。
Web界隈では常識かと思うのですが、お恥ずかしながら当時の私はその存在を知らず、上司を呆れさせてしまいました。既にご存知の方は下を飛ばして、目次から各機能紹介にお進みください。
Chrome拡張機能とは、ブラウザ「Google Chrome」に追加できるオプション機能です。様々な種類の機能があり、自分で使いたい機能をChromeに追加することで自由にカスタマイズができます。一部有料のものもありますが、無料の機能で十分なくらい種類が豊富です。
拡張機能はChromeウェブストアから追加します。
拡張機能を「Chromeに追加」すると、アドレスバーの右隣に追加されます。
下のイメージでは、赤い丸の中に拡張機能が表示されています。まだ１つしか追加していないので、さらに追加すれば隣にドンドン増えていきます。
もちろんIEやFirefoxなどの他ブラウザでは使えないので、これを機にChromeを使ってみてはいかがでしょうか？
それでは、未経験でWebディレクターになった私が特にお勧めしたいChrome拡張機能を紹介していきます！
１ The QR Code Extension
閲覧中のWebサイトをスマホやタブレットでも見たいとき、URLをQRコードで排出してくれる機能です。
このように表示されたQRコードをスマホやタブレットで認証させれば、すぐに目的のWebサイトが閲覧できます。
ディレクターは制作進行中に、
・Webサイトがデザイン通りに実装されているか？
・コンテンツ登録後におかしい表示になってないか？
など、高頻度で検証作業を行うため、そのような場面で活躍します。
わざわざURLを手入力する労力は要らないのです……（してた）。
私は業務以外でも意外と重宝しているので、入れておいて損はないかなと思います。
２ Clear Cache
ブラウザのキャッシュをワンクリックで削除してくれます。
検証作業で多用するため、上記の「The QR Code Extension」と同じくらい定番の機能です。
キャッシュを削除する理由については、
例えば、フロントエンドにWebサイトの一部を修正してもらったのに「私のPCだけ修正前の表示のままになってる……」という状況になったら、ほぼ１００％キャッシュが残っていることが原因だからです。
指示した修正が直っておらず、おそるおそる「あの〜直ってないんですけど……」と伝えて「キャッシュクリアした？スパーリロード※した？」と何度相手をイラつかせてしまったことか……（ご指摘ありがとうございます！）。
※スーパーリロードは拡張機能ではないので、今回は説明省略します。
Chromeの設定からキャッシュを削除することはできますが、一言で説明できない程度には手間ですし、何度もクリックをしなければなりません。この拡張機能を使えばクリック1回で済み、とても楽ですね。
３ Window Resizer
Webサイトはブラウザ幅が可変するため、レスポンシブ対応させることが通常なのですが、こちらはその検証作業時によく使う機能です。
様々なディスプレイモニタ・タブレット・スマホのディスプレイサイズに合わせてブラウザを表示することができます。
任意のサイズを設定して、そのサイズに表示させることも可能です。
最終的には実機での検証が正しいのですが、まだその段階ではない初期のうちは、サクッとこちらの機能でチェックを行っていました。
４ Page Ruler Redux
ブラウザ上でサイズを計ることができる機能です。
「この画像のサイズが指示と違う気がするから確認しておきたい」といったことは少なくなく、そんなちょっとしたモヤモヤを解決してくれます。
上記のようなことがある度にデザイナーに「確認してくれますか？」とお願いするのも申し訳ないですし、社内データ以外でもサイズがいくつなのか知りたい場面は多々あるので、こちらも追加しておくのが定石かなと！
上のイメージでは記事のサムネイル画像サイズを計ってみました。
このようにブラウザ上でドラッグするとその選択範囲を計測してくれます。
ブックマークバーの下にメニューがあるので、選択範囲を計測するとそこにサイズが表示されています。選択せず事前にサイズの数値などを入力すれば計測範囲がそのサイズに調整されるため、重ねたり並べたりして指定サイズとの比較をすることも可能です。
５ FireShot ／ ６ Awesome Screenshot
こちらはほぼ同じため、２つ合わせて紹介します。
どちらも縦に長いWebページにも対応したスクリーンショット機能です。
具体的には下記のことができます。
・ページの一番上から下までを１枚の画像にする
・ページ内で選択した範囲だけを画像にする
・今閲覧しているブラウザの表示範囲内を画像にする
ディレクターはコミュニケーションが多く、ちょっとした指示でもわかりやすさを考慮して画像で指示出しを行うこともあります。
FireShotにはペンツールなどが無いのが残念ですが、日本語表記であるのとメニューが極限シンプルなので初手としてとっつきやすいです。
Awesome Screenshotにはスクショ作成後に編集もできます。
イメージ画像に「ここをこうしてください」といった注釈コメントを入れると、相手により伝わりやすく親切な気がします。
上のイメージはAwesome Screenshotで作成しました。
このように場所の指示などはイメージがあると伝達もスムーズですね。
７ Wappalyzer
そのWebサイトがどのサーバー、CMS、プログラミング言語を使用しているかわかる機能です。
「Chrome拡張機能でそこまでわかるの！？」と驚きましたが、上記以外にもアナリティクス、フレームワーク、データベースなども表示されます。
上のイメージではnoteサイトの情報を表示しています。
知識が身に付くまではその情報も「？？？」となりますが、社内の人がよく見ている情報（MTGでよく飛び交う単語など）を主軸として少しずつ覚えていくのが良いかもしれません。
私の場合、リニューアルサイトの事前調査として既存サイトにアナリティクスが導入されているか、CMSは何を使っているかは必ず見ていました。
８ Image Downloader
ページ内の全ての画像を一括ダウンロードできる機能です。
こちらも事前調査の段階でよく利用します。
コンテンツ登録といって、既存サイトのコンテンツ画像をそのままリニューアルサイトに持ってくる作業が必要な場合、そのファイル数が膨大であればあるほど気が遠くなります。
そんなときにこの機能を使えば、ページ内の画像を一括で取得できますし、漏れもなく人的ミスを減らすことができます。
上のイメージでは、noteのおすすめページ内にある画像を抽出しています。
ディレクターはページの構成を考えるために、事前にどんなコンテンツがあるかを把握していることが望ましいです。
・洗い出した画像の中にマップ（の画像）があった
・マップもリニューアルの対象とするか？
・リニューアル後、この画像はどこに配置するか？
上記のように考える時間を割くためにも、画像の洗い出し作業の高速化はとてもありがたいですね。
以上、計８つのChrome拡張機能を紹介しました。
拡張機能って引くほど便利すぎますね……。
今回紹介した機能よりもっと便利なものをご存知の方は、ぜひ下のコメントやTwitterなどで教えてください！
よろしくお願いいたします。
この記事が気に入ったらサポートをしてみませんか？