WEBデザイン制作で使うGoogle Chromeの拡張機能

Chromeの拡張機能とは

Chrome拡張機能とは、Google Chromeブラウザに追加できる便利な機能のことです。
Chromeウェブストアからインストールして使います。

この章で紹介する拡張機能は無料で使用することができます。

よく使うChrome拡張機能一覧

GoFullPage

用途: ページ全体のスクリーンショット

開いているウェブページを、上から下まで丸ごとスクリーンショットできます。サイトのトレース(模写)や、参考サイトの保存に便利です。

https://chromewebstore.google.com/detail/gofullpage-full-page-scre/fdpohaocaechififmbbbbbknoalclacl?hl=ja

Image Downloader

用途: ページ内の画像一括ダウンロード

開いているページで使われている画像をまとめてダウンロードできます。サイトリニューアル時に既存の画像を引き継ぐ際などに使用します。

https://chromewebstore.google.com/detail/image-downloader/cnpniohnfphhjihaiiggeabnkjhpaldj?hl=ja

ColorZilla

用途: 色の抽出

ウェブページ上の色のカラーコードを調べられます。起動してカーソルを当てるとカラーコードが表示され、クリックするとコピーできます。

https://chromewebstore.google.com/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=ja

What Font

用途: フォントの調査

ウェブページで使われているフォントの種類を調べられます。

注意: テキストとしてコーディングされている場合のみ調査可能です。画像化された文字は正確に判定できません。

https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja

Window Resizer

用途: ブラウザサイズの変更

ブラウザのウィンドウサイズを特定の横幅に簡単に設定できます。

注意: 使用環境によっては動作しない場合があります。

https://chromewebstore.google.com/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=ja

CSS Peeper

用途: デザインの詳細調査

ウェブページで使われている色、余白、フォントサイズ、フォントの種類などを調べられます。特に要素間の余白(マージン・パディング)を測定できる点が便利で、デザインの分析によく使います。

https://chromewebstore.google.com/detail/css-peeper/mbnbehikldjhnfehhnaidhjhoofhpehk?hl=ja

文章校正と表記ゆれチェックツール

サイトで使用している文字に表記揺れがないかチェックできるツールです。

https://chromewebstore.google.com/detail/%E6%96%87%E7%AB%A0%E6%A0%A1%E6%AD%A3%E3%81%A8%E8%A1%A8%E8%A8%98%E3%82%86%E3%82%8C%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%E3%83%84%E3%83%BC%E3%83%AB/melcjmapbnbppalonglljkadkemjajjf

SEO META in 1 CLICK

公開されているサイトのSEOに関する情報を見ることができるツールです。WEBサイト制作では、競合調査を行う際に競合サイトの見出し構成がどのようになっているのかを確認する際に主に使用します。

https://chromewebstore.google.com/detail/seo-meta-in-1-click/bjogjfinolnhfhkbipphpdlldadpnmhc?hl=ja

レスポンシブチェック!

用途: PC・スマホ表示の同時確認

開いているページのPC版とスマートフォン版の表示を一度に確認できます。レスポンシブデザインのチェックに便利です。

https://chromewebstore.google.com/detail/%E3%83%AC%E3%82%B9%E3%83%9D%E3%83%B3%E3%82%B7%E3%83%96-%E3%83%81%E3%82%A7%E3%83%83%E3%82%AF%EF%BC%81/nblkfiamblkjblenkgajmjfampppmonh?hl=ja

画像を JPG/PNG/WebP として保存

用途: 画像の形式変換ダウンロード

ウェブページ上の画像を、JPG・PNG・WebPのいずれかの形式で保存できます。

使い方: 画像の上で右クリックして使用します。

https://chromewebstore.google.com/detail/save-image-as-type/gabfmnliflodkdafenbcpjdlppllnemd?hl=ja

Shopify Spy & Dropshipping – Koala Inspector

ECサイトがShopifyで作られているか調べることができるツールです。Shopifyで作られているサイトに関しては、そのサイトで使われているテーマや一部のアプリを確認することもできます。

https://chromewebstore.google.com/detail/shopify-spy-dropshipping/hjbfbllnfhppnhjdhhbmjabikmkfekgf?hl=ja

Chrome拡張機能の追加と使用方法

GoFullPageを例に、インストール方法を解説します。

手順

拡張機能名を検索
「GoFullPage」と検索して、Chromeウェブストアにアクセスします。
「Chromeに追加」をクリック
表示されたページ内の青いボタンをクリックします。
「拡張機能を追加」をクリック
確認ウィンドウが表示されるので、クリックしてインストールします。
拡張機能を見つける
ブラウザ右上のパズルのピースアイコンをクリックすると、インストールした拡張機能の一覧が表示されます。
ピン留めする
拡張機能名の横にあるピンアイコンをクリックすると、常に表示されるようになり便利です。
使用する
各拡張機能のアイコンをクリックすると起動します。

Chromeウェブストアのページ上では動作確認ができない拡張機能もあります。他のウェブページを開いて動作を確認してください。
またアプリは不要になった場合はChromeから削除することが可能です。