ptとpxの変換方法は？ポイントとピクセルの単位換算・変換方法を例題付きで解説！

ptとpxの変換方法は？ポイントとピクセルの単位換算・変換方法を例題付きで解説！

デザインやコーディングの現場では、さまざまな単位が登場します。

その中でも特によく使われるのが、「pt（ポイント）」と「px（ピクセル）」という2つの単位です。

Photoshopや印刷物のデザインではptが使われることが多く、一方でWebデザインやCSSではpxが主流となっています。

この2つの単位は似ているようで、実はしっかりとした違いがあります。

フォントサイズを設定するときや、デザインデータをコーディングに落とし込むときに「ptをpxに直したい」「pxをptに換算したい」と感じた経験がある方も多いのではないでしょうか。

本記事では、ptとpxの変換方法・単位換算の仕組みを、例題を交えながらわかりやすく解説していきます。

基本的な変換計算式から実践的な使い方まで、しっかりと理解できる内容になっていますので、ぜひ最後までご確認ください。

ptとpxの変換方法！基本の換算式と結論をまず押さえよう

それではまず、ptとpxの変換方法について解説していきます。

結論からお伝えすると、ptとpxの変換には「1pt ＝ 1.333…px」という関係式が使われます。

これは、1インチが72ptであり、かつ標準的な画面解像度が96dpi（1インチあたり96ピクセル）であることを基準にした計算です。

この前提を押さえておくことで、あらゆる換算がスムーズに行えるようになります。

pt（ポイント）とは何か

pt（ポイント）は、印刷業界で長年使われてきた長さの単位です。

1ptは「1インチの72分の1」として定義されており、絶対単位のひとつに分類されます。

フォントサイズの指定でよく使われ、WordやIllustratorなど印刷向けのアプリケーションでは主流の単位と言えるでしょう。

「9pt」「10.5pt」「12pt」「14pt」といった表記に見覚えがある方も多いはずです。

印刷物を前提とした単位のため、物理的な長さが固定されているという特徴があります。

px（ピクセル）とは何か

px（ピクセル）は、デジタルディスプレイを構成する最小単位のことです。

「画素」とも呼ばれ、画面上の点ひとつひとつを指します。

Webデザインやアプリ開発の現場では非常に広く使われており、CSSやHTMLでのサイズ指定においても頻繁に登場します。

pxは相対的な単位であり、画面の解像度（dpi）によって実際の物理的な大きさが変わる点が特徴です。

ただし、Webの世界では96dpiを基準として扱うのが一般的です。

変換の基準となる96dpiとは

ptとpxを変換する際に鍵となるのが、「96dpi（ドット・パー・インチ）」という解像度の基準です。

dpiとは「1インチあたりに並ぶドット（ピクセル）の数」を意味します。

Webブラウザの標準解像度は96dpiに設定されているため、1インチ ＝ 96pxという計算が成り立ちます。

一方で1インチ ＝ 72ptという定義があるため、96px ÷ 72pt という計算から「1pt ＝ 約1.333px」が導き出されます。

この基準を頭に入れておくと、変換の考え方がぐっとクリアになります。

ptからpxへの変換方法！計算式と例題で徹底理解

続いては、ptからpxへの変換方法を確認していきます。

実際の計算式と具体的な例題を使って解説しますので、実務にもすぐに役立てることができます。

ptをpxに変換する計算式

ptをpxに変換するときの計算式は次のとおりです。

つまり、ptの数値に1.333（または4÷3）を掛けることでpxが求められます。

シンプルな掛け算ですので、覚えてしまえば素早く換算できます。

小数点以下の値が出ることも多いですが、実際のデザイン作業では四捨五入して整数で扱うことが一般的です。

ptからpxへの変換例題

いくつかの具体的な例を見てみましょう。

特に12pt ＝ 16px、9pt ＝ 12pxといった対応は、Webデザインでよく出てくるパターンです。

頭に入れておくと作業効率がグッと上がります。

よく使うptとpxの変換一覧表

実務でよく使われるptとpxの変換値をまとめた一覧表をご確認ください。

pt（ポイント）	px（ピクセル）
6pt	8px
7.5pt	10px
9pt	12px
10pt	約13.3px
10.5pt	14px
12pt	16px
14pt	約18.7px
18pt	24px
24pt	32px
36pt	48px
48pt	64px
72pt	96px

この一覧表を手元に置いておくだけで、いちいち計算せずに換算できるので非常に便利です。

