デザイナーのための11の最高のChrome拡張機能

UXデザイナーほど、使いやすさと効率を少し調整するだけで、実際にユーザーエクスペリエンスに大きな違いをもたらすことができることをよく知っている人は誰もいません。

それでも、デザイナーよりもWebの閲覧に多くの時間を費やす人はほとんどいませんが、私たちの中で最も精通している人でさえ、その体験の質を最大限に高めていない可能性があります。

そのことを念頭に置いて、デザイナー向けの最高のChrome拡張機能を11個まとめました。

織機

ユーザーフロー、設計の問題、またはその他のバグに関連する問題について、他のチームメートとのコミュニケーションにかなりの時間を費やしている可能性があります。 織機はあなたの生活をはるかに楽にすることができます。

この拡張機能を使用すると、画面に表示されているもの（および前面カメラ）のビデオを録画してナレーションを付けてから、簡単なリンクで共有できます。

Loomで販売されている場合は、4Kビデオ、無制限のビデオストレージ、描画ツール、マウスクリックの強調、および召喚ボタンやカスタムサムネイルなどの一連の編集オプションを可能にするプレミアム有料サービスを検討してください。

ウィンドウリサイザー

デザイナーは、誰もが自分のWeb製品をどのように体験するかを知る必要があります。また、画面上で美しく見えるレイアウトは、老朽化し​​たiPhoneでフロップする可能性があります。

Window Resizerは、その死角を解決するのに役立ち、ブラウザウィンドウのサイズを変更して、一連の画面解像度を再現します。 解像度のリストをカスタマイズしたり、ウィンドウのサイズと位置をいじったりすることができます。さらに効率を上げるために、拡張機能を使用すると、グローバルキーショートカットを作成することもできます。

Muzli

あなたがあなたの日に少し余分なデザインのインスピレーションを使うことができたら-そして誰ができなかったのですか？ – Muzliはあなたにぴったりで、朝のコーヒーを飲みながらスクロールするためにWeb全体から魅力的なビジュアルデザインをキュレーションします。

Dribbble、Mashable、Product Huntなど、インターネット全体から150を超えるソースが用意されているため、Muzliは、新しいタブを開くたびに、最新のデザインアイデア、プロジェクト、ニュースを提供します。

興味のあるものがありますか？ クリックして、新しいブラウザウィンドウで詳細を確認してください。

ページルーラー

UXデザイナーは、シンプルで効果的なアイデアを高く評価する傾向があり、それがPageRulerを要約しています。

スクリーンショットツールを使用してWebページ上のオブジェクトのサイズを注意深く測定する時間を無駄にする代わりに、Page Rulerを使用してルーラーをすばやく描画し、ピクセルの寸法と位置、およびページ上の要素のサイズを大きくします。

ColorZilla

Webページで使用されている色をすばやく見つける機会がある可能性があります。また、ColorZillaを使用すると、はるかに速くそこに到達できます。

ついにChromeに登場する前の最も人気のあるFirefox拡張機能の1つである、ColorZillaは、任意のページの任意のピクセルの色を決定する高度なスポイト、CSSグラデーションジェネレーター、およびカラーピッカーを備えています。

気に入った色が表示されたら、ColorZillaを使用すると、16進値とRGB値を簡単に取得して、クリップボードに貼り付けることができます。

Fontface忍者

あなたは新鮮なフォントのアイデアを求めてインターネットを精査するタイプですか？ デザイナー、そして一般的にフォント愛好家は、このエレガントな拡張機能をインストールしたいと思うでしょう。これにより、任意のWebサイトで使用されているフォントを識別し、それらをデザインソフトウェアにすばやく組み込むことができます。

FontfaceNinjaの「FontsDNAengine」は、CSS名だけでなく、表示されているフォントの実際の名前を表示するので、合法的に試すことができます。 必要に応じて、FontfaceNinjaから適切なライセンスを購入するためのリンクも提供されています。

スペクトラム

色覚異常（色覚異常とも呼ばれる）は、世界中の何百万人もの人々に影響を及ぼしていると推定されています。 それらの人々があなたのウェブページで前向きな経験をすることを確実にするために、Spectrumを試してください。

この拡張機能は、グラフの一部の色が互いに区別できない可能性があるため、データを視覚化したWebサイトで特に役立つと言われています。

チェックボット

すべてのリンクが実際に機能すること、フォームが安全であること、サイトが高速でナビゲートしやすいことを確認することは、UXデザイナーにとって使いやすさの大きな懸念事項です。 チェックボットはあなたの背中を持って、あなたが気づいていない問題を発掘します。

一度に数百ページをテストすると、Checkbotは壊れたリンク、HTML / JavaScript / CSSエラー、重複したタイトル、セキュリティの問題、リダイレクトチェーン、混合コンテンツエラーを発見できます。

実際、Checkbotは、SEO、速度、セキュリティに関する50以上のベストプラクティスについてサイトをテストします。

SVGグラバー

他のWebサイトからロゴ、アイコン、イラスト、またはその他のアートワークを取得する必要があることに頻繁に気づいていますか？ もしそうなら、SVGグラバーはあなたに多くの時間と退屈を節約することができます。

これは、WebサイトからすべてのSVGアセットをすばやくプレビューして取得するのに役立つツールです。 ワンクリックで、拡張機能はページ上のすべてのSVGを自動的に巻き込み、必要なものをふるいにかけてすばやくダウンロードできるようにします。

UXチェック

簡単に言えば、UXチェックはヒューリスティック評価を簡単に変えます。

この拡張機能を使用すると、Webサイトをスキャンしてユーザビリティの問題を検出できるため、実際のユーザーがいなくてもテストできます。 UXチェックは、システムステータスの可視性、エラー防止、一貫性と標準など、 Nielsen Norman Groupのインタラクションデザインに関する10の一般原則に基づいて改善が必要なサイトの領域にフラグを立て、問題のスクリーンショットを保存します。

完了したら、すべてをドキュメントファイルにエクスポートして、チームメートと簡単に共有できます。

コーポレートイプサム

新しいデザイン、特に特にテキストが多いデザインをテストしている場合は、LoremIpsumの通常の最初の段落にうんざりしている可能性があります。 私たちの間でラテン語に疲れている人にとって、Corporate Ipsumは、フィラーテキストとして使用するために企業のダブルスピークをランダムに想起させる楽しい拡張機能です。

見慣れたダミーテキストの長いチェーンの代わりに、たとえば、「インストールされた基本的な方法論で統合された渦を効率的につかむ」という企業用語で迎えられる場合があります。

ラテン語の代わりに英語の単語を使用するだけで、デザインがはるかに自然に見えます。ランダムに組み立てられたテキストがまったく意味をなさないことが多いという事実は、単に拡張機能の魅力の一部です。

BrainStationのUXデザインコースの詳細をご覧ください。