【デザイナーが選ぶ】webデザインが捗るChrome拡張まとめ【2018年度版】

【デザイナーが選ぶ】webデザインが捗るChrome拡張まとめ【2018年度版】

こんにちは。9月3日と言えばセプテンバーさんですね。僕の青春の一ページです。

さて、今回は表題とおり、デザイナーのweb制作業務が圧倒的に捗るChrome拡張機能をまとめてみました。

自分は普段使いのブラウザがChromeなこともあって様々な拡張機能を使っているのですが、その中でもweb制作に便利な拡張を厳選して紹介します。

Web Developer

早速ですがコレ!めちゃめちゃ重宝してます。

デバイスごとの表示確認やフォームの動作確認テストなど、時間をとられがちなあらゆる作業を簡単に行える拡張です。

非常に高機能で、ブラウザのデベロッパーツールでちまちま確認していたのが信じられないくらい簡単に検証を行うことができるため、webデザイナーならもはやインストール必須と言っても過言ではないと思います。

Palette Creator

画像の色を抽出しカラーパレットを生成してくれる非常に便利な拡張機能です。

例えばwebサイトを作る際、使うメインビジュアルが既に決まっているのであればコレ一つでトンマナが揃ったパレットを一瞬で生成してくれます。
また、良い感じの画像からパレットを生成するだけでも色彩面の参考になります。

写真やイラストからインスピレーションを受けたとき、まずはこれで色彩面を整理してみるのも良いのではないでしょうか。

ColorZilla

これは有名ですね。

ブラウザ上に表示されている要素の色情報を取得できる拡張です。

同じような拡張機能はいくつかありますが、こちらはカーソル周辺の平均色を取れたりカラーコードを変換できたりと、使える機能がわかりやすくまとまっているのでおすすめです。

Fontface Ninja

web上で使われているフォントを教えてくれる拡張です。

テキストに当たっているスタイルの確認はもちろん、フォントがフリーかどうかや、画像になっているフォントの検索などもできたりするので、非常に使いやすいです。

自分は今まで「WhatFont」などの同機能を持つ他の拡張を使っていたのですが、Fontface Ninjaの使用感に惚れてからはずっとこちらを使用しています。

Window Resizer

その名のとおり、ウィンドウサイズを自動で変更してくれる拡張機能です。

デベロッパーツールでも表示部分のリサイズ機能はありますが、こちらはウィンドウサイズ自体を手軽に変更できるのが魅力的です。

ちなみに画像は日本一周中に偶然入った奈良県にある激ウマラーメン屋「MENYA BIBIRI」のサイト。近くに寄った際にはぜひ。

File Icon for GitHub

こちらはwebデザイナーに限らず、githubでバージョン管理などを行なっている全デベロッパーにおすすめしたい拡張です。

デフォルトではファイル横に全て同じアイコンが並んでいて少しわかりにくいですが、これを入れるだけで拡張子毎に適したファイルアイコンを表示してくれます。

何気ない拡張ですが、アイコンだけでファイルを識別できるので視認性が非常にあがります。

Spectrum

こちらは表示しているページに対して、ワンクリックで色覚多様性をシミュレートできる拡張です。

各Adobe製品やSketchなどには色覚多様性を確認するための機能が多々ありますが、 それをブラウザ上で確認できるというのはやはり使い勝手が良いです。

サービスやプロダクトをより多くの人に使ってもらうためには様々なアクセシビリティを意識する必要がありますが、その部分を蔑ろにしているデザイナーは思ったより多くいるのでは、と僕は感じています。

インタラクションを色だけで表現しているようなもったいないUI、みなさんも見かけたことありませんか?

簡単に様々な色覚多様性の見え方を確認できるこのツールは、特に駆け出しのデザイナーにとって優れた拡張機能だと思います。

まとめ

webデザインが捗るChrome拡張を厳選してまとめてみました。

日々新しい拡張機能がリリースされているので、他に良さそうなものがあれば随時更新していこうと思います。

他にもこんなのがいいよーというのがあれば、ご連絡いただけると嬉しいです。

それではまた。

web制作カテゴリの最新記事

ページトップへ戻る