ウェブデザイナーとして、パソコンに絶対に必要なソフトは何ですか？PhotoshopやIllustratorなど、デザインワークフローの基本的なものはもちろんですが、意外と知らないガジェットもあります。

これらのChrome拡張機能をインストールするだけで、ダウンロードする必要すらありません。ウェブページのフォントの認識からウェブ要素間の距離の測定まで、ウェブデザインのChrome拡張機能を使えば、あなたの生活をより快適にします。

1gmailのメールボックス

Dropboxはファイルホスティングサービスとしてスタートしましたが、すぐに主な利用者がデザイナーであることが明らかになり、同僚と作品を共有するためにサービスを利用するようになりました。デザインファイルはメールに添付するには容量が大きすぎることが多いので、Dropboxのリンクを送るのが簡単でした。

Dropbox for Gmailは、この作業をさらに簡単にします。新しいメールウィンドウの下部にあるDropboxボタンでファイルにリンクすると、受信者はあなたが送信した内容を見ることができます。画像ファイルへのリンクはメールにそのままアップロードされ、その他の種類のファイルへのリンクは便利なプレビュー画像を生成します。

インストール：Gmail Dropbox

2ウェイ忍者

何千ものフォントが用意されているので、タイポグラフィの可能性は無限大です。特に、どこかで見た素敵なフォントを識別して、自分のプロジェクトに借りることができれば、なおさらです。

FontFaceNinjaは、それを手助けしてくれるChrome拡張機能です。画像からフォントを探すツールと同じように、オンラインで見たフォントを識別するのに役立ちます。唯一の違いは、FontFaceNinjaは、見出しや本文など、ページのCSSにエンコードされたフォントを読み取ることです。

FontFaceNinjaを起動すると、使用しているフォントの情報が表示されます。フォントだけでなく、ウェイト、サイズ、高さ、幅、色も表示されます。このフォントをブックマークするには、姉妹サービス「フォントフェイス道場」のアカウントが必要です。

インストール：FontFace Ninja

III.カラーピックドロッパー

いくら色彩感覚に優れていても、RGB値やHTML値を知らなければ、ネット上で見た色を再現することは難しいでしょう。幸いなことに、カラーピックのスポイトがあるかないかを推測する必要はありません。

Mac用の最高のカラーピッキングアプリケーションと同様に、ColorPick Eyedropperは、あなたが指差した任意の色の値を表示します。違いは、常にブラウザーの中にあること、そして何もアップロードする必要がないことです。アイコンをクリックして、ターゲットを適切な場所に移動させるだけです。

この拡張機能は、テキストや画像など、ウェブ上で目にするほとんどすべてのもの（広告も含む）の色を読み取ることができます。色を取り込むと、そのHTML、RGB、HSLの値が表示されます。

装着方法：カラーピック ドロッパー

4次元

このオープンソースの拡張機能は、ウェブデザイナー、特に中小企業の単発の仕事をする場合に最適なオプションです。クライアントから、過去のファイルやドキュメントを一切持たずに「こんな感じの1ページで、テキストと画像は変えてください」と渡された場合、レイアウトを考えるのは一苦労です。

ディメンションは、ページ上の任意の要素の高さ、幅、および要素間の余白を簡単に測定することができます。これにより、既存のページの再作成や、制作に入った後の自社デザインの再確認が容易になります。

設置方法：外形寸法

5 ビジュアルインスペクター

visualinspectorは、最初の3つの拡張機能の特徴を組み合わせ、さらに機能を追加した、デザインチーム向けの強力なフィードバックとコラボレーションツールです。

Inspectタブでは、ページ上の任意の要素を選択し、寸法からファイル名まで、その要素に関する完全な情報を取得することができます。"カラー＆タイポグラフィー "のサブタブでは、カラーパレットとすべてのフォントを一目で確認でき、"リソース "ではページ内のすべての画像を一カ所にまとめて表示できます。

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

他のプレミアムツールと同様、visualinspectorにも価格が設定されており、月々9ドルを支払うことでコメントの追加や変更の同期が可能になります。ただし、基本的な機能（色、フォント、画像のチェックなど）は無料で利用できます。

設置：目視検査

6 簡単なスクリーンショット

Macでスクリーンショットを撮るのは簡単で、Windowsでスクリーンショットを撮るのは少し面倒なだけなので、スクリーンショット拡張機能は冗長に思えるかもしれません。しかし、シンプルなスクリーンショットには、多くのセールスポイントがあります。

そして何より、画面に表示されている範囲だけでなく、ページ全体をキャプチャすることができるのが魅力です。これは、長いページで複数の問題を報告し、それらをすべて3〜4枚のスクリーンショットでキャプチャする必要がある場合に非常に有効です。

また、スクリーンショットをクリップボードにコピーして、チャットやメールに貼り付けることができるので、無駄な画像ファイルをパソコンにため込む必要がないのも嬉しいポイントです。

インストール：簡単なスクリーンショット

7 ムズリ 2

インビジョンの「Muzli 2」は、アート、デザイン、ユーザーエクスペリエンス、テクノロジーに関するキュレーション記事を提供し、あなたの朝刊として機能します。

Muzliは、Chromeのデフォルトタブを置き換え、そこに表示されるコンテンツをカスタマイズすることができます。DribbleやBehance、99designsやCreative Bloqなど、あなたの興味に基づいたフィードをMuzliが選びます。 最初の一杯のコーヒーを飲みながら、たくさんのインスピレーションを得ることができますよ。

ブラウザのタブ全体がコンテンツのために設計されているとお考えなら、Muzliにはライト版もあります。デフォルトのタブを上書きすることはなく、拡張機能アイコンをクリックするだけで、いつでもあらすじにアクセスすることができます。

インストール：Muzli 2

あらゆるデザイン作業に対応するクロームエクステンションを入手

このリストのChrome拡張機能は、デザインソフトにはマッチしませんが、タイポグラフィーや同僚との共同作業など、デザイナーにつきものの小さなことをすべてカバーしています。

Chrome ウェブストアがツールで溢れかえっていることに気づくと、新しいツールの追加を止めることは難しいです。そこで、Chromeの拡張機能が手に負えなくなる前に、その管理方法を学びましょう。