WebデザイナーにおすすめのChrome拡張機能17選!

Webデザインに役立つChromeの拡張機能6選 Webデザイン

「Chromeでおすすめの拡張機能が知りたい」

「Webデザインの作業が効率的になるツールが知りたい」

と思うことはありませんか?

Webデザイン作業をしていても、「いつもやっているこの作業を効率よくやりたい」って思うことはありますよね。

では、Webデザイナーが使うのにおすすめのChromeの拡張機能はどんなものがあるのでしょうか。

そこで今回は、

  • Webデザインに役立つChromeの拡張機能
  • Webサイトの分析に使えるChromeの拡張機能
  • シンプルに作業効率があがるChromeの拡張機能

についてご紹介します。

この記事を見れば、いつもやっていた面倒な作業をワンクリックで済ませられる拡張機能に出会えますよ。

ぜひ最後まで読んでみてくださいね。

Chromeの拡張機能を使ったことがない人は、記事の後半にある「Chromeの拡張機能をインストールする方法」を見てください。

Webデザインに役立つChromeの拡張機能6選

Webデザインに役立つChromeの拡張機能6選

Freepik – jp.freepik.com によって作成された design ベクトル

  1. Visual Inspector|Webデザイン向け万能ツール
  2. Color Zilla|サイトの配色がワンクリックでわかる
  3. What Font|お気に入りのフォントを調べられる
  4. Dimensions|ページ内の長さを測れるツール
  5. Fire Shot|サイト内をかんたんスクリーンショット
  6. The QR Code Extension|QRコード作成ツール

1.Visual Inspector|Webデザイン向け万能ツール

visual inspector

出典:Chromeウェブストア

提供元:Manish

Webデザインは「いいサイトをマネすることが大事」といわれますが、そのいいサイトを構成する配色、画像、フォント、ボタンのサイズ、CSSなどを抽出できる拡張機能が「Visual Inspector」です。

操作方法もかんたんで直感的に使えます。

お気に入りのWebサイトの要素を自分のサイトに反映して、自分が作りたいデザインをつくりましょう。

2.Color Zilla|サイトの配色がワンクリックでわかる

color zilla

出典:Chromeウェブストア

提供元:ColorZilla.com

「Color Zilla」はWebサイト上にある色を調べるのに適したツールで、調べたい色をワンクリックするだけで、カラーコードとRGB値を取得し、自動的にクリップボードにコピーされていきます。

コピーされた色は履歴として積み重なっていき、その色を使いたくなったときにはカラーコードをコピーしたりして自分のサイトに利用することができますよ。

3.What Font|お気に入りのフォントを調べられる

what font

出典:Chromeウェブストア

提供元:chengyinliu.com

「このフォントいいな」と思ったフォントにマウスを移動させるだけで、「フォントの種類、スタイル、太さ、文字の大きさ、行間、色」をスキャンしてくれる拡張機能です。

いいフォントがあってもフォント名までなかなか調べにくいですが、「What Font」ならかんたんな操作でフォントの詳細まで確認できます。

使いたいと思ったフォントは即購入画面へ移行できるので、忘れないうちに購入してそのまま自分のデザインに組み込みましょう。

4.Dimensions|ページ内の長さを測れるツール

dimensions

出典:Chromeウェブストア

提供元:www.felixniklas.com

「Dimensions」はWebサイト内の文章の間や図形のサイズなどを測れる拡張機能で、自分のサイトに参考にしたいデザインを忠実に再現することができます。

使い方はかんたんで、測りたい図形の間をクリックするだけです。

クリックした場所から十字方向の長さをピクセル単位で表示してくれます。

5.Fire Shot|サイト内をかんたんスクリーンショット

fire shot

出典:Chromeウェブストア

提供元:https://getfireshot.com/

「Fire Shot」はWebサイトのスクリーンショットをかんたんに撮れる拡張機能で、「PDF / JPEG / GIF / PNG」の形式を選んで保存できます。

サイトの一部分でも全画面でも選択すれば好きなようにスクリーンショットが撮れます。

またスクリーンショットを撮ったらそのまま編集や印刷、OneNote、クリップボード、メールで送信することも可能です。

