スマートフォンの画面は高解像度
もはや身近になったスマートフォン、データ通信の速度も各段に早くなり、googleやyahooを使った検索もカンタンで常時インターネットに接続！なんて方も多いと思います。
ただ、時々表示されている画像が若干汚く見えるなんてことありませんか？
それはスマートフォンの画面が高解像度だから起こっているんです。
小さな画面サイズでフルHD並の解像度
スマートフォンの画面、年々大きくなってきているような気もしますが、片手で扱えるくらいの大きさですよね？
その画面には、綺麗に映って見えるテレビ画面以上の解像度が「ぎゅっ」っとつまっているんです。
画面への表示は小さな点の集合で出来ているというお話を以前したかと思います。
その点の密度が高くなればなるほど、細かく色分けができるので綺麗に映すことができるようになります。
現在では、スマートフォンの機種によって異なりますが、フルHDかそれ以上の解像度を持つスマートフォンが多く発売されています。
1pxの考え方が異なる
表示できる点が小さくなったなら綺麗に映るはずですが、表示させる画像によっては、残念ながらぼやけて映ることがあります。
簡単にざっくりとした説明をしますね。
スマートフォンの画面は、1pxをそのまま1pxとして扱うのではなく、それをさらに4分割したものを1pxとしてみなしています。
それぞれのピクセルが2倍に高密度化されているという計算になりますね。
なぜこのような事をするのかというと、そのまま1pxとして扱ってしまうと、画面に表示される文字や画像が縦横2分の1、面積にして4分の1になってしまいます。これでは見にくいですよね。
こういった現象を避ける為に、4px分の箱を1pxとしてみなし、サイズ比を保つ処理がされているんです。
例えば横幅640pxを持つスマートフォンの場合、320pxとしてみなしていることになります。
この考えは画像のみ
文字サイズや余白については、従来通りの考え方で大丈夫です。
画像のみ、縦横合わせて4pxを1pxとしてみなします。
慣れるまでややこしい部分なので、注意してください。
Web制作の場合には画像サイズに注意
4色使えるのに1色で塗りつぶしてしまったら、当然ぼやけたり荒れたりします。
これがスマートフォンの画面で画像がぼやける原因です。
それではどうやって対処するのか・・・
それは、「縦横2倍のサイズで画像を作る」ことで回避します。
4pxで1pxになるなら、最初から大きなサイズで作ってしまえ。という考え方ですね。
横幅100pxの画像を表示させるなら、横幅200pxの大きさで画像を作ってあげればOK。これでスマートフォンの画面でもぼやけることなく表示できます。
画像の解像度を上げても解決しない
「画面の解像度が高いなら、画像サイズじゃなくて解像度を上げればいいじゃない」という声が聞こえてきそうですね。
試しに比べてみましょう。
こちらが350dpi、横400px、縦300pxで作られた画像です。
そしてこちらが72dip、横400px、縦300pxで作られた画像です。
ちなみに写真は、新潟市中央区にある朱鷺メッセです。
どうです？違いありますか？
「解像度が違う」と書いてあると異なるように見えてしまいがちですが、見比べると違いが無いことに気がつきます。
印刷には解像度が重要になってきますが、画面への表示にはあまり関係がありません。
データ容量が増えるというデメリット
画像のサイズを縦横2倍で作れば、ぼやける心配がなくなりますが、別の心配が出てきます。
画像サイズが大きくなるという事は、画像のデータ容量も増えるという事になります。
ここで問題になってくるのが、「表示まで時間がかかってしまう」という事です。
検索して、欲しい情報が載っているページを見つけても、なかなかページが表示されないと、戻るボタンで検索一覧へ戻ってしまう事はありませんか？
せっかく見てもらえるチャンスだったのに、これでは勿体ないです。
このページ表示までの速度へも、充分考慮する必要がありそうです。
また、契約条件でのデータ通信容量も気になるポイントです。
各社で展開されているデータ通信サービスですが、2Gや5Gなど、契約している容量を超えると回線速度が落ちてしまうアレです。
何でも2倍にして、大きな画像を沢山読み込ませてしまえば、データ通信容量を圧迫してしまいます。
「ぼやけない綺麗な画像を見てもらいたい」という点と、「画像ファイルのデータ容量が増えてしまう」という点は比例してしまうので、なんともしがたいジレンマです。
スマートフォン専用にページを設けてある場合であれば、ページをさらに分割する。javascriptなどの手段で、画像の読み込みを遅延させる。などの手段で解決していくほかなさそうです。
レスポンシブWEBデザインの場合は要注意
レスポンシブWEBデザインで作られたページの場合、読み込む画像も1つです。スマートフォンに対応させたサイズで作られた画像が、パソコン用の表示の時には逆に大きすぎる場合があります。その場合は、都度CSSを使ってサイズの指定をしてあげる必要があります。
ですがこの時、画像を縮めたことによってぼやけてしまう場合もあるので、パソコン、タブレット、スマートフォンのそれぞれで表示の確認をするようにしましょう。
画像に含ませる文字は2倍のフォントサイズ
画像に文字を使う場合、タイトルやロゴの文字を画像化する場合も同様です。
2倍のフォントサイズを指定しなければ、ぼやけた文字になってしまうので、Webデザインをする時には、この点にも注意してください。
画像を使わず、文字を入力する場合は特に心配する事はありません。
ただし、明朝体を使いたい場合、CSSで書体を指定するかと思います。
iOS端末は明朝体を持っているので出せますが、Andoroid端末には明朝体が入っていません。なので、Andoroid端末はゴシック体で代替されてしまうので注意してください。
どうしても明朝体で表現したい場合は、Webフォントを使うようにしましょう。
まとめ
・スマートフォンの画面では、画像については4pxで1pxとして扱う
・画像は表示させたい画像幅の2倍サイズで作る
・画像のサイズが大きくなると、データ容量も増えてしまう
・レスポンシブWEBデザインで作る場合、パソコン表示の時に画像が大きすぎる場合があるので、その時はCSSを使ってサイズ指定をする
