ブラウザ
WEBデザイナーが使いたいChrome拡張機能5つ【2019年最新版】
2019年09月18日 8:00
おはようございます！社員Aです👩
今回はWEBデザイナーが使いたいChrome拡張機能5つをご紹介したいと思います。
UX CHECK
UX Checkは、Webサイト上で起こりうるユーザビリティの問題を通知してくれます。
拡張機能は、ニールセンの10のユーザビリティヒューリスティックに基づいて改善が必要なWebサイトをチェックします。
ヒューリスティックに準拠していない要素をクリックすると、メモを追加でき、スクリーンショットが保存されます。
ユーザー自身でユーザビリティテストを実施できない場合に理想的なツールで、最後にすべてをdocxにエクスポートして、チームで共有できるようにします。
Fontface Ninja
Fontface Ninjaは、任意のWebサイトでフォントを調査・試用・ブックマーク・さらに購入までできるブラウザー拡張機能です。
- 拡張機能を有効にすると、Webサイトで使用されているフォントを識別できます。
- 名前、サイズ、行間隔、文字間隔、色も表示されます！
- フォントをクリックして試して価格を取得します（無料の場合はダウンロードします）
Page Ruler Redux
- あらゆるWebページの要素を測定するための完璧なピクセル寸法と位置を調査してくれます。
- ルーラーを作成して、ウェブ要素のピクセル測定値を取得します。
- マウスまたは矢印キーでドラッグして、ルーラーのサイズを変更します。
- ルーラーの端からデザイナーがガイドして位置決めを行います。
- WebサイトからHTML要素の完全な測定値を取得および追跡する要素モード。
- 調整可能な色により、暗いWebサイトと明るいWebサイトで完璧なコントラストを実現します。
localローカルの chromeページで拡張機能を使用するには、拡張機能タブで「ファイルURLへのアクセスを許可する」オプションを有効にする必要があります。
Color by Fardos
Webサイトから色を選択し、色とグラデーションを保存し、一致する色合いと色合いを取得して、美しいグラデーションを作成します。
カラーピッカー
カラーピッカーはズームテクノロジーを使用しており、ホバーした場所に最も近い色を正確に取得します。
ページを右クリックするか、Cmd / Ctrl + Shift + eを押すと、カラーピッカーにアクセスできます。
ウェブサイトでカラーピックを行うと、サイトから画像が生成され、カーソルの正確な位置を特定してその色を見つけます。
任意のサイトからできるだけ多くの色を選択し、[保存して終了]をクリックすると、全体の保存に自動的に追加されます。
カラー検索
選択した色の中で、それらの色を保存できます。
カラーチューザー
色を変更するたびに、拡張機能全体で選択した色が自動的に変更されます。
白から黒に変更してカラー検索に移動すると、その色は黒になります。
グラデーション
グラデーションビルダーを使用すると、すべてのグラデーションが美しく構成され生成されます。
グラデーションを作成したら、[CSSをコピー]をクリックするだけで設定が完了します。
Window Resizer
ブラウザウィンドウのサイズを変更して、さまざまな画面解像度をエミュレートします。
この拡張機能は、さまざまな解像度をエミュレートするために、ブラウザーのウィンドウのサイズを変更します。
さまざまなブラウザー解像度でレイアウトをテストできるようにすることで、Webデザイナーや開発者にとって特に便利です。
解像度リストはカスタマイズ可能です（追加/削除/並べ替え）。
ウィンドウの幅/高さ、ウィンドウの位置、プリセットアイコン（電話、タブレット、ラップトップ、デスクトップ）、さらにはウィンドウ全体またはビューポートのみに新しい寸法を適用するオプションを設定できます。
関連記事
この記事を書いた人
社員A
入社8年目。フロントエンドエンジニア・デザイナーの社員Aです。 小動物が好きで、デグー・チンチラと暮らしています！トレンドの情報を発信できるようにがんばります☺
