解像度とdpiの決め方｜ピクセル数の計算とWeb・印刷の使い分け

「解像度は350dpiでお願いします」
初めて言われたとき、何をどう直せばいいのか分かりませんよね。

解像度でつまずく理由ははっきりしています。Webと印刷で、見るべき数字が違うからです。Webはピクセル数だけ、印刷は実寸との組み合わせ。ここを混ぜると話が合わなくなります。
この記事では、ピクセル・dpi・ppiの関係を整理して、必要な大きさを自分で計算できるところまで進みます。電卓ひとつで足ります◎

解像度は「点の数」のこと

デジタル画像は、色のついた四角い点をならべて作ります。この点1つがピクセルです。写真を思いきり拡大すると四角いマス目が見えますよね。あれが1ピクセルです。

解像度は、その点がどれだけ細かくならんでいるかを表します。点が多いほど細かく描けて、少ないほど粗くなります。

ここで混乱しやすいのが、解像度という言葉が2つの意味で使われる点です。

• 画像の大きさ：1200×628ピクセルのように、縦横の点の総数
• 点の密度：1インチあたり何個の点をならべるか（dpi・ppi）

「解像度が足りない」と言われたら、たいてい前者の話です。まず縦横のピクセル数を確認してください。

dpiとppiの違い

どちらも「1インチ（25.4mm）あたりの点の数」を表します。違うのは、何の点を数えているかです。

用語	数えているもの	使う場面
ppi	画面のピクセルの密度	パソコンやスマホの表示の話
dpi	プリンタが打つインクの点の密度	印刷の話

正確に分けるとこうなります。ただ現場では、印刷用の指定を全部dpiと呼びます。Photoshopの設定画面もdpi表記です。
用語の使い分けにこだわる場面はほぼないので、印刷の話ならdpi、画面の話ならppiくらいの理解で足ります💡

Webはピクセル数だけ見る

Web用の画像で、dpiの数字は意味を持ちません。ブラウザはdpiの情報を無視して、縦横のピクセル数だけで表示します。

同じ1200×628ピクセルの画像なら、72dpiで書き出しても350dpiで書き出しても、画面上の見え方は変わりません。容量も同じです。「Web用は72dpi」という言い方が残っているだけで、実際に効いているのはピクセル数の方です。

Webで決めるのは1つだけ。表示したい幅の2倍のピクセル数で書き出す。理由は、スマホや最近のパソコンの画面が高精細だからです。600pxの幅で見せる画像を600pxで作ると、高精細の画面ではぼやけます。1200pxで作って600pxの枠に入れると、くっきり出ます。

用途	書き出す幅の目安
記事の中の画像	1200px
アイキャッチ・SNSシェア用	1200×630px
トップの大きな画像	1920〜2400px
アイコン・ロゴ	SVG（ピクセル数の指定なし）

2倍より大きくしても、見た目はほぼ変わらないまま容量だけ増えます。2倍で止めてください。

印刷は「実寸 × dpi」で計算する

印刷は逆で、実寸が先に決まります。A4のチラシ、91×55mmの名刺、というように紙のサイズが決まっているからです。
そこから必要なピクセル数を出します。式はこれだけです。

必要なピクセル数 ＝ 実寸(mm) ÷ 25.4 × dpi

25.4で割るのは、1インチが25.4mmだからです。A4（210×297mm）を350dpiで作る場合はこうなります。

1. 横：210 ÷ 25.4 ＝ 約8.27インチ　→　8.27 × 350 ＝ 約2,894px
2. 縦：297 ÷ 25.4 ＝ 約11.69インチ　→　11.69 × 350 ＝ 約4,093px

名刺（91×55mm）なら約1,254×758px。この数字を満たしていれば、印刷でぼやけません。

dpiの数字は、見る距離で決まります。近くで見るものほど細かく、遠くから見るものほど粗くて構いません。

作るもの	dpiの目安
名刺・チラシ・冊子	350dpi
ポスター（B2程度）	150〜200dpi
大判の看板・のぼり	72〜100dpi

看板を350dpiで作ると、ファイルが数GBになって開けなくなります。遠くから見るものに細かさは要りません。迷ったら印刷所に確認してください。入稿の条件は必ず公開しています。

足りない解像度は後から増やせない

ここがいちばん大事です。小さい画像を引き伸ばしても、失われた情報は戻りません。

