お電話
ホームページのご相談・お見積り

スタッフブログ

デザイナーの方におすすめ!Web制作で役立つChrome拡張機能13選

2019/11/29 デザイン

皆さんは、GoogleChromeの拡張機能を活用していますでしょうか?

Chromeの拡張機能を使用することで、Webサイトを制作時のブラウザでの作業が短縮できます。加えて各作業を正確に行うことがでたり、空いた時間で他の仕事に時間を回せることも。

そこで今回は、デザイナー目線からWebサイト制作に使用している便利なChromeの拡張機能を13個ご紹介します!

役立つ機能がひとまとめ「Visual Inspector」

出典:Chromeウェブストア Visual Inspector

ボタンや写真等のサイズの計測、色やフォント情報の抽出、テキストの編集、ボタンやバナー等のデザイン画像だけをキャプチャできるなど、Webサイト制作に必須の機能がまとめて利用できる拡張機能です。他、機能としては下記のようなものがあります。

  • ボタンや写真などのサイズの計測機能
  • 各デザインごと、サイト全体の色の抽出機能
  • テキスト、デザインの編集
  • ボタンやバナー等のデザインのみのキャプチャ (変更したものにも対応)
  • サイトで使用しているフォントの表示 (フォント名・カラー・サイズなど)
  • 画像の一覧の作成・ダウンロード

サイトから色を抽出するなら「ColorZilla」

出典:Chromeウェブストア ColorZilla

サイトから色を抽出できる、カラーピッカーの拡張機能です。 調べたい箇所をクリックするだけで色情報をクリップボードにコピーしてくれます。あの色使いたいけど色辞典から探すのはめんどう…そんな時に便利です。

サイトの画像を一気にダウンロード「Image Downloader」

出典:Chromeウェブストア Image Downloader

閲覧中のページで使用されている画像の一覧を表示し、それぞれ個別でダウンロードしたり、別タブでの表示などできる拡張機能。サイトリニューアルなどの際なら現行サイトの画像など、様々な画像を一気にダウンロードしたいときにおすすめです。

Googleフォントの確認はお任せあれ「Google Font Previewer for Chrome」

出典:Chromeウェブストア Google Font Previewer for Chrome

閲覧中のページにGoogle Fontsを適用し、確認することができる拡張機能です。
使い方はとても簡単で操作パネルのラジオボタンをクリックするだけ。お気に入りのフォントが見つかったらフォント情報を出してくれるので、サイトにコピー&ペーストして指定すればフォントが反映されます。

英単語をいちいち検索しなくて済む「Weblioポップアップ英和辞典」

出典:Chromeウェブストア Weblioポップアップ英和辞典

デザイン時に英語の見出しやタイトルを付ける際、英語でなんと言うのかわからない時があります。その時わざわざ「製品開発 英語」など、検索をかけなくてもワンクリックで単語変換と翻訳ができます。

ページ内の長さが測れる「Dimensions」

出典:Chromeウェブストア Dimensions

Webサイト内のスクリーンの長さを測ることができる拡張機能。ページ内の文章と文章の距離などを計測することができるので、Webデザイン作成時、コンテンツ配置の参考にすることができます。

このフォント、何?が解決する「WhatFont」

出典:Chromeウェブストア WhatFont

使用されているフォントが何というフォントか、特定することができる拡張機能。フォント購入のアシストもしてくれるので、気に入ったフォントを即デザインに組み込むことができます。

サイトをプレビュー表示「SearchPreview」

出典:Chromeウェブストア SearchPreview

検索結果にそれぞれのページのプレビュー画像を表示してくれる拡張機能です。「またこのサイトに来てしまったか…」ということがなくなるので時間のロスを防げます。

URLを一括で開ける「pasty」

出典:Chromeウェブストア pasty

コピーした複数URLをまとめて開くことができる拡張機能です。
記載されている複数のURLを開く時、ひとつずつクリックして開くのは面倒ですが、複数のURLをコピーして「Pasty」のアイコンをクリックするだけで複数URLをまとめて開くことができます。

スクリーンショットを撮るなら「FireShot」

出典:Chromeウェブストア FireShot

Webサイトの一部、または全画面を撮影できる拡張機能。PDF/JPEG/GIF/PNGなど様々な拡張子で保存できます。

画面撮影はChromeのデベロッパーツールでも使えますが、うまく撮影できないことがあるのでこの拡張機能がおすすめです。

便利なフィルター検索ができる「ato-ichinen」

出典:Chromeウェブストア ato-ichinen

「更新日が1年以内の記事だけ検索結果に表示する」というようなフィルター検索が可能になる拡張機能。1週間以内や24時間以内などの設定にもできて、最新の情報を知りたいときに使えます。

もともとGoogleに備わっている機能を簡単に使えるようにしたものですが、簡単に設定できるというのはとても便利です。

パッとキャッシュを消去「Clear Cache」

出典:Chromeウェブストア Clear Cache

ブラウザーのキャッシュをクリックひとつで消去する拡張機能。設定することで履歴やパスワードなどもワンクリックで削除することができます。

開いているサイトのURLをまとめてゲット「GetTabInfo」

出典:Chromeウェブストア GetTabInfo

開いているタブの情報を一括で取得する拡張機能。
ひとつのサイトだけではなく、今開いているすべてのタブのWebサイトのURLをコピーしたい時におすすめです。全タブのタイトルとURLを一括取得可能です。また、テンプレートで自由に出力内容を編集できます。

Chrome拡張機能を使ってweb制作を円滑に進めよう

今回はChrome拡張機能の紹介でしたが、皆さんのWebサイト制作時に役立ちそうな機能はありましたか?

ドコドアに入社してから、拡張機能をまともに使い始めた身ですが、今ではこの拡張機能がないと困る、なんでもっと早くに知っておきたかったと思うくらい、今回紹介させていただいた拡張機能は便利だと感じています。
これからも、よりデザイン業務を効率よく進めるため拡張機能を活用していきたいと思います。

以上、Chrome拡張機能の紹介でした。実際にドコドア社員が愛用している拡張機能ですので、ぜひ活用してみてください!

その他の記事はこちらから!

明石 海渡が書いた記事

新着情報

スタッフブログ