スマートフォン対応は、PC向けサイトをただ小さくするのではない
投稿者：制作部
2011/02/03 20:51
この記事は約6分で読むことができます。
最近、スマートフォン対応というキーワードを目にする機会が増えてきました。
スマートフォン対応とは、一体どういう対応なのか？
おさえておくべき事項として
1 コストを抑えて、簡素なサイトにする
2 コストをかけて、リッチなサイトにする
3 ガラパゴス携帯（いわゆるガラケー）対応をするか
を決めておく必要があります。
ターゲットユーザによって、3の対応までするかどうかの判断が必要です。
ここでお伝えしたいのが、ガラパゴス携帯対応とスマートフォン対応とは、開発面において全くの別物という事です。
PC向けサイトと、ガラパゴス携帯向けサイトが全くの別物だというのは、言うまでもありませんが、実はスマートフォン対応というのもさらに別物だったりします。
この違いに気がついていないと、思わぬ開発費用に驚いてしまう事になるでしょう。
これは、開発面において、それぞれ違う方法をとらざるを得ない理由に起因しています。
詳しくは、このコラムの最後の方でお伝えするとして、まずは、スマートフォン対応検討が必要か否かについては下記を参考にしてもいいかもしれません。
1 ターゲットユーザーが大学生以上
2 自社サイトのブランディング強化をしたい
3 ECサイトを運営している
4 ガラパゴス携帯対応しかしていない
現在、スマートフォンユーザーは、携帯電話ユーザ比率を見ると10％を超えており、まもなく20％に達するのではないかと思われます。
約20％ともなると、無視できない数値です。
ガラパゴス携帯にのみ対応させている場合、スマートフォンで確認すると殆どの場合、PC向けサイトが表示されます。
PCとほぼ同じように利用出来る為、致命的な問題はありませんが使いづらいのは間違いありません。
スマートフォンの画面サイズ（解像度）は、デスクトップPCのおおよそ1/3～1/4ですので、イチイチ拡大しつつ見る手間があります。
ブログ系であれば、そのままでいいと個人的に思います。見られなくはないので
ところが、EC系サイト、特化系サイト（サテライトサイト）、ブランドイメージを大切にするサイトでは少々まずいでしょう。
何せ、通信回線はガラパゴス携帯と大差ないのですから。
つまり、ガラパゴス携帯と同じ回線速度なのに、PC向けサイトを見ていることになります。
利用者としては、とてもイライラしてしまいますね。
離脱する原因のひとつです。
ですので、ガラパゴス携帯は簡素なテキストメインのWebページとなっているわけです。
過去と比較すれば通信速度は上がっていますが、画像が多数使われているサイトには向きません。
そこで出てくるのが、Webの最新技術であるHTML5とCSS3です。
PC向けのブラウザでも、部分対応しかしていなかったり、レガシーなブラウザがまだまだ存在する為、PC向けサイトではまだまだ利用されていません。
W3Cが正式勧告していないことや、現時点で検索エンジンが正当に評価するかはまだわからない（将来的には評価してくれるはず）ためだと思われます。
スマートフォン自体が新しいハードなので初めから対応している事やレガシーブラウザがない為、利用が現実レベルで可能になっている事などから、この最新技術を利用する事で通信速度が光回線並みでなくても何とかできるといったものです。
ここまででスマートフォン対応が必要だと判断した場合、以下をご覧いただければと思います。
スマートフォンでは、基本的にPC向けサイトで表現できる事は大体出来るようになっています。
一部、FLASHが使えないなど制限はありますが、携帯電話と比較するとその表現手法は雲泥の差です。
スマートフォンではPC向けのサイトであっても難なく表現してしまうのですが、それでは小さすぎて扱いづらいというのが正直なところ
つまり、スマートフォンの画面サイズにあわせつつも、PCサイトと遜色のないユーザビリティをスマートフォンの規格に合わせて表現しなおさなければならないところに難しさがあります。
スマートフォンの規格として考えると
1 画面サイズが小さいので、情報デザイン設計に工夫が必要
2 大容量通信が出来ないので、容量に配慮が必要
3 FLASHの利用ができないキャリアがあるので、代替機能の考案が必要
4 HTML5が利用できるので、セマンティックな構造に出来る
5 CSS3が利用できるので、画像を多用しない構造に出来る
6 縦・横の判定があり、それに併せた構造を考える必要がある
7 マウスがない為、マウスアイコンが重なった時にボタンを光らせるような手法が使えない
続いて特性をみてみると
ハードウェア側のユーザビリティの良さがあるのである程度縦長でもストレスが少ない
ページ遷移時に待ち時間が発生するので、離脱を防ぐ仕掛けが必要
画面の拡大と縮小が、エンドユーザ側で即座に出来る
などが、思い浮かびます。
対応が難しいもののひとつとしてナビゲーションの設計があります。
PC向けサイトと違い画面サイズが小さい為、左側にズラッと並べる事は避ける必要があります。
となると画面の下のほうに、ボタンを並べる事になるのですが、うまくデザインしないとサイト内で迷子になる確率が非常に高くなります。
ガラパゴス携帯向けサイト、PC向けサイトとは違った構造です。
通信速度においても、光回線と同じようには行かない為、写真素材などの容量を抑える事や、Ajaxを利用したページの先読みを行なったりなど、開発面において高度な技術・工夫を用います。
これら制限をクリアする難しさがあるのですが、それらをサポートしてくれるのが、最新技術のHTML5とCSS3です。
もちろん、ガラパゴス携帯向けサイトと全く同じでいい場合は、その限りではありませんが……
PC向けサイトが、MovableTypeやWordPressなどに代表されるようなCMSで構築されている場合で、デザインはそれなりでいい場合は、手間をかけずに導入する事が可能です。
テンプレートに従って、コンテンツのデータを流し込むような仕組みをもったプラグインはありますし、過去、このコラムで少しふれたjQTouchなどを利用すれば、比較的短時間で導入が可能です。
上記からスマートフォン対応はもうひとつサイトを構築するくらい手間がかかってしまう事がわかります。
近い将来、市場を占める割合が確実に増えるハードウェアに今から投資しておくのは、有効だと思います。
他、影響の裾野を広げて考えてみると、TwitterやFacebookに代表されるソーシャルメディアとの複合的なマーケティングを考えるのであれば尚更でしょう。
あとがき
個人的には、スマートフォンの通信速度をPocketWifiと同等な状態を標準実装として欲しいと思っています。
そうすれば、大容量コンテンツも容易に利用できますし、ワンセグを使わなくてもテレビCMなみの広告をもっとだせるのにと……
いや、開発側は大変なんですけど（笑）
子供は遊びの天才だといいますが、大人は仕事の天才でありたいなと
【編集担当：紀井】