6.The QR Code Extension|QRコード作成ツール

the qr code extension

出典:Chromeウェブストア

提供元:Manuel Braun

「The QR Code Extension」はQRコードの生成と読み取りが可能なChromeの拡張機能で、表示中のWebサイトのURLのほか、任意の文字列からのQRコード生成や印刷されたQRコードのスキャンが可能です。

私はPC上でサイトを作って、スマホでの見え方を確認するときにそのサイトのQRコードをこの拡張機能で出して、スマホで読み取っています。

Webサイトの分析に使えるChromeの拡張機能6選

Webサイトの分析に使えるChromeの拡張機能6選

Freepik – jp.freepik.com によって作成された technology ベクトル

  1. HTMLエラーチェッカー|HTMLのエラーを瞬時に分析できる
  2. CSS Pepper|CSSベースでサイト情報が得られる
  3. Muzli 2|優れたデザインのアイデアを収集できる
  4. Design Mode|既存のWebサイトを編集できる
  5. UX Check|Webサイトを要素ごとに評価・分析
  6. Save to Pocker|Webサイト一時保存ツール

1.HTMLエラーチェッカー|HTMLのエラーを瞬時に分析できる

HTMLエラーチェッカー

出典:Chromeウェブストア

提供元:kzms2.xyz

「HTMLエラーチェッカー」はHTMLの開始・終了タグなどのかんたんなミスを検出してくれる拡張機能です。

長いコードになるほどミスを見つけるのが大変なので、納品前におこなう品質チェックの項目に追加してもいいのではないでしょうか。

2.CSS Peeper|CSSベースでサイト情報が得られる

css peeper

出典:Chromeウェブストア

提供元:CSS Peeper

「CSS Peeper」はWebデザイナーが使いたい万能なChrome拡張機能のひとつで、サイトの構成、配色とカラーコード、画像の一括ダウンロードなどができます。

使い方もシンプルで、CSS Peeperを起動すれば瞬時にWebサイトの情報を分析してくれます。

3.Muzli 2|優れたデザインのアイデアを収集できる

muzli 2

出典:Chromeウェブストア

提供元:https://muz.li/

自分でデザインを作りたいときにプロのデザインを参考にすると思いますが、ツールバーに設置しておけばフッと思いついたときにすぐデザインを検索できるのが「Muzli 2」です。

しっかりデザインを探したいというときは、Chromeの拡張機能ではありませんがMuzli Searchというブラウザ版を使うのもいいでしょう。

4.Design Mode|既存のWebサイトを編集できる

design mode

出典:Chromeウェブストア

提供元:Bitquark

「Design Mode」は公開されているWebサイトの一部分を好きなように編集できる拡張機能です。

実際にサイトを編集してしまうわけではないので「このサイトのここはこうした方がいいのでは?」というのを試すことができ、デザイナー的な視点を養うことができます。

5.UX Check|Webサイトを要素ごとに評価・分析

ux check

出典:Chromeウェブストア

提供元:chrisgallello

「UX Check」はヒューリスティック評価というユーザビリティを評価してくれる拡張機能です。

ヒューリスティックの評価内容であるニールセンの10項目を元に、選択した項目がその10項目のうちどれに当てはまるかを判定してくれるので、Webサイト全体のバランスを調節できます。

評価したものをチーム内できょうゆうすることもできるため、フィードバックするときにも便利なツールです。

6.Save to Pocket|Webサイト一時保存ツール

save to pocket

出典:Chromeウェブストア

提供元:getpocket.com

学習していて分からないところがある際にGoogleで検索をすると思いますが、そのような時、検索した記事を後で簡単に呼び出す機能が「pocket」です。

まず、pocketに会員登録し、その後save to pocketをインストール、pocketマークを押すと記事を保存することができます。

シンプルに作業効率があがるChromeの拡張機能5選

シンプルに作業効率があがるChromeの拡張機能5選

Vectorjuice – jp.freepik.com によって作成された abstract ベクトル

  1. Search Preview|サイトをプレビュー表示
  2. Graphi Tabs|タブを見やすく整理できる
  3. Image Downloader|画像を一括ダウンロード
  4. Get Tab Info|開いているURLをまとめてコピー
  5. pasty|選択したURLを一括で開ける

