ピクセルとは？解像度とmmの違い・整数管理の基本を解説

公開日：2026-08-04

Webデザインやデジタルイラストの勉強を始めたばかりの人にとって、最初につまずきやすいのが「ピクセル」という言葉です。ピクセルとは何かを正しく理解しないまま作業を進めると、画像がぼやけたり、印刷したときにイメージと違う仕上がりになったりすることがあります。本記事では、ピクセルの基本的な意味から、解像度・PPI・DPIとの関係、ミリメートル（mm）との違い、そしてデザインデータをピクセル単位＝整数で管理すべき理由まで、初心者にもやさしく整理して解説します。

ピクセルとは何か｜デジタル画像を構成する最小単位

ピクセル（pixel）とは、デジタル画像を構成する最小単位の点のことです。「pix（picture：画像）」と「el（element：要素）」を組み合わせた言葉で、日本語では「画素」と呼ばれます。1枚のデジタル画像は、色情報を持った正方形の点（ピクセル）が縦横に敷き詰められることで成り立っています。画像を思い切り拡大すると、なめらかに見えていた輪郭が小さな四角形の集まりとしてギザギザに見えてくることがありますが、これはピクセル1つひとつが視認できる大きさまで拡大されたことによるものです。

Webデザインやデジタルイラストの制作では、この「ピクセル」という単位を扱う場面が非常に多くあります。バナー画像のサイズ指定、Webサイトのレイアウト調整、SNS投稿用画像の書き出しなど、あらゆる場面で「幅◯◯px、高さ◯◯px」という指定が登場します。ピクセルの意味を正しく理解しておくことは、意図した通りの見た目でデータを仕上げるための最初の一歩といえます。用語の基礎をひとつずつ確認したい方は、デジタルハリウッドのクリエイティブ用語辞典もあわせて参考にしてみてください。

ピクセルと「画素数」の違い

「ピクセル」と似た言葉に「画素数」があります。画素数とは、画像を構成するピクセルの総数のことです。たとえば横4,000px×縦3,000pxの画像であれば、画素数は4,000×3,000＝1,200万画素と表現されます。デジタルカメラの性能を示すときによく使われる「◯◯万画素」という表記も、この画素数（＝ピクセルの総数）を指しています。ピクセルが「点そのもの」、画素数は「点がいくつ集まっているか」と整理すると混同しにくくなります。

なぜWebデザイン・イラスト制作でピクセルの理解が欠かせないのか

Webデザインやデジタルイラストのデータは、基本的に「ピクセルの集合体」として扱われます。Photoshopやillustrator、Adobe XD、Figmaといった主要な制作ツールも、キャンバスやアートボードのサイズをピクセル単位で管理する場面が中心です。ピクセルの考え方を理解していないと、「画面では綺麗に見えたのに、書き出したら画像が粗くなった」「デザインデータ通りに実装したはずなのに、Webサイトの見た目が少しずれる」といったトラブルの原因を突き止められません。逆にいえば、ピクセルと解像度の関係を理解しておくだけで、こうした制作現場でよくあるつまずきの多くを未然に防げます。

解像度とピクセルの関係｜PPI・DPIの基本

ピクセルとあわせて理解しておきたいのが「解像度」という概念です。解像度とは、画像や画面の密度、つまり一定の面積の中にどれだけ多くのピクセル（またはドット）が詰まっているかを表す指標です。解像度は一般的に「1インチ（約25.4mm）の中に、いくつの点が並んでいるか」という単位で表され、画像・画面については主にPPI、印刷物については主にDPIという単位が使われます。

画像サイズ・解像度・出力サイズの三角関係

ピクセルを理解するうえで欠かせないのが、「画像サイズ（ピクセル数）」「解像度（PPI／DPI）」「出力サイズ（実際の表示・印刷サイズ）」の3つが互いに連動しているという考え方です。この3つのうち、2つが決まれば残る1つは計算で求められます。たとえば横2,480px×縦3,508pxの画像を300dpiで印刷する場合、実際の印刷サイズは「2,480÷300×25.4」で計算でき、約210mm（A4サイズの横幅相当）になります。同じピクセル数の画像でも、出力するサイズを大きくすれば解像度は下がり、小さくすれば解像度は上がるという関係にあるため、「ピクセル数が多い＝どんなサイズでも高画質」とは限らない点に注意が必要です。

解像度が低いとどうなるか

解像度が不足した状態で画像を拡大したり、大きなサイズで印刷したりすると、1つひとつのピクセルが目立つようになり、輪郭がギザギザに見えたり、全体がぼやけて見えたりします。これはよく「画像が荒れる」と表現される現象で、Webデザインの現場でもデジタルイラスト制作の現場でも避けたいトラブルの代表例です。逆に、必要以上に解像度を高く設定すると、ファイルサイズが不必要に大きくなり、Webページの表示速度が遅くなる原因にもなります。用途に応じて適切な解像度を選ぶことが、ピクセルを扱ううえでの基本の考え方です。

PPIとDPIの違い｜画面用と印刷用で使い分ける単位

