【 解像度とは？】「画像の単位」pixel・ppi・dpi の違いって？イラストレーターの「ラスタライズ効果設定」って何？

【 解像度の単位 】pixel・ppi・dpi の 違いって何？

PhotoshopやIllustratorを扱っていると必ずぶつかる壁、それが「解像度」です。

「pixel（ピクセル）」「dpi（ディーピーアイ）」「ppi（ピーピーアイ）」…。これらは似ているようで、役割が全く異なります。 ここを理解していないと、「Web用に作った画像が印刷したらボケボケになった」「印刷用のデータをWebに上げたら巨大すぎて表示されない」といったトラブルが起きてしまいます。

本記事では、2025年の最新事情も踏まえ、これら3つの単位の違いと正しい使い分けを解説します。

特に、4K・5Kモニター時代におけるWeb画像の考え方について詳しく掘り下げます。

また、Illustratorの「ラスタライズ効果設定」に出てくる数値の意味についても触れ、なぜこの数字が重要なのかをヒモ解きます。

「解像度」には、2つの意味がある

混乱する最大の原因は、「解像度」という言葉が2つの意味で使われていることです。

1. 絶対的な量「pixel」
   画像のタテヨコの大きさ。データの総量。

2. 密度の濃さ「dpi / ppi」
   1インチの中にどれだけ細かく詰まっているか。

この2つは区別します。

1.【 pixel 】＝ 画像の「絶対的な大きさ」

pixel（px）は、デジタル画像を構成する最小単位の「四角い点」のことです。 デジタル画像は、色のついたモザイクタイルの集合体。このタイルの1つ1つがピクセルです。

• 特徴
  デジタルデータそのもののサイズ（容量）を決定します。

• Web/画面の単位は「pixel」
  WebサイトやSNS用の画像制作において最も重要なのは「縦横のピクセル数」です。

• ポイント
  「1000px × 1000px」の画像は、誰のパソコンで見ても「1000個の点の集まり」として表示されます。

2.【 dpi / ppi 】＝ 画像の「密度の濃さ」

これらは、画像を「物理的なサイズ（紙や画面上のインチ）」に出力する時に初めて関係してくる単位です。

ppi (Pixels Per Inch / ピクセル・パー・インチ)

• 意味
  1インチ（約2.54cm）の線の中に、何個のピクセル（点）が並んでいるか。

• 用途
  主にモニター表示や画像のプロパティ設定で使われます。

  • 数値が高い（高解像度）＝ 密度が濃い ＝ キメが細かい

  • 数値が低い（低解像度）＝ 密度が薄い ＝ 粗い

dpi (Dots Per Inch / ドット・パー・インチ)

• 意味
  1インチの線の中に、プリンターが何個のインクの粒（ドット）を打てるか。

• 用途
  主に印刷の現場で使われます。

【4K・5K時代の新常識】Web/モニターと解像度の関係

ここが今回、最も詳しく解説したいポイントです。 「Webは72dpi」という定説と、現代の「高解像度モニター」の関係を整理します。

誤解 →「解像度（dpi）を上げればWebでも高画質になる」

これは間違いです。Webブラウザは、画像ファイルの中に書き込まれている「72pixel/inch」や「300pixel/inch」というメタデータ（設定数値）を無視します。

ブラウザが見ているのは「ピクセル数（px）」だけです。 例えば、以下のAとBの画像があったとします。

• A：横幅 1000px（解像度設定 72 pixel/inch）

• B：横幅 1000px（解像度設定 3000 pixel/inch）

これをWebブラウザで表示すると、全く同じ大きさ、全く同じ画質で表示されます。ブラウザは「ピクセル数（px）」しか見ていないので、Bの方が高画質に見えることはありません。これが「Webでは解像度（dpi/ppi）の設定は関係ない」と言われる理由です。

高解像度モニター用「デバイス ピクセル比」

では、4KやRetinaディスプレイで綺麗に見せるにはどうすれば良いのでしょうか？ ここで重要になるのが「画像のdpi設定」ではなく「表示サイズの2倍のピクセル数を用意する」という考え方です。

現代のモニターには2つのピクセルの概念があります。

1. CSSピクセル（論理上のサイズ）
   Webデザイン上で「幅100px」と指定した時のサイズ。見た目の大きさです。

2. デバイスピクセル（物理的な点）
   モニターが実際に光らせているLEDの粒の数です。

例：100pxのアイコンを表示する場合

従来のモニター（標準ディスプレイ）は、「CSSの1px」を「画面の1ドット」で表示していました（1倍）。

