クライアントワークの流れの中で非常に便利でよく使うツールを紹介します！
Chromeの拡張機能・Figmaの機能・WordPressのプラグインの3つから厳選してどのタイミングで使うかを紹介していきますのでぜひ活用してくださいね🙌
Chromeの拡張機能編
Chromeの拡張機能はChromeブラウザ上で使用できる機能で、多種多様なツールがあります。主にWebサイトを分析したり公開前のチェックにしようしたりします。
使い方も簡単で、chromeウェブストアで検索して「Chromeに追加」をクリックしてインストール、ブラウザの右上にパズルのピースのようなアイコンがあるのでその中から使用したいものをクリックするだけです🙌
SEO META in 1 CLICK
こちらはSEOに関連するmetaデータを簡単に確認できるツールです。
SEO対策のためのWebサイトの改善の時によく使用しますが、公開前に内部SEOができているか確認する時にも大活躍のツールです！さっそく使い方を見てみましょう👀
Webサイトにアクセスして「SEO META in 1 CLICK」を使用すると、画面右上にこのようなポップアップが出ます。この中のタブを選択してみたい情報を確認するという使い方をします。
- SUMMARY：このタブでは、タイトルやディスクリプションなどのWebサイトの概要を確認できます。特にタイトル・ディスクリプションは文字数がカウントされ、推奨値の場合は緑色、少なすぎたり多すぎたりすると赤色で表示されます。 他にも見出し・画像・リンクの数といった、他のタブの概要も確認することができます。
- HEADERS：このタブでは見出しの数と構造が確認できます。特に見出しの構造は視覚的に表示されるので、非常に分かりやすいです🙆 上の参考画像のように、Webサイトの骨格がきれいに階層で表示されている状態が理想の形です。場合にもよりますがSEO対策も兼ねて、使用できるところではH3くらいまで使用して構造を作ってあげられているとベストです！
- IMAGES：このタブでは画像に関するデータが確認できます。上に表示されているのが画像・altタ属性がない画像・タイトルの設定されていない画像の数になっています。alt属性に関しては意図的に設定しないものもあるので必ずしも0になっていなければいけないわけではありませんが、ここに表示される数が画像の数と一致している場合は入れるべき情報が入っていない可能性もあるので確認しておきましょう！
- LINKS：このタブではリンクの数が確認できます。uniqueは外部リンク、internal uniqueは内部リンクを表しています。また、リンクの一覧では実際にクリックしてどこにリンクしているか確認しに行けるので、リンク漏れのチェックもできます（が、他のプラグインの方が使いやすいので別で紹介します）。
- SOCIAL：このタブでは主にOGP情報の確認に使います。SNSでシェアする際に画像が出たりタイトルが表示されたりしますよね、その設定ができているかの確認ができるのです！ OGP情報はメタタグを使用して設定するほか、プラグインを使用して設定することもできるので別で紹介します！
- TOOLS：このタブでは開いているページをチェックするための他の機能が表示されます。クリックしただけで使用できるものとできないものがありますが、あまり使うことはないのでいったんスルーでOKです🙆
最後のTOOLS以外は使用頻度が非常に高いので、任意のWebサイトで一通り見方を確認しておくことをオススメします！特にご自身のポートフォリオサイトなどがあればSEO対策ができているのかどうか確認してみましょう💪
Wappalyzer
WappalyzerはWebサイトでどのような技術が使用されているかを確認できる拡張機能です。
使用方法は、調べたいページを開いて拡張機能をクリックするだけでとっても簡単です！
調べられる技術も多様で、使用されている言語、フレームワーク、プラットフォーム、分析ツール、その他のサービスなど、そのWebサイトと紐づいてる技術を一覧で確認できます。
使用するタイミングとしてはWebサイト分析の時が多いです🙆♀️
全ての技術が表示されるわけではないのであくまでも参考程度ですが、皆さんお馴染みのWordPressやShopifyは使用されていれば分かりますし、Webサイト内の分析にどのような方法を取っているかも一部分かります！
参考サイトは何で作られているんだろう？という時に確認できるツールです！
Responsive Viewer
Responsive Viewerは、様々なデバイスでの見え方を横に並べて表示できる拡張機能です。
閲覧したいWebサイトを開き、拡張機能を選択すると別タブで画面が開きます。
デフォルトでもいくつかのデバイスが選択されていて、勝手に表示されるようになっています。
この拡張機能自体に何種類ものデバイスが登録されており、具体的なデバイス名を選択してWebサイトの見え方を確認することができます。
また、個別の大きさを入力することもできます。
登録されているデバイス数が多いのであまり必要ないかもしれませんが、日本で主流のノートパソコンなどは入っていないので、そういったデバイスでの見え方を確認したい場合には直接入力しましょう！
有料版を使用することで自分の使いやすい設定を保存することができますが、基本的には無料版だけで十分活用できます🙆♀️
Lighthouse
LighthouseはGoogle公式のSEOツールです！
※Chromeの検証モードから利用できます🙆
使い所としては公開直前・既に公開されているWebサイトのパフォーマンスを確認する際に便利です。
この拡張機能では次の4つのスコアが確認できます。
- パフォーマンス：ページ読み込みの速度や画像表示の速度、ユーザーの操作に応答できるまでの時間などが診断されます。
- アクセシビリティ：Webサイトへ訪れる様々なユーザーや、検索エンジンのクローラなど、Webページを読む者すべてに同等に使用しやすいか診断されます。
- ベストプラクティス：Webサイト自体が信頼できる安全なものかが診断されます。
- SEO：検索エンジンがコンテンツを認識しやすいか診断されます。
更に詳しい情報はGoogle公式のものを確認してみてくださいね！
→ https://developer.chrome.com/docs/lighthouse?hl=ja
例えば「このサイト、表示が遅いな…」と感じた時、このツールを使用することでどこの何が原因になっているかが大まかに確認できます。
Webサイトは特に「読み込みに3秒以上かかると離脱率がおよそ50％になる」とも言われています。パフォーマンスは最低でも合格点（スコア90～100）に持っていきたいですね！
- First Contentful Paint：ページ表示にかかる時間
- Largest Contentful Paint：ページ内の最大コンテンツの表示にかかる時間
- Total Blocking Time：ページ表示からユーザーの操作に応答するまでにかかる時間
- Cumulative Layout Shift：Webページを表示している間にレイアウト崩れなどが生じないか等の指標
- Speed Index：Webページの読み込み時間
上記の5つがメインとして表示され、その下にさらに詳しく「具体的にどこが原因か」がレポートされます。大抵は大きすぎる画像を何とかすれば改善されることが多いのですが、「なぜかすごく重い」といった場合はこのレポートをよく読んでみると解決のヒントが書かれています🙌
ひとつ注意点としては、使用する時間帯や環境、ブラウザの種類（通常かシークレットウィンドウか）で数値は変わりますし、何回もやるとそのたびに数値が変わることもあります。Webページを表示する環境というのはユーザーによって様々なので、100点を目指すのがベストではあるのですが「全体的に合格点（数値：緑）」を優先するようにしましょう！
このように確認することで、改善点を見つけたり、重大な欠陥を事前に見つけたりすることができるかもしれないのでディレクターには必須のツールです！
Figmaの機能編
-準備中です！-
WordPressプラグイン編
-準備中です！-