ウェブサイトやグラフィック制作をより快適にし、生産性をアップさせてくれる、ウェブ制作に携わるすべての人にオススメしたい Chrome 拡張機能をまとめてご紹介します。
画像エディタソフトウエアのような多機能なエクステンションから、1日の目標を確認するシンプルなToDoリストや、よりウェブ制作を効率的に行うことができるものまで幅広い拡張機能が揃っています。より使いやすく、作業の捗る自分だけの環境を手に入れてみましょう。
Window Resizer
Window Resizerは、異なる画面サイズでウェブサイトを確認できる拡張機能。お好みのアイコンダブを選んでクリックするだけのシンプルな操作性も◎。
Dark Mode in Chrome DevTools
DevToolsでもダークモードが使えるようになりました。右上にあるアイコンボタンをクリックし、Settingを選択し、PreferencesのThemeをDarkにすれば設定完了です。
Muzli 2
Muzli 2は、Chromeで新しいタブを開くたびに世界の最新デザインニュースを一覧で表示してくれる、デザイナー必須アイテムのひとつ。お好みのサイトを追加したり、カスタマイズも可能です。
What Font
ウェブサイトで使われている、フォントの種類を知りたいと思ったことはないでしょうか。これまではFirebug や Webkitなどを利用していましたが、What Font を使えば、気になる書体をマウスクリックするだけで確認できる、シンプルさが便利なツール。
Page Ruler
Page Rulerは、ウェブサイト上のあらゆるデザイン要素の距離を、ピクセル単位で正確に測ることができるツール。
ToyBox
ToyBoxは、ウェブサイトのCSSを検証し、フィードバックを残すのにもっとも手軽なプラグインのひとつ。より詳しい使い方は、以下の動画を参考にどうぞ。
Colorzilla
Colorzillaは、スポイトツールを使ってウェブサイトで使われている色を、その場で抽出し保存してくれるプラグイン。個人的にもずいぶんお世話になっています。
SVG Grabber
ウェブサイトを制作しているときにSVGアイコンが必要になることはよくあります。SVG Grabberを利用すれば、ボタンをクリックするだけでさまざまなSVGアイコンをダウンロード、プレビューすることができます。
Sizzy
Sizzy は、iPhoneなど各種スクリーンサイズでどのようにウェブサイトが表示されるのか、まとめて確認することができる拡張機能。こちらよりURLを入力することで、動作確認を実際に行うことができます。
CSS Peeper
CSS Peeper は、任意のウェブサイトや要素に設定されたCSSを解析できるChromeエクステンションです。もともとウェブデザイナーが手軽にスタイルガイドを作成できるように、という目的で作成されたデザイナーフレンドリーなアイテム。
tweak
Tweak は、ブラウザ上で直感的なWYSIWYGエディタを使って、ウェブ開発を行うことができる拡張機能。美しく使いやすいインターフェースデザインも高ポイント。
CSS Shack
CSS Shack は、PhotoshopやSketchなどの画像エディターソフトのように、レイヤースタイルを作成することができ、ひとつのCSSファイルとしてエクスポートすることができます。
XVG
ワンクリックするだけでSVGのデバックを行うことができる便利な拡張機能 XVG。SVGのパスをアウトラインに変換し、より柔軟なデバックを実現できます。
Fontface Ninja
Fontface Ninja は、ウェブサイトで使われているフォントをカーソルを合わせるだけで確認できるだけでなく、その場で購入までできます。ウェブデザイナーは持っておきたい拡張機能のひとつ。
Highly Highlighter
記事の要点となる部分にのみを、ハイライトで強調してくれる時間節約にもなりそうな拡張機能 Highly Highliter。試しに日本語サイトでも確認してみましたが、うまくいかず。日本語対応を期待したいプラグインのひとつ。
Tab Snooze
Tab Snooze は、開きすぎてしまったタブを、今夜や次の日など必要なときまで非表示にしてくれる拡張機能。アイコンで分類されたインターフェースデザインもシンプルで、直感的に扱うことができる優れもの。
Stay Focused
Facebook や Twitter に何回もログインしながらの作業では、生産性は上がることはないでしょう。Stay Focused を利用すれば、特定のサイトを決めた時間内だけアクセス不能にしてくれます。すべてのウェブサイトの閲覧も不能にしてしまうので、利用には注意が必要な拡張機能。
Loom – Video Recorder
Loom – Video Recorder は、画面スクリーンやウェブカメラなどをそのまま録画できる拡張機能。他にも動画のチームによる共有をしやすくするなど、嬉しい機能がたくさん。
Open Screenshot
Open Screenshot を使えば、どのようなwebページでも素早くシンプルな操作でJPEGファイルに保存できます。webページを丸ごとキャプチャし、GmailやEvernoteなどお好みのサービスに共有することができます。
Be Limitless
自分がブラウザを使って、どのようなサイトや検索などを行なっているのかトラッキング、解析できる生産性アップには欠かせない拡張機能 Be Limitless。新しいタブを開くたびに美しい画像イメージと一緒に、お好みのデータをわかりやすく表示することができます。
Jot
Jot は、新しいタブを開いたときに美しい画像イメージと一緒に、ToDoリストを表示してくれるシンプルで役立ちます。多機能すぎるToDoリストではなく、シンプルに管理したいとひとに。
Noisli
気が散って集中できないときに生産力を高めてくれる便利な拡張機能 Noisli。雨の音や森の中を歩いているような空気感、月夜の下などさまざまなシチュエーションをお好みでカスタマイズできる環境音楽系ツール。
Black Menu for Google
仕事やプライベートでも Google 関連のサービスをよく利用するというひとにオススメしたい拡張機能のひとつ Black Menu for Google。ボタンをクリックすれば、Gメールやアナリティクス、Google ドライブ、翻訳、Youtubeなどさまざまなサイトをタブ内でまとめて確認することができます。
Google Dictionary
英文のウェブサイトや記事を読むときに、Google翻訳が欠かせないというひとも多いでしょう。Google が作成したこちらのプラグイン Google Dictionary(by Google) は、わからない英単語をすぐに調べることができます。
Nimbus
ブラウザ画面のスクリーンショットを撮影できる拡張機能はたくさんありますが、Nimbusの最大の特徴はその多機能さ。選択範囲を決めてのカスタム撮影などにも向いています。
Pablo
Facebook や Twitter、Instagram、Pinterestなどのソーシャルメディア用のグラフィック画像を、手軽にブラウザ上で作成することができる Pablo。60万枚を超える背景イメージや、すぐにデザインを作成できるテンプレートも豊富に揃います。
Save to Pocket
ウェブサイトを閲覧中にお気に入りの記事が見つかっても、読む時間がないことありますよね。そんなときは、Save to Pocket を利用すれば、ボタンひとつであとで読むコレクションに追加することができ、ウェブだけでなくモバイルアプリからも確認することができます。
Chrome Daltonize!
Chrome Daltonize! は、世界の人口のおよそ5%にあたる人に影響していると言われる色盲のユーザーに、見えていない色をうまく補ってくれる拡張機能。
Custom 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