PPIとDPIは、どちらも「1インチあたりの点の数」を表す単位ですが、対象とする媒体が異なります。

PPI（Pixels Per Inch）とは

PPIは「Pixels Per Inch」の略で、画面や画像における1インチあたりのピクセル数を表す単位です。Webサイトやスマートフォンアプリの画面表示、デジタルカメラで撮影した写真データの密度などは、基本的にPPIで考えます。

DPI（Dots Per Inch）とは

DPIは「Dots Per Inch」の略で、主にプリンターなど印刷機器における1インチあたりのインクドット数を表す単位です。厳密にはPPIとDPIは対象物が異なる単位ですが、実務上は画像データのミリ換算をする際にDPIという言葉がPPIとほぼ同じ意味で使われることも多く、多くのデザインソフトの設定画面でも「解像度（dpi）」という表記でピクセル密度が扱われています。用語の違いを厳密に区別することよりも、「画面用の指標」と「印刷用の指標」があるという大枠を押さえておくことが実務では重要です。

実務ではどちらを基準に考えればよいか

制作物がWeb上でのみ表示されるものであれば、PPI（実質的には画面のピクセル数そのもの）を基準に、ピクセル単位でサイズを管理すれば十分です。一方、チラシや名刺、ポスターなど紙に印刷する制作物では、印刷会社が指定するDPI（多くの場合300〜350dpi程度）を基準に、必要なピクセル数を逆算してデータを作成する必要があります。同じ「解像度を確認する」という作業でも、Web向けか印刷向けかによって基準にする単位と目標値が変わる、という点を最初に押さえておくと迷いにくくなります。

ピクセルとミリメートル（mm）の違い・変換方法

デザイン初心者がつまずきやすいポイントの1つが、「ピクセル（px）」と「ミリメートル（mm）」の関係です。pxは画面上の点の数を表す単位であるのに対し、mmは実際の物理的な長さを表す単位であり、そもそも性質が異なります。そのため、解像度（PPIまたはDPI）の情報がなければ、pxをmmに正確に変換することはできません。

なぜpxとmmは単純に一致しないのか

同じ「1,000px」の画像でも、解像度が72ppiで表示される場合と、350dpiで印刷される場合とでは、実際の物理サイズ（mm）はまったく異なります。72ppiで換算した1,000pxはおよそ353mmになりますが、350dpiで換算すると1,000pxはおよそ73mmにしかなりません。この違いを理解せずに「1,000pxだから、だいたいこのくらいの大きさだろう」と感覚だけで判断してしまうと、印刷物のサイズ違いや、Web表示時の想定外の拡大・縮小といったトラブルにつながります。

px⇔mm変換の計算式と具体例

px（ピクセル）とmm（ミリメートル）は、以下の計算式で相互に変換できます。

たとえば、A4サイズ（210mm×297mm）の印刷物を350dpiで作成する場合、必要なピクセル数は「210÷25.4×350」で横約2,894px、「297÷25.4×350」で縦約4,093pxとなります。逆に、横1,920pxの画像を96ppiのディスプレイでmm換算すると「1,920÷96×25.4」で約508mmとなります。数値をその都度暗算する必要はありませんが、「解像度が変われば、同じpx数でも実際の大きさは変わる」という原理を理解しておくことが重要です。

Web用と印刷用で解像度の考え方が違う理由

Webデザインの現場では「画像は72dpiで作る」、印刷の現場では「画像は350dpiで作る」といった目安を耳にすることがあります。この数値の違いには、それぞれ歴史的な背景と技術的な理由があります。

Webの72dpi・96dpiという目安の由来

72dpiという数値は、Apple社が開発した初期のMacintoshのディスプレイ解像度に由来するとされています。当時のディスプレイは1インチあたり72ドットで表示するのが一般的であったため、画面表示の目安として72dpiという数値が広まりました。Windows環境ではその後96dpiが標準的な目安として扱われるようになり、こんにちでも「Web用画像は72〜96dpi程度でよい」という説明を目にすることがあります。ただし、現在のディスプレイは高精細化が進んでおり、後述するRetinaディスプレイのように、この目安だけでは対応しきれない画面も一般的になっています。実務上は「dpiの数値そのもの」よりも、「画面上で何pxで表示されるか」を基準に考えるほうが実態に即しています。

高精細ディスプレイ（Retinaなど）とピクセルの関係

スマートフォンや近年のノートパソコンの多くは、従来よりも高精細なディスプレイを搭載しています。こうした画面では、CSS上で指定する論理的な単位（CSSピクセル）と、実際にディスプレイが描画する物理的なピクセル（デバイスピクセル）の比率が1対1ではなく、2対1や3対1になっていることがあります。この比率は一般に「デバイスピクセル比」と呼ばれます。デバイスピクセル比が2の画面では、1つのCSSピクセルを表現するために4つ（2×2）の物理ピクセルが使われ、3の画面では9つ（3×3）の物理ピクセルが使われます。高精細ディスプレイ向けに画像を用意する際は、表示サイズの2倍・3倍の解像度で書き出しておくことで、拡大表示されても輪郭がぼやけにくくなります。

