みなさんこんにちは！ささたにです。

突然ですが、ウェブデザイナーの皆さんGoogle Chromeの拡張機能は何を使っていますか？

デザインする時間を確保したいので、なるべく日々の作業やインプットを効率よくしたいと考えています。
拡張機能はその手助けをしてくれるので、まだ入れていないという方は是非使ってみてください！

今回は、私がよく使うGoogle拡張機能を8つ紹介していきます！

ノンデザイナーにもおすすめ！必須のスクリーンショット

画面のスクリーンショットは「Shift+Command+3（Mac）」「windows+Shift+S（Windows）」などで撮れますが、サイト全体のスクリーンショットを撮る時に便利な拡張機能を紹介します。

jsなどで動きのあるサイトではうまく撮れない場合があるので、私は2つ入れることをおすすめします。

FireShot

ダウンロードはこちらFire shot

キャプチャしたい範囲をページ全体・表示部分・選択範囲の3段階から選ぶことができます。

キャプチャの保存方法として画像とPDFが選ぶことができ、さらにクリップボードにコピーすることもできるので便利です。

GoFullPage – Full Page Screen Capture

ダウンロードはこちらGoFullPage – Full Page Screen Capture

こちらはボタン一つでページ全体をスクリーンショットできる拡張機能です。

編集機能もついているのでそのままキャプチャに補足を書いてディレクターさんと修正内容の共有するのにも使えます。

デザイン時に役立つ機能

HTMLチェッカー

ダウンロードはこちらHTMLチェッカー

HTMLの開始・終了タグに不備がないかを検証してくれるツールです。

エラー時には「〇〇行目に開始(終了)タグがないです」と表示されるので、ページを公開する前のチェックに便利です。

whatfont

ダウンロードはこちらWhatFont

気になるフォントを調べることができる機能です。

検証ツールで探さなくてもフォントの種類が分かります。さらにフォントサイズ、ウェイト、色やフォントファミリーまで一気に見れるのが便利です。

Color Zilla

ダウンロードはこちらColor Zilla

サイトで使用しているカラーをスポイトで拾うことができたり、
ページ内の配色を一覧表示することができるのでデザイン配色決めの参考になります。

CSS Peeper

ダウンロードはこちらCSS Peeper

拡張機能をクリックして要素にカーソルを当てると、フォント関連の情報、配色、余白やサイズ、使用している画像などを細かく教えてくれる機能です。

デザインや実装時のヒントになるのでおすすめです。

あると意外と便利な機能

Wappalyzer

ダウンロードはこちらWappalyzer

気になるサイトの技術を調べる便利なツールです。

CMS、フレームワーク、JS、分析ツールやプラグインが分かるので同じ機能を取り入れたいと思ったときに見てみると参考になります。

Redirect Path

ダウンロードはこちらRedirect Path

リダイレクト処理をする際に便利な拡張機能です。

302、301リダイレクトはパッと見では分からないですが、これを使うとリダイレクト処理の種類がボタン一つでわかります。

まとめ

いかがだったでしょうか？

今回、私的におすすめのGoogle拡張機能を8つご紹介させていただきました！

今や当たり前のように使用してますが、最初の頃はGoogle Chromeの拡張機能を知って「こんなに便利になるのか！」と驚きました。

検証ツールでも調べられますが、ワンタッチで簡単に分かると業務の効率化にもなって快適ですよね！

気になるものがあったら是非取り入れてみてくださいね〜

※当サイトのリンクに関しては、アフィリエイトリンクは含まれておりません