webディレクターTです。

今回はwebディレクター業務でよく使っているチェックツールをご紹介します。
普段デザインのチェック・コーディングのチェックなど社内作業のツールだけじゃなく、他社サイトのチェックなどにも色々利用しているツールがあります。
webディレクターによって使いやすさも異なりますので、あくまでも参考としていただけると幸いです。

※明確なリンク先があれば貼ってますが、人によって利用サイトの好みが分かれるものは内容だけご案内します。

【１】サイトで使われているフォントをマウスでチェック！「WhatFont」（Chrome拡張機能）
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

拡張機能を登録・有効したのち、調べたい文字にマウスを置くとフォント情報が表示されます。

【２】サイトのキャプチャも楽々！「Nimble capture」（Chrome/Firefox/Microsoft Edge拡張機能）
↓Chromeのリンク
https://chromewebstore.google.com/detail/nimble-capture/bpconcjcammlapcogcnnelfmaeghhagj?hl=ja

資料に参考サイトのキャプチャを貼る時、構築中サイトの崩れを制作チームに共有する時、様々な面で使えます。

【３】サイトで使われている技術をササッと調べる「Wappalyzer」（Chrome/Safari/Firefox/Microsoft Edge拡張機能 ほか）
↓Chromeのリンク
https://chromewebstore.google.com/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja&pli=1

WordPressで作っているのか？EC-cubeで作られているのか？ECサイトならプラットフォームはなにか？

【４】デザイン通りにコーディングでるか画面上で重ねてチェックができる「PerfectPixel」（Chrome拡張機能）
https://chromewebstore.google.com/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja

ブラウザ上にデザイン画像を配置して差分チェックが可能です。
スペース・配置・フォントの違いなど重ねることで違いが視覚的に分かります。
ディレクターだけでなく、コーダー自身も自己チェックとして活用できます。

【５】過去サイトが見れる！「Wayback Machine」
https://archive.org/

英語サイトですが、見たいサイトのURLを入力して検索かけると、過去閲覧できる日がカレンダー表示されます。
アーカイブされた過去サイトを見る事ができるので、クライアントのサイトが昔どのような状態だったのか、調査したいサイトの過去状態が見れます。
ただしレイアウトや画像が正しく表示されない場合もあるので、あくまでも参考程度となります。
※Javascriptなどの動的なものは動かないこともあります。

今回は、ざっと５つ紹介いたしましたが、ディレクターが活用するツールやサイトはまだまだ他にもいっぱいあります。
読んでくださってる皆さんが使えるツール・サイトがあれば幸いです！