目次
.jpg)
1. Go Full Page
https://chrome.google.com/webstore/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl
こちらのプラグインは、履歴機能を備えた、ウェブページ全体のスクリーンショットを画像保存できる Chrome 拡張機能です。
閲覧中のウェブページ全体のスクリーンショットをPNGやPDF画像として保存が可能です。
ウェブページをキャプチャーすると新しいタブでキャプチャー結果を表示し、キャプチャー画像の削除、原寸大表示、ダウンロード、履歴の表示が可能となっております。履歴からは過去にキャプチャーした画像を表示して、再ダウンロードすることができます。
主にワイヤー等の資料作成の際や、デバッグする際に全体を画像で見たい場合に便利です。
2.Wappalyzer
https://chrome.google.com/webstore/detail/wappalyzer/gppongmhjkpfnbhagpmjfkannfbllamg?hl=jaこのプラグインは、サイトで使用されている技術を分析して表示するツールです。
あくまで公開情報から読み取れる範囲に限りますが、次のような項目が取得できます。
・CMS (WordPressなど)
・Webサーバ
・データベース
・JavaScriptライブラリ
・JavaScriptフレームワーク
・プログラミング言語
・アクセス解析ツール
・Webフォント
・広告ネットワーク
Chrome拡張機能とFirefoxアドオンがリリースされている他、ブックマークレットも公開されているためiPhoneのSafariで動かすことも可能です。
サイト内にどんな機能が入っているかを確認したい際に便利です。サイト解析や他社比較の時に使えそうですね。
使い方は簡単で、解析したいサイトでプラグインのアイコンをクリックするだけで、検知したツールをまとめて表示してくれます。
.jpg)
3.Alt & Meta viewer
https://chrome.google.com/webstore/detail/alt-meta-viewer/jjcjblcbnjhgjlnclhficglfjedhpjhl?hl=jaこのプラグインは、画像に設定された Alt または Title 属性をツールチップで表示することができます。
また、ヘッダの Title、Meta 情報を一覧表示させることができます。
こちらは、本番環境でのデバッグ・テスト検証や、既存サイトの解析等の際に有効です。
使い方は、メニューの [Alt フキダシ] アイコンからポップアップを表示させ、[画像のAlt表示]をクリックするとWebページ上に配置された画像に設定されている Alt属性 と Title属性 がツールチップで表示されます。
.jpg)
4.Dimensions
https://chrome.google.com/webstore/detail/dimensions/baocaagndhipibgklemoalmkljaimfdj?hl=jaディレクターとしてワイヤー制作やテスト検証、サイト解析をしている際に、要素の幅や高さを調べたい場合があると思います。
そのたびに毎回画像編集ソフトを起動して調査するのでは面倒ですし、非効率的です。
この「Dimensions」はブラウザからWebページ内にある各要素の距離などを測ることができます。
使い方は、計測アイコンを押下し、測りたい要素までマウスのカーソルを移動させるだけです。
すると青い線が表示され、要素の高さや幅、または距離を測ることが出来ます。
複雑な配色や構成の場合はうまく計測できない場合がありますが、基本的な配置は実際の数値が「px(単位)」で表示されるのでとても活用しやすいです。
.jpg)
5.PerfectPixel by WellDoneCode (pixel perfect)
https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=jaこちらはディレクターだけではなくエンジニアの皆さんにも有効なプラグインです。
このプラグインは、ブラウザ上の好きな場所に画像を透かして表示させることができます。webページのデザイン画像をブラウザ上に重ねて表示させ、画像に合わせてコーディングやテスト検証を行えば、手間も省けるし正確な確認も行えるので一石二鳥ですね。ピクセルパーフェクトなサイト制作を目指すかたは必須だと思います。
※ピクセルパーフェクト : デザインと実際にコーディングしてサイトに反映されるページが100%一致することを言います。余白や画像サイズ、文字間も全て一致しなければならないので、確認には注意が必要です。
終わりに
今回は以上となります。いかがでしたでしょうか。基本的にはディレクターの日々のサイト解析やワイヤー作成、テスト検証の際に役立つプラグインを紹介しましたが、
中にはエンジニアにも有効なものもあると思います。
ディレクターの皆様は、エンジニアの方々とプラグインの話でコミュニケーションをとってみると、新たな発見があるかもしれません。
かくいう私も基本的にプラグインやツールはエンジニアの先輩方に教わっています。便利なツールを実際に有効活用できるととても嬉しいですね。
