iPadのSafariはPC用のWebサイトがストレス無く閲覧できるようにデザインされていて、実際問題としてかなりその通りになっています。しかしiPad miniの登場で状況はかなり変わりました。iPadよりも画面サイズがかなり小さくなっていますので、現存のPC用のWebサイトは見づらくなっているのです。iPadだったら画面の拡大縮小をしなくても無理なく見られたものが、iPad miniだと拡大縮小が必要になってきたのです。
こうなると、PC用のWebサイトであってもフォントサイズを大きくし、PCからiPad, iPad miniのどれで見てもストレス無く閲覧できるようにした方が良さそうな気がしてきます。これについて、いくつかのポイントを挙げておきます。
- iPadは縦向きで使った時が一番感動的に良いです。PCの画面は横長ですが、印刷された本は縦長です。目の動きの負担を考えると、各行の横幅は比較的狭い方が楽で、縦長の方がやはり読みやすいと思います。したがってiPad向きなデザインを考えるとき、特別な事情がない限り、縦向きでの使用を一番重視することになります。
- iPad2, iPad miniの画面の縦向きの時の横幅は768pxです。一番大切な文字を読むことに関してはフォントは自動にスケールするので、実際のピクセル数はそれほど気にしなくて良いかも知れません。しかし768pxがどういう数字かはある程度考えた方が良いと思います。またiPad Safariは最大で980pxのWebサイトを自動的に縮小して768pxの実画面に納めます。最近のWebサイトは横幅が1000px以上のスクリーンを想定していますが、これらはまず第一にiPad Safariで見ると横にスクロールする必要があります。自動縮小無しiPad Safariでページを表示するためには、横幅を768pxにする必要があります。
- Retina Displayによってフォントが鮮明になり、小さいフォントでも読みやすくなります。しかし人間の指は小さくなりません。リンクやボタンはretina displayであっても大きくしておかないといけません。
- ボタンを快適に押すことができるサイズはAppleのiOS Human Interface Guidelinesによると44px x 44pxだそうです。例えばiPad non-retinaの実験 (横幅768px)。これはかなり大きくて、Webページのリンクは通常はテキストのフォントサイズ程度なので、前後の行間があることを考慮してもフォントサイズは15pxは最低欲しいということになります。しかし多くのWebサイトでは12px程度のサイズを使っているので、ボタンは快適に押せません。さらに横幅は1000px程度なので、これよりも20%程度画面は縮小されています。つまり既存のWebサイトのデザインでは拡大縮小しない状態ではリンクは快適に押せないのです。
- PCの画面も最近は高解像度化が進み、画面サイズが小さくなっています。例えばMacBook Airの11インチは1366px x 768pxの解像度です。2001年から発売された白いiBookは12インチのディスプレイで1024px x 768pxだったので、同じpxサイズの文字が25%程度小さく表示されていることになります。やっぱり字が小さくなった分、読みにくくなっています。
こういう現状を考えたとき、PCのウェブデザインを考え直していった方が良いのでは無いかと思います。高解像度のノートPC画面に合わせる意味でも、iPad（特にmini)に合わせる意味でもフォントサイズを大きくしてリンクを大きくし、ボタンも大きくしていく必要があるでしょう。画面に一度に表示できる内容は少なくなりますが、現状のWebサイトの大部分はナビゲーションや広告をたくさん表示しているだけなので、工夫次第で対策が可能なはずです。
Naofumi Kagami 