관리
← 記事一覧

ベクターとラスター:ロゴ・写真・説明図に合うファイルの選び方

この記事はAIの支援を受けて原文を翻訳したものです。専門用語や数式は原文とあわせて確認してください。

小さな画面では鮮明だった図がポスターではぼやけることがある。保存方式と実際の使用サイズを一緒に見ていないと起こりやすい問題だ。ベクターとラスターのどちらかが常に優れているわけではない。内容、後で修正する部分、最終的に表示する大きさに合わせて選ぼう。

ベクターとラスター:ロゴ・写真・説明図に合うファイルの選び方 — 本文の概念を示すイラスト
本文の概念を示すイラスト

ピクセルを保存するか、図形を保存するか

ラスターはピクセルの格子、ベクターは線や曲線などの図形情報で画像を表す。複雑な色や質感のある写真にはラスターが自然で、何度もサイズを変える単純なロゴやアイコンにはベクターが便利だ。基本的な違いはAdobeのラスター・ベクターの案内で確認できる。

ベクターの線は大きさを変えても図形情報を保つ。ただし画面では最終的に機器のピクセルへ描画されるため、とても小さいアイコンの細線が必ず見やすいという意味ではない。拡大に向くことと、小さいサイズで読みやすいことは別々に確認する必要がある。

同じ図を三つのサイズで使う

矢印と三つの円でできた説明図を例にしよう。ブログ本文、発表画面、印刷ポスターのすべてに使うなら、図形と文字を編集できる原本を残すと役立つ。配布画像を作った後も矢印の向きや文言を簡単に変更できる。

一方、実際の作業机の写真はピクセル数を先に見る。横幅1200ピクセルの画像を600ピクセルで表示することと、2400ピクセルに引き伸ばすことは違う。補間で新しいピクセルを計算しても、撮影されていなかった細部が自動的に正確に生まれるわけではない。

ベクターとラスター:ロゴ・写真・説明図に合うファイルの選び方 — 要点の違いを説明する図
要点の違いを説明する図

SVGやPDFという名前だけを信用しない

SVGにはラスター画像を入れられる。ベクター文書に写真を配置しても、写真そのものの拡大限界はなくならない。W3C SVG仕様の画像要素の説明は、こうした混在ができることを示している。PDFも内容によってベクターとラスターの両方を含められる。

受け取ったファイルは拡大し、輪郭と写真を別々に確認する。編集ソフトで文字がテキストのままか輪郭に変換されているか、外部画像を参照しているかも調べる。拡張子は出発点であり、中身が作業できる範囲を決める。

原本と配布版を分けて用意する

原本には図形、レイヤー、編集可能な文字など再利用する構造を残し、配布版は用途に合うサイズと形式で作る。単純な図だから必ずベクターファイルが小さいとも限らない。複雑なパスや効果が多いと大きくなるため、実際の容量を比べよう。

最後の確認は縮小した画面で行う。記事の幅に収まったとき文字が読めるか、背景と線を区別できるか、スマートフォンで細線が消えないかを見る。作業中の大きなプレビューより、読者が実際に目にするサイズが重要だ。写真は適切なピクセル数、説明図は編集できる構造で管理すると次の作業も楽になる。

本文の理解を助けるために制作したオリジナルイラストです。