Webディレクターにお勧めのChrome拡張機能

• Web Create
• 2023.10.13

Webディレクターのもっちです。

Web制作会社のディレクター職となると、要件定義にワイヤーフレーム作成、プロジェクトの進行管理とスケジュール調整、あがってきた成果物の品質管理など業務は多岐にわたります。
これじゃいくら時間があっても足りません！！と世界の中心で叫びたくもなりますが、少しでも時間節約ができるよう愛用しているツールがあります。

今回はその中からChrome拡張機能に絞ってご紹介させていただきます。

The QR Code Extension

まず外せないのが「The QR Code Extension」です。
こちらはPCで表示させているページのQRコードを生成し、スマホのカメラを使ってQRコードをスキャンすることで、スマホで該当ページにアクセスできるようになる、というものです。

最近はスマホファーストとなっており、Webサイトによっては8～9割のユーザーがスマホからのアクセスとなっている時代です。
そのためスマホの実機での確認は必須となっているのですが、URL直打ちは面倒…というときに役立つ優れモノです。

ダウンロードは以下から可能です。
https://chrome.google.com/webstore/detail/the-qr-code-extension/oijdcdmnjjgnnhgljmhkjlablaejfeeb

Check My Links

こちらは表示しているページのリンクが有効か無効かを判別するツールです。
設定したリンクの正否は判断できませんが、リンク切れを起こしていないかどうかをチェックするには最適なツールです。

「Valid links」は有効なリンクであることを意味し、「Valid redirecting links」は有効なリダイレクトリンクを意味します。
逆に「Warnings」はページ内リンクなどの設定に誤りがあることを意味し、「Invalid links」は無効なリンクを意味します。
「Warnings」や「Invalid links」があった場合は、実際にクリックして、リンク切れを確認することでクライアントへの納品前にリンク切れの不備等を潰すことが可能です。

ダウンロードは以下から可能です。
https://chrome.google.com/webstore/detail/check-my-links/ojkcdipcgfaekbeaelaapakgnjflfglf

シミラーウェブ

シミラーウェブはWebサイトの分析に利用できるツールです。
調査したいWebサイトにアクセスして、拡張機能アイコンをクリックすると下記のような画面が表示されます。

あくまで推計値ではありますが、下記のようなデータを閲覧することが可能です。

・訪問者数
・直帰率
・平均ページビュー
・平均滞在時間
・流入元ソース

Webサイトリニューアルの相談を受けるときに、Google Analyticsのデータを開示いただけない場合に、シミラーウェブの推計値を参考にしたり、競合サイトの調査を行うときに活用できます。

ダウンロードは以下から可能です。
https://chrome.google.com/webstore/detail/similarweb-traffic-rank-w/hoklmmgfnpapgjgcpechhaamimifchmp

UI Build Assistant

表示ページのUI構成要素を表示させる追加機能です。
拡張機能アイコンをクリックすると下記のように画面が変化します。

要素同士の境目を明確にすることでレイアウト崩れを防いだり、気になるページのUI構成要素を確認することでワイヤーフレーム作成にも役立ちます。

ダウンロードは以下から可能です。
https://chrome.google.com/webstore/detail/ui-build-assistant/clbhieamajlakjobcoiheklaoldcjhjf

Wappalyzer

Wappalyzerは、Webページで使われている技術やフレームワーク、サービスを一覧で表示してくれるChrome拡張機能です。

調査したいWebページにアクセスして、拡張機能のアイコンをクリックすると下記のような画面が表示されます。

ダウンロードは以下から可能です。
https://chrome.google.com/webstore/detail/wappalyzer-technology-pro/gppongmhjkpfnbhagpmjfkannfbllamg?hl=ja

WhatFont

その名の通り、表示されているテキストのフォントを確認するためのツールです。
拡張機能のアイコンをクリックするとマウスカーソルが変化し、確認したいテキストの上に置くだけで表示されているフォントが下記のように表示されます。

Webサイトを見ていて気になったフォントを確認する時や、実装時の確認にも役立ちます。

ダウンロードは以下から可能です。
https://chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

まとめ

ディレクターの業務効率化にツールの導入は必須だと思います。
現状に甘んじず、自動化や効率化ができないか？とアンテナをはっておくことも重要です。

この記事が少しでもディレクターの方の参考になれば幸いです。