デザインについての学習メモブログ

解像度とは?画像・モニターの解像度一覧と上げる方法を初心者向けに解説

記事内に広告が含まれています。

解像度とは?画像・モニターの解像度一覧と上げる方法を初心者向けに解説

「解像度が低いので差し替えてください」と言われたものの、何をどうすればいいのか分からず困ったことはありませんか。

解像度とは、画像や画面をどれだけ細かい点で表しているかを示す言葉で、画像・モニター・印刷のどれの話かによって、使う数字や単位が変わります。

この記事では、解像度とは何かという基本から、フルHD・4Kなどモニターの解像度一覧、Web・印刷で必要な解像度の目安、解像度の調べ方、画像の解像度を上げる方法とその限界までを、初心者向けに解説します。

解像度の基本

まずは、解像度という言葉の意味と、解像度の話に必ず出てくる「ピクセル」「画素数」「dpi・ppi」の関係を押さえましょう。

解像度とは

解像度(かいぞうど、英語ではresolution)とは、画像や画面を、どれだけたくさんの細かい点で表しているかを示す言葉です。

デジタルの画像や画面は、色のついた小さな四角い点を、方眼紙のマス目のように縦横に並べて絵や文字を表しているためです。

同じ大きさの絵を描くなら、マス目が細かいほど(点の数が多いほど)なめらかな曲線や細かい模様まで表せ、マス目が粗いほど輪郭がギザギザになります。

「解像度が高い」とは点が多くて細かく表せる状態、「解像度が低い」とは点が少なくて粗く見える状態のことです。

ただし、解像度という言葉は、「画像や画面の点の総数(横○×縦○)」を指す場合と、「1インチの中に点がいくつ並ぶか(密度)」を指す場合があり、話の場面によって意味が変わるので注意しましょう。

ピクセル・画素数との違い

ピクセル(pixel、画素)は画像を作る1つ1つの点のことで、画素数はその点の総数、解像度はその点の細かさを表す言葉です。

3つはよく混ぜて使われますが、何を数えているかが少しずつ違うためです。

言葉意味表し方の例
ピクセル(画素)画像を作る1つ1つの点1px(1ピクセル)
ピクセル数(ピクセル寸法)横と縦にそれぞれいくつ点が並んでいるか1920×1080px
画素数点の総数(横×縦)約207万画素
解像度点の細かさ。画面ではピクセル数、印刷では密度(dpi・ppi)で表すことが多いフルHD、350dpi

たとえば、横1920×縦1080ピクセルの画像の画素数は、1920×1080=2,073,600で約207万画素です。

モニターや動画の話で「解像度1920×1080」と言うときは、このピクセル数のことを指しています。

dpi・ppiの意味

dpiとppiは、1インチ(約2.54cm)の長さの中に点がいくつ並ぶかを表す、解像度の単位です。

同じピクセル数の画像でも、大きな紙に引き伸ばせば点の間隔が広がって粗く、小さく印刷すれば細かく見えるため、印刷では「長さあたりの点の数」で細かさを表します。

  • dpi(dots per inch):1インチあたりのドット(点)の数。
    もともとはプリンターが紙に打つインクの点の細かさを表す単位です。
  • ppi(pixels per inch):1インチあたりのピクセルの数。
    画像のデータや画面の画素の細かさを表す単位です。

厳密には別のものですが、画像の解像度の話では、dpiとppiはほぼ同じ意味で使われることが多く、印刷会社やソフトによってどちらの表記を使うかが違います(CSSの解像度の単位としてのdpiはMDN「<resolution>」で確認できます)。

印刷したときの大きさ、ピクセル数、dpiの3つは、次の式でつながっています。

必要なピクセル数 = 印刷する長さ(インチ) × dpi
印刷する長さ(インチ) = 長さ(mm) ÷ 25.4

たとえば、幅210mm(A4の短い辺)を350dpiで印刷するには、210÷25.4×350で、横に約2894ピクセル必要です。

モニター・ディスプレイの解像度一覧

ここでは、モニターやテレビ、動画でよく見る解像度の呼び名とピクセル数を一覧にし、画面の大きさやスマホとの関係を説明します。

