企業サイトがマルチデバイス（スマホとタブレットとPC）にどのように対応していくべきか？

流行期を過ぎたレスポンシブ・Webデザインのこれから
こちらを見てのブログです。

新年度サイトリニューアルの目玉はスマホ対応！！

さて2012年も、もうすぐ6月。制作会社は忙しかった年度末進行から、残案件がなくなりはじめ、新たな案件にとりかかる時期。クライアントとなりうる企業の方々におかれましても、「WEBサイトのリニューアル」というプロジェクトが稼働し始めている。というケースも多いのではないかなと考えています。よく頂くご要望としましては

既存サイトは継ぎ接ぎだらけ。管理が散漫になっているので整理したい。
便利簡単に自社で更新が可能と言われているCMSの導入したい。
どうも古くなってしまったデザインの改修したい

などがありますが、そんなご要望の中でも、見た目にわかりやすいリニューアルの目玉！WEBサイトが新しく変わったということをみんなで感じたい！それを実現できそうなのが今回の話題、マルチデバイスへの対応です。

マルチデバイス対応とは？

今回マルチデバイスといっているのは

・PC（ノート型とデスクトップ型）
・スマホ（iPhoneなどの小型のもの）
・タブレット（iPadなどの大型のもの）

の3種類です、企業体やターゲットによっては更にフューチャーフォン（ガラケー）の対応も含まれますが、今回はあえて省きます。

なんにせよ、「今回のリニューアルで、スマホやタブレットにも最適化されてます！どうぞ御覧ください！」というのはわかりやすいですし、インパクトがありますよね。

そんなマルチデバイス対応ですが、現状コレといった決定的な案はない状態です。また現在から未来にかけて、予想以上に多種多様な画面幅のものが出るということが予想されてます。

さてどうしたら

一番最適なのか？
効果的なのか？
どの端末でも見やすく出来るのか？

等々、検討が必要になっています。

マルチデバイスへの対応方法

マルチデバイスへの対応方法は大きく２つだとおもいます。

１：ユーザエージェント判別による、表示の出し分け。
２：ウィンドウサイズによって可変されるレスポンシブデザインの適応

このどちらにも良さがあり、問題もあります。

１：ユーザエージェント判別による、表示の出し分け。

メリット：

・スマホやタブレットならではのUIが実装できる。
例）
http://www.apnews.com/ap/index.htm
（タブレットでないと閲覧できません。　スワイプで記事を横に横に送れる）

http://www.star-m.jp/
(スマホにて閲覧時、タップ後ページ遷移がスライドになる。)

・コンテンツの絞り込みが可能。
スマホやタブレットでは必ずしも全てのコンテンツを出す必要は無いという考え方もあるので、内容を絞って表示することができます。また見せ方もPC版と全く違う形ということも可能なので、最適化しやすいです。

デメリット：

・Androidのタブレットは困った子。増え続けるユーザエージェントに都度対応しないといけない。
これが最も問題なところです。

ユーザエージェントは大きく分けると

iPhone
iPad
Android

の３つです、これでユーザエージェント判別する場合

iPhone ⇒ スマホ用の見栄えで見せる
iPad ⇒ タブレット用の見栄えで見せる
Android ⇒ スマホ用の見栄えで見える

とするのが一般的です。そこで問題になるのが、Androidのタブレット（GALAXY Tabやnote）なんです。ユーザエージェント上は、Androidという一つの判別しか無いため、スマホもタブレットも、Androidは全部スマホ用の見栄えになってしまいます。それでもタブレットは、タブレット用の見栄えを見せたいとなると、機種それぞれのユーザエージェントを個別に追加してあげないとだめなんですね。。

10や20ぐらいならなんとか登録も可能なんですが、冒頭の記事によりますと

Androidの端末数が急速に増加している。2011年は国内で30種類程度だったAndroid端末が、この1年の間で100種類以上になり、つい先日もドコモから「らくらくフォン」を含む16機種ものAndroid端末が発表された。脅威の増え方だ。

Read more: http://ascii.jp/elem/000/000/695/695819/#ixzz1vc7Z64tN

とあります。今後のことを考えると都度都度対応は厳しそうです。
しかしながら、じゃあAndroidは全部スマホ版でいいよね。と強引にはできない訳でして。
どうしたものかな。。となります。

ではもうひとつはどうなんでしょう？

２：ウィンドウサイズによって可変されるレスポンシブデザインの適応

メリット：

・画面幅で可変するためユーザエージェントによる影響を受けない。
あら、すばらしいですね。画面幅によってレイアウトが自動的に変わるので、ユーザエージェントを気にする必要が無くなりました。

例）
http://twitter.github.com/bootstrap/
http://m-g-n.me/

これだけ考えるとレスポンシブでいいじゃん！となるのですがデメリットもあります。

デメリット

・実は裏側ではすべてのものをサイズのデータを読み込んでいる。
そうなんです、一番小さい画面幅のスマホ版だとしても実は一番大きなPC版で表示させているメイン画像などを読み込んでいるのです。結果読み込みが遅くなるかもしれません。

・画面サイズが中途半端なものについてはどうしても間延び、短すぎるといった美しくないレイアウトが発生する。
仕方ないことなのですが、例えばhttp://m-g-n.me/category/news/　をタブレットで見た場合（PCの方は適当にウィンドウサイズを縮めてください。）右カラムがどこかのタイミングで左カラムの下側に降りるのですが、その際、降りた元右カラムが画面いっぱいに広がるため、どうも美しくありません。

・すべてのコンテンツを基本はそのまま見せないといけない
これも悩ましいところです。すべての情報がある状態なので、スマホ版だけは情報を絞ってということが逆にむずかしくなります。

というわけで、一長一短なのですね。

んじゃあどうしたらええねん？？メガネさんよー－！！というご意見が聞こえてきそうなので現状、私が考える方向はこんなです。まず事例をどうぞ。