解像度とピクセルサイズについて知ろう
記事デザイン・イラスト
「webに載せる画像は72dpiで！」とか、「1000pxくらいまでが良いよ」とか、なんとなく聞いてはいるけれど、具体的に何をどう設定するのが良いの？
「大きすぎる画像をインターネットに載せていると、勝手に印刷されたりして、悪用されるかも！」とは聞くけど、どれくらいが「大きすぎるサイズ」なの？とりあえず72dpiにしておけばいいんでしょ？
……そんなお声を聞きまして、簡単な解説をまとめてみました。
「ココナラで●●用のイラストを描いて貰いたい！」という方も、解像度とピクセルサイズについて知り、発注の際に「A4サイズ、300dpiで！」とか、「横1200pxで！」とかお願いできるようになると、一層スムーズなお取引ができるかもしれません。
（なお、以下の記事は、ざっと概要を掴んで頂くことを第一目標としています。一部に用語の使い方が厳密でなかったり、説明が本質的でなかったりするところもありますが、ご了承ください）
まず基礎の基礎として知って頂きたいこと、それは、「画面に表示されている全ての画像は、小さな小さな点のあつまりで表現されている」ということです。
この、小さな小さな点ひとつ（上記の画像ではわかりやすくするためにとっても大きく描いています。実際には「その液晶画面が表示出来る一番小さい粒ひとつぶん」）を、「１ピクセル(px)」と呼びます。
ところで、一般的なイラスト作成ソフト等では、キャンバス（描画エリア）の大きさを「A4」とか、mm単位で指定します。
このキャンバスの上に色々絵を描いてパーツを置いてフィルターを掛けて、綺麗なグラフィックを作りました。
でもそれはまだ、そのソフト専用のファイルです。Webにアップするためには、jpgやpngなどの一般的な画像形式に書き出す必要があります。
ところが、jpgやpngなどのサイズはpx単位でしか指定できません。困った！
そこで、「１インチ当たりを何ピクセルで表現するか」を決めて、ソフトに自動計算して貰いましょう。
このときに決める、「１インチ当たりを何ピクセルで表現するか」を表す値がdpi（どっと・ぱー・いんち）です。
（※厳密にはppi（ぴくせる・ぱー・いんち）ですが、今回は諸々の都合で、古くから使われている「dpi」で統一して呼びます）
例えば、１インチを72分割して、72個の点で表すなら「72dpi」。300分割して300個の点で表すなら「300dpi」です。
同じ100mm×100ｍｍの画像を作成したとして、
72dpiで書き出せば283px四方のjpg画像になり、
300dpiで書き出せば1181px四方の画像になります。
（なお、最初から自分でpxサイズを指定して書き出す方法もあります。このときはdpiは関係なく、自分で決めたpxサイズで書き出されます）
で、最終的にInstagramやtwitter等のサービスに投稿したり、ウェブサイトに組み込んで表示する時には、もう「dpi」という単位は関係なくなります。
ディスプレイが表示するときに参照しているのはピクセル数だけなので、100pxの画像なら粒100個、1000pxの画像なら粒1000個で描画されます。
一般的なPC用モニターの解像度は、1920px×1280pxとか1280px×1024pxとか、だいたい2000px以下四方なので、1000px四方もあれば十分なサイズで表示されます。
一方、印刷する際はdpiが密接に関わってきます。
100mm×100mmの画像を用意したつもりでも、72dpiで書きだした画像と、300dpiで書きだした画像では、実際に100mm×100mmに印刷したときの綺麗さが全然違います。
一般的に、カラー印刷をする際には300dpi以上が求められます。
「綺麗に印刷するには1インチあたり300px必要」ということは、逆に、「1インチあたり300pxあれば印刷が可能」、つまり、「小さく印刷すれば綺麗に印刷できるじゃん」ということになります。
例えば100mm×100mmの画像を72dpiで書きだした、283px×283pxの画像があるとします。
そのまま100mm四方で印刷しようとすると、1インチあたり72pxしかありませんが、例えば10mm四方までぎゅぎゅっと小さくすれば、単純計算で1インチあたり720pxです。
そこまで小さくしなくても、その半分、50cm四方でも、720pxの半分の360px。カラー印刷するのに十分です。
というわけで、「web用は72dpiにしておけば、勝手に印刷されたりすることはないんだよね」と、思って「A4画像を72dpiで書きだしたもの」をWebに載せたら、ポストカードサイズで勝手に印刷されていたり、逆に、「web用は72dpiだよね」と元がポストカードサイズのイラストを72dpiで書きだしたものをWebにのせてみたら、なんだかとーーっても小さくなってしまったり、ということが起きてしまいます。
なので、Web用の画像を用意するときはdpiのことは一旦忘れて、ピクセルサイズのことだけ考えて書き出すのがオススメです。多くのソフトで、ピクセルサイズを直接指定して書き出すモードがあるはずなので、使って見てください。
発注する場合も、ウェブ用に使う画像ならピクセルサイズで、印刷用の画像ならmmサイズ（と解像度）で指定してあげると、思っていたサイズと違う、というトラブルが防げるはずです。
と、かなりざっくりではありますが、解像度とピクセルサイズについてお伝えいたしました。
繰り返しますが、一部に説明の為に端折ったり誇張したりしている箇所があるので、詳しく知りたいぞーと思った方は是非自分でも調べてみてくださいね。
また、photoshopやIllustrator等のアドビ製品でのグラフィック作成時に、設定方法や操作方法が分からない、などがありましたら、丁寧な解説資料つきでご説明するサービス
や、画面共有付きビデオ通話でご説明するサービス
もご提供しております。お役に立てそうなことがございましたら、ご利用くださいませ。