Photoshopで600pxの画像を3000pxに拡大すると、ソフトが足りない点を計算で埋めます。埋めた点は推測なので、輪郭がぼやけたり、のっぺりしたりします。数字の上では条件を満たしても、印刷すると分かります。

だから順番が大事です。作る前に、最終的な出力サイズを確認する。あとから「やっぱりポスターにも使いたい」となったとき、大きく作ってあれば縮めるだけで済みます。縮める方向は劣化しません。

写真素材を選ぶときも同じです。素材サイトでは必要なピクセル数を先に決めてから探すと、あとで差し替えずに済みます。

ミニ実践：72dpiと350dpiを書き出して比べる

「dpiは画面に効かない」を自分の目で確かめる実験です。10分あれば終わります。使うのはCanvaでもPhotoshopでも構いません。

1. 手元の画像を1枚用意して、1200×630pxで書き出す（設定は72dpi）
2. 同じ画像を、ピクセル数は変えずに350dpiにして書き出す
3. 2つのファイルの容量を比べる。ほぼ同じはずです
4. 2つを画面で並べる。見た目の違いはありません。ここまでが「dpiは画面に効かない」の確認です
5. 次に、画像の情報（Macなら「情報を見る」、Windowsならプロパティ）で印刷サイズを見る。72dpiは約42cm幅、350dpiは約8.7cm幅と表示されます
6. 最後に、A4に必要な2,894×4,093pxを式から自分で出してみる

同じピクセル数の画像でも、dpiを変えると印刷したときの大きさだけが変わる。ここが分かれば、入稿でもう迷いません。

やってしまいがちな失敗

Web用の画像を印刷に回す

サイトに載せた1200px幅の画像は、350dpiだと約8.7cm幅までしか使えません。A4のチラシに載せると粗くなります。
直し方は、元データから大きく作り直すこと。引き伸ばしでは直りません。

「350dpiにしました」で解決したつもりになる

dpiの数字だけ書き換えても、ピクセル数は増えません。600pxの画像を350dpi設定にしたところで、印刷できる大きさが4.3cmに縮むだけです。
直し方は、ピクセル数を見ること。指摘されるのはいつもそちらです。

とりあえず全部を大きく作る

看板を350dpiで作ると、ソフトが重くなって作業が止まります。
直し方は、見る距離から決めること。遠くから見るものは粗くて問題ありません。

スクリーンショットを素材に使う

画面のスクリーンショットは、画面に映っている分の点しかありません。印刷にはまず足りません。
直し方は、元のデータをもらうこと。ロゴならSVGを頼めば大きさの心配が消えます。

よくある質問

Web用の画像も350dpiにした方が安全ですか？

その必要はありません。ブラウザはdpiを無視します。72dpiのままで大丈夫です。
Webで気にするのはピクセル数だけ。表示したい幅の2倍で書き出してください。

解像度が足りないと言われました。どうすればいいですか？

まず、その画像のピクセル数を確認します。次に「実寸(mm) ÷ 25.4 × dpi」で必要な数を出して、足りているか見比べてください。
足りない場合は、元データから作り直すか、別の素材に差し替えます。引き伸ばしても画質は戻りません。

スマホで撮った写真は印刷に使えますか？

使えます。最近のスマホは4000×3000px前後で撮れるので、A4の2,894×4,093pxにほぼ届きます。
気をつけたいのは、加工アプリやSNSを通したあとの写真です。自動で縮小されるので、印刷に使うならカメラロールの元の写真を使ってください。

「2倍で書き出す」はどの画像にも当てはまりますか？

写真や図解は2倍で書き出してください。ロゴやアイコンはSVGにすれば、そもそもピクセル数の指定が要らなくなります。
ページ全体の容量が心配なら、2倍で書き出したあとWebPに変換すると軽さと両立します。

次に学ぶこと

要点をまとめます。

• ピクセル：画像を作る点。解像度はその数のこと
• Web：dpiは効かない。表示幅の2倍のピクセル数で書き出す
• 印刷：実寸(mm) ÷ 25.4 × dpi で必要なピクセル数を出す
• dpiの目安：紙もの350、ポスター150〜200、大判看板72〜100
• 拡大では戻らない：出力サイズを先に決めて、大きめに作る

大きさが決まったら、あとは保存形式です。画像形式の選び方で、JPEG・PNG・SVG・WebPの使い分けを確認しておくと、書き出しで迷わなくなります。

入稿のときにやり取りする言葉は校正・入稿の現場用語にまとめています。章の並びはデザイン基礎コースの目次からどうぞ。