yup

筆者は最近、インターネットブラウザをSafariからChromeに切り替えました。両者の違いは、拡張機能の充実度合い。Chromeの拡張機能は次々とバージョンアップされています。

よりどりみどりな拡張機能から、デザイナーがデザインを考えるときにWebサイトの閲覧をスムーズにする便利なプラグインを厳選しました。

プラグインをテスト実施して、便利だと感じた機能をみなさんにシェアします。日本ではまだあまり知られていないようなツールもご紹介します!

Window Resizer

拡張機能Window Resizer

この拡張機能は、ブラウザのウィンドウサイズを様々な解像度にリサイズしてくれるものです。Webデザイナーやデベロッパーにとって、異なる解像度で簡単にテストできるプラグインというのはとても便利なものです。もちろん解像度はカスタマイズ可能です。

Window Resizer

Chrome Daltonize

拡張機能Chrome Daltonize

ダルトニゼーション(Daltonization)とは、デザインが色盲のユーザーにどのように見えるのかを可視化するテクニックのこと。色盲と呼ばれる視覚障害(CVD)をもつ人は、人口の約5%(男性8%:女性0.5%)と言われており、あなたのWebサイトを訪れる20人に1人にあたります。

Chrome Daltonize

CSS-Shack

拡張機能CSS-Shack

CSS-Shackはモックアップを作成するためのツール。他の画像編集ソフトのようにレイヤースタイルを作成し、CSSファイルに書きだすことができます。

CSS-Shack

Fontface Ninja

拡張機能Fontface Ninja

Fontface NinjaはWebページ上のフォントを認識し、購入方法をガイドしてくれるプラグインです。気に入ったフォントに出会ったとき、ワンタッチで確認できるのが嬉しいですね。

Fontface Ninja

Page Ruler

拡張機能Page Ruler

ブラウザ上に、要素の幅や高さ、位置を測定出来るルーラーが現れます。閲覧していたWebサイトで使われている画像の大きさを知りたいとき、自分が縮めたブラウザの幅を知りたいときなどに使えます。ピクセル単位までこだわるデザイナーには欠かせないツール!

Page Ruler

ColorZilla

拡張機能ColorZilla

ColorZillaは色のスポイトです。ブラウザの任意の場所からから色を読み取り、その色を加工して他のプログラムに貼り付けることができます。

ColorZilla

CSS Peeper

拡張機能CSS Peeper

CSS PeeperはデザイナーのためのCSSビューアです。解析したいページで起動すると、Webページのフォントやカラースキームなどを確認できます。CSSの読解コストを減らし、よりデザインに注力したいものですね。

CSS Peeper

Google Font Previewer

拡張機能Google Font Previewer

Google Font APIのディレクトリからフォントを選ぶことで、閲覧中のWebサイト全体、または特定のCSSにフォントを適用することができます。Webサイトをデザインしていて、良いフォントを素早く試したいときに便利です。フォントをお気に入り登録することもできます。

Google Font Previewer

GIPHY for Chrome

GIPHY for chrome

GIFの検索エンジンであるGIPHYから引用ができるツール。メールでもTwitterでも簡単に埋め込めます。GIFの検索窓もついているのが便利。

GIPHY for Chrome

The Great Suspender

拡張機能The Great Suspender

いくつもタブを開いているとき、動作が遅くなって困った経験はありませんか? The Great Suspenderなら、使ってないタブを自動的に整理してシステムリソースを解放します。

The Great Suspender

HoverCards

HoverCards 拡張機能chrome

YouTube、Twitter、reddit、soundcloud、imgurなどのソーシャルリンクをクリックなしでプレビューできる拡張機能です。閲覧の効率化に大きく寄与することでしょう。

HoverCards

デザインの仕事に役立つChrome拡張機能をご紹介しました。少しの時間短縮が、大きな効率アップをもらたすはずです。気に入った拡張機能があったら、あなたの仲間にもシェアしてください。

(翻訳:Kazunari Mino)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