【今さら聞けなそうなptとかpx、画面サイズと解像度の話】

20180827_00

「この図形の幅を20px、この見出しを20ptで出力・・・」
普段何気なく、そしてなんとなく使っているptやpx。
それはまるでイモリとヤモリのような・・・あらためまして、高橋倫佑です。
画像は某高級焼肉店の特選カルビ焼きです。う~ん。美味しかった・・・さて!

フォトショップやイラストレーター、ドリームウィーバーを使用していてもpxやptどちらか出てきたことはありませんか。
webにおけるフォントサイズのポイント指定とピクセル指定の違い、そして解像度とはなんなのでしょう。

  1. px(ピクセル)ってなに?
  2. pt(ポイント)ってなに?
  3. 画像解像度と画像サイズの関係
  4. さいごに

px(ピクセル)ってなに?

パソコンの画面ってどういう風な表示の形式をとっているかご存知ですか。
実は、あの鮮やかな液晶も、このどでかいディスプレイも、私たちのパソコンの画面は小さな点の集まりで出来ています。
1px(ピクセル)とはその小さな点のことです。
1px(ピクセル)はパソコンの画面に表示できる情報の最小単位です。その点が100個並べば100px。さらに500個並べれば500pxといった感じです。
同様に、100pxの幅の画像と100px指定の文字幅は同じ大きさになります。

繰り返しになりますが、私たちのパソコンの画面は1つ1つのピクセルで表示されています。
ですから、webサイトをコーディングする時にはピクセルを指定することで、余白や画像の幅、そしてフォントの大きさを思った通りの大きさに表現することが出来ます。

pt(ポイント)ってなに?

1pt(ポイント)は72分の1inch(インチ)という長さの単位です。
それは現実世界、画面上関係なく、例えばフォントの大きさを72ptと指定した文字は、パソコンの画面解像度に関わらず、画面にメジャーをあてて計測すると1inch(インチ)です。1インチといっても私たちにはなじみ深い数字じゃないかもしれません。
なじみ深い言葉だと1インチは2.54 センチメートルです。72ptを指定すると2.54センチメートルの幅になるということですね。

pt(ポイント)はどういった時に使うのか。
チラシやフライヤー、ジャケットや雑誌、パッケージなど、データを紙に出力するDTPの世界では、フォントサイズ指定はpt(ポイント)で作られます。

pt(ポイント)をWEBで使うとなにか不便なことがあるのでしょうか。
あります。それはモニタの画面解像度(dpi)の問題です。

Windowsは96dpi、Macは72dpiという出力解像度ですが、OSの基本設定はそうであっても、使用するモニタの解像度によって実際の画面解像度(dpi)が左右されるので、最終的なdpiはパソコンによってバラバラです。

dpiというのは1インチ内にドットがいくつ並ぶかという数値です。
dpiがPCによってバラバラという事は、フォントサイズを72ptと指定された文字が何ピクセルになるかはPCによってバラバラという事です。
これでは、文字も含めて狙ったレイアウトに収めるのは至難の業です。

画像解像度と画像サイズの関係

画像自体の「画像解像度(dpi)」、windowsの「出力解像度(dpi)」モニタの「画面解像度(dpi)」など、解像度(dpi)という言葉がたくさん出てきました。
どれも解像度(dpi)ではあるのですが、今一度、この解像度とは何を示しているのでしょうか。

画像解像度が72dpiの画像と144dpiの画像では数値の大きい144dpiの画像のほうが精度が高い画像となっています。
解像度の単位に使用されるdpiとは、先ほども書きましたが、1インチあたりのピクセル(ドット)数という意味があります。72dpiのピクセル画像というのは、画像を構成するピクセルひとつの大きさが1/72インチであり、144dpiの画像ではひとつのピクセルの大きさが1/144インチということです。そして288dpiならばひとつのピクセルの大きさが1/288。非常に細かく精度が高い画像となります。

簡単に言うと、「dpiが高い=精度が高い=1ピクセルの大きさが小さくなっている」と、印刷時に小さなツブツブで印刷できるので輪郭がギザギザになってしまったり、モザイクタイルのようにならないわけですね。反対に画像解像度が低いと大きなツブツブで印刷しなければならないので輪郭の処理が荒くなってしまうわけですね!

なるほど、webの画像を印刷すると、ボヤーッとしてしまうのは画像解像度が低いからですね!

以下をご覧ください。
同じ「あ」という文字でそれぞれ300px×300pxの中に300dpiと72dpiで表現されたものの比較です。

ツブツブが小さい、きめの細かい、300dpiの勝ちですね。

この記事を読んだ人はこんな記事も読んでいます

20180829

その画像、重過ぎませんか!?ロスレス圧縮のススメ

ホームページを少しでも軽くしたい!少しでも表示を早くしたい!見た目にはわからないけど、とんでもなく画像を軽くする方法!

記事を読む

NO IMAGE

Myspaceの配置やデザインの編集の研究

今某マイミクさんのMyspaceの配置やデザイン編集を研究中なんです。

記事を読む

カトリノ

[制作事例]加藤建設株式会社「カトリノ」ホームページ制作

カトリノでは、増え続ける空き家のリノベーション再販事業にも取り組んでいます。

記事を読む

[制作事例]サンスポアイドルリポーター SIR ホームページリニューアル

2015年~16年にかけての5期生オーディション開催に合わせての大規模リニューアルでした。使用CMSはwordpress。

記事を読む

ウソのようなフォントの話

ウソのようなフォントの話 – webフォントのすすめ

webフォントって何?ってとこからメリット・デメリットについて書きました。

記事を読む

NO IMAGE

某コミュニティの熱論より

作って、はい終わり。な価格で、やり捨て価格でクライアントがホームページに期待するものを作れますかね。

記事を読む

NO IMAGE

最近「イイ!!」と参考にしたいと思ったWEBサイト その2

「簡単に作れて更新しやすい」ってのと「基本に忠実」

記事を読む

krazysalt

[制作事例]Krazy Saltホームページ公開スタート!

KrazySaltが歌い続けるなら、僕だってその支援のため創りつづけるさ。

記事を読む

スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング

スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング

webデザイナーさんに読んでもらいたい【スマートフォン用のデザインカンプ作成時に意識すべき各部のサイジング】とは・・・?

記事を読む

乙街道 ver.2.1.0 アップデート!

気づいた人がいたかもしれませんが数日かけてちびちびやっておりましたw

記事を読む

2024年11月23日
2017年3月26日
2017年2月23日