1.Search Preview|サイトをプレビュー表示

search preview

出典:Chromeウェブストア

提供元:searchpreview.de

「Search Preview」はGoogleの検索結果にそれぞれのページのプレビュー画像を表示してくれる拡張機能です。

調べ物しているときに「サイト内をざっくり確認したい」や「このサイトさっきも来たじゃん」と、いちいちWebサイトを開いて閉じるという時間のロスを防ぐことができます。

2.Graphi Tabs|タブを見やすく整理できる

graphi tabs

出典:Chromeウェブストア

提供元:graphiy.com

色んなWebサイトを閲覧していると、ついついタブを開きすぎてしまうことってよくありますよね。

「GraphiTabs」は開いているタブをマインドマップのように視覚的に管理できる拡張機能です。

探しものや管理が苦手な人は、これひとつで時間短縮ができる優秀なツールですよ。

3.Image Downloader|画像を一括ダウンロード

image downloader

出典:Chromeウェブストア

提供元:Vlad Sabev

「Image Downloader」を使えば閲覧中のページで使用されている画像の一覧を表示して、お気に入りの画像をダウンロードできます。

サイトリニューアルの際も、現行サイトから画像をすべてダウンロードできるので、使いみちは様々です。

4.Get Tab Info|開いているURLをまとめてコピー

get tab info

出典:Chromeウェブストア

提供元:hajime.naga

現在開いているすべてのタブなどの情報を一括でコピーしてくれるのが「Get Tab Info」です。

HTMLタグ、短縮URL、QRコードの生成も可能であり、お気に入りのコピー方法をテンプレートとして設定しておけるので、あなたに合った最適な使い方ができますよ。

5.pasty|選択したURLを一括で開ける

pasty

出典:Chromeウェブストア

提供元:oov.ch

「pasty」は選択した複数のURLをまとめて開くことができる拡張機能です。

Webデザインの分析をするときにや新しいアイデアをもらいたいときにWebサイトを色々見たいけど、いちいち開くとテンポよく開けないので効率が悪いと思ったことはありませんか?

pastyなら複数のURLを選択して右上にある「pasty」のアイコンを押すだけで、選択した複数のURLをまとめて開けます。

Chromeの拡張機能をインストールする方法

Chromeの拡張機能をインストールする方法は簡単です。

以下の手順でおこなってください。

  1. Chromeウェブストアを開く
  2. 使いたい拡張機能を選択する
  3. 右上にある「Chrome に追加」をクリックする

上記の手順で追加した拡張機能は、Chromeの右上に表示されます。

ジグソーパズルのマークを押すと、これまでにインストールしてきた拡張機能が格納されています。

また、ピン留めをすることで常時ウィンドウにも表示させておくことも可能です。

ひとつ注意点としては、使わなくなった拡張機能は削除するのがおすすめです。

拡張機能でも多少はパソコンの容量を減らしてしまうため、入れすぎるとパソコンの動作が重くなります。

必要な拡張機能だけをインストールして、効率よく作業をしましょう。

まとめ|拡張機能を使って効率よく作業しよう

この記事では、Webデザイナーが使うべきChromeの拡張機能を17個紹介しました。

なかでもWebデザインとして直接関係があって、必ず入れて欲しい拡張機能6つをおさらいしましょう。

  • Visual Inspector|Webデザイン向け万能ツール
  • Color Zilla|サイトの配色がワンクリックでわかる
  • What Font|お気に入りのフォントを調べられる
  • Dimensions|ページ内の長さを測れるツール
  • Fire Shot|サイト内をかんたんスクリーンショット
  • The QR Code Extension|QRコード作成ツール

デザイン製作や分析を始めると、必ずやる作業はありますよね。

毎回1分かかる作業だとしてもそれがワンクリックで終われば、時間と作業ストレスは解消できます。

Webデザイナーとして活動しているなら、上記で紹介したChrome拡張機能を使って作業の効率化をはかりましょう。

コメント

タイトルとURLをコピーしました