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

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

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

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

出典：Chromeウェブストア ColorZilla

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

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

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

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

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

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

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

出典：Chromeウェブストア Dimensions

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

出典：Chromeウェブストア WhatFont

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

出典：Chromeウェブストア SearchPreview

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

出典：Chromeウェブストア pasty

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

出典：Chromeウェブストア FireShot

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

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

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

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

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

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

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

出典：Chromeウェブストア GetTabInfo

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

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

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

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

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

• スマホ対応！レスポンシブWebデザインでモバイルフレンドリーなサイト制作を
• 目を引く！画像を使ったレイアウトのポイントを紹介します
• 画像1つで印象は変わる！写真画像の適切な加工法を紹介します