HD・フルHD・WQHD・4K・8Kの早見表

モニターやディスプレイの解像度は、「フルHD」「4K」のような呼び名と、「1920×1080」のような横×縦のピクセル数で表します。

製品のカタログや動画の設定ではどちらの書き方も使われるので、対応を覚えておくと迷いません。

呼び名ピクセル数(横×縦)画素数ほかの呼び方
HD1280×720約92万720p
フルHD1920×1080約207万FHD、1080p、2K
WQHD2560×1440約369万QHD、1440p
4K3840×2160約829万(フルHDの4倍)UHD、4K UHD
8K7680×4320約3318万(フルHDの16倍)8K UHD

2K(1920×1080)・4K・8Kのピクセル数と画素数は、総務省 北海道総合通信局「放送技術セミナー2016」の記事でも紹介されています。

「720p」「1080p」の数字は縦のピクセル数のことで、動画サイトの画質の設定などでよく使われます。

表の解像度は、どれも横と縦の比率(アスペクト比)が16:9です。

なお、WQHDとQHDのように、同じピクセル数でもメーカーや製品によって呼び名が違うことがあるので、製品を比べるときは呼び名ではなくピクセル数で確かめましょう。

画面の大きさと解像度の関係

同じ解像度のモニターでも、画面が大きいほど1つ1つの点が大きくなり、細かさ(ppi)は下がります。

解像度は点の数を表しているだけで、画面の大きさ(インチ数)は別に決まるためです。

たとえば、同じフルHDでも、ノートパソコンの小さな画面とテレビの大きな画面では、テレビのほうが点が大きく、近づくと粗く見えます。

モニターを選ぶときは、解像度と画面の大きさをセットで見て、文字の大きさや細かさが自分の使い方に合うかを考えましょう。

スマホの解像度はCSSピクセルと物理ピクセルが違う

スマホや高精細なパソコンの画面では、カタログに書かれた解像度(物理ピクセル)と、Webサイトを作るときに使う幅の数値(CSSピクセル)が違います。

物理ピクセルは画面に実際に並んでいる点の数、CSSピクセルはWebページの大きさを決めるときに使う見た目の単位で、高精細な画面では1 CSSピクセルを2つ、3つといった複数の物理ピクセルで細かく描いているためです。

この倍率は「デバイスピクセル比(devicePixelRatio)」と呼ばれ、MDN「devicePixelRatio」では、1つのCSSピクセルが実際にいくつの物理ピクセルで表示されるかという値だと説明されています。

たとえば、デバイスピクセル比が3の画面では、幅390 CSSピクセルの表示に、横1170個の物理ピクセルが使われます。

スマホ向けのレイアウトをCSSピクセルで考える方法は、モバイルファーストとは?で解説しています。

用途別に必要な解像度の目安

画像に必要な解像度は、画面で見るのか、紙に印刷するのかで考え方が変わります。

ここでは、Webサイト・SNS・印刷のそれぞれで、どのくらいのピクセル数を用意すればよいかの目安を見ていきます。

Webサイトに使う画像

Webサイトに使う画像は、dpiの数値ではなく、横と縦のピクセル数で考えます。

画面に表示される大きさはピクセル数とCSSの指定で決まり、画像に記録されたdpiの値は表示には使われないためです。

目安は、「ページ上で表示したい幅の2倍のピクセル数」で用意することです。

先ほどのように、高精細な画面では1 CSSピクセルを2つ以上の物理ピクセルで描くので、表示幅と同じピクセル数の画像では少しぼやけて見えることがあるからです。

ページ上で表示する幅用意する画像の幅(2倍)
200px(アイコン・ロゴなど)400px
375px(スマホの画面幅いっぱい)750px
800px(記事の本文幅など)1600px

ただし、ピクセル数が多い画像はファイルが重くなり、ページの表示が遅くなる原因になります。

画面の細かさに合わせて大きさの違う画像を出し分ける方法は、MDN「HTML におけるレスポンシブ画像の使用」で解説されています。

ファイルを軽くできる画像形式についてはWebPって何?、表示する大きさをCSSでそろえる方法はCSSで画像サイズを合わせる方法で紹介しています。

