メニュー

Webデザイナー速報

Web関連の勉強で面白いなと思ったことを配信していきます。
30代前半の未経験Webデザイナー。転職活動中。

ピクセル vs ドット

|

ピクセル

画素

読み方:がそ

別名:ピクセル

画素とは、ディスプレイ上の画面を構成する最小単位のことである。

「画素は情報を持ったとして存在する。」

「画像(PICture)の要素(ELement)であることから「ピクセル」とも呼ばれる。」

「ディスプレイは画面に縦横に敷き詰められた画素の集合によって表示を可能にしている。」

【IT用語辞典バイナリ】https://www.weblio.jp/content/%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB

ピクセル=画素。

PhotoshopやIllustratorを使っている時、拡大していくと表れてくる小さくて四角いものっぽいです。
どうやら、これが、もっとも最小な単位となるみたいです。
「点」とも表現できるようです。

「1ピクセルのズレも許さない・・・」なんていう恐怖のフレーズがあるとかなんとか・・・w

ところで、
picture element(ピクチャー エレメント)の略語だそうですが、
pixelの「x」要素はどこなんでしょうかw

ピクセルさんたちは、私たちに画像や文字を見せてくれている役目をもっているようです。
ピクセルさんたち、1つひとつに色がついていて、それらが集まって、画像や文字の形に見えるみたいです。

ドット

「ドットとは、ディスプレイプリンタで文字や画像を構成する最小単位となっているのことである。」

「コンピュータの画面では無数のドットの集合によって文字や画像が再現されている。」

「ドットは、ディスプレイプリンタ解像度を示す単位にも使用されている。」

【IT用語辞典バイナリ】https://www.weblio.jp/content/%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB

URLに書いてある「○○.com」。
この「.」のこともドットって呼んでます。

でも、今は文脈的にちょっと違う意味のようです。

引用を見たところ、「ピクセルと同じ意味じゃ・・・?」って感じがします・・・が、
よく引用を見てみると、ちょっとだけ違うみたいです。

「プリンタ」って言葉が増えていますし、
「画面を構成する」じゃなくて、「文字や画像を構成する」って言葉になっています。

まだフワフワしています。

今度は一歩引いてみます。

前回の復習ですが、
ハイパーリンクを使って、
ピクセルの引用ページ全体と、ドットの引用ページ全体をざっと見渡してみます。

3つ、違いがありそうな雰囲気です。

■1つ目
ピクセルのページでは、「モニタディスプレイコンピュータ」って単語が多いです。
ドットのページは、「プリンタインクジェット機印字装置」って単語が目立ちます。

■2つ目
ピクセルのページでは、「色情報」って単語があります。
ドットのページでは、「」って単語がありません。

■3つ目
ピクセルのページでは、「ディスプレイの解像度を示す」って書いてあります。
ドットのページでは、「ディスプレイやプリンタの解像度を示す」って書いてあります。
さらに、「プリンタの場合は、1インチあたりのドット数(dpi)を解像度の値として用いている。」とも書いてあります。

なんとなくですが、
意味合いはほとんど同じで、
使いどころが違うような雰囲気です。

「dpi」や「解像度」ってやっかいそうな単語は、また次回取り扱うことにします。
いろいろ考えると頭の中で火花が散ってしまうのでw

今は、「プリンタの場合は」って言葉に注目しておくことにします。

ピクセルとドットの違いーピクセル編

2つ目の違いから、
どうやら、ピクセルさんは、ディスプレイ上で「色」を持っているようです。

色彩検定3級で勉強しますが、
ディスプレイの中にあるピクセルって、RGBレッドグリーンブルー)の色しか持っていないみたいです。
この3色が混ざり合って、私たちにいろいろな色を見せてくれているらしいです。

「どんなに技術が進んでも、RGBの3つの色光で色再現していることだけは変わらない原理なのね」

【引用元:わかる!色彩検定2・3級問題集】

