2024.05.29
現役Webディレクターが選ぶ!Google Chromeの無料拡張機能5選
Google Chromeの拡張機能とは、Googleが提供するブラウザの追加機能です。拡張機能は、自分のブラウザに追加することで簡単に使用できます。 本記事では、現役のWebディレクターが厳選した便利な拡張機能を5つご紹介します。拡張機能の使い方や削除方法についても説明しているので、ぜひ参考にしてください。
おすすめの拡張機能5選
[1] GoFullPage
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
Perfect Pixelは、デザインデータとコーディングデータを重ねて表示してくれる拡張機能です。Illustratorなどとブラウザを交互に見なくても確認できるのは画期的ですね。
*この拡張機能は強力なツールですが、使いこなすのにコツが必要です。使いこなすためのコツは別の記事(https://star-kid.jp/topics/trivia/perfect-pixel/))で解説しています。
[5] What Font
URL:https://chromewebstore.google.com/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=ja
What Fontは、Webサイトで使用されているフォントの種類やサイズ、色などを調べることができる拡張機能です。気になったサイトのテキストに関する情報を、拡張機能を起動するだけで簡単にチェックできます。検証ツールを使うよりも素早くチェックできて便利です。使い方は非常にシンプルで、たった2ステップで確認可能です。
【使い方】
- 「拡張機能アイコン」をクリックし、「What Font」を選択
- サイト内の調べたい文言をクリックする
※表示を消したい場合は、エスケープキーを押して拡張機能を停止してください。
拡張機能のインストール方法
Chromeの拡張機能は、「Chromeウェブストア」より追加可能です。また、本記事に貼っているURLからも追加できます。
【本記事のURLから追加する場合】
- URLをクリック
- ページ右上にある「Chromeに追加」ボタンをクリック
- ポップアップが表示されるので、「拡張機能を追加」ボタンをクリックし、完了
【Chromeウェブストアから追加する場合】
- https://chromewebstore.google.com/?hl=jaにアクセスし、追加したい拡張機能名で検索
- 追加したい拡張機能を選択
- ページ右上にある「Chromeに追加」ボタンをクリック
- ポップアップが表示されるので、「拡張機能を追加」ボタンをクリックし、完了
使わない拡張機能は削除するのがオススメ
Google Chromeの拡張機能は、管理設定より削除可能です。拡張機能を追加しすぎると、ブラウザに負荷がかかり、サイト表示に時間がかかる恐れがあります。使わなくなった拡張機能は、定期的に削除しましょう。
拡張機能の削除方法
- 拡張機能アイコンをクリックし、「拡張機能を管理」をクリック
- インストール済みの拡張機能の中から、削除したい機能の「削除」ボタンをクリック
まとめ
この記事では、Webサイト制作の効率を上げるためのGoogle Chrome拡張機能や、そのインストール方法、削除方法などを紹介しました。役立ちそうなツールが見つかりましたか?ぜひ、今日から活用してみてくださいね!
いいねありがとうございます!
この記事を書いた人
小林 真莉菜
アシスタントコーダー / アシスタントディレクター
《 仕事で大切にしていること 》
ディレクター兼コーダーとして、クリエイター側が理解しやすい指示出しができるように心がけています。
元システムエンジニアなので、その経験も生かして仕事ができればと思います。