SNSに投稿する画像

SNSに投稿する画像は、そのSNSが案内している推奨サイズ(ピクセル数と縦横比)に合わせて作るのが基本です。

多くのSNSは、投稿された画像をサービスごとに決めた大きさに自動で縮小・変換するため、推奨サイズより大きすぎても意味がなく、小さすぎると引き伸ばされてぼやけるからです。

推奨サイズはSNSや投稿の種類(通常の投稿・アイコン・ヘッダーなど)ごとに違い、変更されることもあるので、作る前に各SNSのヘルプで確かめましょう。

印刷する画像

チラシや名刺などを印刷する画像は、印刷する大きさ(原寸)で350dpi程度あるかが目安です。

紙は画面より近くでじっくり見られることが多く、点が粗いとぼやけやギザギザが目立ちやすいためです。

たとえば、印刷通販のラクスルはポスターの印刷用データ作成方法で、印刷に適した解像度を原寸で350〜400ppiとしています。

一方で、同社の画像入稿の注意点では、ポスターやのぼりのように大きく印刷して離れて見るものは、150〜200ppi程度でも問題ないとされています。

基準の数値は印刷会社や印刷物によって違い、350dpiより低い値を許容している場合もあるので、入稿する前に、依頼先のデータ作成ガイドを必ず確認しましょう。

よく使う紙の大きさで、300dpiと350dpiのときに必要なピクセル数を計算すると次のとおりです(1インチ=25.4mmで計算し、四捨五入しています)。

紙の大きさ300dpiのとき350dpiのとき
A4(210×297mm)2480×3508px2894×4093px
はがき(100×148mm)1181×1748px1378×2039px

紙に余白を残さず端まで色や写真を入れる場合は、裁断のずれに備えて仕上がりより少し大きく作る「塗り足し」が必要になるので、その分のピクセル数も足して考えましょう。

解像度の調べ方

ここからは、自分のパソコンの画面の解像度と、手元の画像のピクセル数を確認する手順を紹介します。

Windowsで画面の解像度を確認する

Windowsの画面の解像度は、「設定」の「ディスプレイ」で確認・変更できます。

  1. 「スタート」から「設定」を開きます。
  2. 「システム」を選び、「ディスプレイ」を開きます。
  3. 「ディスプレイの解像度」の欄に、今の解像度が表示されます。
    変更する場合は、リストから「(推奨)」と付いているものを選ぶのが基本です。

手順はMicrosoftサポート「Windows で画面の解像度とレイアウトを変更する」でも確認できます。

推奨より低い解像度にすると、文字がぼやけたり、画面が引き伸ばされたりすることがあるので、文字を大きくしたいときは解像度ではなく、同じ画面の「スケール」で調整しましょう。

Macで画面の解像度を確認する

Macの画面の解像度は、「システム設定」の「ディスプレイ」で確認・変更できます。

  1. アップルメニューから「システム設定」を開きます。
  2. サイドバーで「ディスプレイ」をクリックします。
  3. 表示されている解像度の候補から選びます。
    候補にポインタを合わせると、その解像度の大きさが表示されます。

候補をリストで表示する方法などは、Appleサポート「Macディスプレイの解像度を変更する」で確認できます。

Macの高精細な画面では、ここで選ぶ解像度は「画面にどれくらいの広さを表示するか」を表しており、画面に実際に並ぶ点の数(物理ピクセル)とは一致しないことがあります。

画像のピクセル数を確認する

画像の解像度が足りているかは、まずその画像の横と縦のピクセル数を確認するところから始めます。

ピクセル数が分かれば、Webでどの幅まで使えるか、何dpiでどの大きさまで印刷できるかを計算できるためです。

  • Windows:エクスプローラーで画像ファイルを右クリックして「プロパティ」を開き、「詳細」タブを見ると、「幅」と「高さ」にピクセル数が表示されます。
  • Mac:画像を「プレビュー」で開き、「ツール」から「サイズを調整」を選ぶと、「幅」「高さ」「解像度」が表示されます。
    単位がピクセル以外になっているときは、単位のメニューで「ピクセル」に切り替えましょう(Appleサポート「Macの「プレビュー」で画像を切り取る/サイズ変更する/回転する」)。

