Illustratorで画像を扱っていると、
「同じ画像なのにPPIの数字が違う……」
「前に見た画面にはPPIが表示されていたのに、今のIllustratorにはない」
「WindowsとMacで表示が違う気がする」
ということがあります。
実は、IllustratorのPPIは少し分かりにくい部分があります。今回は、Illustratorで表示されるPPIについて、Windows版とMac版の違いも含めて分かりやすくまとめます。
実際のところ、印刷物のお仕事では、クライアントさんが作ったデータがなぜか入稿できず、「どうしてだろう？」と困っていたことが始まりでした。
今回これを書こうと思ったのも、印刷物のお仕事をいただいた際に、ふと思ったことがきっかけです。
「印刷ではPPIが基本です」といった認識が、印刷業界では一般的なのかな？と思っていたのですが、あるとき、町ではよく知られている印刷屋さんへ入稿した際に、データについて結構突っ込まれました。
そのときに、「あれ？PPIって、そういうことなの？」と疑問に思ったことが、今回調べてみようと思ったきっかけのひとつです。
チャットGPTへ相談した
PPIについて調べていたら、WindowsとMacで表示が違うように見えて混乱したので、ChatGPTに聞いてみました。
質問
イラストレーターでのPPIが高いとウェブ上のデメリットはありますか？
すると・・回答は・・・
PPI（Pixels Per Inch）は、画像の解像度を表す単位です。
一般的に、プリント向けの画像ではPPIが高いほど、より鮮明な印刷物が得られます。しかし、ウェブ上で使用する場合、高いPPIはいくつかのデメリットがあります。
1.ファイルサイズの増加: PPIが高い画像は、同じサイズの低PPI画像よりもファイルサイズが大きくなります。これは、ウェブページの読み込み時間を増加させ、ユーザー体験に悪影響を与える可能性があります。
2.ページ読み込み時間の増加: 高解像度の画像は、ウェブページの読み込み時間を増やすことがあります。これは、ユーザーがウェブページを訪れる際に待ち時間を増やし、ユーザーの離脱率を高める可能性があります。
3.デバイス互換性の問題: 高解像度の画像は、一部の古いデバイスやブラウザで正しく表示されない場合があります。特に、モバイルデバイスや低速のインターネット接続を使用しているユーザーにとって、画像の読み込みが遅くなる可能性があります。
4.モバイルデータの使用量: 高解像度の画像は、モバイルデータの使用量を増やすことがあります。これは、モバイルユーザーにとって費用がかかる可能性があるため、注意が必要です。
したがって、ウェブ上で画像を使用する場合は、適切な解像度を選択することが重要です。通常、72〜150PPIの範囲がウェブ用途に適しています。
そもそもPPIとは？
ちょっと難しい話をします。
PPIは「Pixels Per Inch」の略で、1インチの中に何個のピクセルがあるかを表す数値です。
たとえば、PPIにはこのようなものがあります。
- 72ppi
- 96ppi
- 150ppi
- 300ppi
ただし、ここで注意したいのが、IllustratorのWeb制作では「PPIが高い＝画面上できれい」という考え方ではないということです。
Web画像では、最終的には「何px × 何pxの画像として書き出すか」が重要になります。
たとえば、Web用に
1080px × 1080pxで書き出すのであれば、72ppiだから小さくなる、300ppiだからきれいになる、という単純な話ではありません。
PPIとDPIは何が違う？
PPI（Pixels Per Inch）は、画像の解像度を表す単位です。
一方、**DPI（Dots Per Inch）**は、プリンターや印刷機などが1インチあたりにどれだけ細かくドットを出力できるかを表します。
簡単にいうと、
画像 → PPI
印刷機・プリンター → DPI
と考えると分かりやすいです。
印刷業界では「300dpi」と表現されることもありますが、画像データの解像度について厳密に表すなら「300ppi」というのが適切です。
Illustratorでは
「画像そのもののPPI」と
「書き出し時のPPI」を分けて考える
IllustratorでPPIを見るときに混乱しやすいのがここです。写真などの配置画像が持っている解像度があります。
たとえば、
Illustratorに300ppiの写真を配置した場合、その画像には300ppiという情報があります。
ところが、その画像をIllustrator上で大きく拡大すると、実際の表示サイズに対するPPIは下がっていきます。
逆に、画像を小さくすると、実効PPIは高くなります。
そのため、Illustratorでは
元画像の解像度（PPI）
と
Illustrator上で配置した状態での実効解像度（PPI）
が異なることがあります。
「同じ画像なのにPPIが違う！」と感じる原因のひとつがこれです。
なぜIllustratorでPPIの表示が違うの？
主な理由は、確認している場所が違うからです。
たとえば、配置した画像を選択したときに表示される解像度と、書き出し時に設定する解像度は、同じ「PPI」でも意味が違います。
また、Illustratorのバージョンによって、パネルやダイアログの表示内容が変更されることもあります。
そのため、
「以前のIllustratorではここにPPIがあったのに、今はない」
ということもあります。
PPIの設定確認方法
バージョンやウィンドウのサイズによって、メニューやダイアログボックスの配置が異なることがあります。Windows版のIllustratorでは、ドキュメントの設定を確認するためにはこちらの手順を試してみてください。
1.ドキュメントプロパティを表示: Illustratorのメニューバーから、「ファイル」メニューを選択します。
2.ドキュメント設定の表示: 「ファイル」メニューから、「ドキュメントの設定」を選択します。
3.プロパティパネルの確認: 「ドキュメント設定」が表示されると、右側に「プロパティ」パネルが表示される場合があります。このパネルには、ドキュメントの幅、高さ、および解像度（PPI）が表示されることがあります。
4.解像度（PPI）の確認: 「プロパティ」パネルの中で、解像度（PPI）の値を確認できます。これが、ドキュメントの解像度（PPI）に関する情報です。
Windows版のIllustratorでは、これらの手順に従ってドキュメントのPPIを確認できる
WindowsとMacで表示が違うことはある？
あります。
ただし、WindowsだからPPIの仕組みが違う、Macだから違う、というわけではありません。
Illustrator自体の基本的な機能はWindows版とMac版で共通しています。
一方で、
- Illustratorのバージョン
- UI（画面）の変更
- パネルの表示方法
- ダイアログの構成
- OS側の表示倍率や画面設定
などによって、「どこに何が表示されるか」が違って見えることがあります。
特にIllustratorはアップデートによって画面構成が変わることがあるため、インターネット上で見つけた解説画像と、自分のIllustratorの画面が一致しないことがあります。
「Windowsだから、この項目がないのかな？」
と思ってしまいがちですが、実際にはOSの違いよりも、Illustratorのバージョンや確認している場所の違いを疑ったほうがよいでしょう。
Web用画像ならPPIは気にしなくていい？
Web用であれば、PPIを必要以上に気にする必要はありません。
Web画像で重要なのは、
最終的に何px × 何pxで書き出すのかです。
たとえば、
1200px × 628px
のバナーとしてWebに掲載するのであれば、基本的にはこのピクセルサイズが重要です。
「PPIを300にしたから、Web上で72ppiより4倍きれいに表示される」ということではありません。
むしろ、高解像度の画像をそのまま大きなファイルサイズでWebに載せてしまうと、ページの読み込みに影響する可能性があります。
Web用画像を作るときはどうすればいい？
イラストレーターでWeb用なら、
まず「最終的に必要なピクセルサイズ」を決めましょう。
たとえば
SNS用なら、1080px × 1080px
Webバナーなら、1200px × 628px
使用する場所に合わせてサイズを決めます。そしてIllustratorからPNGやJPGなどに書き出します。
このとき、書き出し設定にある解像度（PPI）は、印刷用の考え方とは少し違います。Web用なら、PPIの数字だけを見て「高いほうがいい」と判断しないことが大切です。
まとめ
IllustratorでPPIの表示が違って見えるのには、いくつか理由があります。
特に覚えておきたいのは、
「IllustratorのPPI＝ドキュメント全体に固定された解像度」ではない
ということです。
配置画像の元々の解像度と、Illustrator上で配置したときの実効解像度、そして書き出し時の解像度は、それぞれ意味が異なります。
また、Windows版とMac版で基本的な仕組みが大きく違うわけではありません。
「MacにはあるのにWindowsにはない！」
という場合も、OSの違いだけでなく、Illustratorのバージョンや画面構成、確認している場所の違いを確認してみましょう。
Web用データを作る場合は、PPIの数字だけを見るのではなく、「最終的に何px × 何pxで使う画像なのか」を意識すると、Illustratorでの解像度設定がかなり分かりやすくなります。
今回は、「IllustratorのPPI表示が違うのはなぜ？WindowsとMacで違って見える理由も解説」のお話でした。
