進行管理
拡張機能を入れる前に
chromeの拡張機能は使っていますか？
とても便利でして、ボタンひとつで閲覧しているサイトが導入しているCMSの種類がわかったり、フォントの種類が特定できたりします。
webディレクションをするにあたってもチェックで使うと時短になる拡張機能がたくさんあります。
一方で利用にあたってはブラウザを操作するコードが走るわけで、セキュリティリスクがあります。
そのため私は意識的に最小限の利用にしています。
便利な機能を見つけたときには、脆弱性に関わる情報などを収集したり、セキュリティアップデートが定期的に行われているかどうかを確認してダウンロードを検討すると良いと考えます。
今回紹介する拡張機能に関しては多くの方が使用していて、ディレクションをするにあたりかなり便利なものを紹介します。
これらのツールを使って業務の効率化をしていきましょう。
業務効率化編
スクショを他人に共有したい時に便利 _ 素晴らしい画面の並べ替えとスクリーンショット
まずひとつ目はスクリーンショットの共有が便利になる拡張機能です。
スクショだけであれば標準機能でもありますが、これを使うと共有用のURLを発行でき共有に便利です。
スクショに図形や文字を追加することもできます。
ディレクションをしているとすごく細かいところのここ！と絵を見ると一発でわかるのに、説明が面倒な時があります。
そんなときにスクショを撮って画像添付…ではなくURL渡して説明できるのが地味に便利です。
一応、データのクラウド保存にあたるのかなとも思うので社内のセキュリティ管理に照らし合わせて使うと良いかと思います。
サイト全体のスクショを撮りたいときに便利 _ GoFullPage
検証ツールを使ってキャプチャを撮ることもできるのですが、サイトの作りによってうまくいかないときもあるので、どっちかを使うと言う感じで使っています。
デザインを作るときに参考にしたいサイトがあるとたくさん撮ったりもするのでそんなときに入れておくと便利です。
また、クライアントに修正完了確認を取るときに、テスト環境を閲覧できませんと言われたときに使うこともありました。
（スクショでは確認が不十分では、との意見もある思いますが…）
参考サイトの構成を知りたいときに便利 _ Wappalyzer - Technology profiler
Wappalyzer - Technology profiler
これを使うとボタンひとつでこのサイトでどんな技術を使っているのかわかります。
なので検証ツールで〜の記述があるから〜を使ってそうだ。って予想する前に目星をつけることができます。
例えば自社で作成していないサイトについて問い合わせや見積もり依頼が来た際に、
最終的にはサイトファイルを調査するのですが、初手でみるときに便利です。
意外と前のWEB担当者から引き継がれてなくてよくわからないなどと言う状況があり得るのですよね…。
品質チェック編
画像のAlt設定が適切がチェックするのに便利 _ Alt & Meta viewer
Altの設定状況をチェックするの便利。
大手だと指定なしだと納品できないなどの規定があったのでかなり重宝しました。
サイトファイル上だけではなく投稿データの画像についてもチェックが一気にできるので使い勝手が良く、チェックが捗ります。
最低限のSEO対策をチェックするのに便利 _ SEO META in 1 CLICK
全体的なチェックをするの便利。
特にコーディングを外注した時など常識的な作りをしているか品質チェックで使ったりしています。
h1タグ等の使い方が適切か？忘れがちなOGP設定は完了しているか？などが最低限必要な設定を洗うことができます。
ここが綺麗だと最低限のSEO設定は対応したとクライアントに言えるのでは。
（今後AIがメインでサイト情報を漁る時代になってもに一次情報としてこのあたりを綺麗に作っておくのはいいことなのではと推測しています。各社のアルゴリズムは現時点でよくわかりませんが。）
ブラウザのウィンドウサイズをリサイズ _ Window Resizer
表示チェックで使っています。
検証ツールでも擬似的に確認できますが、キリの良いタイミングや最終チェックで、実際にウィンドウサイズごとに見え方のチェックをします。
シェアの多いサイズを選択してチェックもできますし、好きなピクセル数に設定して確認することも可能です。
おまけ小技
モバイルでの見え方のイメージの共有に便利 _ モバイル電話シミュレーター - レスポンシブサイトテスト
Web会議の時に使ったらウケが良かったので共有。
スマートフォンやタブレットをPC画面上でシミュレーションしてくれる。
個人的には検証ツールを使えば同じじゃんという感じなのだが、 先方のイメージを膨らませたい時に参考サイトを表示して画面共有すると意外と意見が出たりして便利。
モックの力は偉大だなと感じます。
英語での情報収集のお供に_ iKnow! ポップアップ辞書
あんまり直接Webディレクションは関係ないですが、英語で発信されている情報を収集するときに便利な辞書機能です。
英語が苦手ならページ全体をgoogle翻訳をしてもいいのですが、、
かえって和訳の意味が取りづらかったり、余計なところ（コード例や商品名）まで翻訳されてわけがわからなくなったりして、
面倒だったので、興味のある分野は、英語のまま読むようにしています。
わからない単語があったときに簡単に意味が表示できるので、時短で便利です。
さいごに
拡張機能は入れすぎも良くないので定期的に見直したりいいのがないかなーとパトロールをしています。
AI系の拡張機能も増えてきてるので、今後もちょくちょく紹介していきたいと思います。