たとえば横1200ピクセルの写真なら、350dpiで印刷できる幅は1200÷350×25.4で約87mmと計算できます。

画像の解像度を上げる方法

解像度の足りない画像を高画質にしたいときに、できることとできないことを整理します。

先に結論を言うと、一番確実なのは、元の大きなデータを用意し直すことです。

単純に拡大しても情報は増えない

小さな画像を画像編集ソフトで拡大してピクセル数を増やしても、写っている細かさ(情報)は増えません。

拡大するときに増えるピクセルの色は、まわりのピクセルの色から計算して埋めているだけで、撮影したときに写っていなかった細部が復元されるわけではないためです。

そのため、拡大した画像はピクセル数が足りていても、輪郭がぼやけたり、のっぺりした印象になったりします。

ロゴやアイコンのような図形なら、拡大しても輪郭が崩れないSVGという形式で作り直す方法もあります(SVGの特徴はSVGファイルとは?、PNGやJPGの図形をSVGに変換する手順はSVG入門 #5 PNG・JPGをSVGに変換する方法で解説しています)。

72dpiを300dpiに書き換えても画質は変わらない

画像に記録されたdpiの数値だけを72から300や350に書き換えても、ピクセル数が同じなら画質は変わりません。

ピクセル数を変えずにdpiの数値を上げると、そのぶん印刷される大きさが小さくなるだけだからです。

たとえば横1200ピクセルの画像は、72dpiとして扱えば約423mm、350dpiとして扱えば約87mmの幅で印刷される計算になりますが、どちらも中身は同じ1200ピクセルです。

Macの「プレビュー」の「サイズを調整」では、「画像を再サンプル」のチェックを外して解像度を変えると、ピクセル数はそのままで、印刷の大きさとdpiの数値だけが変わる様子を確かめられます。

入稿先から「350dpiにしてください」と言われたときは、数値の書き換えではなく、「印刷する大きさで350dpiになるだけのピクセル数があるか」を確認しましょう。

Photoshopのスーパー解像度

Adobe Photoshopなどで使える「スーパー解像度」は、機械学習(大量のデータからコンピューターがパターンを学ぶ仕組み)を使って、画像の幅と高さを2倍、ピクセル数を4倍にする機能です。

単純な拡大と違い、たくさんの写真から学んだパターンをもとに、輪郭や細部がくっきり見えるようにピクセルを補うため、拡大したときのぼやけを抑えやすいのが特徴です。

機能の公開時のAdobeの解説では、Camera Raw(写真の明るさや色を整えるための機能)で画像を開き、写真を右クリックして「強化…」を選び、「スーパー解像度」にチェックを入れて「強化」をクリックする手順が紹介されています。

同じ解説では、圧縮の強いJPEGなどでは、圧縮で生じた乱れ(ノイズ)まで目立ちやすくなることがあるとも書かれています(Adobe Blog「スーパー解像度」の解説)。

画面の表示や項目名はバージョンによって変わることがあるので、実際に使うときは手元のPhotoshopのヘルプも確認しましょう。

AIアップスケールの考え方と限界

スーパー解像度のように、AIで画像を拡大して高画質に見せる処理は、一般に「AIアップスケール」と呼ばれ、さまざまなソフトやサービスで使えます。

ただし、AIアップスケールは、写っていなかった細部を「それらしく推測して描き足す」処理であり、本当の情報を取り戻しているわけではありません。

そのため、小さな文字が別の文字に変わったり、人の顔や細かい模様が実物と違う形になったりすることがあります。

  • 向いている使い方:風景や雰囲気を伝える写真を、少し大きく使いたいとき。
  • 向いていない使い方:商品の細部、文字、図面、人物の顔など、正確さが求められる画像。
    実物と違う形になると、誤解やトラブルの原因になります。

オンラインのサービスを使う場合は、画像を外部にアップロードすることになるので、利用規約で画像の扱いや商用利用の条件を確かめ、仕事の画像や個人情報が写った画像は安易にアップロードしないようにしましょう。

確実なのは大きな元データを用意し直すこと

解像度が足りないときに一番確実なのは、大きなピクセル数の元データを手に入れ直すことです。

拡大やAIでの補正は、あくまで足りない情報を推測で補う方法で、元から細かく記録された画像にはかなわないためです。

  • 写真なら、カメラやスマホで撮った元のファイル(SNSやチャットで送ったものではなく、端末に保存された元の画像)を探す。
  • ロゴやイラストなら、作った人にSVGやAIファイルなどの元データをもらう。
  • デザインツールで作った画像なら、大きな倍率(2倍・3倍など)で書き出し直す。

SVGで作った図形を、必要なピクセル数のPNGやJPGに書き出す方法は、SVG入門 #4 SVGをPNG・JPGに変換する方法で解説しています。

実践のポイント

解像度の扱いで陥りやすい失敗と、よくある疑問をまとめます。

注意点・よくある間違い

  • Webサイトやスマホで見た画像を保存して、そのまま印刷に使ってしまうことがあります。
    画面ではきれいに見えても、印刷に必要なピクセル数が足りないことが多いので、元のデータを用意しましょう。
  • dpiの数値だけを書き換えて、解像度を上げたつもりになってしまうことがあります。
    大切なのは数値ではなく、印刷する大きさに対して十分なピクセル数があるかです。
  • Webサイトに、表示する大きさよりずっと大きな画像をそのまま載せてしまうことがあります。
    ページが重くなるので、表示する幅の2倍程度を目安に縮小してから使いましょう。
  • 小さく保存した画像に上書きして、元の大きな画像をなくしてしまうことがあります。
    ピクセル数は一度減らすと戻せないので、縮小や圧縮は元の画像とは別のファイルに保存しましょう。
  • AIアップスケールした画像を、確かめずにそのまま使ってしまうことがあります。
    文字や顔、細かい模様が変わっていないかを、拡大して元の画像と見比べてから使いましょう。

よくある質問

  • Q. 解像度と画質は同じ意味?
    A. 同じではありません。
    解像度は点の細かさのことで、画質はそれに加えて、ピンぼけ・ブレ・明るさ・圧縮による劣化などを含めた見た目の良さ全体を指します。
    解像度が高くても、ピンぼけした写真やJPEGの圧縮で荒れた画像は、画質がよいとは言えません。
  • Q. 画像の解像度を下げる(小さくする)には?
    A. 画像編集ソフトで、横と縦のピクセル数を小さくして保存します。
    Macの「プレビュー」なら「ツール」の「サイズを調整」で、「画像を再サンプル」にチェックを入れたまま幅や高さを小さくします。
    元の画像は上書きせず、別のファイルとして保存しておきましょう。
  • Q. 4Kのモニターを使えば、画像もきれいになる?
    A. 画像自体のピクセル数が少なければ、4Kのモニターで見ても細かくはなりません。
    小さな画像を大きく表示すると、むしろ粗さが目立つこともあります。
    モニターの解像度と画像の解像度は、別々に考えましょう。
  • Q. スマホで撮った写真は印刷に使える?
    A. 撮影したままの元のファイルなら、ピクセル数が多く、はがきやA4程度なら十分なことが多いです。
    ただし、SNSやチャットアプリで送った画像は縮小されていることがあるので、印刷には端末に保存された元のファイルを使い、ピクセル数を確認しましょう。

まとめ

解像度とは、画像や画面をどれだけ細かい点(ピクセル)で表しているかを示す言葉で、画面では「1920×1080」のようなピクセル数、印刷では「350dpi」のような密度で表すのが一般的です。

Webに使う画像は表示する幅の2倍程度のピクセル数、印刷する画像は原寸で350dpi程度が目安で、印刷の基準は依頼先のガイドで確かめます。

小さな画像を拡大したり、dpiの数値を書き換えたりしても情報は増えず、スーパー解像度などのAIによる拡大も推測で補う方法なので、一番確実なのは大きな元データを用意し直すことです。

まずは、今使っている画像を1枚選んで横と縦のピクセル数を確認し、Webなら何pxの幅まで、印刷なら何mmの大きさまで使えるかを計算してみましょう。