Advertisement

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

 

この記事は、2017年5月8日に公開してから再編集、アップデートを随時行っています。新しいツールを加え、サービスが終了しているツールは削除し、合計40個のChrome拡張機能を紹介しています。

 

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

 

画像エディタソフトウエアのような多機能なエクステンションから、1日の目標を確認するシンプルなToDoリストや、よりウェブ制作を効率的に行うことができるものまで幅広い拡張機能が揃っています。より使いやすく、作業の捗る自分だけの環境を手に入れてみましょう。

 

 

chromeextension-top (1)
PhotoshopVIP編集部: 2016年3月14日に公開された記事を再度編集、追加しています。 グラフィックデザインの世界は進化を続けてお

 

Window Resizer

window-resizer

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

 

 

 

Dark Mode in Chrome DevTools

dark-mode-dev-tools

DevToolsでもダークモードが使えるようになりました。右上にあるアイコンボタンをクリックし、Settingを選択し、PreferencesのThemeをDarkにすれば設定完了です。

 

 

 

Muzli 2

muzli

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

 

 

 

What Font

whatfont

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

 

 

 

Page Ruler

page-ruler

Page Rulerは、ウェブサイト上のあらゆるデザイン要素の距離を、ピクセル単位で正確に測ることができるツール。

 

 

 

ToyBox

toybox

ToyBoxは、ウェブサイトのCSSを検証し、フィードバックを残すのにもっとも手軽なプラグインのひとつ。より詳しい使い方は、以下の動画を参考にどうぞ。

 

 

 

Colorzilla

colorzilla

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

 

 

 

SVG Grabber

svg-grabber

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

 

 

 

Sizzy

sizzy

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

 

 

 

CSS Peeper

css-peeper

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

 

 

 

tweak

tweak

Tweak は、ブラウザ上で直感的なWYSIWYGエディタを使って、ウェブ開発を行うことができる拡張機能。美しく使いやすいインターフェースデザインも高ポイント。

 

 

 

CSS Shack

css-shark

CSS Shack は、PhotoshopやSketchなどの画像エディターソフトのように、レイヤースタイルを作成することができ、ひとつのCSSファイルとしてエクスポートすることができます。

 

 

 

XVG

xvg

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

 

 

 

Fontface Ninja

fontface-ninja

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

 

 

 

Highly Highlighter

highly-highlight

記事の要点となる部分にのみを、ハイライトで強調してくれる時間節約にもなりそうな拡張機能 Highly Highliter。試しに日本語サイトでも確認してみましたが、うまくいかず。日本語対応を期待したいプラグインのひとつ。

 

 

 

Tab Snooze

tab-snooze

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

 

 

 

Stay Focused

stay-focus

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

 

 

 

Loom – Video Recorder

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

 

 

 

Open Screenshot

open-screenshot

Open Screenshot を使えば、どのようなwebページでも素早くシンプルな操作でJPEGファイルに保存できます。webページを丸ごとキャプチャし、GmailやEvernoteなどお好みのサービスに共有することができます。

 

 

 

Be Limitless

be-limitless

自分がブラウザを使って、どのようなサイトや検索などを行なっているのかトラッキング、解析できる生産性アップには欠かせない拡張機能 Be Limitless。新しいタブを開くたびに美しい画像イメージと一緒に、お好みのデータをわかりやすく表示することができます。

 

 

 

Jot

jot

Jot は、新しいタブを開いたときに美しい画像イメージと一緒に、ToDoリストを表示してくれるシンプルで役立ちます。多機能すぎるToDoリストではなく、シンプルに管理したいとひとに。

 

 

 

Noisli

noisli

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

 

best-sound-of-productivity (1)
作業に集中したいけど、なかなかできない。誰もが一度はそんな経験があるのではないでしょうか。完全な無音よりも、図書館やカフェなど程よく騒がしい位のほうが集中できたりし

 

 

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の最大の特徴はその多機能さ。選択範囲を決めてのカスタム撮影などにも向いています。

 

 

 

Pablo

pablo-social-images

Facebook や Twitter、Instagram、Pinterestなどのソーシャルメディア用のグラフィック画像を、手軽にブラウザ上で作成することができる Pablo。60万枚を超える背景イメージや、すぐにデザインを作成できるテンプレートも豊富に揃います。

 

 

 

Save to Pocket

save-to-pocket2

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

 

 

 

Chrome Daltonize!

chrome-daltonize

Chrome Daltonize! は、世界の人口のおよそ5%にあたる人に影響していると言われる色盲のユーザーに、見えていない色をうまく補ってくれる拡張機能。

 

 

 

Custom Cursor

cutstom-cursor

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

 

 

サムネイル@ : Be Limitless – Google Chrome Extension

参照元リンク : Best Chrome extensions for designers by Thanasis Rigopoulos – Medium

参照元リンク : 10 best Chrome extensions for designers by Brendan Mahony – UX Collective