pxからptへの変換方法！逆換算の計算式と例題も解説

続いては、pxからptへの逆換算（変換）を確認していきます。

Webのデザインデータを印刷物に流用するケースや、フォントサイズをpt単位で管理したい場面などで役立つ知識です。

pxをptに変換する計算式

pxをptに変換するときの計算式は次のとおりです。

pxの数値に0.75を掛けることで、ptに換算できます。

または「pxを4で割って3を掛ける」という計算でも同じ結果が得られます。

ptはpxよりも値が小さくなるため、Webで使っているpxの数値よりも少し小さい数になります。

pxからptへの変換例題

具体的な変換例を確認してみましょう。

特に16px ＝ 12pt、24px ＝ 18pt、32px ＝ 24ptはよく登場する対応値です。

セットで覚えておくとスムーズな作業につながります。

pxとptの変換でありがちなミスと注意点

変換を行う際によく起こるミスや注意点も押さえておきましょう。

特に印刷用の解像度（300dpiや350dpiなど）を使う場面では、96dpiを基準とした換算式はそのままでは使えません。

Webと印刷で解像度が異なる点を常に意識しながら変換を行いましょう。

また、Retinaディスプレイなど高解像度デバイスの普及により、論理ピクセルと物理ピクセルが異なる場合もあるため、用途に応じた理解が必要です。

ptとpxの使い分け！WebデザインとDTPで変わる単位の選び方

続いては、ptとpxをどのように使い分けるべきかを確認していきます。

変換方法を知るだけでなく、それぞれの単位がどの場面に向いているかを理解しておくことも非常に重要です。

Webデザイン・コーディングではpxが主流

HTMLやCSSを用いたWebデザインの現場では、pxが最もよく使われる単位です。

ブラウザの基準解像度が96dpiに設定されているため、pxを基準にすることで画面上での表示サイズを一定に保ちやすくなります。

font-sizeやwidth、heightといったプロパティでもpxの指定が直感的でわかりやすいとされています。

ただし近年では、レスポンシブデザインの観点からem・rem・vwなどの相対単位も積極的に使われるようになっています。

pxはあくまでも基本単位として理解しつつ、状況に応じた単位選びができると理想的でしょう。

印刷・DTPではptが標準的な単位

チラシ・パンフレット・名刺など印刷物のデザインを扱うDTP（デスクトップパブリッシング）の世界では、ptが標準単位として広く使われています。

InDesignやIllustrator、Wordなどのアプリケーションではデフォルトでptが使われていることが多く、印刷業界の慣習として定着しています。

本文テキストには10.5ptや11ptが使われることが多く、見出しには14〜18ptといった数値が設定されることが一般的です。

印刷物は物理的な出力を前提とするため、絶対単位であるptの方が管理しやすいという側面があります。

フォントサイズの単位換算をマスターして作業効率をアップしよう

デザイナーとコーダーが協力してプロジェクトを進める現場では、ptとpxの変換を素早く行えるスキルが作業効率に直結します。

デザインデータがptで作られているのに、コーディング担当者がpxに直す必要がある場面は非常によく起こります。

変換表を手元に置いておく、変換ツールをブックマークしておくといった工夫で、無駄な計算時間を省くことができます。

また、よく使う変換値（12pt＝16px、10.5pt＝14px など）を暗記しておくだけでも、日々の作業がスムーズになります。

単位の基礎知識をしっかり持った上で作業を進めることが、クオリティの高いアウトプットにつながるでしょう。

まとめ

本記事では、ptとpxの変換方法・単位換算の仕組みについて、基本の計算式から例題、使い分けまで幅広く解説しました。

最後にポイントを整理してみましょう。

ptとpxの変換には「1pt ＝ 約1.333px」「1px ＝ 0.75pt」という基本関係式があります。

この計算は、1インチ ＝ 72pt、1インチ ＝ 96px（96dpi基準）という2つの定義から導かれるものです。

ptはWordやIllustrator、InDesignなど印刷・DTP向けのアプリケーションで主に使われ、pxはWebデザインやCSSコーディングで広く使われる単位です。

それぞれの特性を理解した上で正しく換算することで、デザインと実装のズレを防ぐことができます。

よく使う変換値は暗記しておき、一覧表も活用しながら効率よく作業を進めていきましょう。

ptとpxの変換をマスターすることで、WebデザインでもDTPでもより自信を持って単位を扱えるようになるはずです。