現役Webディレクターが選ぶ！Google Chromeの無料拡張機能5

トピックス TOPICS

2024.05.29

現役Webディレクターが選ぶ！Google Chromeの無料拡張機能5選

豆知識

Google Chromeの拡張機能とは、Googleが提供するブラウザの追加機能です。拡張機能は、自分のブラウザに追加することで簡単に使用できます。本記事では、現役のWebディレクターが厳選した便利な拡張機能を5つご紹介します。拡張機能の使い方や削除方法についても説明しているので、ぜひ参考にしてください。

おすすめの拡張機能5選

[1] GoFullPage

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

GoFullPageは、Webサイト全体のスクリーンショットを保存できる拡張機能です。ダウンロードできる形式はPDF、PNGです。サイトの素材を作成したい場合や、サイトをトレースしたい場面で非常に便利です。筆者も日々の業務で使っていますが、とても使いやすいです。

使い方は非常に簡単で、インストールさえ済めば3回クリックするだけでスクリーンショットが保存できます。

【使い方】

ブラウザ右上にある「拡張機能アイコン」をクリック
「GoFullPage」をクリックして選択。拡張機能が作動します
自動でスクリーンショット画面に遷移するので、ダウンロードボタンを押して完了

[2] ColorPick Eyedropper

URL:https://chromewebstore.google.com/detail/colorpick-eyedropper/ohcpnigalekghcmgcdcenkpelffpdolg

ColorPick Eyedropperは、Webサイトで使用されている色を確認するためのツールです。色を選択する際に選択範囲が拡大表示されるので、細かい部分でも選択しやすいのが特徴です。こちらも拡張機能をインストールすればすぐに使えます。

【使い方】

ブラウザ右上にある「拡張機能アイコン」をクリックする
「ColorPick Eyedropper」をクリックして選択。拡張機能が作動します
Webサイト上の調べたい色を選択してクリック

[3] Stylebot

URL:https://chromewebstore.google.com/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=ja

Stylebotは、WebサイトのCSSを編集することで見た目を変更できる機能です。CSSの変更方法は「ベーシック」と「コード」の2種類があります。「ベーシック」モードでは文字サイズなどをボタンを押すだけで変更できます。検証ツールを使いこなせていない人や、コーディングを勉強中の人にはありがたいツールですね。

*Stylebotの操作方法は他のものと比べて少し複雑なので、他の記事で詳しく解説しています。（現在執筆中）

[4] Perfect Pixel

URL:https://chromewebstore.google.com/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ja

Perfect Pixelは、デザインデータとコーディングデータを重ねて表示してくれる拡張機能です。Illustratorなどとブラウザを交互に見なくても確認できるのは画期的ですね。

*この拡張機能は強力なツールですが、使いこなすのにコツが必要です。使いこなすためのコツは別の記事で解説しています。（現在執筆中）

[5] What Font

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

What Fontは、Webサイトで使用されているフォントの種類やサイズ、色などを調べることができる拡張機能です。気になったサイトのテキストに関する情報を、拡張機能を起動するだけで簡単にチェックできます。検証ツールを使うよりも素早くチェックできて便利です。使い方は非常にシンプルで、たった2ステップで確認可能です。