RESOLUTION BASICS TRAINING

その画像、印刷でボケる?

「Webではきれいなのに、印刷したらガタガタ…」——原因は解像度(かいぞうど)
画像はちいさな点の集まり。pxとdpiの関係さえ分かれば、ボケる・粗いの事故はゼロにできます。

STEP 1

画像は「点(ピクセル)」の集まり

写真もイラストも、拡大すると小さな四角い点でできているのが分かります。 この1つの点が「ピクセル(画素)」。スライダーで拡大して、点の正体を見てみましょう。

拡大

これは横20×縦20=400ピクセルの小さな絵。拡大すると四角い点が見えてきます。

🟦

ピクセル(px)

画像を作る最小の点。「幅1200px × 高さ800px」のように、点の数で画像の大きさが決まります。

🔢

解像度

「どれだけ細かい点で表すか」。点が多い=高解像度=なめらか。少ない=低解像度=ガタガタ。

📐

ベクター

点ではなく「線と数式」で描く形式(Illustrator等)。どれだけ拡大してもボケません。ロゴ向き。

🖼️

ビットマップ

点で描く形式(写真・Photoshop等)。拡大すると粗くなります。jpg/pngはこれ。

STEP 2

解像度(dpi)と印刷サイズ

dpiは「1インチ(2.54cm)に点を何個ならべるか」。 同じ画像でも、dpiを上げると小さく・くっきり下げると大きく・粗く印刷されます。 Web=72ppi / 印刷=300〜350dpiが目安。下のスライダーで確かめましょう。

📷 元画像:1200 × 1800 px の写真

dpi350
印刷できるサイズ8.7 × 13.1 cm
画質の目安きれい
8.7×13.1cm
印刷の大きさ(イメージ)
ポイント:点の数(px)は同じ。dpiは「その点を、どれくらいの密度で紙に並べるか」の設定です。 だから低dpi=点がスカスカ=粗い、高dpi=点がぎっしり=きれい(でも小さい)。
STEP 3

足りない解像度は、あとから戻せない

小さい(低解像度の)画像を無理に大きく使うと、ガタガタ・ボケボケに。 スライダーで元画像の解像度を変えて、同じ大きさで表示したときの画質を見くらべましょう。

元の解像度24px
画質粗い

左右の大きさ(表示サイズ)は同じ。元の点の数が少ないほど粗くなります。スライダーを上げると、最初から大きく作った画像のなめらかさに近づきます。

いちばん大事なこと: 解像度はあとから足せません(引き伸ばしてもボケるだけ)。 「印刷にも使うかも」と思ったら、最初から大きく撮る・大きく作るのが鉄則です。
STEP 4

必要解像度クイズ

用途に合った解像度を選べるかチェック!提出物の「粗い・ボケた」事故はここで防げます。

PLUS

解像度で失敗しないコツ

1. 大きめに用意する

あとで縮小するのは劣化なし。拡大は劣化する。迷ったら大きく撮る・作るが正解。

2. 印刷は実寸×350dpi

「使う大きさ(cm)」が決まったら、必要pxを逆算。A4全面ならおよそ3500×2480px必要。

3. ロゴ・図はベクターで

拡大しても無劣化。名刺〜看板まで1つのデータで対応できます(Illustrator)。

4. Web画像は軽く

表示サイズ以上に大きいと重いだけ。横幅2000px程度に縮小+圧縮して、表示を速く。

用途別:解像度の目安

用途解像度の目安ひとこと
Webサイト・SNS72ppi(pxサイズが重要)横1200〜2000pxあれば十分なことが多い
名刺・チラシ・冊子300〜350dpi手元で近くから見る印刷物の基本
ポスター(近距離)300dpi前後実寸が大きいぶん必要px数も増える
大判看板・横断幕100〜150dpiでもOK遠くから見るので低めでも大丈夫
高精細画面(Retina)表示の2倍(@2x)で書き出し等倍だとスマホでぼやけて見える
解像度の3つの合言葉: ① 画像は点の集まり(px) ② 印刷は実寸×350dpi ③ 足りない解像度は戻せない=最初から大きく