デバイスを回転させた時の話

少し前に回転させた時にフォント・サイズを変えるとまずいんじゃないかというようなエントリーを書いたんだけど、同じような事を取り上げつつまったく逆の結論にたどり着いてるFluid grids, orientation & resolution independenceというエントリーを見つけたので読んだ。二ヶ月ほど前のエントリーなので、筆者も今はもう違う意見を持っているのかもしれないけど、ざっと要約してその感想を書く。

Fluid~では、Responsive Web Designでは回転により描画領域が拡大した時に画像等のサイズを追随させるがフォント・サイズはそのままなことが多いため、画像と文字のレイアウトのバランスが崩れるという問題が起きることを指摘している。この問題は16:9の縦横比を採用しているタブレット(例えばGalaxy Tab)などで顕著になり、Media Queriesで細かくレイアウトを調整するにも限界があるので、描画領域に合わせてフォント・サイズを調整することにより解決すると良いのではないかと結論づけている。

この解決法を否定するのはごく簡単だと思う。デザイン上の都合でユーザーに制御不能な変化を押し付けているとかそんな感じでぶった斬れる。でも、それはあまりにも浅い気がする。デザインとコンテンツはどちらが先でどちらが後などというものではなく、良いデザインを採用することでコンテンツをより良い形で提供できるというような相関関係にあるはずだ。そういう意味ではこの描画領域のサイズによる画像と文字のレイアウトのバランスの変化を最小限に抑えるためにフォント・サイズを変更するというアイディアそれ自体は素晴らしいものだと思う。

問題なのは回転時にそれを行うことと、デバイスへの対応の限界を知っていながらiPadを強く意識したpx単位でのブレークポイント(which in my case 768px - an iPad in portrait orientation)を採用したこと。

回転時に行うのはまずそう

前に書いたエントリでも触れたようにフォント・サイズの変化にユーザーの目がついていかない可能性があるという問題がまず挙げられる。特にタブレットは紙の新聞のように目に近い位置で持たれるものだし、老眼はもちろん強めの乱視持ちとかでもクリティカルな問題になるんじゃないかと思う。それに回転したい時というのはそのレイアウトでは読みづらいので、今より画面を広く(狭く)して読みやすくしたいという時のはず。となると回転時にレイアウトを維持しようというこのテクニックはちょっとユーザーには的外れのテクニックなんではないだろうか。

iPad以外のタブレットが不燃ゴミなのは確かだけど

これはもう「Androidデバイスへの対応がメンドイのでiPadだけ対応してみました~」以外の何者でもない印象を受ける。現実的な妥協案だとは思うけど、それならばコンテンツのレイアウトを根拠にしたブレークポイントを採用した方が良さそう。特にエントリーで取り上げられているような縦方向でのバランスを取る時にはフォント・サイズだけではなく行ボックスの高さ(line-heightプロパティー他)の調整も必須になってくるはずなので、それを考えるともっとレイアウトに注目してブレークポイントを探った方が読みやすいデザインになるはず。


とは言うものの回転時にMedia Queriesを発火させない方法などはなかなか難しいと思う(ちょっと思いつかない)ので、現状では最良に近い解の1つではあるような……。という所あたりまで考えて、もしかしたら回転時にスケーリングが狂うバグとみなされているiOSの挙動は、ここらへんのことを考えて練りに練られた仕様なんじゃないかとか少し思った。