iPad専用にデザインするということはどういうことか

iPad miniの登場でタブレットに最適化されたウェブサイトが必要になってきました

スマートフォンとiPadなどのタブレットが急速に普及したため、同じコンテンツを異なるスクリーンサイズに合わせてデザインする必要が出てきました。その中でもスマートフォンは先に普及し、またスクリーンサイズがPCと大きく異なるため、スマートフォン専用のサイトを用意したり、あるいはスマートフォン専用のアプリを用意することが多くなりました。

一方でiPadなどのタブレットでは事情が複雑です。

iPadのSafariは横幅が980pxのウェブサイトであれば縦向きの画面に納められるようにデザインされています（実際のピクセル数は768pxしかないのですが、980pxのサイトを768pxに圧縮します）。しかしこれだとリンクが非常に小さくなるので、リンクをタップするときにかなり神経を使います。AppleのiOS Human Interface Guidelinesではボタンのサイズを44px x 44px以上にすることが推奨されていますが、それよりもずっと小さくなります。

今までの10インチのiPadであれば、それでも何とかなりました。神経を使えばリンクをクリックすることができました。しかし7.9インチのiPad miniになるとさすがに難しくなります。画面の拡大縮小をしないとPCウェブサイトのリンクはクリックできません。

そろそろタブレットに最適化されたウェブサイトが必要になってきたのではないでしょうか。

タブレット専用のサイトを作るべきか、それともPC用のウェブサイトを作り替えるべきか

国内のスマートフォンの普及率はまだ50%以下です。したがってすべてのユーザをカバーするようなウェブサイトを作るためには、1) PC用, 2) スマートフォン用, 3) フィーチャーフォン用のウェブサイトが最低でも必要になります。さらにタブレット専用のウェブサイトを作るとなると４種類のウェブサイトを作ることになり、かなりつらくなってきます。

やはりタブレット専用のウェブサイトを作るよりは、PC用ウェブサイトと共用のものが作れれば楽です。そうなると7.9インチのiPad miniでも快適に見られるようなPC用ウェブサイトを追求することになります。

PC用のウェブサイトは無駄だらけ？

以下に示すのはasahi.com用のiPadアプリの一面です。

以下はPC用ウェブサイトのトップページです（赤枠は私が付けました）。

内容を比較するとiPadアプリの一面の内容はPC用ウェブサイトの赤枠だけです。ざっと見たところ、PC用ブラウザの画面の1割程度だけがiPadアプリの一面に使われています。PC用ウェブサイトの赤枠以外は、iPadアプリではすべて省かれているのです。

なぜiPadアプリではPC用ウェブサイトのコンテンツの9割を省くことができたのでしょうか。PC用ウェブサイトのトップページコンテンツの9割は無駄なのでしょうか。

PC用ウェブサイトはナビゲーション用リンクが異常に多い

先ほどのPC用ウェブサイトのトップページを内容ごとに色分けしました。

赤がiPadアプリの一面にもあった、いわゆる「新聞の一面記事」です。青はナビゲーションです。カテゴライズしたナビゲーションではなく、「もしかしたらこんなことに興味があるんじゃないかな？」ということでリストアップされたものです（カテゴライズしたナビゲーションはトップメニューにあります）。そして緑が広告です。さらに黄色は他のページ（この場合は社会欄）の抜粋リンクです。

こうしてみると青のナビゲーションリンクが異常に多いことがわかります。また下にスクロールしていくと、黄色の他ページ抜粋リンクが延々と続きます。

青のナビゲーションリンクの目的は、人気記事を前面に出すことです。少しでも読者におもしろがってもらえる内容を早めに見せておくためのリンクです。

黄色の他ページ抜粋リンクは、トップメニューを経由しなくても、下にスクロールするだけで他ページの内容が見られるようにした工夫です。クリックするよりもスクロールした方がユーザは楽だろうという配慮です。これもナビゲーションリンクの一種です。

iPadアプリにはこういう青と黄色のリンクに相当するものがほとんどありません。

PC用ウェブサイトもナビゲーションリンクを減らせば簡単にiPad向けになる

PC用ウェブサイトのナビゲーションリンクを省き（青と黄色のリンク）、そのページ固有のコンテンツに絞ればフォントサイズを大きくすることができ、iPad miniでも簡単に操作できるものになります。そのためには以下のことを考慮すれば良いはずです。

1. トップナビゲーションメニューを経由したページ切り替えを楽にし、黄色の他ページ抜粋リンクを不要にする。
2. 青色のリンク（ランキングなど）は別のページにまとめ、これもトップナビゲーションメニューから簡単に移動できるようにする。

トップナビゲーションは必要か

実はトップナビゲーションメニューも不要かもしれません。Asahi.comのiPadアプリではトップナビゲーションメニューは前面に出さず、実際の新聞の紙面のページを送る間隔で、１ページずつ、すべてのページを切り替えていくのがメインのナビゲーション形式です。ページ切り替えは素ワイプジェスチャーで行います。

このナビゲーションは全体を眺めることに重点を置いています。ナビゲーションメニューの中から特定のカテゴリーを選んで、そのページに移動するのではなく、すべてのページをざっと眺めながら興味を引いたコンテンツを見るのに向いています。このナビゲーションをうまく実装できればメリットは明確です。いままでコンテンツをつまみ食いしていたユーザが、全体を眺めてくれるようになるのです。

トップナビゲーションを無くしたインタフェースを実現するためには、２つのことが必要です。

1. 素早くて滑らかなページ切り替え
2. 大きくて目立つ見出し

このうち2番目の大きな見出しについては、各ページの余計なコンテンツ（主にナビゲーションリンク）を減らせば実現できます。しかし1番目は現在のウェブサイトの作り方では難しいところがあります。今のウェブサイトはロードするのに時間がかかりすぎるからです。逆に言うとページのロード時間を十分に減らすことができれば、トップナビゲーションを無くしたウェブサイトのデザインは実現可能になってくるかも知れません。

現在のウェブページのロードを早くするためには

iPadアプリはまず最初にすべてのコンテンツをダウンロードするので、ページ内容はすべてローカルに保存できます。だからページの切り替えが非常に素早くできます。HTML5にはブラウザ内のデータをため込むための方法がいくつか用意されていますので、これを使うとページ切り替えがかなり早くできます。

またページをロードするのにかかる時間の大部分は、実はコンテンツではなく、JavascriptやCSSだったりします。このあたりも要改善です。

直感的なページ切り替えの操作

今までのウェブサイトはページを続けてざっと眺めるのに適したUIを用意してきませんでした。ページ切り替え用のボタンを用意するものはありましたが、ボタンは小さく、マウスを移動させてクリックするのは面倒でした。それに対して、iPadアプリで使われるスワイプジェスチャーは非常に直感的で、簡単にできます。同じぐらい簡単な操作をPCでも実現できればトップナビゲーション不要なUIが作れるかもしれません。

まとめ

以上、いろいろな話をしました。まとめると以下の通りです。

1. iPad miniの登場で、PC用のウェブサイトであってもiPad miniに最適化する必要が出てきました。
2. iPad miniに最適化するときに重要なのは、無駄なナビゲーションリンクを減らすこと。
3. ナビゲーションリンクを減らす中で、トップナビゲーションメニューの役割すら再検討するべきです。
4. ナビゲーションリンクを減らすことと、ページロードのスピードを上げることは密接に関わっています。必要に応じてHTML5のデータ保存機能を活用しながら、ページロードスピードの向上に努める必要があります。