EC studio EC studio デザインブログ


iPadが日本で販売されます。
新しいデバイスの登場でサイト制作者の方はいろんな意味でドキドキワクワクしているところだと思いますが、今回はiPadでのブラウジングのことや、それに対する基本的な対応方法を説明します。

  • iPadからのアクセスを判定する
  • デバイスの幅に左右されないリキッドレイアウトにする
  • position: fixedの使い方に注意する
  • タップを意識したスタイル調整
  • ファイルの軽量化・表示速度の向上

先に種明かしをしてしまうと、基本的にはiPhone向けの対策をそのままiPad向けにも適用させるということです。
なので過去のiPhone向け対策を参照してもらうのが良いですが、iPhoneと違うところは色々とありますので、それを検証していきましょう。

iPadからのアクセスを判定する

iPadのユーザーエージェントは公式のドキュメントを参照すると、

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10

こちらのようです。バージョンその他は色々と変わると思いますが、iPadという文字列で判定すればiPad用のHTMLを出力することができます。

ユーザーエージェントを利用したPHPでの振り分け方については、iPhone向けの対策記事にも書いてありますが、JavaScriptでの振り分けも可能です。

なおiPhoneのときに紹介したような、メディアクエリを利用したデバイスの解像度によるCSSの振り分けは好ましくありません。
下記は好ましくない例です。

HTML:
  1. <link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */

これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。
つまり、「iPadだけ」に適用させるということは実質できないということになります。
この点はご注意ください。

デバイスの幅に左右されないリキッドレイアウトにする

前述のユーザーエージェントの話に次いで、レイアウトの話です。

iPadのデバイスとしての画面サイズはポートレート(縦向き)であれば
横 768px × 縦1024px
となります。
そしてランドスケープ(横向き)であれば
横 1024px × 縦768px になります。

しかしiPadもiPhone同様に、擬似的に横幅980pxでの表示をします。
なので横幅が768pxを超えているサイトであっても横スクロールが発生するとか、カラムが落ちるとかそういうことはありません。
この点ではひとまずホッと安心してもらっても大丈夫そうです。

しかしこれは拡大率(縮小率)を980pxに合わせているだけなので、コンテンツ内の文字情報などはやや小さくなります。

なのでiPadに最適化させるということであれば、この980pxを想定したスタイルの調整をおこなうか、またはそれぞれの向きにおいて厳密にサイズを合わせたいのであれば、JavaScriptのorientationchangeやwindow.orientation といったデバイスの回転や向きでイベントを実行する方法を利用するか、メディアクエリのorientationというプロパティを使って、専用のスタイルを適用させる方法があります。

どれに対しても対応できるシンプルな方法は、サイトとコンテンツをリキッドレイアウトで再設計して、デバイスの幅に左右されないスタイルにすることです。

とはいえせっかく向きによって画面サイズが変わるのですから、できれば向きに合わせてコンテンツを調整できるのが理想かと思います。
例えば単純にコンテンツが横に伸び縮みするだけではなく、それに応じてカラム数を変更するなど、表示する情報量を調整するというのが好ましいですね。

ここでもう一つレイアウトについておまけの話です。

実際にiPadを手に入れてからいろんなアプリを試してみると分かりますが、多くのアプリが画面向きによってダイナミックにレイアウトが変わる仕様になっています。
それはランドスケープの場合はサイドバーが出現し、ポートレートの場合はサイドバーが消えるまたはフッターへと回り込むというような動きです。

この意図は単純にそれぞれの向きで最大横幅が変わるからということだけではなさそうです。
これはiPadそのもの設計コンセプトでも語られていることなのですが、ポートレートの場合にはサイドバーを取っ払うことでコンテンツに集中しやすくなる、逆にランドスケープの場合にはその広くなった横幅を利用して、ナビゲーションやサブコンテンツを見せるためにサイドバーを出現させる、というような意図が考えられます。

結局は情報を向きによってレイアウトやUIを調整するという話なのですが、このあたりは各サイトコンテンツやWebアプリケーションによって検討するといいでしょう。

position: fixedの使い方に注意する

サイトのナビゲーションやフッターをposition: fixedで固定したデザインがあります。最近よく見かけるTwitter Badgeなんかは画面の端にposition: fixedで固定をしています。

このposition: fixedの問題は、iPad(および iPhone)では有効ではないというところです。