印刷で300〜350dpi前後が求められる理由

印刷物では、300〜350dpi程度の解像度が推奨されることが一般的です。この目安は、印刷機の網点（インクを網目状に配置して色や濃淡を表現する仕組み）の細かさと関係しており、必要な解像度は出力線数（スクリーン線数）のおよそ2倍が望ましいという考え方に基づいています。解像度が不足したまま印刷すると、写真やイラストの輪郭がぼやけたり、色の階調が粗く見えたりする原因になります。逆に、必要以上に高い解像度で入稿しても仕上がりの品質はほとんど変わらず、ファイルサイズが大きくなるだけになってしまうため、印刷会社が指定する解像度の目安に沿ってデータを準備することが大切です。

ラスター画像とベクター画像の違い｜ピクセルの視点から整理する

デジタル画像には、大きく分けて「ラスター画像（ビットマップ画像）」と「ベクター画像」の2種類があります。ここまで解説してきたピクセルという概念が直接関わってくるのはラスター画像です。ラスター画像は、色情報を持ったピクセルが格子状に並ぶことで構成される画像形式で、写真やPhotoshopで描いたイラストの多くはこの形式にあたります。一方、ベクター画像は、点や線の座標・数式によって形状を定義する画像形式で、illustratorで作成するロゴやアイコンなどが代表例です。

ラスター画像は、拡大するとピクセルの粒が見えてぼやけたり、ギザギザになったりしますが、写真のような自然なグラデーションや複雑な色合いの表現を得意とします。一方、ベクター画像はピクセルという概念を持たないため、どれだけ拡大・縮小しても輪郭がなめらかなまま保たれるという特長があります。ロゴマークやアイコンなど、さまざまなサイズで繰り返し使用する素材はベクター形式で作成しておくと、後から拡大・縮小する際に画質を心配する必要がなくなります。制作するデータがどちらの形式に向いているかを判断する際も、「ピクセルで構成されているか、数式で構成されているか」という視点を持っておくと理解しやすくなります。

デザインデータをピクセル＝整数で管理する重要性

実務でデザインデータを扱ううえで意識しておきたいのが、「サイズや座標を、できる限り整数のピクセル値で管理する」という基本ルールです。

小数点のピクセル値が引き起こす問題

アートボードや要素のサイズ・座標に小数点を含むピクセル値（たとえば100.5pxなど）が使われていると、画像を書き出す際に、ソフトが小数部分を四捨五入・切り捨てなどの形で自動的に処理します。この処理によって、意図しない1px単位のズレが発生することがあります。とくにアイコンやボタンなど、規則正しく並べたいUIパーツで小数pxのズレが起きると、見た目のガタつきや、要素同士の間隔の不揃いといった形で目に見える問題になりやすい傾向があります。また、奇数や小数のピクセルサイズで作られた線や図形は、ブラウザやアプリ側でアンチエイリアス処理（輪郭をなめらかに見せるための処理）が働き、意図せず輪郭がぼやけて見えることがあります。

実務で整数管理を徹底するためのポイント

こうした地道な確認の積み重ねが、Webサイトの表示崩れや、印刷物の意図しないボケ・ズレといったトラブルを防ぎ、結果として手戻りの少ない制作につながります。代表的な制作ツールには、Photoshopの境界線整列機能、illustratorの「ピクセルにスナップ」、FigmaやAdobe XDの「Snap to Pixel」など、整数px管理を助ける機能があらかじめ用意されています。制作の最初にこれらの機能をオンにしておくだけで、意識せずとも整数px管理が徹底しやすくなります。

用途別に見る、解像度設定の目安

最後に、代表的な制作物ごとに、どの程度の解像度・ピクセル数を目安にすればよいかを整理します。あくまで一般的な目安であり、案件ごとの指定や納品条件を優先してください。

アイコン・favicon制作で意識したいピクセル密度

サイトのタブに表示されるfaviconや、アプリのアイコンのように極端に小さいサイズで使われる画像は、他の制作物以上にピクセル単位の設計が結果に直結します。favicon（一般的に16px×16px〜32px×32px程度で表示）のような小さな正方形では、線1本のズレやアンチエイリアスのにじみがそのまま見た目の粗さとして現れやすいためです。実務では、まず大きいサイズ（例えば512px×512pxなど）でロゴやモチーフをベクター形式でデザインし、そこから必要なピクセルサイズへ書き出す（各サイズで整数pxに丸めて個別に微調整する）という手順が一般的です。1つの元データから機械的に縮小しただけでは小さいサイズで潰れて見えることがあるため、サイズごとに視認性を確認する工程を挟むと仕上がりの精度が上がります。

ピクセルや解像度の基本を理解した後は、実際に手を動かしながらWebデザインの制作フローを体系的に学ぶことで、知識がより実践的なスキルとして定着します。

説明会無料・全国36校舎・オンライン参加可

よくある質問