グラフィックデザイナー必見!作業効率が上がるおすすめChrome拡張機能5選

Chromeウェブストアには、あらゆる目的に合ったツールが揃っています。グラフィックデザインが仕事であれ趣味であれ、インストールしておくだけで日々の作業を大幅に効率化できる便利なツールが数多く存在します。

そこで今回は、グラフィックデザイナーにおすすめのChrome拡張機能を5つ厳選してご紹介します。

1. WhatFont

最初にご紹介するのはWhatFontです。名前からも想像できるように、このChrome拡張機能を使えば、ウェブサイト上のほぼすべてのフォントをクリックひとつで特定できます。

使い方はとてもシンプルです。Chromeウェブストアからインストールし、拡張機能バーにあるWhatFontボタンをクリックするだけ。以降は、カーソルが重なった要素のフォント名が自動的に表示されるようになります。

ページ内を移動すると情報もリアルタイムで更新されるため、今見ているフォントが何であるかを正確に把握できます。フォント名さえわかれば十分という方もいますが、より詳しい情報が必要な場面にもしっかり対応しています。

詳しく知りたいテキストをクリックすると、拡張機能が小さなボックスに展開され、そのテキストから収集できる限りの情報を表示してくれます。

フォント名、スタイル、ウェイト、サイズ、カラーなどがすべて含まれており、さらにフォントのサンプルアルファベットも表示されるので、その他の文字がどのような見た目になるのかも確認可能です。

また、このボックスは複数同時に開けるのも嬉しいポイント。一見似ている2つのフォントを目で比較したいときに非常に役立ちます。

2. ColorZilla

次にご紹介するのはColorZillaです。グラフィックデザインの現場では、正確なカラーコードを扱う機会が多いもの。ColorZillaは、ウェブ上で見かけた色を素早く見つけて特定できる優秀なChrome拡張機能です。

インストールは簡単で、あとは拡張機能バーのColorZillaボタンから各種機能にアクセスできます。この拡張機能ひとつに、実に多彩なツールが詰め込まれています。

たとえば、スポイトツールを使えば、任意のWebページ上のピクセルの色を素早く簡単に取得できます。画面上の要素をクリックするだけで、対応する色がRGB値と16進数(HEX)値の両方で表示されます。

さらにColorZillaには高機能なカラーピッカーも搭載されており、自分で好みの色を細かく指定することも可能です。インターフェースは直感的に設計されているため、カラーピッカーに慣れている方ならすぐに使いこなせるでしょう。

興味深い点として、ColorZillaは色を取得した要素そのものについても詳細な情報(タグ名、クラス名など)を教えてくれます。グラフィックデザインだけでなくWebデザインにも携わる方にとって、思わぬ場面で役立つ機能です。

3. Site Palette

既存の画像やブランド、ウェブサイトからインスピレーションを得ようとした経験があるなら、重要な要素だけを切り出すのがいかに大変かを実感していることでしょう。

そんなときに活躍するのがSite Paletteです。訪問したウェブサイトから、手軽にカラーパレットを抽出できるChrome拡張機能となっています。

基本的な使い方は非常にシンプルです。拡張機能をインストールしたらSite Paletteボタンをクリックするだけで、そのサイトで最も使われている主要な色をまとめたパレットが瞬時に生成されます。これにより、どんな配色が効果的で、何が不向きなのかを素早く判断できます。配色ミスはグラフィックデザインにおける大きな失敗につながりかねないため、事前のチェックにぜひ活用したい機能です。

それ自体でも十分便利なのですが、Site Paletteの魅力はこれだけにとどまりません。実は、驚くほど多くの機能を備えています。

たとえば、作成したパレットから共有用リンクを生成して他の人と共有したり、パレット画像を作成・プレビュー・ダウンロードして別のプロジェクトに組み込んだりすることも可能です。

また、Adobe Swatchユーザー向けにはネイティブサポートが組み込まれているほか、coolors.coやGoogle Art Paletteで作成したパレットにも対応しています。

4. Lorem Ipsum Generator(ダミーテキスト生成)

続いてご紹介するのはLorem Ipsum Generatorです。Lorem Ipsumをご存じの方なら、この拡張機能の用途はすぐに想像がつくでしょう。

初めて聞いた方のために簡単に説明すると、Lorem Ipsumとは、本物の文章のように見えて実際には意味を持たないダミーテキストのことです。単語はでっち上げですが、文章構造は実際の文と同じため、ブランドメッセージや個人のコメントが入る予定のスペースのテストやプレースホルダーとして最適です。

Lorem Ipsum Generatorは、必要なタイミングで適切なプレースホルダーテキストを素早く生成できるChrome拡張機能です。

生成する段落の数や、各段落に含める文の数を自由に調整できるため、どんなプロジェクトにも対応したダミーテキストを常に用意しておけます。

5. Inkscape

最後にご紹介するのはInkscapeです。この拡張機能は、Chrome拡張機能とは思えないほど強力で、ブラウザ上で驚くほど多くのことが実現できます。

Inkscape自体は、Adobe Illustratorに似たLinuxデスクトップアプリケーションです。豊富なツール群を使ってベクター画像や各種グラフィックを手軽に作成できる、高速なグラフィックデザイン制作アプリのひとつとして知られています。この拡張機能は、その機能一式をブラウザ上で使えるようにしてくれるのです。

フリーハンド描画、シンプルなパス、ベジェ曲線を使って、オブジェクトをゼロから作成できます。テキストツールや図形ツール、オブジェクト操作ツールにも対応しており、回転や傾斜といった変形処理も、数値指定でもマウスでの直接操作でも行えます。もちろん、レイヤーやオブジェクトのグループ化もサポートされています。

カラーセレクタ、スポイト、グラデーションはもちろん、パターンなどにも対応。ベクター画像の作成・編集で必要となる機能はほぼすべて揃っており、しかもすべてブラウザ上で完結します。

自分に合ったグラフィックデザインツールを見つけよう

ご覧いただいたとおり、Chromeウェブストアには魅力的なツールが数多く揃っています。この記事を読んで、少なくともひとつふたつは「インストールしてみたい」と思える拡張機能が見つかったのではないでしょうか。

ただし、ブラウザ拡張機能はデザイナーが使えるツールのほんの一部にすぎません。既存のツール群を補完する優れた存在ではありますが、新しいツールを取り入れてスキルの幅を広げることに損はありません。ぜひ自分のワークフローに合った組み合わせを探してみてください。