ロゴのクリアスペース：余白を計算して保つ

ロゴのクリアスペースは、承認済みデザイン内で定めた単位を基準に計算し、ロゴ全体の見える範囲から外へ測ります。選んだ単位が10、ロゴが150 × 40なら、各辺に1単位の保護領域を設けると全体は170 × 60になります。ロゴ自体は150 × 40のままです。

クリアスペースは、ロゴの周囲で他の内容を置かずに空ける領域です。ファイル内の余白でレイアウトへ伝えやすくなりますが、空白のキャンバスは納品方法の1つにすぎません。ルールを定めるのはブランドガイドラインです。既存ブランドのデータを準備する場合は、新しいルールを作る前に承認済みのルールを使います。

このガイドは、独自のロゴの組み合わせを計算、SVG書き出し、サイズ変更まで追います。元データがラスター画像だけなら、まず見える形を取り出します。画像のベクター化ツールは、承認済みの保護領域を推測できません。

そのロゴに属する基準単位を選ぶ

承認済みロゴを拡大・縮小しても比例を保つ、測定可能な特徴を使います。シンボルの高さ、特定の文字の寸法、デザイン全体の指定した割合などです。何を測ったのか正確に示してください。「少し空ける」というルールや、説明のないX付きの正方形は避けます。

公式のブランドガイドを見ると、これが共通の比率ではなくデザイン方針である理由が分かります。University at Buffaloのクリアスペースガイドは、主ブランドの組み合わせの周囲に、組み合ったUBの高さを使い、線画には別の指針を示しています。Vevoのガイドは高さ30 pxの上下でマークを分け、ウェブやタブレットの状況別の間隔を示しています。実際のマークと用途に合うルールに従います。

独自の例では、丸いシンボルの高さが40単位です。Xをその4分の1、つまりX = 10とします。必要な余白は各辺に1Xです。これは例のために作ったルールであり、すべてのブランドにシンボルの高さの25%を勧めるものではありません。

ルールを分かりやすく書きます。「この横組みロゴでは、Xは円の直径の4分の1です。組み合わせ全体の各辺の外側に、少なくとも1Xを空けてください。」この文章があれば、アプリが空白キャンバスを切り詰めても方針が伝わります。

組み合わせ全体を測ってから余白を加える

ロックアップとは、シンボルとワードマークを一緒に使う承認済みの配置です。その配置全体を測ります。円の範囲だけを使うと、文字が保護領域の計算から外れます。

この例の円と描いた3文字は、x = 0から150、y = 0から40に収まります。ストローク、影、非表示オブジェクトはありません。そのため、保護する長方形はx = -10から160、y = -10から50です。

X = circle height / 4 = 40 / 4 = 10
zone width = artwork width + 2X = 150 + 20 = 170
zone height = artwork height + 2X = 40 + 20 = 60

見えるストロークや効果があるデザインでは、その見える範囲も確認に含めます。形状だけの測定は、塗られた結果と異なる場合があります。SVGのバウンディングボックスガイドがその測定の違いを説明しています。ここでは意図的に単純な塗り付き形状を使います。

余白付きSVGにルールを持たせる

SVGのviewBoxは、内部の座標長方形を表示ビューポートへ対応させます。この例の viewBox="-10 -10 170 60" は、デザインを動かしたり大きくしたりせず、計算した余白を含めます。

この完全な例を logo-padded.svg として保存します。ワードマークの文字は描いた形なので、フォントには依存しません。円と文字のデザインは独自の例であり、他ブランドの承認済みデータではありません。

<svg xmlns="http://www.w3.org/2000/svg"
     width="170" height="60" viewBox="-10 -10 170 60">
  <g fill="#17324d" fill-rule="evenodd">
    <circle cx="20" cy="20" r="20"/>
    <path d="M50 5H80V35H50Z M57 12V28H73V12Z"/>
    <path d="M87 35V5H94L108 24V5H115V35H108L94 16V35Z"/>
    <path d="M122 5H150V12H129V16H145V23H129V28H150V35H122Z"/>
  </g>
