iPad Mini 向けのWeb デザイン対策の５つのポイントとは？
これは、iPad Mini対応のWebサイト製作のためのヒントです。ほとんどの人が意識してこなかった最適化対策です。キンドルではどうする？ネクサス７ではどうする？ 日本では、スマホ対策が急務ですが、これだけでは終わらないのです。7インチタブレット対策をどうするのかが、今後の重要な課題および研究ポイントになってきます。
1.
タブレットで見るPCウェブは時代遅れ
iPad
Miniへの対応が注目されています。現在のサイトが、スマートフォンフォンサイトならば、拡大し、PCサイトなら縮小して対応することはできます。どちらを選ぶとなると、モバイルサイトを拡大する方が最適化の出発点としては無理がありません。
しかし、これも一時しのぎです。世界はすでにマルチスクリーンの時代です。Googleの発表では、「９０％の人はスマートフォン、PC、タブレット、テレビと、それぞれのデバイスを使いわけている。」と言います。
ウェブサイトをさまざまな人々に見てもらいたいと考えるなら、すべてのデバイスに適応させる必要が迫られているのです。
2. タブレットデザインのガイドライン
では、 iPad Miniのような小型タブレットのためには、どうデザインしたらよいのでしょうか？下記は、タブレットデバイスのためのガイドラインです。
iPad Miniは、7.8インチの新しい画面サイズです。まず、1024 x 768 ピクセルサイズの画面 (iPad 1や 2 と同じ) であることを確認し、デザインを開始します。
- 大きなテキスト-読みやすさのために、14 ピクセルにフォントサイズを大きく。
- パッドするために-PCより幅や高さを増やし、リンクのタッチ精度をあげます。
特にこれは、フォームやカレンダー 、ドロップダウンメニューに意識しましょう。
- マウス動作 -可能な限り、マウスによる動きを削除します。
- コンテンツ-タブレット画面サイズの600 x 1000 （ピクセル）の、 固定でのページ幅の修正ではなく、全範囲をカバーするように柔軟な設計を検討します。
- フラッシュの削除– iPad やタブレットでは、フラッシュを削除する必要があります。
- ポジショニング-［positon:fixed］の設定はコンテンツのロードを遅くするので、外してください。
大事なことは、これらのガイドラインとともに、実際にユーザーとしっかり話をして分析をしましょう。最近の事例では、タブレット対応でテキストサイズを変更したことで、ユーザーは老眼鏡の必要がなくなり、コンバージョン率向上にもつながったケースもありました。
3.
サプライズ！： ユーザーは常に変化しています。
iPad Miniの画面比率は、1 億台以上販売されてたiPad と同じ4：3 ですが、まったく別物です。iPad MiniはiPhone と iPadの中間に位置します。7 インチ デバイスは、iPad より携帯しやすく、iPhone や iPod Touchよりもパーソナルなデバイスになりうると予想します。
大きさの違いは、iPad Miniの特質を意味するのかもしれません。iPad Miniは、ハンドバッグ、ラップトップ
バッグ、財布やキャリー ケースに簡単に収まり、通勤や旅行に手軽に持ち運べます。ユーザーは 電子書籍、映画およびビデオ、ゲームやそのほかのエンターテイメント、FacebookやTwitterのようなソーシャルメディア やショッピングや商品検索など多岐の用途に使うことでしょう。
もちろん、彼らの行動を詳しく研究する必要があります。そのために、モバイルフォン利用の3 つの基本を再確認しましょう：
- 繰り返し：ユーザーは株価、スポーツのスコア、オークション出品などの定期的なリアルタイムの情報を求めて接続します。
- 退屈な時：ユーザーは時間つぶしや気晴らしを求めてFacebookやTwitter、またはメールやその他のエンターテイメントを利用します。
- 緊急な時：ユーザーは緊急時に、検索エンジンやニュースでどこで何が起きているかの情報を求めます。
4.
パフォーマンス: オプションにあらず！
iPad MiniはWifiiと３G回線、LTEなどに接続しますが、性能はデスクトップ
ＰＣよりもスマート フォンに近いのです。開発においては、コンテンツ配信やコンテンツ運用で、パフォーマンスの制約に注意をする必要があります。ここでは、いくつかのケースを紹介します。
- HTTP 要求の削減。タブレットはノートパソコンに近い画面領域がありますが、その処理能力はモバイルに近いのです。「Facebook Connect と Google +1」 のような要素を削除すればパフォーマンスがよくなります。
- 画像の最適化。 iPad Miniは非常に美しい高解像度表示を誇ります。デバイスへのイメージ最大化や縮小化にも配慮されています。しかし、注意が必要です。余計なデザイン化は、ユーザーエクスピアリアンスを損ないます。
- スクリプトとスタイルの管理。JavascriptやCSSは、ページ内に書かれているものはすべて読み込まれます。不要なスクリプトはリソースを消費するだけなので、Jazzcatのようなサービスで、JavaScript と CSS を統合してみてください。http://www.mobify.com/mobifyjs/docs/jazzcat/
- CSS の選択。アニメーションの荷は高く、JavascriptではなくCSSを選択してください。
つまり、iPad Mini対策では、簡単にＰＣサイトを綺麗に表示させることはできません。では、どうやってiPad Miniに最適化させればいいのでしょう？
5. レスポンシブを超えるアダプティブ
レシポンシブデザインは、マルチデバイス スクリーン用に構築する1つの方法です。しかし、レスポンシブデザインは、CSSを取り入れる適応可能なアプローチの1つに過ぎません。
レスポンシブウェブデザインとは、可変グリッドデザインです。メディアの柔軟性があり、非常に幅広い適応可能な哲学/戦略の一部です。言葉が先行してしまった気配がありますが、マルチデバイスのウェブ構築のために定義されるべきです。
レスポンシブデザインだろうと、最適化を施されたサイトだろうと、重要なことは One Web アプローチです（http://www.w3.org/TR/mobile-bp/#OneWeb）。つまり、Web標準の
HTML、CSS、JavaScriptを利用し、ひとつのＵＲＬを通してユーザーに提供するということです。
もし、ウェブサイトが複雑でなければ、レスポンシブデザインを使用し、よりシンプルに可変性グリッド対応ができます。しかし、ウェブサイトが複雑に変化した途端、大きな問題を発生させることになります。
- イメージ管理と最適化－さまざまなデバイスへの画像表示を可能にしますが、レシポンシブデザインのイメージの管理は困難です。http://dev.opera.com/articles/view/responsive-images-problem/
- リソース管理と最適化－画像管理を越え、全体的なリソース管理 – 画像、スクリプト、CSS はレスポンシブデザインなど、に大きな影響を与えます。
- コンテンツのリフロー －レスポンシブ デザインは、コンテンツを非表示にするなど、限られたコンテンツでコントロールが必要です。。
- ユーザー インターフェイス (UI) – 多くのデバイスは、独自のUIが求められ、フォーム入力、メニューは、デバイスに応じたUIが必要です。
- データのテーブル －画像とコンテンツをデバイスに適応させた後もテーブル要素の扱いはやっかいです。下記URLにいくつかのソリューションがあります。
レスポンシブ・デザインはフロント エンドのレイアウトにはすばらしい技術です。しかし、多くの課題も抱えています。今後は、理想と現実に対応できる高度な機能が必要です。
レスポンシブ ウェブサイトの86％は、単純に同じＨＴＭＬページ（すべて同じ関連画像、スクリプト、コード、リソース）の配信です。そのため、それ以外を行うことは難しくなります。複雑な動作をさせることで、それぞれのバイスに最適配信ができますが、それがブラウザー上でしっかり動くかどうかはわからないという現状があります。。
iPad Miniの登場は、マルチデバイスの時代が訪れたことをさらに意識させます。今後のコミュニケーション・プロジェクト成功は、最適化のアプローチをいかにうまく行っていかがポイントになってくるでしょう。
補足：Domobiは、レスポンシブデザインをさらに拡張するできる機能を持たせることが可能です。よりパフォーマンスをあげ、構築期間とコストを抑え、さらにメンテナンスをしやすくすることができます。
（James Sherrett, October 24 2012）
0 件のコメント:
コメントを投稿