なぜあなたのロゴがぼやけるか（ラスター vs ベクター）
ベクターグラフィックは無限に拡大縮小。ラスター画像はしません。いつ各々を使うか知りましょう。
ロゴをプリンターに送ります。画面では鮮明。印刷版はMS Paintで作ったように見えます。
問題：ベクターが必要な所にラスター画像を送りました。
ラスター画像：ピクセルのグリッド
JPEG、PNG、GIF——これらはラスターフォーマット。色付きピクセルのグリッドとして画像を保存。
100x100ピクセルの画像は正確に10,000ピクセル。200x200に拡大すると、そこになかったピクセルを発明しています。結果：ぼやけかピクセル化。
ラスターは意図されたサイズで素晴らしく機能。拡大すると品質が低下。
ベクター画像：数学、ピクセルじゃない
SVG、PDF、AI——これらはベクターフォーマット。「ここに円を描く」や「AからBに線を引く」のような指示を保存。
ベクターを任意のサイズに拡大縮小すると再計算。常に鮮明。常にくっきり。
ベクターを使うべき時
ロゴ。 あらゆるサイズで必要——faviconからビルボードまで。ベクターがすべてを処理。
アイコン。 デバイス間で様々なサイズで現れるUI要素。
イラスト。 単色とはっきりした形のシンプルなアートワーク。
印刷物。 未知のサイズでプリンターに行くあらゆるもの。
ラスターを使うべき時
写真。 何百万色、グラデーション、複雑さ。写真は本質的にラスター。
複雑なアートワーク。 絵画的テクスチャ、詳細なグラデーション、自然な画像。
スクリーンショット。 画面にあるものをキャプチャするのは本質的にピクセルベース。
Web写真。 JPEG圧縮がWeb配信のために写真を実用的にします。
変換の現実
ラスターからベクター は難しい。ソフトウェアはエッジをトレースして形状を近似できますが、複雑な画像はうまく変換されません。単色のシンプルなロゴは合理的に変換。写真は意味のある変換をしません。
ベクターからラスター は簡単。ターゲットサイズでエクスポートするだけ。でもラスター化すると、ベクターに戻ることはできません、再作成なしには。
よくある失敗
ラスターロゴを使う。 ロゴはベクター（AI、SVG、またはPDF）として存在すべき。ラスターバージョンはそこから必要なあらゆるサイズでエクスポート可能。
ベクターをスクリーンショット。 ベクターファイルのスクリーンショットはラスター。画像ではなく実際のベクターファイルが必要。
過度なベクター化。 すべてがベクターであるべきではない。写真や複雑な画像は恩恵を受けません。
ソースファイルを無視。 デザインファイル（Illustrator、Figma）はベクターベース。PNGへのエクスポートはそれを失います。ソースファイルを保持しましょう。
実践的なワークフロー
- オリジナルアートワークをベクターフォーマットで作成
- ベクターソースファイルを永遠に保持
- 必要な時に特定サイズでラスターバージョンをエクスポート
- 異なるサイズが必要な時はソースから再エクスポート
逆方向には作業しないでください。ウェブサイトからラスターロゴをベクター化しようとしないでください。オリジナルベクターを見つけるか再作成しましょう。
ファイルフォーマットクイックガイド
| フォーマット | タイプ | 最適用途 | |--------|------|----------| | SVG | ベクター | Webグラフィック、アイコン | | AI | ベクター | プロフェッショナルデザインソースファイル | | PDF | ベクター* | ドキュメント、印刷 | | PNG | ラスター | スクリーンショット、透明度 | | JPEG | ラスター | 写真 |
*PDFはベクターとラスターコンテンツの両方を含めます。
拡大縮小性にはベクター。写真にはラスター。ベクターオリジナルを保持して必要な時にラスターをエクスポート。これを逆にするとぼやけたロゴとイライラしたデザイナーが生まれます。