WWGスペース 名古屋のホームページ制作会社が発信するオウンドメディア 無限の情報が集う星

画像のロゴをアウトライン化したデータで使いたい！

jpg、pngなどの画像データが、俗にいう「パス化したデータ」「アウトラインデータ」「ベクター」という状態になると、何ができるようになるでしょうか。

• どんな大きさでもきれいに見えるようになる
• 色が変えられる

このように、自由自在に使えるようになります！

画像だから印刷やWEB上で使うと解像度が低くて、ボケボケになってしまう。
白抜きにしたいのに色変更ができない。
などがあっても、大丈夫。所要時間は2～3分程度です！

PhotoshopとIllustratorを使うパターンと、Figmaを使うパターン、2つのやり方をご紹介します！

Photoshopでの作業

まずはPhotoshopで画像をモノクロにして、jpgデータで書き出します。

カラーのロゴを白黒に

ロゴを白黒にする方法は２つ。

① メニューバーから選択：メニューバー「イメージ」 → 色調補正 → 白黒
② パネルから選択：色調補正 → 白黒

※ パネルは ［ メニュー → ウインドウ → 色調補正 ］から出ます。

「レベル補正」を使用して、黒を濃くする

「レベル補正方法」を出す方法は２つ。

① メニューバーから選択：メニューバー「イメージ」 → 色調補正 → レベル補正
② パネルから選択：色調補正 → レベル補正

「プロパティ」のパネルにあるバーを右に寄せて黒を「真っ黒」にします。

jpgデータで書き出す

メニューバーから選択：メニューバー「ファイル」 → 書き出し → 「Web用に保存」を選択。
jpgを選択して書き出します。

ショートカット

• Mac ：C + Option + Shift + S
• Windows：Alt＋Shift＋Ctrl＋S

IIllustratorでの作業

今度はIllustratorにて、jpgデータをベクター化していきます！

画像からパスを抽出

Photoshopで作ったjpgデータを配置して選択し、上部メニューの「画像トレース」をクリック

「拡張」をクリック。

アウトライン化したデータになりました！

背景を削除する

邪魔な背景（白い部分）を削除すしましょう！ロゴのデータのみが残って完成！

Figmaでのやり方

プラグインを入れる

プラグインをクリックし、「プラグインとウィジェット」タブを選択。
検索バーに「Image Tracer」と入力し、選択。
「実行」をクリック。

「Image Tracer」を起動

画像をクリックし、「Image Tracer」を起動。
「place traced vector」をクリック。
これで完成！

Figmaはプラグインを使えば、あっという間ですね！

まとめ

「ロゴはWEBから拾って」「印刷物のロゴを使って」などという、かなりめんどくさいことが起こるのがデザイナーあるある。だけど、昨今の機能を使えばあっという間にベクター素材になります。

ペンツールでなぞるなどという原始的なことは非効率すぎるので除外！除外！そのスキルが役に立つこともあるかもしれませんが…現場では、不要な作業をカットしてデザインを考える時間に費やしましょう！

▼その他のWeb制作「デザイン」に関するお役立ち情報（記事一覧）は下記の記事からご確認いただけます。

関連記事

【Web制作ガイド-デザイン編】心地よいサイトを作るヒント集