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回クリックするだけでスクリーンショットが保存できます。

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

[2] ColorPick Eyedropper

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

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

【使い方】
  1. ブラウザ右上にある「拡張機能アイコン」をクリックする
  2. 「ColorPick Eyedropper」をクリックして選択。拡張機能が作動します
  3. 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ステップで確認可能です。

【使い方】
  1. 「拡張機能アイコン」をクリックし、「What Font」を選択
  2. サイト内の調べたい文言をクリックする
    ※表示を消したい場合は、エスケープキーを押して拡張機能を停止してください。

拡張機能のインストール方法

Chromeの拡張機能は、「Chromeウェブストア」より追加可能です。また、本記事に貼っているURLからも追加できます。

【本記事のURLから追加する場合】

  1. URLをクリック
  2. ページ右上にある「Chromeに追加」ボタンをクリック
  3. ポップアップが表示されるので、「拡張機能を追加」ボタンをクリックし、完了

【Chromeウェブストアから追加する場合】

  1. https://chromewebstore.google.com/?hl=jaにアクセスし、追加したい拡張機能名で検索
  2. 追加したい拡張機能を選択
  3. ページ右上にある「Chromeに追加」ボタンをクリック
  4. ポップアップが表示されるので、「拡張機能を追加」ボタンをクリックし、完了

使わない拡張機能は削除するのがオススメ

Google Chromeの拡張機能は、管理設定より削除可能です。拡張機能を追加しすぎると、ブラウザに負荷がかかり、サイト表示に時間がかかる恐れがあります。使わなくなった拡張機能は、定期的に削除しましょう。

拡張機能の削除方法

  1. 拡張機能アイコンをクリックし、「拡張機能を管理」をクリック
  2. インストール済みの拡張機能の中から、削除したい機能の「削除」ボタンをクリック

まとめ

この記事では、Webサイト制作の効率を上げるためのGoogle Chrome拡張機能や、そのインストール方法、削除方法などを紹介しました。役立ちそうなツールが見つかりましたか?ぜひ、今日から活用してみてくださいね!


いいねありがとうございます!

この記事を書いた人

小林 真莉菜

アシスタントコーダー / アシスタントディレクター

《 仕事で大切にしていること 》
ディレクター兼コーダーとして、クリエイター側が理解しやすい指示出しができるように心がけています。
元システムエンジニアなので、その経験も生かして仕事ができればと思います。

PAGE TOP