WebデザイナーにおすすめのChromeエクステンション、12個ご紹介します。
-
Evernote Web Clipper
表示中ページのキャプチャを撮って、描画やコメントを加えたりして、Evernoteに保存することができます。デザインについて、他のメンバーに意見を伝えたいときに便利です。
-
Muzli – Design Breakfast
新規タブを開いた際に、海外の最新情報の記事や、クリエイティブなサイトのサムネイルが、デフォルトで表示されるツールです。新規タブを開く、そのちょっとした時に、気になるタイトルの記事やデザインが目に入るので、あとで時間が空いときにじっくり見れるのがいいですね。サムネイルの情報は、画面の左側に表示されているフィード一覧から取得されているのですが、自分でカスタマイズすることもできるので、日頃の情報収集にとても便利なツールです。
-
OneTab
Webの仕事をしていると、ついたくさんのタブを開いていることがあります。見た目が雑然としてしまい、どのタブに見たいページがあるのかわからなくなってしまいます。また、タブがあるほどメモリを消費するので、マシンのパフォーマンスに影響が出てしまうことも。そんなとき、大量のタブを1つにまとめてくれるのが「OneTab」。開いていたタブを、ブックマークのようにリンク一覧にまとめてくれます。タブが増えすぎたなと思ったら、OneTabをクリックしてスッキリさせましょう。
-
Web Developer
「Web Developer」は、その名の通りWeb開発者向けの機能が盛りだくさんなツール。JavascriptやCSSのOnOfや、Cookieの編集、画面のリサイズなど、並べたらキリがないほど。メニューは全て英語ですが、カンタンな英語なのでとくに支障はないと思います。細かいデバッグ作業を行うときに、ときどき利用しています
-
Google Analytics オプトアウト アドオン
「Google Analytics オプトアウト アドオン」をChrome拡張機能に追加しておくだけで、自分のサイトにアクセスしたときにGoogle Analyticsに送信されないため、正確な集計データを取ることができます。前もってGoogle Analitics側でIPアドレスを指定して除外するように設定することもできますが、モバイルWimaxなどIPが固定ではない場合にはこちらを使うことをおすすめします。
-
Adobe Edge Inspect CC
Adobe Edge Inspect CCは、PCと同じWiFiに接続しているスマホ・タブレットなどのデバイスと同期できるツールで、Adobeが無償で提供しています。PCから複数のデバイスのブラウザを操作したり、ソースをチェックといったことがまとめて行えるので、デバッグ作業にはとても便利です。なお、この拡張機能以外にも、PC側には「Adobe Edge Inspect CC」のデスクトップアプリを、同期するデバイス側には、同じく「Adobe Edge Inspect CC」のiOSアプリ、またはAndroidアプリをインストールする必要があります。準備が若干手間ですが、デバイス1台ずつ検証する手間と比べれば圧倒的にラクなので、入れてみることをおすすめします。
-
JSONView
JSONデータを見やすく整形してくれるツールです。APIの出力結果を手っ取り早くGET形式のURLで確認したいとき、数珠つなぎのようなJSONデータでは見づらいときがありますが、「JSONView」があれば自動でインデントしてくれます。スコープごとに左はしにあるーのアイコンをクリックすることで、スコープを閉開することもできます。
-
Last Pass
パスワード管理ツールとして知名度が高い「LastPass」。Web制作で使えるのが「フォーム入力」の機能。
-
Pendule
「Pendule」は、CSSやJavascript、画像、画面サイズなどを調整できるツールです。
-
WhatFont
Webサイトで使われているフォント名が気になったとき、ソースをチェックするのはちょっと面倒ですよね。「WhatFont」は、マウスカーソルをのせるだけでフォント名が分かるツールです。他のブログでもこのツールを紹介されているをよく見かけます。Webフォントが流行っているので、皆さん、良いデザインのフォントがきになるんでしょうね。
-
Pushbullet
PCからスマホに、スマホからPCに、といった具合にデータを相互に送ることができるツールです。例えば、長いURLをスマホで打つのが面倒なとき、PCからPushbulletでプッシュ通知を送ることで時間短縮にもつながります。
-
DevTools Autosave
Chromeの開発ツール上でCSSを編集したら、自動で保存してくれるという、とても便利なツールです。いちいち元のCSSファイルにコピペする必要がないので、コーディングの効率が格段に上がります。なお、この拡張機能を使うには、少し準備が必要です。まず、Node.jsをインストールしておき、「autosave」というモジュールを落とす必要があります。ちなみにCSSだけでなく、Javascriptでも使うことができます。