【北米モバイル通信】iPad Mini 向けWeb デザイン対策の５つのポイントとは？

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つに過ぎません。

ブラッド・フロスト氏は、プレゼンテーション：（Beyond media queries: anatomy of an adaptive web design）:の中で、次のように述べています。

レスポンシブウェブデザインとは、可変グリッドデザインです。メディアの柔軟性があり、非常に幅広い適応可能な哲学/戦略の一部です。言葉が先行してしまった気配がありますが、マルチデバイスのウェブ構築のために定義されるべきです。

レスポンシブデザインだろうと、最適化を施されたサイトだろうと、重要なことは 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にいくつかのソリューションがあります。

http://filamentgroup.com/lab/responsive_design_approach_for_complex_multicolumn_data_tables/

レスポンシブ・デザインはフロント エンドのレイアウトにはすばらしい技術です。しかし、多くの課題も抱えています。今後は、理想と現実に対応できる高度な機能が必要です。

レスポンシブ　ウェブサイトの86％は、単純に同じＨＴＭＬページ（すべて同じ関連画像、スクリプト、コード、リソース）の配信です。そのため、それ以外を行うことは難しくなります。複雑な動作をさせることで、それぞれのバイスに最適配信ができますが、それがブラウザー上でしっかり動くかどうかはわからないという現状があります。。

iPad Miniの登場は、マルチデバイスの時代が訪れたことをさらに意識させます。今後のコミュニケーション・プロジェクト成功は、最適化のアプローチをいかにうまく行っていかがポイントになってくるでしょう。

補足：Domobiは、レスポンシブデザインをさらに拡張するできる機能を持たせることが可能です。よりパフォーマンスをあげ、構築期間とコストを抑え、さらにメンテナンスをしやすくすることができます。

（James Sherrett, October 24 2012）

スマホサイト構築方法 どんな方法があるか？

ともかく、つべこべ理屈をこねる前に、
まずスマホサイトを作ってみようではないか。


そこで問題である。ではいったい、どんな方法で構築すればいいのだろうか？

ここでも山の登り方は千差万別である。

整理してみると、下記の図のように、

1. 専用サイトを作ってみる。手動で構築
2. フューチャーフォンの資産があるので、それをスマホ変換する。
3. レスポンシブデザインで対応してみる
4. CMSをベースにスマホ変換
5.  自動変換ツール・サービスを使う

１．専用サイトを作ってみる。手動で構築
まずこの方法は、トライアルで一番多いパターンである。
スマホが売れているから、スマホ対応の決定版なのであるが、問題が大きく２つある。
A）ただでさえ、Webの担当者が忙しいのに、Webの更新作業や原稿確認作業が2倍となり、非常に効率が悪い。つまり運用工数が増えてしまう。

B）またSEOやソーシャルの取り組みにおいては、URLがことなってしまう、つまりSEO対策をもう一度スマホサイトのために始める必要が生まれ、twitterなどでは、ページがバラバラのため、同じ内容を違うページで閲覧することになるので、バイラルなプロモーションが目的ではとても効率が悪くなってしまう。用途としては、今後は、間に合わせのキャンペーン企画などで一部使われるだろう。

２．フューチャーフォンの資産があるので、それをスマホ変換する。 
もともと、フューチャーフォンのサイトが存在していればそのフューチャーフォンサイトをスマホ化しようというものである。昨年は、MTI社などから複数の変換ツールが登場し、結構需要があったらしい。元々課金コンテンツをしていて、結構な収益、またはそれなりの収益があったサイトでは、まずは間違いのないやり方だといえよう。しかし、デザイン的には、下から上への対応なので、リッチな表現やブランディング的には厳しいものがあるのは否めない。またこのコンテンツをタブレットやPCで見ようという人はほとんどいないだろう。２つのデバイス間だけの変換の関係に留まる。このやり方は、フューチャーフォンにおいての過去資産のあるサイトにのみ、有効jな一次的なやり方といえる。

３．レスポンシブ・デザインで対応してみる
レスポンシブデザイン、従来はリキッドデザイン、可変グリッドデザインと呼ばれていたデザイン方法だ。これで対応するやり方だが、構築における工数を比べると、PCとタブレットのみだと、やや工数が増える程度だが、これにスマートフォンが加わって、３つのデバイスへの対応となると、デザイン的な崩れを調整するのに結構手間がかかったりしてしまう。コーディング技術に詳しい知人に聞くと、PCのコーディングを１００とすると、タブレットは１５０、スマホ対応まですると２５０くらいの工数となる。つまり3デバイス対応は2.5倍のコーディング工数と費用がかかってしまうことになるわけだ。また、レスポンシブだけでは、スピードは基本的には改善されない。これに別途キャッシュサーバのような仕組みがないと、スマホのように３G回線が遅いサイトでは、ローディング時間がかかってしまうという問題も起こるようだ。

４．CMSをべースにスマホ変換させる
 CMS(コンテンツ・マネージメント・システム）は大規模サイトになると、絶対必要になってくる仕組みである。ニュースの更新、バージョン管理、記事のアップダウンなどのスケジューラ－対応など、一見便利な仕組みのようではある。問題はコストが高いことである。汎用システムなら、下記のみてほしい。　http://cms.3int.jp/price/cost.html 　
おそらく、気が遠くなるくらいの金額感だろう。しかも、スマホ対応は別途料金だったりもします。
またもう一つの問題として、要件定義、仕様の詰めていくために多くの時間を費やしてしまう問題もある。簡単にはじめて、気軽に修正してというわけにはいかないのは、なにより実際の操作がエンジニアまかせになってしまうこともコスト高の理由である。

５．自動変換ツール・サービスを使う
最後は,自動変換ツールである。実際に汎用的に使えるとなると、企業向けでは、ショーケースＴＶ、アイスリーデザイン、ネクシム、そしてドゥモビの４つが競合である。便利な点は、エンジニアではなくデザイナーで調整が可能ということ。気軽に初めて、修正を加えやすいため、小回りがきくということ。これは上記のCMSに比べて圧倒的にスピード対応ができる。スマホサイトのトライアル活用の段階においては、非常に有効な手立てではないだろう。またこのジャンルは、まだ開発が始まった段階のところも多く、様々なやり方で展開している点。今後もっとユニークな変換サービスが出てくる可能性もある。フラットに横並びして解説できないので、これはまた別のコーナーで紹介してみたい。