見出し画像

おすすめのGoogle Chromeの「拡張機能」をご紹介

crage株式会社

こんにちは。crage株式会社のデザインチームです。

みなさんは日頃、Google Chromeの「拡張機能」は使っていますか?
今回は弊社デザインチームに聞いたおすすめの「拡張機能」をばばーっとご紹介いたします!

Google Chromeの「拡張機能」とは?

Google Chromeの「拡張機能」とは、Chromeの機能を強化したり、搭載されていない機能を追加出来たりする特殊なアドオン・プログラムのことです。
chromeウェブストアから追加することで使用できるようになります!


スクリーンショット系

FireShot

まず初めに、サイトのスクリーンショットを撮ることのできる拡張機能「FireShot」をご紹介します!
スクリーンショットの拡張機能と言えばコレ!というほど有名な拡張機能で、縦長のサイトなども1枚画像としてサクッとスクリーンショットを撮ってくれます。

GoFullPage

こちらも表示中のサイトのスクリーンショットを撮ってくれる拡張機能です。個人的にはFireShotより素早くスクリーンショットを撮ってくれる印象があります。
FireShotをお使いの方は一度GoFullPageも試してみると良いかもです!

Awesome Screenshot & Screen Recorder

こちらは何と録画まで出来るスクリーンショットの拡張機能です!
もちろん通常のスクリーンショットも使えて、多少であれば線を引いたりブラーをかけたりと編集も出来るようです!
スクリーンショットをURLで共有できたりもするので、とっても便利です!


デザイン確認系

Window Resizer

こちらはブラウザのウィンドウを好きなサイズに変更してくれる拡張機能です!
検品時にウィンドウをデザインと同じ幅にして検品したい時や大きなモニターなどでスクリーンショットを撮る時などで凄く便利です。
手動でウィンドウサイズを変えていた方には特におすすめです!

Viewport Resizer – Responsive Testing Tool

こちらも画面幅を変更したい時に便利な拡張機能です!
レスポンシブの検品など、それぞれの画面幅でサイトを確認したい時、いちいちデベロッパーツールを開かなくても拡張機能をクリックするだけでサクッと確認することができます。

Grid Ruler

デザインツールのようなガイドラインを、ブラウザ画面上に引くことができる拡張機能です。デザイン確認や検品時にとても便利です。実装上のズレなどを簡単に確認する事ができます。

Highlight H1 H2, H3 & highlight nofollow

こちらは競合調査やデザイン調査などで便利な拡張機能です。
ページ内の見出し(h1 , h2 , h3)などを色付きの枠でここだよーと示してくれます。

ColorPick Eyedropper

サイト上のカラー数値を知りたい時、皆さんどうしてますか?
毎回わざわざデベロッパーツールを開いている方には、この「ColorPick Eyedropper」がおすすめです。
こちらを追加しておけば、サクッとサイト上のカラーを確認する事ができます。

PerfectPixel

こちらは検証時にとっても便利なツール「PerfectPixel(パーフェクトピクセル)」です!
デザインカンプと実装後のページをブラウザ上で重ねて比較することができる検証ツールとなります。
これでデザインデータとブラウザ間を目が行ったり来たりする事がなくなります!


フォント系

WhatFont

サイト上のテキストのフォント名を知りたい時は、この「WhatFont」が便利です。テキストにカーソルを合わせるだけで、そのフォント名やサイズなどの情報を教えてくれます。

Fonts Ninja

こちらも上記と同様でサイト上のフォント名を調べる事の出来る拡張機能です!どちらも追加してみて、お好きな方を使うと良いかと思います!


効率UP!!系

Search the current site (サイト検索)

サイト内キーワード検索が出来る拡張機能「Search the current site (サイト検索)」です!
競合調査や自社サイト内のページ検索などのあらゆる場面で便利です。
今まで検索窓で site: と入力していた方には、とってもおすすめなツールになります。

Check My Links

検品する際にとっても便利な拡張機能「Check My Links」を紹介します。
こちらを使用すると、サイト内のリンクが切れている場所を表示してくれます。
検品ですべてのリンクを開いて確認している方、是非一度使ってみてください!

Pasty

複数のURLをひとつずつ開いていませんか?
PastyならコピペしたURLを全て別タブで一括で開くことができます!
ディレクターさんやコーダーさんなど日々複数のURLを扱う方にとっては神のような拡張機能だと思いますので、未導入の方は是非追加してみてください!

Linkclump

サイト上の複数リンクを一つずつ開いてはいませんか?
Linkclumpを使えば、なんと複数のリンクを一括で開くことができます!
それもURLをコピペする必要がないので、検索結果を全て開きたい!みたいな時にとても便利です。

▼下記のように選択した範囲内のリンクを全て別タブで開いてくれます。

GetTabInfo

現在開いている全てのタブのURLとタイトル等を一括でテキスト化してくれます。
お客さんにURLを送る時やタブを整理する時など、様々なシーンで利用できます!

使い方
template項目に下記のコードをコピペしてご使用ください。

%%TITLE%%
%%URL%%

Image downloader - Imageye

閲覧しているサイトの画像をごそっとDLできる便利ツールです!
任意の画像を選択してダウンロードするも可能なのでとっても便利です。

QR Code Generator

表示しているサイトのQRコードを発行してくれる拡張機能です。
PCで見ていたサイトをSPで開きたい時などに役立ちます!


その他

Google 翻訳

Google翻訳が拡張機能としてあるのはご存知でしょうか?
既に導入されている方も多いと思いますが、この拡張機能を追加しておくと、選択した範囲のテキストをサクッと翻訳してます!
外国のサイトを閲覧する際にとっても便利なので未導入の方は是非入れてみてくださいね!

Clear cache

Chromeでキャッシュを削除する機会って結構ありませんか?
こちらを使えばワンクリックでChromeのキャッシュを削除することができます!


注意点

ここまで、おすすめの拡張機能を様々ご紹介しましたが、実は注意点もございます。それは機能を追加し過ぎるとメモリを消費してしまうという点です。
どうやらChromeの拡張機能は使用していなくともメモリを消費するらしいので、便利でいろいろと追加してしまいがちですが、不要なアドオンは定期的に削除すると良いでしょう!

最後に

知らなかった拡張機能はありましたか?
便利な拡張機能をいっぱい知っていると作業効率があがって他の業務に時間をかけられるようになるので、是非導入してみてくださいね!

今回はチーム内であがった拡張機能のみをご紹介させていただきましたが、まだまだ他にも便利なツールが沢山ありますので、そちらは第二弾でご紹介させていただきますね!!

今回もお読みいただきありがとうございました。
crageでは現在メンバーになっていただける方を募集中です。
ご興味ある方はぜひエントリーください!
新たな才能、求めています。