【ホームページ制作】スマートフォン対応の難しさ
皆さん、こんにちは。
スキル・バンク SEのW です。
iPhoneの新型が発表されましたね。
iPhone8とXとのことですが、9はどうなったんでしょうか??
発表会見の模様など写真で見たのですが、スマートフォンの画面は年々大型化している印象があります。
例えば、初代iPhoneのポイントサイズはW320×H480でした。
それがiPhone5になるとW320×H568、iPhone6はW375×H667と、少しずつ大きくなっています。
iPhoneXはW375×H812だそうです。
解像度(ピクセル)はさらに差が大きくなります。
初代iPhoneW320×H480に対して、iPhone6はW640×H1136。
これだけサイズが違うと、スマートフォン向けページで使う画像や文字のサイズをどこに合わせるか、非常に難しくなります。
パソコン向けホームページを制作する場合は、横幅はおおむけ950~980で固定として、それに合わせて画像サイズや文字サイズを決めれば表示は大きくは崩れません。
しかしスマートフォン向けホームページでは、事情が異なります。
例えば、画面横幅いっぱい表示するには、横幅=100%と指定しますが、元の画像サイズが媒体の画面サイズと異なると微妙にぼやけたりします。
またフォントサイズも%で指定する事が多いので、変な所で改行が入ってみたり、こちらのスマホでは2行表示なのにあちらのスマホでは3行になっていたり。。。
どのスマホでも綺麗に表示させるのは、とても難しいです。
結果、画面横幅いっぱいの画像がずらーっとタテに並ぶという、無難なデザインになります。
これはこれで使い勝手も良いのですが、他サイトと似たり寄ったりで、差別化が難しい。。。
元の画像サイズを大きい画面に合わせれば良いのでしょうか、容量が大きくなると表示速度が遅くなります。
画面が大きくなった事で掲載できる情報量は増えたのですが、かといって処理が重くなるほどは画像サイズも変えられず、非常に難しいです。
閲覧媒体にとらわれずにユーザーの必要な情報を発信する。
基本を忘れずにホームページを制作していきたいと思っています。