先日、会社からiPad miniが支給されました。実際にiPad miniを手にとってまず感じたのが、予想以上に軽くて薄いこと、縦置きと横置きのどちらで使おうか、という2点です。
タブレットは縦向き?横向き?
当初は、手のひらに収まることから、なんとなく縦置き(ポートレート表示)で使用していましたが、カバー装着した後は横置き(ランドスケープ表示)を主として使用するようになりました。そもそも、iPadには「デフォルトのデバイスの向き、またはユーザの期待に従ったデバイスの向きがない」という概念があります。
この為、WEBサイト制作時にタブレットサイトをデザインする際は、ポートレート・ランドスケープどちらもを意識することが求められます。
参考:iPadヒューマンインターフェイスガイド ライン(PDF)
▲iPad mini(7.9インチ)とXPERIA(4.0インチ)とのサイズ比較。iPad miniはXPERIAを3倍にしたぐらいのサイズで、スマートフォンで感じていた画面の小ささからくるストレスは全く感じない。
Yahoo JAPANのタブレット対応が素晴らしい。
以下は、YAHOO!JAPANのタブレット対応サイトをiPad miniで表示させた場合です。
ランドスケープ表示時は3カラムで構成されますが、ポートレート表示になると2カラムに切り替わります。それだけでなく常に最新情報を入手できる状態を保つことができ、SNSと連携させるなどカスタマイズを楽しむことができます。
このようなタブレットサイトを意識したサイト事例は、レスポンシブウェブデザインを推奨していく上で今後も調査を続けていきます。
タブレット対応サイトは「PCサイト表示が向いている」?
たしかに、タブレット端末でのディスプレイサイズはPC寄りであるため、PCサイトを表示させることで間に合わせることは可能です。
しかしレスポンシブウェブデザインを意識せずに、ガチガチにサイト全体の横幅を固定サイズでサイト制作をおこなった場合、横スクロールが発生してしまうか、サイト全体が縮小表示されてしまい、ピンチアウトしなければコンテンツを読み取れないといった事態に陥ってしまいます。
以下は、min-width: 1000px;で指定してあるPCサイトをタブレットで閲覧した例です。
PCでサイトを閲覧する際は違和感なく表示されますが、タブレット端末を縦にした場合、画面の下半分に大きな余白ができてしまい違和感を感じてしまいます。
逆に、サイト全体の横幅を可変にした場合はどうでしょうか。以下は、widthを100%で指定した場合の表示例です。
デバイスの横幅に応じて画面いっぱいに広がるように拡大してくれますが、実際にiPad miniで表示させてみるとレイアウトに偏りが生じてしまい強引さを感じてしまう内容に陥ります。
タブレット対応サイトを別ソースで立ち上げている事例
以下にPC・スマートフォン・タブレットサイトをそれぞれ別URL、別ソースで構成されているお店をご紹介いたします。
PCサイト
http://www.napolipizza.jp/
PCサイトです。特にこの場で述べるまでもなく違和感を感じることのないPCサイトです。
スマートフォンサイト
http://www.napolipizza.jp/iphone/
サービスの特性上、いつ(営業時間)どこ(位置情報)で何をどのように注文できるかがキーポイントになることから、これらをスマートフォンサイトで適切に表示できていると言えます。
タブレットサイト
http://www.napolipizza.jp/ipad/
ポートレート表示時はきっちり表示されていますが、メインとなるコンテンツの画像サイズがwidth=”495px”で固定されているために、ランドスケープ表示時では左右に余白ができてしまいます。(赤枠で囲ってあるところ)
せっかくiPad表示用にサイトを制作してあるにも関わらず、横向きにしたときは、両サイドのスペースに余白が生じてしまうのが惜しいところです。
それと同時に考えなければいけないポイントが、上記事例はPCサイト、スマートフォン対応サイト、タブレット対応サイトの3ソースから構成されておりワンソースマルチデバイスに対応していない点です。
ソースが3つに別れているので、例えば新着情報の1箇所更新するなどの些細な更新でも3サイト分の更新の手間が発生し、あまり効率的とは言えません。
多くのWEBサイトがPC表示とスマートフォン表示を意識してサイトを制作している中で登場したタブレット端末。今後さらなる表示領域を備えたデバイスが登場していくことを想像すると、今このタイミングでレスポンシブウェブデザインについて取り組みをスタートさせることが、WEBの管理を効率的に行える近道と言えます。
参考サイト:
タブレットサイトに対応させるためのポイント(各タブレット端末の解像度比較表付き)
サイト横幅を決める上で読んでおきたいテクニック