こんにちは、さち です。
画像編集やイラストを描いたりしていると、よく出てくる言葉「解像度」。
「解像度」は印刷に関する数値だから、ウェブ用の画像には関係ないと言われることがあります。本当なのでしょうか？
今回は、「解像度」はフォントサイズにも影響するよというお話。個人的に気になって勉強した内容ですがお役に立てば幸いです。
【前置き】 そもそも「解像度」とは
画面の大きさのことではない
一般的に「解像度」というと、液晶画面の大きさ（ピクセル数）を表す「1920×1080」などを思い浮かべるかもしれません。
しかし、画像編集での「解像度」はまったく別のもの。同じ単語でも意味が全然違うので混同してはいけません。ややこしいですね。
液晶画面の大きさ（ピクセル数）の方の「解像度」は、区別をするために「画面解像度」と言うことがあります。
解像度の単位「dpi」「ppi」とは？
画像編集で使う「解像度」の単位は「dpi」や「ppi」です。実は、これらの単位は、文字列の頭文字を取って略したものなんです。
「ppi」は「pixel per inch（ピクセル パー インチ）」の頭文字
どちらにも入っている「per」は「◯◯あたり」という意味。砕けた言い方をすれば「／（斜線）」のことです。時速60キロを「60キロ／時」と書くときの「／」ですね。
だから、「dpi」「ppi」を略さずに日本語で書くとこうなります。
「ppi」 ＝ 「ピクセル／インチ」
「インチ」は長さを表す単位です。テレビの画面の大きさを表すときなどに使われますよね。（ちなみに、1インチ＝2.54cm ですが覚えなくていいです）
つまり、「dpi」「ppi」は、1インチの中にXX個のドット（ピクセル）があるという意味。「解像度」は点の密度を表しているわけです。
印刷では、インクの点（＝ドット）の密度なので「dpi」、
画面などでは、画素（＝ピクセル）の密度なので「ppi」を使うことが多いです。
画像の印刷はこの「解像度」をもとに行われます。例えば、縦横ともに300ピクセルの画像を印刷する場合……
100dpi ＝ 1インチの中に100ドット → 縦横3インチの大きさで印刷
つまり、「解像度」は画像の印刷サイズに影響する数値です。
ウェブ用画像に「解像度」は関係ない？
「解像度」は印刷用の数値。ウェブ用の画像であれば「解像度」はいくつでもいい。そんな話を聞いたことがあるかもしれません。これは、ネット上の画像の表示が基本的に「ドット バイ ドット」方式だからです。
「ドット バイ ドット（dot by dot）」とは、「画像」の1ピクセルを「液晶画面」の1ピクセルに合わせて表示する方法。つまり、「ドット バイ ドット」方式で画像の大きさに関係するのは「ピクセル数」だけ。だから、ウェブ用画像の解像度はいくつでもいいと言われるわけです。
では、ウェブ用画像を作るとき、解像度の数値は何でも良いのかというと、そうではありません。実は、画像に入れる「文字」のサイズにも解像度が影響するからです。
【本題】 文字サイズには解像度が関係する
やっとここからが本題です。前置き（予備知識）の説明が長かったですね……。
文字サイズの単位「pt（ポイント）」
Photoshop, CLIP STUDIO PAINT, IllustStudio 等のソフトは、画像に文字を入れる機能がありますよね。初期設定だと、文字サイズの単位は「pt（ポイント）」です。（設定で px に変更できることもある）
「pt」は長さを表す単位で、「1pt ＝ 1/72（≒0.014）インチ」。文字サイズでも「インチ」という単位が関わっているんです。
思い出して下さい。解像度の単位は「ピクセル／インチ」でしたよね。こちらにも「インチ」という単位があります。つまり、解像度は文字サイズに影響する数値なんです。
解像度が「pt」に与える影響
例えば、同じ「24pt」の文字でも、解像度が異なると画面上のサイズはこんなにも違います。
※ px = pixel（ピクセル）
72dpi を基準として比べると、96dpi は約1.3倍、300dpi は約4倍大きいサイズになります。
ちなみに、「pt」を「px」に変換する式は次のようになります。（覚えなくてもいい）
文字サイズ「pt」が一定の場合、「解像度」が大きいほど、文字サイズ「px」も大きくなるのが分かります。
先ほどの 24pt の例を計算してみると次のとおり。
【96dpi の場合】 24 × 1/72 × 96 ＝ 32px
【72dpi の場合】 24 × 1/72 × 72 ＝ 24px
72dpi はキレイに約分できるので「pt」の数値がそのまま「px」になります。計算の手間が省けますね。ウェブ用画像の解像度に 72dpi がよく使われるのはこれも理由なのでしょうか？
【余談】 WinとMacでも文字サイズが違う
Windows で作成した Word ファイルを Mac で開くと、上の画像のように『文字小っさ！』となります。
拡大率は「100％」、フォントサイズは「10.5」、フォントは「MS 明朝」。Windows と Mac どちらもまったく同じ条件。それなのに、Mac の方が小さい。
もう気付いているかもしれませんが、原因はやはり「解像度」です。
実は、Word の文字サイズの単位も「pt」なんです。
Word は印刷することを前提にしています。「pt」が同じであれば、解像度が違っても紙に印刷した時の文字の大きさは同じになります。だから、「px」でなく「pt」を使った方が都合が良いわけです。
Windows は「96dpi」、Mac は「72dpi」です。そのため、Mac での画面上の文字サイズは Windows の4分の3（75％）の大きさになってしまいます。
実際に、10.5pt をピクセルでの大きさに換算してみると……
【Mac】 10.5 × 1/72 × 72 ＝ 10.5px
10.5px はちょっと小さいですよね。
以上の内容は、勉強したことを自分なりにまとめたものです。誤りなどありましたら指摘して頂けるとありがたいです。
関連記事
コメント