ウェブ制作の面倒をズバリ解決!オススメChrome拡張機能23個まとめ

10-best-chrome-extensions-for-designers-gillde-1

 

ウェブサイトやグラフィック制作をより快適にし、生産性をアップさせてくれるChrome拡張機能をまとめてご紹介します。ウェブ制作に携わる、すべての人にオススメです。

 

便利なオンラインツールを一緒に活用して、自分だけの爆速Web制作スタイルを目指しませんか。

 

 

What Font

WHAT FONTの画像

ウェブサイトで使われている、フォントの種類を知りたいと思ったことはないでしょうか。これまではFirebug や Webkitなどを利用していましたが、What Font を使えば、気になる書体をマウスクリックするだけで確認できる、シンプルさが便利なツール。

 

 

 

Fontface Ninja

Fontface Ninja は、ウェブサイトで使われているフォントをカーソルを合わせるだけで確認できるだけでなく、その場で購入までできます。ウェブデザイナーは持っておきたい拡張機能のひとつ。

 

 

 

Window Resizer

window-resizer

Window Resizerは、異なる画面サイズでウェブサイトを確認できる拡張機能。お好みのアイコンダブを選んでクリックするだけのシンプルな操作性も◎。

 

 

 

Muzli 2

muzli

Muzli 2は、Chromeで新しいタブを開くたびに世界の最新デザインニュースを一覧で表示してくれる、デザイナー必須アイテムのひとつ。お好みのサイトを追加したり、カスタマイズも可能です。

 

 

 

Image Downloader

開いているウェブページで使われている画像を一括で閲覧、ダウンロードできる Image Downloaderは、時間の節約にぴったりなプラグイン。画像の幅や高さを調整し、絞り込みことも可能です。

 

 

 

HTML to Figma

HTML to Figma を使えば、任意のウェブページをキャプチャし、そのままFigmaにインポート、要素の検証やレイヤー別に編集することもできる便利プラグイン。

 

 

 

Site Palette

ウェブサイトで使われている配色カラーパレットをまとめて表示できる Site Palette。色を組み合わせ、自分だけのカラーパレットを作成、リンクによる共有の他、SketchとAdobeカラースウォッチとしてもダウンロードできます。

 

 

 

Colorzilla

colorzilla

Colorzillaは、スポイトツールを使ってウェブサイトで使われている色を、その場で抽出し保存してくれるプラグイン。個人的にもずいぶんお世話になっています。

 

 

 

SVG Grabber

svg-grabber

ウェブサイトを制作しているときにSVGアイコンが必要になることはよくあります。SVG Grabberを利用すれば、ボタンをクリックするだけでさまざまなSVGアイコンをダウンロード、プレビューすることができます。

 

 

 

Sizzy

sizzy

Sizzy は、iPhoneなど各種スクリーンサイズでどのようにウェブサイトが表示されるのか、まとめて確認することができる拡張機能。こちらよりURLを入力することで、動作確認を実際に行うことができます。

 

 

 

CSS Peeper

CSS Peeper は、任意のウェブサイトや要素に設定されたCSSを解析できるChromeエクステンションです。もともとウェブデザイナーが手軽にスタイルガイドを作成できるように、という目的で作成されたデザイナーフレンドリーなアイテム。

 

 

 

PerfectPixel

PerfectPixelプラグインを利用すれば、開いているページに半透明の画像をレイヤー状に重ねて表示でき、実際のデザインとCSSスタイリングを比較しながら、調整を行うことができます。

 

 

 

XVG

xvg

ワンクリックするだけでSVGのデバックを行うことができる便利な拡張機能 XVG。SVGのパスをアウトラインに変換し、より柔軟なデバックを実現できます。

 

 

 

The Great Suspender Original

開きすぎてしまったタブを一時停止してメモリを節約し、パソコンをよりスムーズに動作させることができるThe Great Suspender Original。停止したタブをまとめて復活させたり、タブを非表示にするまでの時間もカスタマイズできます。

 

 

 

Tab Snooze

Tab Snooze は、開きすぎてしまったタブを、今夜や次の日など必要なときまで非表示にしてくれる拡張機能。アイコンで分類されたインターフェースデザインもシンプルで、直感的に扱うことができる優れもの。

 

 

 

Stay Focused

stay-focus

Facebook や Twitter に何回もログインしながらの作業では、生産性は上がることはないでしょう。Stay Focused を利用すれば、特定のサイトを決めた時間内だけアクセス不能にしてくれます。すべてのウェブサイトの閲覧も不能にしてしまうので、利用には注意が必要な拡張機能。

 

 

 

Loom – Video Recorder

loom-video-recorder
Loom – Video Recorder は、画面スクリーンやウェブカメラなどをそのまま録画できる拡張機能。他にも動画のチームによる共有をしやすくするなど、嬉しい機能がたくさん。

 

 

 

Noisli

noisli

気が散って集中できないときに生産力を高めてくれる便利な拡張機能 Noisli。雨の音や森の中を歩いているような空気感、月夜の下などさまざまなシチュエーションをお好みでカスタマイズできる環境音楽系ツール。

 

集中力アップ!カフェや雨の音など環境音が聴ける作業BGM用サイト11個まとめ

 

 

Black Menu for Google

black-menu

仕事やプライベートでも Google 関連のサービスをよく利用するというひとにオススメしたい拡張機能のひとつ Black Menu for Google。ボタンをクリックすれば、Gメールやアナリティクス、Google ドライブ、翻訳、Youtubeなどさまざまなサイトをタブ内でまとめて確認することができます。

 

 

 

Google Dictionary

google-dictionary

英文のウェブサイトや記事を読むときに、Google翻訳が欠かせないというひとも多いでしょう。Google が作成したこちらのプラグイン Google Dictionary(by Google) は、わからない英単語をすぐに調べることができます。

 

 

 

Nimbus

nimbus-capture

ブラウザ画面のスクリーンショットを撮影できる拡張機能はたくさんありますが、Nimbusの最大の特徴はその多機能さ。選択範囲を決めてのカスタム撮影などにも向いています。

 

 

 

Save to Pocket

save-to-pocket2

ウェブサイトを閲覧中にお気に入りの記事が見つかっても、読む時間がないことありますよね。そんなときは、Save to Pocket を利用すれば、ボタンひとつであとで読むコレクションに追加することができ、ウェブだけでなくモバイルアプリからも確認することができます。

 

 

 

Custom Cursor

さいごは特にデザイナー向けという訳ではありませんが、気持ちを切り替えたいときにちょっと使えるプラグイン。Custom Cursorは、普段見慣れているカーソルアイコンを自分好みにカスタマイズできる、ファンキーさが売りの拡張機能。

 

デザイナーが入れておきたい、クリエイティブな Chrome拡張機能15個まとめ