マスターを変えずにロゴを視覚的に中央へ配置する

ロゴを視覚的に中央へ置くには、まず見えるデザインを予定の枠の幾何学的な中央に合わせます。次に、ガイドを隠し、実際に見られるサイズで、小さな位置調整を比較します。両方の版でロゴの形を同じに保ちます。採用したずれ量を配置の判断として記録し、ベクターマスターは変えません。

視覚的な中央合わせは、形状上の余白を等しくしても希望するバランスにならないときの、見た目による配置調整です。この形がこの状況でどう見えるかを判断します。図心の計算や固定ピクセルの移動は出発点にはなりますが、どちらも共通の視覚的な最適位置を定めるものではありません。

この例は200 × 140の枠に、独自の非対称マークを置きます。左の広い本体と右の細い先端によって、等しい範囲を測りやすく、別の配置も比べやすくなります。有料のデザインアプリがなくても、以下のファイルを再現できます。

バランスを判断する前に形状上の基準を作る

バウンディングボックスは、測定する形状を囲む、座標軸に沿った最小の長方形です。その中心は最初の配置に役立ちます。ただし、左右それぞれにどれだけの塗り面積があるか、どの部分が注意を引くかは表しません。

Rafal Tomalの視覚調整のデザイン例は、数値の整列と見た目の配置が異なる場合を示しています。実際の結果を比べる根拠にはなりますが、すべてのロゴに同じ補正を与えるものではありません。

配置を変える前に、偶然余白が付いたファイルではなく、デザイン自体を揃えているか確認します。幅広い空白の縁があると、本来対称なロゴでも位置がずれて見える場合があります。キャンバスを調べ、不要な背景片を除き、マーク全体に属するオブジェクトを確認します。承認済みのクリアスペースは切り詰めずに残してください。

SVGの測定では、getBBox()は要素のユーザー座標系で範囲を返し、要素自体や親の変換を含みません。ブラウザーのビューポートの測定は別の問いに答えます。SVGのバウンディングボックスガイドは、これらの測定を分ける方法を説明しています。

変えない1つのマークを同じ枠で比較する

以下の独自のパスはx = 20から140、y = 20から80に広がります。その範囲は120 × 60、中心は(80, 50)です。枠の中心は(100, 70)です。グループを(20, 20)だけ移すと、この範囲が中央に来ます。

以下を logo-geometric.svg として保存し、ブラウザーで開きます。薄い長方形は配置用の枠であり、ロゴの一部ではありません。

<svg xmlns="http://www.w3.org/2000/svg"
     width="200" height="140" viewBox="0 0 200 140">
  <rect x="0.5" y="0.5" width="199" height="139"
        rx="8" fill="#f7f9fc" stroke="#cad4e2"/>
  <g transform="translate(20 20)">
    <path fill="#193b59"
          d="M20 20H70V35H140L70 55V80H20Z"/>
  </g>
</svg>

見えるデザインはx = 40から160、y = 40から100となり、横にも縦にも40単位ずつの等しい余白ができます。これは基準であり、最終位置を必ずここにしなければならないわけではありません。

視覚調整の試案には、transform="translate(32 20)" を指定した2つ目のファイルを保存します。右への12単位の移動は、位置だけを変えます。パスの d 値、塗り、枠、表示サイズは同一にします。SVGの平行移動は座標系を動かすもので、パスの書き換えは不要です。

この枠での編集上の好みは、右へ動かした試案です。広い左の本体が枠の中央に近づき、細い先端がさらに右へ伸びます。別のレイアウトでは幾何学的な中央の版を好むかもしれません。選択を記録する前に、実際の周囲の内容と一緒に両方を比較します。

ガイドを隠し、使用サイズで配置を確認する

実際の枠と背景で比べます。結果を判断する前に、中心線とバウンディングボックスの表示を隠してください。そうしないと、マークではなく測った余白ばかり見続けるかもしれません。

