デザインを損なわずにロゴを単色にする方法
多色のロゴを1つのベタ色に変えながら、重要な細部を残します。余白を活用し、明暗の背景で試し、小さい表示でも確認する方法を解説します。
目次
ロゴを単色にするには、描画する部分に1つのベタ色を使い、必要に応じて重要な内部の細部を空白として残します。すべての塗りを黒にすると、色が違うことで初めて見えていたシンボルが消えてしまうことがあります。
承認済みのベクターマスターか、既存の単色版から始めます。コピー上で作業し、残すべき細部を決め、複数の背景と予定する表示サイズで結果を確認します。以下の例では独自のバッジと稲妻を使い、デザイン上の判断と、それを実現するSVG形状を説明します。
承認済みのロゴファイルから始める
マークを描き直す前に、ブランドの所有者に単色版のデータを依頼します。フルカラー、単色、白抜きの版がすでに別々に用意され、それぞれ特定の背景用として承認されている場合があります。
たとえば、Penn Stateのマークのガイドラインは、内部が透明な単色版を説明し、別の版を塗り替えて作らないよう注意しています。これは特定ブランドの規則ですが、提供された単色データがフルカラーのマスターと異なる場合がある理由を示しています。
自分のデザインの別版を作る必要がある場合は、次をまとめて用意します。
- 変更していない原本と、編集可能な作業用コピー
- 内部のシンボルや文字の穴など、識別に必要な細部の一覧
- 予定する最小の表示サイズと、使う可能性がある背景色
- 印刷する場合は、受け取り側が認めるファイル形式とインクの要件
SVGはベクター画像のファイルですが、編集可能な形の代わりにピクセル画像を含む場合があります。PNGやJPGしか残っていない場合は、ロゴのベクター化ガイドで元データを取り戻す手順を説明しています。形を取り出すことと単色版を設計することは、別々の判断です。
残す必要がある境界を決める
黄色い稲妻が入った青い円形バッジを考えてみます。色の境界によって稲妻が見えています。両方の形を同じチャコール色で塗ると、ただの円になります。パスは残っていますが、同じ色に塗られるため内側の違いが見えなくなります。
ネガティブスペースとは、何も塗らず、背後の表面を見せる領域です。稲妻をネガティブスペースにすれば、バッジを1色だけで塗りながら、モチーフを保てます。
| 元の細部 | 単色版での判断 |
|---|---|
| 重要な内部シンボル | 必要なら空いた穴として境界を残す |
| 装飾的な色の変化 | デザインが正しく伝わるなら取り除く |
| 文字の穴や要素間の隙間 | 予定するサイズでも見えるだけの間隔を保つ |
塗りの置き換えだけで済むロゴもあります。その場合はSVGの色変更ガイドを使ってください。複数の色を残し、似た色をまとめる場合は、先にパレット削減の手順に従います。
SVGの形状に穴を作る
再現できる例として、この独自のデザインを original.svg として保存します。パスは描画命令で記述する形です。このファイルには、バッジ用と稲妻用の閉じたパスが1つずつあります。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<path fill="#0d6efd"
d="M128 24 A104 104 0 1 1 128 232 A104 104 0 1 1 128 24 Z"/>
<path fill="#f5d447"
d="M142 54 L88 142 H120 L110 202 L174 108 H138 Z"/>
</svg>- 元のファイルをブラウザーで開き、2色のデザインを確認します。
- 別のコピーを保存し、両方の塗りの値を
#111827に置き換えます。開き直すと、稲妻がバッジと同化します。 - 以下の修正版コードを
one-color.svgとして保存します。同じ描画座標を保ちつつ、両方の輪郭を1つのパスにまとめています。 - 修正版を明るい背景と暗い背景で開き、予定する表示サイズでも確認します。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
<path fill="#111827" fill-rule="evenodd"
d="M128 24 A104 104 0 1 1 128 232 A104 104 0 1 1 128 24 Z
M142 54 L88 142 H120 L110 202 L174 108 H138 Z"/>
</svg>fill-rule は、パス内のどの領域を塗るか決めます。この入れ子の例では、evenodd によって稲妻の領域を塗らずに残します。SVGのfill-rule仕様がこの動作を定義しています。ファイルには1つのベタ塗りがあり、手前に重ねた白い形や背景の長方形はありません。
同じような穴はベクターエディターでも作れます。Adobeの複合パスの文書は、透明領域と利用可能な塗り規則を説明しています。ここでのコードは独自に書いたSVGで、Illustratorの書き出しではありません。使うエディターの文書にある操作を使い、保存結果を開き直して穴を確認してください。
背景と小さい表示を確認する
修正版のロゴを、白と、対照的な暗い背景または有彩色の背景に重ねます。稲妻からは、それぞれの背景が見えるはずです。白で塗った稲妻なら、白背景では穴のように見えても、有彩色の背景では白いまま残ります。
この独自の例では、保存したファイルをSharpとlibrsvgで256ピクセルと32ピクセルにレンダリングしました。どちらのサイズでも、修正した稲妻の内部サンプルのアルファ値は0で、完全に透明でした。同じ点で、色を統一した対照例は不透明なチャコール色、白を重ねた別の対照例は不透明な白でした。これは作成したファイルのデジタル確認であり、印刷や読み込み先アプリの結果ではありません。
実際の32ピクセル表示でも、確認した白とスレート色の背景で修正版の稲妻を区別できました。このサンプルについて役立つ確認にはなりますが、別のロゴの最小サイズを定めるものではありません。拡大したキャンバスだけで判断せず、自分のデザインを実際の使用サイズでプレビューしてください。
別版を採用する前に、次を確認します。
- 重要な内部モチーフが意図どおりに読み取れる。
- 空いた領域が、白く塗った部分ではなく背景を見せている。
- 選んだサイズでも、小さな隙間や文字の穴が見える。
- 保存したファイルを開き直しても、意図した形状と1つのベタ色が保たれる。
このサンプルの白抜き版を作るには、修正版パスの塗りを #ffffff に変え、同じ稲妻の空白を残します。暗い背景で確認してください。ブランドの白抜き版では別の形状が必要な場合があるため、提供されている版があればそれに従います。
細部が消えた別版を修復する
| 見える問題 | 変更する内容 |
|---|---|
| 色を変えると内部シンボルが消える | 意図的なネガティブスペースで境界を戻すか、承認済みの単色版を使う |
| 穴のはずの部分が有彩色の表面でも白いまま | 塗った重ね合わせを取り除き、実際に空いた領域を作る |
| 選んだサイズで隙間が分かりにくい | デザインの承認ルール内で広げるか簡略化し、小さいサイズの確認を繰り返す |
| 使用先アプリに読み込むと穴が埋まる | 読み込んだパスと塗り規則を調べ、必要ならそこで穴を作り直して保存結果を再確認する |
すべての色付き領域を穴にするのは避けます。ハイライトは省略できても、文字の穴には意味がある場合があります。デザインの識別に必要な特徴から判断し、別版を元のデザインと比較します。シルエットや内部の比率を大きく変える場合は、ブランドマークとして使う前に新しい版の承認を得てください。
納品の要件とデザインを分けて考える
フルカラーマスター、暗い色の単色版、承認済みの白抜き版があればそれも、別々のファイルとして保存します。レイアウト内で相互に差し替える用途なら、キャンバスと位置を揃えます。
SVGの1つのベタ塗りでは、印刷業者の特色名は指定されず、製造用の版も作成されません。指定の色名、実物の寸法、受け付けるファイル形式、背景についての前提を依頼先と確認します。ロゴのファイル形式ガイドでは、編集可能なマスターと納品形式の選び方を扱っています。ロゴ準備の他の話題は、ロゴとアートワークのガイドにまとめています。
元データがPNGやJPGだけの場合
残っているラスターのロゴが適したものであれば、PerfectVectorのロゴベクター化ツールでSVGの形を取り出せます。プレビューは保護されたラスター表示で、結果をロック解除すると実際のSVGの編集と書き出しが利用できます。取り出した形を確認してから、単色版の作成に使ってください。
ピクセルをトレースしても、どの細部をネガティブスペースにすべきかは決まりません。元データの輪郭がぼやけている、穴が欠けている、2つの領域間に見える境界がない場合は、承認済みのマスターを使うか、欠けたデザインを意図的に描き直します。形状を変更した後は、背景と小さいサイズでの確認を繰り返します。
よくある質問
単色ロゴとは何ですか？
単色ロゴは、1つのベタ色で描くロゴです。空いた領域からは背景が見えます。暗い色の版と白抜き版は別々のバリエーションであり、同じマークに2色を同時に描くものではありません。
すべての塗りを黒にするだけで十分ですか？
十分な場合もあります。重要なシンボルと周囲を分ける唯一の境界が色である場合、塗りを揃えるとシンボルが隠れます。ネガティブスペースで境界を残すか、承認済みの単色データを使ってください。
すでにベクターのロゴもトレースする必要がありますか？
いいえ。既存の編集可能な形を使い、原本を残します。トレースは適したピクセル画像から元の形を取り出す工程であり、ベクター形状から単色版を作るための必須条件ではありません。
SVGの白い塗りは、自動的に白インクを指定しますか？
いいえ。白い塗りはデータ上の描画色を示し、空白は何も塗らない状態です。白インクを製造工程でどう指定し、納品すべきかは印刷業者が決めます。
出典
- Penn State：色とマーク — 内部の透明領域を含め、承認済みの単色版と白抜き版を示す具体的なブランド例。
- Adobe：複合パスの作成 — Illustratorの複合パスの透明領域、塗り規則、パスの方向を説明。
- W3C：SVG 2のfill-rule — ネイティブSVG例で、複合パスのどの領域を塗るか定義。
PNGやJPGしかありませんか。ロゴを編集可能なSVGに変換し、結果をロック解除して、取り出した形を調べてから単色版を作成・確認してください。
