モバイルサイトに求められるのは、見たいように見れるという選択肢

▼ここにあるのは、WordPress で作った StudioBRAIN の CMS サイト。コンテンツはブラウザから作成し、モバイルサイト用に別途用意している訳ではなく、一カ所で管理しています。下はPCで表示しているところ。

▼それを、iPad で表示してみると、デザインはそのままだけど、メディアクエリにより横と縦、それぞれにぴったりレイアウトされている。

▼さらに、最下部には次のような切り替えボタン。（ちなみにPCからのアクセスでは、このボタンは表示さあれません。あっても良いんですが、この例ではUSER-AGENTにより、判別して非表示としています。）では、さっそくタップしてみると、

▼はいこの通り、モバイル向けのデザインにチェンジ。ここでは、jQuery mobile を使った専用テーマを読み込ませています。まあ、iPad ならもともと PC向けサイトでもストレスなく見れるんですが…

▼問題はそれより小さいスマートフォンでの表示。読み込んだのは、iPod touchですが、見え方は同じなので、 iPhone を想定してください。ここでもメディアクエリが効いているので、いつもと同じ PC サイトで違和感はないものの、さすがに縦も横も窮屈。

▼そこで、今回も最下部に表示された切り替えスイッチをポチ。

▼はい。こちらもこの通り、モバイル向けのデザインにチェンジしました。この例では、なぜか異なるページをキャプチャしてしまいましたが、縦も横もこのとおり。余分なコンテンツを削ぎ落し、必要なコンテンツのみを表示させる事ができました。

結論、スマホとはいえ、いつものPCサイトを見たい人もいる。とはいえ、専用レイアウトを見たい人も当然いる、さらには縦が好きな人や、横が好きな人もいる。
制作者はこれで見なさい！と決めて作ると楽なんですが、それではユーザーに優しとは言えません。強制的にそれを見せつけるんじゃなくて、ブラウザサイズが多すぎるPCサイトは可変レイアウトで常に崩れないように配慮しつつ、見せたいコンテンツが異なるモバイル端末用には専用デザインで見れる選択肢を設けたい。

以上、あの手この手で見る人に自由な見方を提供することを考えてみました。