前回の情報を利用して、
各デバイスに見合ったWebブラウザ表示をするときの考え方。

今回はメモのようなもので、殴り書きに近いです。

※個人的な意見・指針です。
※間違ったり考えが偏ったりしてる可能性も高い内容です。

多様なデバイスによる弊害

多様なデバイスを大別すると、「スマホ」と「PC」にわかれると考えています。

その理由は、
PCでブラウジングするとき、スマホ向けに作られたサイトは見難く、
スマホでブラウジングするとき、PC向けに作られたサイトは見難い。

どう見難いのか。

それは二つがどう違うのかを理解すると見えてきます。

ディスプレイ環境の違い

噛み砕いて説明すると、

一般的にPCはある程度の大きさを持ったディスプレイで表示しているため、１画面に表示されたものを人間が認識できる情報量が多いです。
同じpxの物だとしても、実際の長さ・・・例えば1cmに含まれるpx数は少なくなり、例えば10pxのサイズで描画された文字も容易に認識することができます。
最近のスマホのように、ディスプレイサイズが小さいが高解像度であるほど、1cmに含まれるpx数は増え、より細かい描写ができるが文字としては例えば10pxのサイズでは読むのに苦労するサイズになったりするわけです。

用語を出すと、dpiの関係上、px固定表示ではPCで良く見えるものはスマホで見難く、スマホで良く見えるものはPCからするとサイズが大きく情報量不足・・・つまり冗長になってしまうということです。

表示お話をすると、ディスプレイに対する相対的なサイズ単位のdpやspなどを利用することになるわけですが、もう一つ決定的な違いがあります。

インターフェースの違い

それがタッチとポインタ・・・マウス操作の違いです。

画面に対してのタッチでのアクセシビリティと、マウス操作のポインタによるアクセシビリティは圧倒的な差があります。

タッチでは、そのタッチする指がまず画面を遮り邪魔します。そして指もディスプレイに対して大きく、先端がとがっているわけでもありませんので、タッチしようとしている場所と実際自分がタッチしている場所との差がずれることが多いです。一方マウス操作のポインタでは、画面を遮ることもなく、実際に目標に重なっていることを確認してからクリック操作を行うこともできるため相当の精度を持っています。

そしてブラウジングでは、リンクするためにはタッチかポインタでアクセスしていく必要があるため、リンクシンボルにコンテンツのサイズを合わせていくスマホ向けの表示をPCで見ると１画面あたりの情報量が少なく感じ冗長な・・・つまり、スクロールを多用する必要があるような形になってしまうわけです。

とまあ、個人的に思うことをあげてみました。

次回はこれらを元にどうすべきかの指針を提案します。

御覧いただきありがとうございました。