先程のTwitter Badgeのような、直接コンテンツに影響がなく、デザイン的にも端っこなど邪魔にならないところにあるものであれば、画面のスクロールに要素がついてこないだけなので良いのですが、フッターとして固定させている場合はそれが固定されません。

こちらの図のように、コンテンツにフッターがかぶってしまうような状態になってしまうということです。

これに対応するには、iPad/iPhoneの場合にはposition: fixedを使わないようにするのが一番簡単な方法です。
しかしサイトやコンテンツによっては固定させることが必要ということであれば、それを可能にするJavaScriptライブラリを使う方法があります。

その一つにiScroll.jsというライブラリがあります。これは要素を固定してスクロールする箇所を制御することができるライブラリです。
詳細な使い方などは今回は配布元をみていただくとして、JavaScriptを使えば可能ということを覚えておいてください。

なお、position: fixedが使えないことについては公式のドキュメントでも書かれており、バグではなく仕様のようです。

タップを意識したスタイル調整

iPhoneの記事でも書きましたが、iPadでもクリックではなく指を使ったタップがリンクなどを開くためのアクションとなります。
このタップを考慮した対策というのは、リンクエリアを大きくすることがポイントになります。

なので行間・余白を大きめにとったり、ボタン画像などもなるべく大きくするようにしましょう。

またマウスではないので、通常の:hoverクラスやmouseoverイベントなどにも対応していませんので注意してください。
この代わりというわけではないですが、タップに対しては touchstart、touchmove といったJavaScriptのイベントはあるので、それらで何かしらのインタラクションを用意できるといいかもしれません。

ファイルの軽量化・表示速度の向上

これはiPadやiPhone向けのサイトに限った話ではないのですが、いずれも3G回線やWIFI回線を利用したインターネット接続になるので、なるべくファイルサイズは押さえるようにした方がいいです。

高速化・軽量化のノウハウについては、簡単作業でスピードアップ!パフォーマンスアップまとめという当ブログの記事で書かれているようなコードの書き方の工夫や画像の最適化などがありますが、CSS3を多いに活用することも重要です。

CSS3の小技などはまた記事にしたいと思いますが、ボタンや背景画像で多用するグラデーション装飾などはCSS3で書くことができますので、きれいなグラデーションのボタンや背景画像などもCSS3のみでやることをおすすめします。

またアニメーションの処理などは極力JavaScriptを使うよりも、CSS3をアニメーションを活用することも有効です。

そのあたりのどちらのアニメーション処理が軽いのかは下記記事が参考になります。
Webkit CSS animations for jQuery

まとめ

大きな施策ではないですが、ほんの少しの工夫や注意をするだけでもiPadでのサイトの使い心地が変わります。
しかしこうしたiPadに最適化することを考える上で一番重要なことは「どれだけのことをおこなうか」です。

iPhoneの場合であれば、明らかにPCで使うよりも画面が狭く、最適化しないと文字も小さくて読みづらい、表示が遅いなどの理由で、iPhoneに最適化するメリットが多いにあると思うのですが、iPadの場合には「PCとまったく同じように見れたら十分」というユーザーの方がもしかしたら多いのかもしれないと感じています。

実際に自分が使うことを考えても、iPadに最適化されることで断然便利になっているのであればいいですが、便利になっているわけでもなく、ただ「それっぽいデザイン・UI」にするというのは好ましくないでしょう。

これは自戒でもありますが、制作者の方々はよく考えて色々な工夫ができるといいですね。
今回紹介したちょっとしたスタイルの調整なんかは是非やってみると良いと思います。

今回こうした解説をしましたが、iPadの使われ方というのはまだまだ想定しきれないところが多く、それを考えるのは難しいですが面白いですね。
いつか実践・応用編もいつか書くかもしれないので、今後も色々と情報を集めていきたいと思います。

参考サイトなど

iPadに関するドキュメント・ガイドライン

iPad Human Interface Guidelines: Introduction

Preparing Your Web Content for iPad

HTML,CSS関連

メディアクエリー

ライブラリ、フレームワーク

iScroll.js

jQuery.iFingerScroll

iPad 向けアプリやサイトのデザイン

Landing Pad

その他

Designing for iPad: Reality Check
iPadの説明するけぇ、よう聞きんさい。


関連した記事:
投稿者
カテゴリー
人気のエントリー
最近のエントリー
アーカイブ
Copyright© ChatWork, All Rights Reserved. secured by ESET.