肌白い(#e3e3e3ぐらい)女の子が、ナイスなコメントをしてくれていますw

そして普段、私たちWebデザイナーは、
ドットではなく、
ピクセル」って単語を頻繁に使っているんじゃないかと思っています。

SB Creativeさんが出版した「Photoshpしっかり入門」っていう素敵な本にも、「ドット」って単語は出てきませんでした。
adobeのPhotoshopマニュアルでも、「ピクセル」って単語がほとんどメインに使われているようです。
他のいろいろなWeb関係の記事でも「ドット」って単語をメインに使っている記事は見当たりませんでした。

どうやら、私たちWebデザイナーにとっては、「ピクセル」って単語が重要っぽいです。

ピクセルとドットの違いードット編

では、ドットって何なんでしょうか?
どんな時に使う単語なのでしょうか?

まず、IT用語辞典バイナリさんは、
ドットに色情報があるかないかについて特に何も言ってませんでした。

もしも、ドットに色がなかったら、ピクセルさんとしっかり区別できそうです。

そんな素朴な疑問に、
三菱電機さんが、よくあるご質問(FAQ)コーナーで、答えの道標を書いてくれていました。

「液晶ディスプレイは精密度の高い技術で作られておりますが、画面の一部に点灯しないドットや常時点灯してい

るドットがある場合があります。」

「「画素」および「ドット」という言葉はISO13406-2 に従い、正確に表現すると、「画素」は「ピクセル

(pixel)」、「ドット」は「副画素」とも呼ばれ「サブピクセル(subpixel)」となります。」

「つまり、「画素」は実態のある副画素と言われる発光する点から構成され、「副画素」は、画素に色または階調

を与えるもの

【引用元:三菱電機】https://www.weblio.jp/content/%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB

さらに、NECさんも、「ドット抜けについて」というページで、
同じようなことを芸術的な絵を載せて記載してくれています。
ありがとうございます!

芸術的な絵と説明を参考にすると、

R(レッド)の色を持った副画素ドット
G(グリーン)の色を持った副画素ドット
B(ブルー)の色を持った副画素ドット

の絵があり、

これら3つの副画素が1つに合わさって
RGBの色を持つ画素(ピクセル)1個分になるみたいです。

と、いうわけで、
2点、はっきりしました。

ドットにも「色」はあった
●「ドット」が3つ集まって、1つの塊になったものが、「ピクセル」になる。

映画の「パ〇ーレンジャー」みたいですw

それでは、ドットって言葉はどんな時に使うのか?
確か、Webサイトやバナーを作るWebデザイナーさんたちの記事では、ドットという単語はほとんど使われていませんでした。

いろいろと記事を読んでみたところ、
説明していない単語を使ってしまい恐縮ですが、
どうやら、dpiっていう単語を使うときにメインで使われているようです。
dpiって単語は次回取り扱いますが、解像度の単位のことです。

また、IT用語辞典バイナリさんも、
ドットのページで「プリンタ」「印刷」とかの用語を多用しています。

以上から、
「ドット」って単語は、Illustratorで作った本のデータを印刷機を使って印刷する時に使われる単語かな?
って推測してみました。

「プリンターの解像度は、1 インチあたりのインクドット数(dpi)で表されます。」

「一般的に、1 インチあたりのドット数が多くなるほど、プリント出力は細かくなります。」

【adobe】https://www.weblio.jp/content/%E3%83%94%E3%82%AF%E3%82%BB%E3%83%AB

パソコンのディスプレイではなく、
「プリンター」って言っているところがポイントっぽいです。

どうやら、dpiは、プリンター(印刷機)の設定のお話みたいです。
なので、私たちのパソコンのディスプレイ上でdpiを設定してもあんまり意味はなさそうです。

Webサイトやバナーを作る私たちWebデザイナーは、印刷をしません。
Webの中で作品を見てもらうからです。

ということは、「ドット」って単語は、
使わなくてよさそうな単語ということになりそうです。

とはいえ、
IT用語辞典バイナリさんには、
パソコンのディスプレイ上においても、「dpi」「ドット」って単語は使われるって書いてあります・・・。
システムを作るデベロッパーさん(プログラマー)も普通に使っていたりします・・・。

きっと、文脈的に空気を読んで意味を汲み取ってってことなんでしょうかw

この一貫性のなさが、混乱してしまう要因だと思っていたりしますw

とりあえず、Web業界にいるんだったら、
文脈から空気を読んで、意味を考えなきゃいけないみたいですw

まとめ

● ディスプレイ(画面)について使う時は、「ピクセル」を使うよ!

● けど、「ドット」でもいいよ!

● 文脈から判断して意味を探るんだよ!