【Chrome 拡張機能】Web制作に役立つ機能10選｜デザイナー編

こんにちは！デザイナーのいいのです。

今回はデザインに役立つGoogle Chrome拡張機能についてご紹介します。

chrome拡張機能を使ったことがない方、入れてみたいなと思っている方はぜひ参考にしてみてください！

Google拡張機能とは？

Chrome拡張機能は、「Google Chrome」のブラウザに機能を追加することができるアドオンツールです。

拡張機能を使うことでGoogle Chromeをもっと便利に利用できます。

多くの拡張機能は無料で利用でき、難しい操作はなくインストールするだけで簡単に追加できます。

インストール方法

1.Chromeウェブストアで拡張機能を検索します

Chromeウェブストアを開き、検索ボックスでダウンロードしたい拡張機能を検索してみましょう。ここでは例としてTaddyCatを検索してみます。

2.「Chromeに追加」をクリック

追加したい拡張機能のページが開いたら、「Chromeに追加」の青いボタンをクリックします。

3.「拡張機能を追加」をクリック

以下の画面になったら「拡張機能を追加」をさらにクリックすると、拡張機能がChromeに追加された状態になります。

4.拡張機能を固定したい場合はピンをクリック

検索バーの右隣にあるパズルのピースのマークをクリックすると、現在追加している拡張機能を一覧で見ることができます。

拡張機能横のピンのマークをクリックすることで、ブックマークバー上に固定されます。

よく使う機能は固定をしておくと、使いたい時にクリックひとつで利用でき便利です。

WEBデザインに役立つChrome拡張機能10選

1.CSS Peeper

ダウンロードする→：CSS Peeper

フォントやカラー、余白やコンテンツ幅など、選択した箇所のCSSをさくさく確認することができます。

”検証ツールを開いて選択し、見たい箇所を探す”という作業の効率がUP◎

アイコンや写真など、サイトで使用されている画像のダウンロードも可能です。

2.ColorZilla

ダウンロードする→：ColorZilla

Webサイトで使用されているカラーをワンクリックで取得できる機能です。

より細かく取得できるので、①のCSS Peeperで取得できなかった色も取得できます。

RGB以外にも、CMYKやHLS、カラーコードのコピーすることが可能です。

3.Fonts Ninja

ダウンロードする→：Fonts Ninja

Webサイトで使用しているフォントを確認することができる拡張機能です。

ブックマーク機能があるため、気になったフォントをストックしておくことができ便利です。

4.WhatFont

ダウンロードする→：WhatFont

こちらもフォントを確認できる拡張機能です。

フォントサイズやウェイト、行間、カラーまで1クリックで確認できます。

WhatFontは、一度確認したフォントを残しておけるので、ページ内でいくつかのテキストを見比べることもできます。

5.Copy All Urls

ダウンロードする→：Copy All Urls

ブラウザで開いているすべてのタブのURLをコピーできます。

参考サイトを探す際など、いくつかのページをメモしておきたいときに便利です。

6.Image Downloader

ダウンロードする→：Image Downloader

開いているページ内のアイコンや写真などの画像を保存できる拡張機能です。

CSS Peeperは一括で保存するか一枚ずつ保存するのに対して、Image Downloaderは、保存したい画像を複数選んで名前をつけたフォルダにまとめてダウンロードもできます。

複数選択して画像を保存したい場合には、Image Downloaderが便利です。

7.Window Resizer

ダウンロードする→：Window Resizer

ウィンドウサイズを任意のサイズに自由に変更することができる拡張機能です。

あらかじめ用意されているウィンドウサイズだけでなく、任意のサイズも設定できます。

お客様はノートパソコンのサイズでWebサイトを確認することが多いので、ウィンドウサイズによる見え方の違いを確認できます。

8.VisBug

ダウンロードする→：VisBug

サイト上で、デザインソフトのようにページを編集したり、スタイルの変更ができる拡張機能です。

左側にツールバーが出てきて、開いているページ内の、余白の変更、要素の順番の入れ替え、テキストの追加、文字揃えの変更、ボタンなどの要素の色の変更、シャドウをつける、フォントの大きさを変える、などができます。

テキストが増えた場合の見え方を確認

サイトの修正を行いたいときなどに、デザインソフトを開かずブラウザで一度見え方を確認することができ、とても便利です。

打ち合わせの中で使えば、「こうしたらどうか」とその場で簡単にシミュレーションすることもできますね◎

9.QRコード作成器 (Quick QR)

ダウンロードする→：QRコード作成器 (Quick QR)

WebサイトのQRコードを作成してくれる拡張機能です。

そのままスマホで読み込むこともできますし、画像として保存することも可能です。

SPデザインを確認するときに、”URLを自分のチャットに送り、スマホでチャットを開いてリンクを押しサイトを見る”という手間が省け時短になります！

10.モバイルシミュレーター-レスポンシブテストツール

ダウンロードする→：モバイルシミュレーター-レスポンシブテストツール

iPhoneやAndroidの機種ごとに表示をチェックできる拡張機能です。

最新機種などは有料プランになってしまいますが、なかなか手元にないスマホの見え方を確認できたり、スクショやGIF動画を撮影できます。

おわりに

デザイナーにおすすめのChrome拡張機能を10つご紹介しました！

Chrome拡張機能には簡単便利に時間や手間を省けるものがたくさんあります。

便利かも！と思ったものはぜひリンクからダウンロードしてみてくださいね。