みなさん、タブレット使っていますか?
私はNexus7を愛用しています。
スマートフォンに比べて画面も大きいし手のひらサイズなので、妻も私もその使い易さに手放せなくなっています。
仕事で構築中サイトの表示確認作業をしていても、夕方になると晩御飯のレシピを検索したい妻にいつの間にかキッチンへ持っていかれます。
仕方ないから私は冷蔵庫の脇でNexus7を持って確認作業です(笑)
そんなタブレットからの閲覧に対して、WEBサイトはどちらのレイアウトデザインを見せるべきなのでしょうか・・・PC版?スマートフォン版?
勝手に論争してみました!
タブレットの特性
みなさんご存知のように、タブレットはスマートフォンと同じく指で軽く押す「タップ」、そしてタッチパネル特有の「フリック」や「スワイプ」で操作します。
フリックは、一回指で画面を押してさっと上下左右に動かす操作で文字入力する時によく使いますね。「あ」を押すと上下左右に「い」「う」「え」「お」と出て入力したい文字の方向へさっと指を動かすあれです。
スワイプは、スクロールだったら上下、撮影写真を閲覧する時なんかは左右にすーっと流すように動かすあれです。
つまり、PCとスマートフォンとどっち寄りか、と聞かれれば「操作性」はスマートフォンなのです。
では画面(ブラウザ)サイズはどうでしょう?
PCサイトの横幅は様々ですが、例えば980px前後としましょう。
スマートフォンを縦向きにした時の横幅はこれまた機種は様々ですが、320pxとします。
転じてタブレットは10インチなら768pxです。
よって、PCとスマートフォンとどっち寄りか、と聞かれれば「画面サイズ」はPCなのです。
「操作性」はスマートフォン寄り・・・「画面サイズ」はPC寄り・・・。
さて、タブレット端末でアクセスした人にはどちらのレイアウトを見せるのが最善なのでしょうか?PC版?スマートフォン版?
弊工房の見解
弊工房の見解は「スマートフォン版レイアウトを見せる」としています。
一番の理由は「操作性」。
”指で操作する”という事はマウスでクリックとはそもそも動きが違います。
リンクひとつボタンひとつ「指」でタップできる範囲の確保が必要です。
PC版サイトを表示させるとやはり文字のサイズが小さくなりますし、総じてリンク文字も小さくなります。
特に男性は指が太いので誤って隣のメニューリンクをタップしてしまって「あぁ!」ってなります。(スマートフォンの話ですが男は指が太いのです → 「あ〜もう見にくい!」と友人が叫ぶ)
小さいが故に、拡大してはタップまた拡大してはタップ、の繰り返しでは操作性、快適性共に良いとは言えません。
こんな意見も!
ただ、女性デザイナーと雑談中こんな意見ももらいました。
「タブレットで見た時にスマートフォンレイアウトになっていると、普段見ているPCサイトと違うからページの場所を探しちゃうのよね・・・だからPC版レイアウトで見せてほしい!」
よく利用するPCサイトではページ移動の”慣れ”があって、スマートフォンレイアウトに変わる事によってリンクの場所が分からなくなるようです・・・。
なるほど、勉強になります。
で、聞いてみました。
私「でも、文字が小さいけえいちいち拡大せんといけん事ない?」
デザイナー「うん、それは面倒くさい・・・」
む、難しい課題です。
こちらの意見だとスマートフォンでアクセスした時ももれずに迷ってしまうからです。
こういう意見もありますが、やはり操作性を重視してスマートフォン版を見せる事になるでしょう。
さらにもっと良い解決策は?
もっと突き詰めて理想の解決策。
それはタブレット専用デザインを作成して見せる事。これだと思います。
ただ、デメリットが多く、修正があった時に作業が増え作業漏れの可能性が高くなる、わざわざ作成しなくてもスマートフォンレイアウトでも十分補える、はたまたクライアントの予算の問題・・・で採用された事はありません。かくいう弊サイトも用意しておりません。
将来端末ももっと増え画面サイズも年々変わっていくと思いますが、今のところ弊工房では下記のように提案させて頂いています。
タブレットからのアクセスには
- スマートフォン版レイアウトを見せる
- その中でも画面サイズにより自動でレイアウトが広がるよう設計
- 併せて画像のサイズもひとまわり自動で大きくなる
ようにしています。つまり、タブレットとスマートフォンの中でだけレスポンシブデザインを採用です。