</svg>

余白のない対になるデータを作るには、同じ円とパスを保ち、width="150"、height="40"、viewBox="0 0 150 40" を使います。どちらが余白付きか受け取り側に分かる名前を付けます。寸法ガイドはブランド文書か別の確認レイヤーに置き、配置に使うデータには含めません。

意図したロゴを小さくせずにサイズ変更する

幅が見えるデザインを指すのか、余白を含むファイル全体を指すのか決めます。ファイル幅170 pxでは、この例のデザインは150 px幅、余白は10 pxです。ファイル幅340 pxでは、デザインは300 px幅、余白は20 pxです。均等なサイズ変更では比例のルールが保たれます。

見えるロゴを300 pxにする指定なら、この余白付きファイルは340 px幅にします。ファイル全体を300 pxにすると、見えるデザインは約264.7 pxにしかなりません。300 × 150 / 170が約264.7だからです。

検証方法：余白なしと余白付きの完全なSVGをChromiumで描画しました。デザインの形状の範囲は150 × 40単位でした。余白込みの幅170 pxと340 pxで、横方向のデザイン幅は150 pxと300 px、余白は10 pxと20 pxと測定されました。これは作成したブラウザー例の検証であり、すべてのエディターの読み込み動作を確立するものではありません。

ロゴが小さく見えたら、適当なオブジェクトを拡大する前にファイルのキャンバスを確認します。読み込み後に余白が消えた場合は、使用先の読み込み範囲を調べ、文章のXルールから余白を復元します。横長ロゴを別の枠に入れる場合は、SVGの縦横比を保つ収め方で、配置による追加の空白を理解できます。

ロゴ納品におけるPerfectVectorの役割

ブランドがラスターのロゴしか持っていない場合、PerfectVectorでベクター形状を取り出せます。形が得られたら、マーク全体を承認済みの見本と比べ、不要な背景片を取り除き、ブランドが文書化したクリアスペースのルールを別に適用します。ロゴのベクター化手順が形を取り出す工程を扱います。

まず、元のベクターマスターとブランドガイドラインを依頼します。そのファイルは、新たなトレースよりも、意図したデザインや間隔の判断をよく保持しています。JPGの空白の縁は、書き出し時の偶然の余白かもしれず、ブランド方針の証拠にはなりません。ロゴのファイル形式ガイドは納品ファイル選びを助け、ロゴのベクター化ガイドは元データの準備と確認を説明します。

最後に、デザイン全体、文章によるXの定義、余白付きファイルの寸法、実際の周辺レイアウトを確認します。配置用データとともに、余白のないマスターも残します。その他の納品確認はブログのワークフロー一覧にあります。

よくある質問

ロゴのクリアスペースは常にロゴの高さの4分の1ですか？

いいえ。円の高さの4分の1というのは、この独自の例で選んだルールです。既存ブランドは、用途に応じて別の単位、比率、例外を定義できます。

余白を保つために白い長方形を加えるべきですか？

SVGのviewBoxで、塗った長方形を足さずに空白を確保できます。白い長方形は、有彩色の背景でデザインを変えてしまいます。透明な余白付きファイルを予定の配置で試してください。

余白付きSVGは自動的にブランドガイドラインを守らせますか？

いいえ。ビューポート内に空白を持たせますが、読み込み側が範囲を切り詰めたり、レイアウトオブジェクトが重なったりできます。文章のルールと最終的な配置確認は引き続き必要です。

出典

1. University at Buffalo — クリアスペース — マークを基準にした単位と用途別の例外を示す公式例。
2. Vevo — ロゴのクリアスペース — マークのサイズやデジタルの状況により余白の指針が変わる例。
3. MDN — SVG viewBox — 例の空白の余白を持たせる座標長方形を説明。

元のベクターがなければ、PerfectVectorでラスターのロゴを取り出します。組み合わせ全体を見本と比べ、承認済みのクリアスペースを適用して、最終配置で見えるロゴのサイズを確認してください。