デザイナーのためのベストなGoogle Chrome拡張機能8選

Google Chrome Extensions Designers Featured 2

フォントのプレビューやワークフローの管理が必要な場合でも、この完全ガイドでデザイナーのための最高のGoogle Chrome拡張機能を見つけることができます。これらのプラグインは、真剣な趣味者でもプロフェッショナルでも理想的です。

1. Figma

価格: 無料（プレミアムオプションあり）

FigmaはUXデザイナーとグラフィックデザイナーの両方に人気があり、そのChrome拡張機能はGoogleカレンダーで作成するイベントをよりカスタマイズするのに役立ちます。

Figma Chrome Extension

FigmaのChrome拡張機能を使用すると、FigJamボードを直接共有できます。この機能はプレゼンテーションを実行したり、会議の前に追加のコンテキストを追加したりするために使用できます。

FigmaのChrome拡張機能では、GoogleカレンダーのイベントにFigmaファイルを追加することもできます。既存のファイルを追加するだけでなく、カレンダーを通じて新しいファイルやFigJamボードを作成することもできます。さらに、このプラグインはFigmaのウェブサイトへのクイッククリックスルーとして機能します。

2. Adobe Express

価格: 無料（プレミアムオプションあり）

複雑なデザインにはAdobe InDesignやAdobe Illustratorなどの高度なツールを使用することをお勧めしますが、Adobe Expressは基本的なプロトタイプやソーシャルメディアの投稿に最適です。画像をすばやくトリミングおよびリサイズすることに加えて、背景を削除することもできます。

Using the Adobe Express plugin for Google Chrome

Adobe ExpressのChrome拡張機能を使用すると、ウェブサイトに移動することなく新しいデザインをすばやく作成できます。作成をクリックすると、完全なライブラリにアクセスできます。

この拡張機能を使用すると、コンピュータやハードドライブから画像をPNGまたはJPEGに変換することもできます。ただし、WEBPファイルをJPEGに保存および変換することには対応していません。

3. Google Font Previewer

価格: 無料

フォントがどのように組み合わさるかを理解することはデザインの最も重要な側面の1つですが、それらがどのように見えるかを知ることは時に難しいです。Google Font Previewerを使用すると、さまざまなフォントが適用されたページがどのように見えるかをプレビューできます。

Google Fonts Previewer Plugin

追加したいフォントを選択するには、右側に包括的なリストがあります。アラビア語や韓国語などの非ラテン文字を使用するかどうかも選択できます。

文字の大文字と小文字を変更することで、フォントがページの異なる部分とどのように相互作用するかを確認できます。さらに、通常と太字の間で選択できます。フォントを変更したいことが分かったら、使用しているWordPressテーマやウェブサイトビルダーで調整してください。

4. HTML to Design

価格: 無料（プレミアムオプションあり）

HTML to Designを使用するにはFigmaプラグインが必要ですが、両方をインストールすると非常に強力なChrome拡張機能になります。ブラウズしているChromeページをFigmaデザインに変換できます。

The HTML to Design Extension in Google Chrome

HTML to Designでは、デザインの幅をカスタマイズできます。ウェブページをデザインしている場合はブラウザの幅から始めることをお勧めしますが、アプリやモバイルページを作成している場合はモバイルオプションを選択できます。

HTML to Designプラグインでは、ページ全体または特定の部分を選択し、ライトモードまたはダークモードを選択できます。

5. ColorZilla

価格: 無料

正確なRGB番号を知ることは最大の課題の1つですが、ColorZilla Chrome拡張機能はデザイナーにとってこの作業を容易にします。このプラグインは、ロゴ、写真、またはその他の何かに関係なく、ウェブページ上の任意の色に必要な正確な番号を表示します。

The ColorZilla Google Chrome Extension

特定のウェブページから色を選択するだけでなく、ColorZillaはブラウザの外から色を選択することもできます。このプラグインは選択履歴も保持しているため、いつでも参照できます。

このカラーピッカーには、一般的に使用される色のRGB番号を表示するパレットブラウザもあります。

The ColorZilla RGB Selector

6. Miro Chrome Search Extension

価格: 無料（プレミアムオプションあり）

Miroプロジェクトにすばやくアクセスしたい場合は、MiroのChrome検索拡張機能をダウンロードすることを検討してください。このプラグインを統合すると、ChromeのURLボックスからすべてのドキュメントを直接検索できます。

The Chrome search extension for Miro

結果を見つけるには、「miro」と入力し、その後にファイル名を続けます。URLがMiro Searchに変更されるのに気づくでしょう。

Enterを押すと、Miroダッシュボードに移動します。

7. Designer Tools

価格: 無料（プレミアムオプションあり）

Designer Toolsは、アプリやウェブサイトをデザインする際に測定を学ぶことができる素晴らしいChrome拡張機能です。訪問したサイトの各要素が何ピクセルであるかを学びます。テキストボックスやビジュアルなど。

1つをクリックし、次に測定したい別の要素にカーソルをホバーさせることで、異なるセクションのピクセルを比較することもできます。

The Design Tools Extension for Google Chrome

Designer Toolsでは、要素を保存し、より正確な測定を得るためにグリッドを追加できます。また、このツールの使用を最大化するためにピクセルスケーリングについて学びます。

8. PerfectPixel

価格: 無料（プレミアムオプションあり）

PerfectPixelを使用すると、コンピュータから視覚資産をアップロードして複数のレイヤーを追加できます。また、クリップボードからコピー＆ペーストすることもできます。プロジェクトを後で完成させたい場合は、進行状況を簡単に保存できます。

The PerfectPixel Extension for Google Chrome

混乱を避けるために、各ウェブサイトに異なるレイアウトを追加します。アップロードしたレイヤーを正確に表示したい場所にドラッグ＆ドロップすることもできます。

PerfectPixelを使用すると、要素を左、中、または右に1クリックで配置できます。また、ワークフローを効率化するためのいくつかのショートカットも見つかります。

特定の色を探している場合や、ウェブページ上で新しい要素をデザインしたい場合でも、デザイナーのための最高のChrome拡張機能が役立ちます。また、ソフトウェアをより効果的に検索するためのツールもたくさん見つかります。これらをChrome拡張機能と組み合わせて、さらに生産性を向上させることを検討しても良いでしょう。

画像クレジット: DALL-E。すべてのスクリーンショットはDanny Maiorcaによるものです。