こんにちは！ASUE編集部です。
ASUEでは広告運用のほか、LPやサイトの保守・運用もサポートしており、守や運用の現場ではサイトの修正だったり、広告運用のテストのための改修業務を行っています。
今回はそんな修正作業に便利なブラウザの拡張機能をご紹介。サイトで使われている色を確認したい、CMSや解析タグは何が入っているか、簡単にスクリーンショットにコメントを入れたい、などなどちょっとした機能が制作現場では大活躍しています。ぜひこれを読んだ皆様も活用してみてください！
目次
Wappalyzer
「Wappalyzer」はサイトで使用している技術を表示することができる拡張機能です。公開情報を読み取る機能なので限りはありますが、以下のような情報を確認することができます。
- CMS
- Webサーバ
- データベース
- JavaScriptライブラリ
- JavaScriptフレームワーク
- プログラミング言語
- アクセス解析ツール
- Webフォント
- 広告ネットワーク
サイトの改修をお願いしたい、と相談があった際にまずはこの拡張機能で確認することが多いです。分かる範囲は限られますが制作の参考になるので便利です！
拡張機能をインストールしたらアイコンをクリックするだけで確認できるので導入も簡単です。
ポイント
- 自社制作でないサイトの調査の際に、使用されているCMSや解析タグの有無などの確認に利用
- あらかじめ調べておくことで聞くべきことなど準備できるので制作の現場でも役に立っています
Awesome Screenshot
ブラウザのスクリーンショットを撮影する拡張機能です。
スクリーンショットを撮る拡張機能は数多くありますが、こちらが使いやすく制作現場でも役立っています。特にページを全て撮りたい時や修正指示を入れたり、PDFに変換して共有したりと、ちょっとした修正作業の際に便利ですね。
画面録画にも対応しているので操作方法のレクチャにも利用できます。
ポイント
- スクリーンショットは色々な場面で役に立つため、制作の現場を問わずあると便利な機能
- 簡易的に修正指示を送る場合や言葉では伝えづらい場面で重宝しています
ColorPick Eyedropper
「ColorPick Eyedropper」は、Webページなどから色の値が分かるツールです。
カラーコードが分かるという単純な拡張機能ですが、資料をパワーポイントで作成していて色味をサイトに合わせたい時などササっとカラーコードが分かるので意外と活用する場面が多いです。
ポイント
- サイトの色味に合わせて要素を追加したい時などに使用できる
- 画像から色を参照できるのが便利
Make Link of All tabs
Chromeで開いている全てのタブのURLとタイトルを任意形式でコピーできる拡張機能。
使いどころが限られそうですが、ブログを書いている方はまとめ記事を作成する時などに利用していることも多いはず。制作の現場に限らず、競合調査をしている時に開いているタブのURLとタイトルをコピーできれば、そのままエクセルに貼り付けたりと活用する場面は多いかもしれません。
ポイント
- 調査のためにタブでサイトを開いている時に、一括でHTMLに変換！
GetTabInfo
「GetTabInfo」も開いているタブのURLやタイトルが取得できる拡張機能ですが、出力方法をカスタマイズできるところが魅力です。
コーディングの際に事例集やリンク集を作る場合などに使っていますが、テンプレートとして保存しておけるので、好きなHTMLにカスタマイズして利用しています。ブログを書く方にもおすすめの拡張機能です。
ポイント
- こちらもタブのリンクを取得する同様の用途ですが、より分かりやすくテンプレートを作成できます
EXIF Viewer Classic
「EXIF Viewer Classic」は、Web上で表示されている写真のEXIFデータをその場で解析してくれるChrome拡張機能。
マウスオーバーするだけで簡単にEXIFデータを調べることができるので、サイト公開など不要な情報が入っていないか確認するために利用。撮影したカメラや編集したツールの情報などがあれば表示できてしまうので、そのような状況を防ぐために利用しています。
入れておくと案外便利な拡張機能の一つです。
ポイント
- 公開された画像に位置情報などがないか確認する時に利用
- 最近ではEXIFが残ってないことも多いですが、念のため入れています
CSS Peeper
CSSを抽出し、美しいスタイルガイドを構築
もうコードを調べる必要はありません。シンプルで整理された美しい方法でスタイルを検査することができます。今すぐ手に入れよう
CSS Peeperは、デザイナーのために作られたCSSビューアです。私たちのChrome拡張機能を使えば、便利なスタイルにアクセスできます。私たちの使命は、デザイナーがデザインに集中し、コードを調べる時間をできる限り短くすることです。
Webサイトのラインハイトやフォント、ボタンのサイズが気になったことはありませんか？私たちは、そんなあなたの好奇心を満たす究極のツールを提供します。私たちは、最も簡単な方法でコードを検査することができます。ウェブ上のオブジェクト、カラー、アセットの隠れたCSSスタイルをチェックできます。
公式の説明にもあるように、CSSをチェックできる拡張機能ですが、シンプルで直感的に見やすいUIになっていて使いやすいです。
CSSをそのままコピーして使いたい、という場合はデベロッパーツールの方が便利ですが、ピンポイントで要素のプロパティを確認したい時はこちらを利用しています。
ポイント
- サイトに使われているカラーが見やすいので、保守業務に役立っています
- 要素の余白やフォントサイズなどの構成も見やすい
Web Maker
こちらは拡張機能の枠ではないかもしれませんが、いわゆるエディタになります。
javascriptの動作確認をしたり、コードを共有する際に利用しています。
ポイント
- Web上でHTMLやCSSの確認をする際に利用
- コードを書いて共有する時にも使いやすいです
HTMLエラーチェッカー
HTMLのチェックが簡単にできる拡張機能「HTMLエラーチェッカー」。
閉じタグの間違いなどHTMLのチェック作業は目視ですると大変なので、拡張機能を使って凡ミスを防ぎます。制作現場ではダブルチェックをしていますが、公開前に念のためチェッカーでも確認します。また、レイアウトが崩れるという相談があった場合にも、基本的なHTMLの間違いがないかを確認する時にも便利です。
ポイント
- サイトの公開前のHTMLチェックに利用しています
Window Resizer
「Window Resizer」は様々な画像解像度をエミュレートする拡張機能です。
デベロッパーツールでもエミュレートは可能ですが、直感的にサイズも分かりやすいという点が使いやすいかと思います。
コーディングをしている方にオススメです！
ポイント
- コーディングのデバイス対応の際に利用
- カスタムでサイズを作成できるので便利です
Image Downloader
サイト上の画像を一覧、ダウンロードできる拡張機能。
利用する場面は限られそうですが、あると便利ということで導入しています。
ポイント
- サーバーにアクセスできない場合に利用
- 一括で画像をダウンロードできるので便利です
Lighthouse
「Lighthouse」はページのパフォーマンスや品質を点数で評価してくれる拡張機能。以下の項目をチェックすることが可能です。
- Performance
- ProgressiveWebApp
- Accessibility
- Best Practices
- SEO
SEOをしている方には、改善ポイントが分かるので導入しておくと良いかと思います。
ポイント
- 複数の項目をレポートで確認できるので使いやすい
TDK Meta Checker
閲覧中のタイトル・description・キーワードなどのメタ情報を確認しやすく表示します。
閲覧中のWebサイトで
『チェック』するボタンをクリックすると
サイトタイトル(title タグ)や説明文(metaタグのdescription)などを確認するための仕事効率化の拡張機能です。Facebookのシェアデバッカーのリンクや、
Twitter Cardのバリデーターリンクがあり確認しやすくしてあります。
制作現場では一番使っているかもしれません。OGPの設定を忘れないように公開前のチェックで必ず利用しています。twitterの設定が確認できるのも嬉しいですね。
ポイント
- OGPの設定を確認する際に利用
- HTMLチェックと同様にサイト公開時によく使っています
Page Analytics (by Google)
「Page Analytics」はGoogle Analytics を簡易的に表示することができる拡張機能。
Google Analyticsへのアクセス権があるウェブページを表示すると、以下のような情報が表示されます。
Google Analyticsのメトリクス。ページビュー数、ユニークページビュー数、平均ページ滞在時間、直帰率、離脱率
アクティブな訪問者の数（リアルタイム
ページ内クリック分析。(ユーザーがクリックした箇所)
Google Analyticsを見れば分かるということではありますが、案外見れていないってことありませんか？そんな時に便利な拡張機能ですが、更新の予定がなく現在は非推奨のようです。
便利な機能ということで紹介だけさせていただきました。
ポイント
- 日次チェックのような感覚で利用しています
HTML5 Outliner
HTML5のアウトラインを確認できる拡張機能です。見出しタグが正しく設定されているか確認する際に利用しています。
SEOのチェックをする際にも活用しています。
ポイント
- 文章構造が適切か確認する際に利用
crxMouse Chrome™ Gestures
マウスの動きでブラウザを操作できるマウスジェスチャー「crxMouse」。
ブラウザの戻る、進むはもちろん、画面のキャプチャやテキストをドラッグして検索するなど多機能な拡張機能です。
使いこなせばかなり便利な機能、カスタマイズ性も高いので試しに利用してみるのはいかがでしょうか。
ポイント
- ブラウジングが快適に！ただ慣れれば快適な機能ですが、好き嫌いが分かれるかもしれません
META SEO inspector
「META SEO inspector」は、閲覧中のWebページに設定されているタイトルタグやメタタグなどのメタデータをソースを確認することなく確認できる拡張機能です。
SEOのチェックに使いやすく、タグをチェックする以外にも構造化データの確認や、タイトルが長すぎるとエラーが出たりと機能も多い。
ポイント
- meta情報を詳細に確認したい時に便利な拡張機能です
拡張機能をうまく活用して作業効率をアップ
公開時に拡張機能を利用して抜け漏れを確認したり、修正作業の前に作業範囲の確認にスクリーンショットを利用したりと様々な場面で活躍します。もちろん拡張機能を頼り過ぎずに作業のチェックを複数人で行うようにしていますが、業務のサポートとしてうまく活用できると良いですね。
今回ご紹介した機能は制作の現場だけでなく、ちょっとした場面でも利用できます。競合調査でいろいろなサイトを調べている時に複数のタブで開いている、そんな場面がよくあるのですが、「GetTabInfo」を利用して好きな形式で出力してスプレッドシートで共有する。一つひとつ手作業でコピー&ペーストするよりも遥かに早いです。
このようなツールは慣れるまでは逆に時間がかかったり、セキュリティの観点から導入が難しいこともありますが、利用可能な環境でしたらぜひ試してみてください。次回は広告運用の現場で利用されている拡張機能のまとめも記事にできたらと思います！
せっかく制作したLP、成果出てますか？
- ブランディング色が強く訴求がおろそかに……
- なんのサービスかがわかりにくい
- ターゲットに刺さりにくいデザインになっている
- CVRが低い・成果に繋がっていない
本資料では、上記のやりがちな失敗を踏まえて
売れるデザインにするための効果的な方法を分かりやすく紹介！
この記事を書いた人
ASUE通信編集部
旧TwitterASUE通信の編集部です。みなさんのお役に立てるような情報を更新していきます！
