Webデザイナー必携!作業効率が劇的に上がるChrome拡張機能7選

Webデザイナーにとって、パソコンに絶対に欠かせないソフトウェアといえば何でしょうか?おそらく多くの方が「Photoshop」と「Illustrator」と答えるでしょう。確かにこれらはデザインワークフローの要となる存在ですが、実はそれ以外にも、知らないうちに必要になっていた小さなツールが数多くあります。

嬉しいことに、こうしたツールはダウンロードすら不要です。Chrome拡張機能としてインストールするだけで、すぐに使い始められます。ページ上のフォントを特定したり、Web要素間の距離を測ったりと、これから紹介するChrome拡張機能があなたのデザイン業務をぐっと楽にしてくれるはずです。

1. Dropbox for Gmail

Dropboxはファイルホスティングサービスとしてスタートしましたが、すぐに主要ユーザーがデザイナーであることに気づきました。デザイナーたちは同僚と作品を共有するためにこのサービスを活用しています。デザインファイルはメール添付には大きすぎることが多いため、Dropboxのリンクを送る方が手軽だからです。

「Dropbox for Gmail」を使えば、このプロセスがさらに便利になります。新規メール作成画面の下部にあるDropboxボタンでファイルへのリンクを挿入すると、受信者は送信内容をプレビューで事前確認できます。画像ファイルへのリンクはメール内に直接表示され、その他の種類のファイルでも便利なプレビューが自動生成されます。

インストール: Dropbox for Gmail

2. FontFace Ninja

利用可能なフォントは数千にも及び、タイポグラフィの可能性は無限大です。特に、どこかで見かけた美しいフォントを正確に特定できれば、自分のプロジェクトに取り入れることもできます。

「FontFace Ninja」はまさにそれを実現してくれるChrome拡張機能です。画像からフォントを見つけるツールと似ていますが、FontFace NinjaはページのCSSに記述されたフォント情報、つまり見出しや本文の書体を読み取れる点が異なります。

FontFace Ninjaを起動すると、指定した要素のフォント情報が表示されます。書体だけでなく、ウェイト、サイズ、行の高さ、字幅、色まで確認可能です。フォントをお気に入り登録したい場合は、姉妹サービス「FontFace Dojo」のアカウントが必要になります。

インストール: FontFace Ninja

3. ColorPick Eyedropper

どれほど優れた色彩感覚を持っていても、RGBやHTMLの値を知らない限り、Web上で見かけた特定の色合いを再現するのは困難です。幸い、「ColorPick Eyedropper」があれば勘に頼る必要はありません。

Mac向けの優秀なカラーピッカーアプリと同様に、ColorPick Eyedropperはポイントした任意の色の値を表示してくれます。違いは、常にブラウザの中にあり、何もアップロードする必要がないという点です。アイコンをクリックして、ターゲットを目的の位置に合わせるだけです。

この拡張機能は、テキストや画像など、Webページ上のほぼすべての要素(広告さえも)から色を読み取れます。色を取得すると、そのHTML、RGB、HSLの値が即座に表示されます。

インストール: ColorPick Eyedropper

4. Dimensions

このオープンソースの拡張機能は、Webデザイナーにとってまさに掘り出し物です。特に中小企業からの単発案件を請け負う方には重宝します。クライアントから元ファイルや仕様書なしで既存サイトを渡され、「こんな感じのページを、違うテキストと画像で作ってほしい」と頼まれたとき、レイアウトを把握するのは一苦労です。

「Dimensions」を使えば、ページ上のあらゆる要素の高さと幅、さらに要素間のマージンを簡単に測定できます。これにより、既存ページの再現や、本番環境に反映させた後の自分のデザインのダブルチェックが格段に容易になります。

インストール: Dimensions

5. Visual Inspector

「Visual Inspector」はデザインチーム向けの強力なフィードバック&コラボレーションツールです。前述の3つの拡張機能の特徴を組み合わせ、さらに多くの機能を備えています。

Inspectタブでは、ページ上の任意の要素を選択して、寸法からファイル名まで詳細な情報を取得できます。ColorsとTypographyサブタブでは、カラーパレットと使用中のすべてのフォントをひと目で確認でき、Assetsではページ上の全画像を一箇所にまとめて表示します。

Collaborateタブではチームメンバーとのフィードバックやディスカッションが可能で、ページ上の任意の要素をクリックするだけで簡単にコメントを残せます。

多くの高度なツールと同様、Visual Inspectorには有料プランがあります。コメントの追加や変更の同期には、ユーザーあたり月額9ドルからの支払いが必要です。ただし、色・フォント・画像の調査といった基本機能は無料で利用できます。

インストール: Visual Inspector

6. Easy Screen Capture

スクリーンキャプチャ用の拡張機能は冗長に思えるかもしれません。Macでのスクリーンショット撮影は簡単ですし、Windowsでも多少の手間がかかる程度です。しかし、「Easy Screen Capture」には魅力的な特長がいくつもあります。

最も重要なのは、画面に表示されている範囲だけでなく、Webページ全体をキャプチャできることです。縦に長いページで複数の問題を報告する必要がある場合、通常なら3〜4枚のスクリーンショットが必要になりますが、この機能なら一枚で済みます。

もうひとつの便利な機能は、スクリーンショットをクリップボードにコピーして、チャットやメールに直接貼り付けられることです。不要な画像ファイルがパソコン内に溜まる心配もありません。

インストール: Easy Screen Capture

7. Muzli 2

最後に紹介するのは、毎朝必ず向き合う重要なタスク、つまり眠気を覚まして仕事モードへ切り替えるためのツールです。InVisionの「Muzli 2」は、アート、デザイン、UX、テクノロジーに関する厳選記事を届けてくれる、朝の新聞のような存在です。

MuzliはChromeのデフォルトの新しいタブを置き換え、表示内容を自由にカスタマイズできます。興味に応じて、DribbbleやBehanceから99designs、Creative Bloqまで、さまざまなサイトのフィードを選んでくれます。最初のコーヒーを飲みながら、インスピレーションを得られるコンテンツをたっぷりチェックできます!

デザインコンテンツで埋め尽くされたブラウザタブが刺激的すぎると感じる方には、MuzliのLite版もおすすめです。こちらはデフォルトタブを上書きせず、拡張機能のアイコンをクリックするといつでもフィードにアクセスできます。

インストール: Muzli 2

デザイン業務に役立つChrome拡張機能を取り入れよう

ここで紹介したChrome拡張機能は、本格的なデザインソフトの代わりにはなりませんが、タイポグラフィの調査からチームとのコラボレーションまで、デザイナーの日常に付随するさまざまな細かな作業をしっかりカバーしてくれます。

Chromeウェブストアに便利なツールがあふれていると気づくと、新しい拡張機能を追加するのが止まらなくなるかもしれません。拡張機能が手に負えなくなる前に、Chrome拡張機能の管理方法を学んでおきましょう。