デザイナー向けの10個のGoogleChrome拡張機能

標準の設計プロセスに従うWebデザイナーの場合、タスクには次のようなものが含まれます。

• 調査中
• ワイヤーフレーミング
• 配色の選択
• 適切なフォントを選択する
• いくつかのバリエーションをテストする
• クライアントやチームメートとのコラボレーション

そしてもっと…

これらすべてをブラウザ内で正しく実行できることをご存知ですか？ はい、Google Chromeのプロであれば、Chromeの拡張機能を使用してこれらすべてのタスクを実行できます。 それらのほとんどは、数回クリックするだけです。

だから、時間を大幅に節約して、デザイナーのためにこれらの10個のGoogleChrome拡張機能を試してみてください。

1.レスポンシブWebデザインテスター

Googleのモバイルフレンドリーなアップデートを投稿してください。応答性が流行語です。 それで、これはあなたがすべての主要なAndroidとAppleのモバイルデバイスであなたのウェブサイトをテストすることを可能にする拡張です。

オフラインでも機能するため、ローカルでデザインに取り組んでいる場合でも優れたオプションです。 一般的なすべてのデバイス用のプリセットがありますが、カスタム寸法を追加することもできます。

プレビューするデバイスを選択すると、現在のタブがポップアップウィンドウで開き、ページがそのデバイス上でどのように表示されるかを示します。

2.TypeWonder

フォントは実際にサイトの雰囲気を設定しますが、適切なフォントを選択するのはかなりの作業です。 あなたはドリルを知っています-あなたのコードに戻って、変更を加えて、そしてプレビューします。 そして、このすべてが何度も何度も。

しかし、ここでこの便利なフォント拡張機能がステップインします。TypeWonderを使用すると、ブラウザ内の任意のWebサイトのフォントを変更できます。

Webサイトにアクセスして、拡張機能のアイコンをクリックするだけです。 いくつかのフォントオプションがあります。 いずれかをクリックすると、ほぼ瞬時にそのフォントでWebサイトのプレビューが作成されます。 プレビューに満足している場合は、関連するコードを取得して、サイトとそのCSSファイルに追加できます。

3.タブパッケージャー

研究は大したことです。 そして、あなたが真剣に研究をしているデザイナーなら、いつでも少なくとも7から10個のタブが開いていると言っても過言ではありません。

参照しているサイトについて、デザイナーの友人やチームメートの意見を聞く必要がある場合はどうなりますか？ もちろん、メールプログラムを開いた後、フォルダ内のすべてのページをブックマークし、すべてをエクスポートして、送信するセットを選択します。 かなりの作業です！

幸いなことに、これほど一生懸命働く必要はありません。 Tab Packagerを使用すると、開いているすべてのタブをパッケージ化できます。 そして、ワンクリックでパッケージのリンクを介して送信できます。 メール、Twitter、その他多くのサービスで共有できます。

4. TrackDuck

効果的なコミュニケーションは、成功するすべてのプロジェクトの背後にあります。 ただし、小さな調整を行ったり、大きな変更を加えたりするためにメールをやり取りするのは、時間がかかる場合があります。

これは少し誇張されたように聞こえるかもしれませんが、TrackDuckはデザイナー専用のミニアーサナのようなものです。

TrackDuckは、Webサイトをプロジェクトとして追加できるビジュアルコラボレーションツールです。 プロジェクトを追加したら、チームメートをプロジェクトに招待できます。 このプロジェクト（またはWebサイト-拡張機能のアイコンをクリックするだけで実行できます）にコメントを残すたびに、コメントに関するタスクが生成されます。 このタスクを仲間のチームメイトに割り当てたり、添付ファイルやスクリーンショットを追加したり、TrelloやBasecampなどの多くのコラボレーションツールと統合したりできます。

5. ColorZilla

次のWebプロジェクトのパレットにインスピレーションを与える素敵な色がいつ表示されるかはわかりません。

では、どのようにしてWeb上の色をキャプチャしますか？

さて、ここにColorZillaがあります-それは簡単にすべてのデザイナーのお気に入りのChromeグッズです。 その最も基本的で人気のある機能は、Webページ上の任意の色のコードを取得することです。

もう1つの機能は、任意のWebサイトの配色を取得できることです。 Webページのカラーアナライザオプションをクリックする必要があります。そのWebページのすべての色を示すパレットが表示されます。

6.ワットフォント

完璧なフォント、色、サイズを使用しているWebサイトに出くわすことがよくあります。 実際、サイトで正確な組み合わせを使用したいほど良いかもしれません。

しかし、もうInspect Elementルートを使用する必要はありません。WhatFontは、シングルクリックでWebページ上のフォントを分析します。

拡張機能のアイコンをクリックして、興味のあるテキストセクションにカーソルを合わせるだけです。WhatFontは、フォントタイプ、サイズ、高さ、色、およびファミリを生成します。

7.インスタントワイヤーフレーム

Webサイトを設計する前に情報階層を定義すると、ユーザーフレンドリーなサイトが作成されます。 そして、ワイヤーフレーミングはこれを実現するための最良の方法です。

インスタントワイヤーフレーム拡張機能を使用すると、任意のWebページの適度に優れたワイヤーフレームを表示できます。 それはまだベータ版ですが、公正な仕事をしています。

ワイヤーフレームを表示したいサイトに出くわした場合は、アドレスバーにある拡張機能のアイコンをクリックするだけです。 試す価値があります！

8.ページ定規

Webページの要素の寸法を測定する方法はいくつかあります。 しかし、それらのほとんどはいくつかのステップを含み、時間がかかります。

ページルーラーは、これを行うための最も便利な方法です。 ページルーラーを使用すると、要素の高さ、幅、および相対位置を確認できます。 要素をdiv単位で分析することもできます。

また、ピクセルパーフェクトなバナー、注目の画像、その他のマーケティング資料を作成するのに最適です。

9.Chrome用パレット

ウェブサイトは画像でいっぱいで、カラーパレットを刺激するのに十分な画像がいつ表示されるかはわかりません。

ただし、Palette for Chromeが常にカバーしているので、心配する必要はありません。 面白いと思う画像を右クリックして、この拡張機能のオプションを選択してください。 選択した画像からインスピレーションを得たカラーパレットを即座に作成します。 配色用に生成する色の数を指定できます。

配色をエクスポートする方法があればもっと良かったと思います。 しかし、拡張機能は依然として必須です。

10. ExtensionMuzli –デザイン朝食

あなたが始めたばかりのとき、あなたはあなたのニッチ内のすべてのトップブログを購読していることを知っています。 RSSフィードはすべて起動されます。 しかし、あなたの仕事が積み重なるにつれて、あなたは幾分切断されます。 そして、それはあなたがインスピレーションを必要としないということではありません、それはただ追いつくのが難しくなるということです。

ExtensionMuzliは、これを補うために構築されています。 トップデザインリソースの約12〜15からストーリーをキュレートします。 あなたが切り替えることを探しているなら、ウェブデザインの仕事のセクションもあります。

この拡張機能をインストールすると、新しいタブに、ネット全体からの最新のインスピレーションや教育的なデザインストーリーが表示されます。 それはあなたのニッチ内で最新のものを把握するためのきちんとした方法を提供します。

だから、あなたは行き​​ます。 これらのすばらしいウェブデザイナー拡張機能でChromeを強化し、生産性が急上昇するのを見てください。 設計プロセスをどのように分割し、どの拡張機能をどのタスクに使用しますか？ もっと知りたいです。