しかし、iPhoneのRetinaや4Kモニターなどは、きめ細かく表示するために「CSSの1px」を「画面の縦横2ドットずつ（合計4ドット）」を使って描画します（2倍）。

これを「デバイスピクセル比（DPR）が2」と呼びます。

デザイナーがやるべき「2倍書き出し」

この仕組みに対応するために、作り手はどうすればよいか？ 答えはシンプルです。

「見た目（CSSサイズ）の2倍のピクセル数を持った画像を作り、ギュッと縮めて表示する」

例：Webサイト上で「横幅300px」で表示したい写真がある場合

ダメな例： 横幅300pxの画像を用意する。

• • 高解像度モニターでは引き伸ばされてボヤけます。

正解の例： 横幅600pxの画像を用意する。

• • HTML/CSSで width: 300px; と指定して表示します。こうすると、高解像度モニターの密度の濃いドット1つ1つに画像の情報が行き渡り、くっきり鮮明に表示されます。

 Webデザイナーが気にするべきは、Photoshopの「解像度72dpi」という数値入力ではなく「カンバスサイズ（px数）が表示サイズの2倍あるか？」という点だけです。

 Illustratorの「ラスタライズ効果設定」の解像度設定

ここまでの理論が、実際の制作現場でどう使われているか？

Illustratorで「効果」メニューから「ドキュメントのラスタライズ効果設定」を開くと、「解像度」という項目があり、以下の選択肢が出てきます。

なぜIllustratorにこの設定があるのでしょう？ Illustratorは本来「計算式（ベクター）」で描画するため、解像度という概念がありません。いくら拡大しても滑らかです。 しかし、「ドロップシャドウ」や「ぼかし」といった効果を使う時だけは、計算式ではなく「ピクセルの画像」を内部で生成して表示しています。

この時、「どのくらいの密度（ppi）でその影の画像を生成しますか？」と聞かれているのがこの設定なのです。

【解像度の選択肢】スクリーン (72 ppi)・標準 (150 ppi)・高解像度 (300 ppi)・その他

1. スクリーン (72 ppi)
   Web用、モニター表示用です。 密度が低い分、データの処理が軽く、画面上で見るには十分な画質です。ただし、この設定のまま印刷すると影の部分がギザギザとした粗い仕上がり（ジャギー）になります。

2. 標準 (150 ppi)
   家庭用プリンターでの簡易出力や、高解像度ディスプレイでの確認用など、上記2つの中間的な用途で使われます。

3. 高解像度 (300 ppi)
   一般的な印刷物。 印刷に必要な「密度の濃さ」を確保するために、影やぼかしを細かく生成します。データは重くなりますが、印刷した時に美しく仕上がります。DTPの現場ではここを必ずチェックします。

4. その他
   大型の看板など、特殊なサイズや距離で見る媒体を作る際に数値を手動で入力します。

このように、ソフトの初期設定として「72（スクリーン用）」と「300（印刷用）」が明確に分かれていることからも、目的に応じて「pixel（Web）」と「dpi/ppi（印刷）」の概念を使い分ける重要性がわかります。

結局どう設定すればいいの？

Photoshopなどで新規作成する際の「結論」は以下の通りです。

ケースA：Webサイト・SNS・バナーを作る場合

• 単位
  pixel（ピクセル）が基準

• 解像度設定
  72 pixel/inch（慣例として）
  重要なのはdpiの数値ではなく「表示したいサイズの2倍のピクセル数（px）」でデータを作る（高画質ディスプレイ対策）
  ※例：スマホで幅300pxで見せたいなら、幅600pxで作成

ケースB：チラシ・ポスター・名刺を印刷する場合

• 単位
  mm（ミリメートル）やサイズ（A4など）が基準

• 解像度設定
  300〜350 pixel/inch (dpi) が基本。紙質が粗い「新聞」などは、200dpi 程度。

• 注意点
  ネットで拾った画像（大抵72dpi）を、無理やり「画像解像度」の数値だけ300に変更しても、画像がぼやけるだけです。

早見表：間違いのない解像度設定

用途	目安の解像度	重要な単位	備考
Web / モニター	72 ppi	pixel	px数がすべて。dpi設定値自体は表示に影響しない
カラー印刷	300〜350 dpi	mm / cm	チラシ、カタログ、写真プリントなど
モノクロ印刷	600〜1200 dpi	mm / cm	漫画の原稿、文字のみの書類など
大型看板	100〜200 dpi	mm / cm	遠くから見るため、実は粗くて大丈夫

「pixelは 数」、「dpi/ppiは 密度」。 「ppiは 画面上」「dpiは出力用」。 この違いさえ覚えておけば、もう解像度で迷うことはありません！