Webデザイナーのための7つの必須のChrome拡張機能

ウェブデザイナーとして、あなたが絶対にあなたのコンピュータに持っていなければならないソフトウェアは何ですか？チャンスはそれがPhotoshopとIllustratorです。これらは設計ワークフローの重要な要素ですが、必要かどうかわからない小さなツールもあります。

一番いいのは、ダウンロードする必要がないことです。これらのChrome拡張機能をインストールするだけで、すぐに使用できます。ページ上のフォントの識別からウェブ要素間の距離の測定まで、これらのウェブデザインのChrome拡張機能はあなたの生活を楽にします。

1.Gmail用Dropbox

Dropboxはファイルホスティングサービスとしてスタートしましたが、すぐにその主要な対象者がデザイナーであることがわかりました。デザイナーはこのサービスを使用して同僚と仕事を共有しています。デザインファイルはメールの添付ファイルには大きすぎることが多いため、ファイルへのDropboxリンクを送信する方が簡単です。

Dropbox for Gmailを使用すると、プロセスがさらに便利になります。新しい電子メールウィンドウの下部にあるドロップボックスボタンを使用してファイルにリンクすると、受信者はあなたが送信しているものを覗き見します。画像ファイルへのリンクは画像をメールに直接アップロードし、他の種類のファイルへのリンクは便利なプレビューを生成します。

インストール： Gmail用Dropbox

2. FontFace Ninja

何千ものフォントが利用可能であるため、タイポグラフィの可能性は無限大です。特に、どこかで見た美しいフォントを特定して、自分のプロジェクトに借りることができれば。

FontFace Ninjaは、まさにそれを行うのに役立つChrome拡張機能です。画像からフォントを見つけるツールと同じように、オンラインで表示されるフォントを識別するのに役立ちます。唯一の違いは、FontFace Ninjaが、見出しや本文の書体など、ページのCSSにコード化されたフォントを読み取ることです。

FontFace Ninjaを起動すると、指示したフォントに関する情報が表示されます。書体だけでなく、太さ、サイズ、高さ、幅、色も表示されます。そのフォントをブックマークするには、姉妹サービスであるFontFaceDojoのアカウントが必要です。

インストール： FontFace忍者

3.ColorPickスポイト

あなたが持っている色の目がどれほど優れていても、RGBまたはHTML値を知らない限り、オンラインで見た特定の色合いを再現することは困難です。幸いなことに、ColorPickスポイトを持っているかどうかを推測する必要はありません。

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

拡張機能は、テキスト、画像、およびWebページに表示される可能性のあるほとんどすべてのもの（広告も含む）から色を読み取ります。色をキャプチャすると、その色のHTML、RGB、およびHSL値が表示されます。

インストール： ColorPickスポイト

4.寸法

このオープンソースの拡張機能は、特に中小企業向けに1回限りのギグを行う場合に、Webデザイナーに適しています。クライアントが以前のファイルやドキュメントなしでWebサイトを渡して、「このようなページで、テキストと画像が異なる」デザインを依頼した場合、レイアウトを理解するのは面倒です。

寸法を使用すると、ページ上の要素の高さと幅、および要素間のマージンを簡単に測定できます。これにより、既存のページを簡単に再作成し、制作開始後に独自のデザインを再確認できます。

インストール： 寸法

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

Visual Inspectorは、設計チーム向けの強力なフィードバックおよびコラボレーションツールであり、前の3つの拡張機能の機能を組み合わせ、さらに追加します。

検査で タブでは、ページ上の任意の要素を選択して、寸法からファイル名まで、その要素に関する完全な情報を取得できます。 色 およびタイポグラフィ サブタブを使用すると、カラーパレットとすべてのフォントを一目で確認でき、アセット ページ上のすべての画像を1か所に集めます。

コラボレート タブは、フィードバックを提供したり、チームと話し合ったりできる場所です。ページ上の任意の要素をクリックすることで、コメントを簡単に残すことができます。

ほとんどの高度なツールと同様に、Visual Inspectorには値札が付いています。コメントを追加して変更を同期するには、ユーザーあたり月額9ドルから支払う必要があります。ただし、色、フォント、画像の検査などの基本機能は無料で使用できます。

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

6.簡単なスクリーンキャプチャ

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

最も重要なことは、画面に表示されている領域だけでなく、Webページ全体をキャプチャできることです。長いページでいくつかの問題を報告する必要があり、それらすべてをキャプチャすると3〜4枚のスクリーンショットが必要になる場合、これは貴重です。

もう1つの優れたトリックは、スクリーンショットをクリップボードにコピーして、コンピュータに不要な画像ファイルを保存するのではなく、チャットやメールに直接貼り付けることができることです。

インストール： 簡単なスクリーンキャプチャ

7. Muzli 2

最後に、毎朝対処しなければならない重要なタスクが1つあります。それは、睡眠の残りを振り払い、溝に入るということです。 InVisionのMuzli2は、アート、デザイン、UX、テクノロジーに関する厳選された記事を掲載した朝刊として機能します。

MuzliはデフォルトのChromeタブを置き換え、そこに表示されるものをカスタマイズできるようにします。興味に応じて、MuzliはDribbleandBehanceから99designsやCreativeBloqまでのWebサイトでフィードを選択します。最初のコーヒーを飲みながらスクロールするためのたくさんのインスピレーション！

デザインコンテンツが満載のブラウザタブ全体が強すぎると思われる場合は、MuzliにもLiteバージョンがあります。デフォルトのタブが上書きされることはなく、拡張機能アイコンをクリックするだけでいつでもフィードにアクセスできます。

インストール： Muzli 2

すべてのデザインタスク用のChrome拡張機能を入手する

このリストにあるChrome拡張機能は、デザインソフトウェアに匹敵するものではありませんが、タイポグラフィインテルであれ、同僚との共同作業であれ、デザイナーであることに伴うすべての小さなことをカバーしています。

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