1. 形状上の中央の版と試案を同じサイズで開きます。
2. 予定するレイアウトで1つずつ見てから、両方を並べて比べます。
3. 実際にロゴが出る小さい配置でも確認します。枠の比率と周囲の内容は同じにします。
4. 移動によって承認済みのクリアスペースを保ち、切れが起きていないか確認します。
5. 選んだずれ量と、それを使う配置を記録します。試案で新たな偏りが出る場合は、形状上の基準に戻します。

枠幅200 pxでは、試案の12単位の移動は12 pxです。枠幅100 pxでは、同じSVGの移動は6 pxになります。viewBoxとともに拡大・縮小します。どのサイズでも別の固定12 pxのCSS移動を加えると、異なる配置ルールになります。

検証方法：2つの完全なSVGファイルをChromiumで描画し、幅200 pxと100 pxでビューポート内の範囲を比べ、パスデータが同一であることを確認しました。形状上の中央の版は、原寸で左右の余白が40 pxでした。試案は左52 px、右28 pxで、半分のサイズでの相対移動は6 pxでした。これは形状の検証と編集上の比較であり、人の知覚を調べた研究ではありません。

版の間でロゴの形が変わった場合は、マスターを戻し、配置の変換だけを変えます。試案で先端が切れるなら、ロゴを変える前にビューポートと移動量を調べます。別の組み合わせや背景でバランスが変わる場合は、その用途を別に確認します。広い枠や高い枠への収め方は、レスポンシブなSVGロゴ配置のガイドを参照してください。

元のマスターと配置の判断を残す

元ロゴは、レイアウトの配置用ラッパーと独立して保存します。枠寸法、基準サイズ、変換、選んだ背景を記録します。この例では、「元マーク120 × 60、配置枠200 × 140、試案の変換(32, 20)、別の組み合わせでは再確認」というメモが役立ちます。

承認済みのブランドデータには、形や書き出し範囲に視覚的な補正がすでに含まれる場合があります。提供されたデータと配置の指針を使ってください。測った余白が等しくないというだけで、既存ロゴを作り直さないでください。

マーク全体の配置は、編集可能なテキストをベースラインで中央合わせすることとも異なります。操作部品内のラベルが問題なら、SVGテキストの縦位置ガイドを使います。その他の元データと納品の手順は、ブログのガイドを参照してください。

配置前のPerfectVectorの役割

PerfectVectorは、配置を比べる前にラスターだけのロゴからベクター形状を取り出すのに役立ちます。まず元の見本に照らして、取り出したシルエット、穴、不要な背景片を確認します。ロゴのベクター化手順は、その元データの取り出しを担います。視覚的な配置の判断は自分で行います。

承認済みのベクターマスターがあるなら、そのファイルを直接配置します。トレースで意図的な非対称の特徴が変わる場合は、中央合わせを判断する前に元の形状を修正します。ロゴのベクター化ガイドがその確認を扱います。拡大・縮小できるファイルなら配置修正がしやすくなりますが、人が何を均衡していると感じるかを決めるものではありません。

よくある質問

非対称なロゴも余白を等しくするべきですか？

等しい余白は、測定できる形状上の基準になります。特定の非対称ロゴは、記録した位置調整によってよく見える場合があります。予定サイズで比べ、承認済みのデザインは変えずに保ちます。

ロゴの図心は視覚的な中心ですか？

幾何学的な図心は、形状や面積の特定の分布を表します。試しの配置の参考にはなりますが、すべての枠や背景におけるすべてのロゴの知覚上のバランスを定めるものではありません。

ロゴを動かすためにパスを変更すべきですか？

配置の比較では元のパスを保ち、別の変換やレイアウト位置を使います。マスターを変えずに済み、調整を比較・取り消ししやすくなります。

出典

1. Rafal Tomal — デザインを視覚的に整える — 数値の整列とは異なる視覚補正について、デザイナー自身の例を示す。
2. MDN — SVGGraphicsElement getBBox() — 形状上の基準に使うローカル座標の範囲を説明。
3. MDN — SVG transform — 配置グループを通した、変えないパスの平行移動を説明。

ロゴがラスター画像にしか残っていなければ、PerfectVectorでベクター形状を取り出します。シルエットを見本と比べ、使用サイズで形状上の中央と視覚調整した配置を比較し、選んだ移動量をマスターとは別に保存してください。