LOGO DELIVERY GUIDE
書き出したら、
使う場所で確かめる。
形の確認 → 文字の確認 → 余白の確認 → 実寸で確認
ロゴが完成し、SVGを書き出して納品する。その直前に、もう一度確認したいことがあります。制作画面ではきれいでも、Webヘッダーに置くと小さすぎる、別の環境で文字が変わる、暗い背景で抜きが消える、といった問題は、書き出したファイルを実際に使って初めて見つかることがあるからです。
この記事では、Web用のロゴデータを渡す場面を想定し、ファイルの中身から表示の確認までを順に整理します。以下のチェック項目やサイズ例は、制作時の運用案です。すべてのロゴに共通する必須規格ではありません。
1. 「SVGだからベクター」と決めつけない
SVGには図形だけでなく、PNGやJPEGなどの画像を参照する仕組みもあります。したがって、画像をSVGの中へ入れただけでは、その画像が編集可能な輪郭へ変わるわけではありません。これはW3CのSVG仕様でも確認できます。参考：SVG 2のimage要素
最初に確認するのは拡張子より中身です。編集ソフトで文字やシンボルの輪郭を選択できるか、写真のような画像が一枚置かれているだけではないかを見ます。画像を含むこと自体が間違いなのではなく、渡すデータの構成と、受け手が期待する編集範囲を合わせることが目的です。
たとえば、形状を編集できるロゴを求められているなら、元画像を包んだSVGだけでは期待を満たせません。意図して画像を含める場合は、その旨を添えて渡しましょう。
2. 配布用と編集用で文字の扱いを分ける
SVGのtext要素は、フォントを指定して文字を描画できます。どのフォントで表示されるかが見た目に関わるため、文字を残したデータは受け手の環境も考慮します。参考：SVG 2のテキスト
ロゴの字形を固定して渡したい場合は、配布用コピーで文字をアウトライン化する方法があります。一方、社名やサブテキストを後から修正する元データには、編集できる文字を残しておくと作業しやすくなります。
- 配布用：見た目を固定したコピーを用意し、元のデザインと比較する。
- 編集用：文字を残した元データと、使用フォント名・ウェイトを記録する。
- 確認：文字間、細い線、句読点、英字の大文字・小文字が変わっていないかを見る。
同じフォントでも、ウェイトや字間が違えばロゴの印象は変わります。「フォント名だけ」を記録するより、設定を一緒に残すのがおすすめです。
3. 余白とviewBoxを確認する
viewBoxは、SVG内で表示に対応させる座標領域を定める属性です。左上の座標と幅・高さの4つの数値で指定します。外側の表示サイズと、内部の座標領域は分けて考えます。参考：SVG 2の座標系とviewBox
納品前には、ファイルの周囲に大きすぎる空白が残っていないか、逆に輪郭や影が端で切れていないかを確認します。同じ幅で配置したのに他のロゴより小さく見えるときは、図形の大きさだけでなく、書き出し範囲の余白も疑ってみましょう。
ただし、余白をすべて取り除けばよいわけではありません。ブランドとして確保したい保護領域と、書き出しの都合で残った空白は別です。どこまでがファイルに含まれる余白で、どこからが配置側で設ける余白なのかを決めておくと、実装時の迷いが減ります。
4. 白い図形と「透明な抜き」を見分ける
白背景では同じに見えても、白い図形を上から重ねたものと、背景が透ける抜きでは、色のある背景に置いたときの結果が変わります。背景を白・濃紺・明るいグレーの3種類に切り替え、意図した部分が透けているかを確認しましょう。
ここでは見た目の目的を先に決めます。ブランド上、白を保持する図形なら白のままでよいです。背景を見せる設計なら、その部分が本当に抜けているかを確かめます。影やグラデーションを含む場合も、明るい背景だけで判断しないことが大切です。
5. 拡大表示より、実際の使用サイズで見る
デザイン画面で拡大して整っていても、Webヘッダーに置くとサブテキストが読めないことがあります。確認では、まず予定している表示幅を使います。幅120px・180px・240pxなどを並べると、どのサイズから細部が見づらくなるかを比較しやすくなります。これらは検討用の例で、推奨最小サイズではありません。
- 文字が初見でも読めるか。
- 細い線や小さな切れ目が残るか。
- シンボルと文字の重心が合って見えるか。
- 小さいサブテキストが無理なく読めるか。
ロゴ全体を小さなアイコンに押し込む必要はありません。縮小で情報が失われるなら、シンボル単独版やサブテキストを省いた版を別に検討します。形を変える場合は、その用途の正式なバリエーションとして整理しましょう。
6. 納品セットに短い説明を添える
受け手が迷わず使えるように、データ名と用途を対応させます。次は小規模なWeb制作案件を想定した構成例です。実際の納品範囲は案件に合わせて調整します。
| ファイル例 | 用途 |
|---|---|
| logo-primary.svg | 基本のWeb用ロゴ |
| logo-reverse.svg | 濃色背景用。背景との組み合わせを確認済みにする |
| logo-symbol.svg | 小さい表示に使うシンボル単独版 |
| logo-primary.png | SVGを扱わない受け手向けの補助データ。寸法を明記する |
| README | 用途、色、使用フォント、余白、確認した最小サイズの説明 |
説明には、たとえば「濃色背景にはreverse版を使用」「幅が小さい場所ではsymbol版を使用」のように、選ぶ基準を書きます。編集用の元データも渡す場合は、配布用と取り違えない名前やフォルダーに分けます。
最後は、書き出したファイルを開き直す
納品前の最終確認は、制作中の画面ではなく、渡す予定のファイルそのもので行います。ブラウザで開き、実際のページへ配置し、背景とサイズを切り替えて確認します。必要に応じて、受け手が使うソフトでも開いてみましょう。
ロゴの完成は、形が決まったところで終わりではありません。使用する場面でも狙った形とバランスが保たれ、受け手が適切なデータを選べるところまで整える。それが、次の制作工程へ渡しやすい納品につながります。
形づくりから見直したい方は、関連記事「ロゴデザインの4つの手法」も参考にしてください。
技術的な参考資料：W3C SVG 2（本文中に各章へのリンクを記載）。チェック手順・サイズ例・納品セットは本記事の制作上の提案です。