スマートフォンサイト設計の５つのポイント（2011.09時点）
Web, WebSite, Webビジネス, コミュニケーション, マーケティング 9月 29th, 2011
１か月くらい前になりますが、当社でこんなテーマでセミナーを開催いたしまして、スマートフォンサイト構築をテーマにしたセッションを担当いたしました。私はこのシリーズのセミナーではだいたい司会＆パネルディスカッションのモデレータを務めることが多いのですが、セミナー全体の構成や、当社担当セッションのシナリオ構成、資料作成を担当していますので、実際には自分がセッションを担当しているようなものだったりします。
ようやく１年と少し、こういったセミナーを経験してみて言えるのは「場数って大事」ってこと。最初のころは「こんなもんかな」と思っていた内容も、今振り返ってみると、「アレはなかったな・・・笑」と苦笑いしてしまうようなシナリオや、立ち振る舞いもあったりしています。きっと１年後も続けていたら、それはそれで少しは成長しているから、今のことを同じように思っているんだろうと思います。
最近は、新規、リニューアル問わず、Webサイト制作の話が増えてきていて、特にCMS導入の話が圧倒的。そしてそれに付随して、スマートフォンへの対応、という要件もほぼ確実に入ってくるようになってきています。
私も大手の企業様、地方自治体様などで、スマートフォンサイトの制作を行ってきましたが、サイトを作ることそれ自体はそんなに難しくない。ライブラリも出ているし、従来のフィーチャーフォンのようにブラウザの制約もそんなにあるわけではないので、普通にHTMLを組んでいけばよい。もっとも、HTML5であることが望ましいのですが。
PCサイトとの決定的な違いは、利用シーンとターゲット。机に置かれた画面を見ながらマウスでスクロールするPC向けWebサイトと違い、カフェでもお茶の間でもキッチンでも布団の中でもお風呂場でもジェットコースターに乗りながらでも見ることができるスマートフォンサイトは、利用する場所や時間帯、目的が違うわけです。そんなことを常に意識しながら、スマートフォンを含めた（場合によってはタブレット端末やフィーチャーフォンも含めた）企業サイトの全体設計をするわけですが、そんな経験から自分なりに考えているスマートフォンサイト設計のポイントについてのメモを、今回のテーマとしてみました。
それでは、スマートフォンサイトを設計するときのポイントをご説明します。でもあくまで２０１１年９月現在のものであることを忘れずに。１年後には全然違う考え方になっているかもしれません。
①最適なコンテンツマネジメントシステム（CMS）の導入
- ワンソース・マルチユースが実現できるかどうか（１つのHTML要素を様々なデバイス向けに再利用できること）
- トーン＆マナーをCMSで吸収できるかどうか
- デザインやコーディングを制約なくデザインできるか
なんといっても、１つ目のポイントはCMSの導入。マルチデバイスへ対応するのであればほぼ必須ツールです。きちんとHTMLを構造化できていて、それぞれの端末に出し分けられるよう設計されたCMSであれば、正直CMSはなんでもいいと思っています。もちろん、スケーラブルであることや、安定している製品であることは重要ですが、とにかく大規模になりがち（将来的にコンテンツが増えていくという前提でも同じ）なサイトであれば、こういったシステムでWebサイトを管理していくことは必須です。
CMSは、安かろう悪かろうなところは正直あります。規模が小さくて、１年後もあんまり変わらない大きさであることがすでに分かっているのなら、MTやWPなどのOSSでサクッと作ってしまうのがきっと正解で、そこに何百万円もかけてはいけません。もっともMT,WPもとても優秀なツールなので、もちろんスマートフォンにも対応できますし、ある程度の規模までなら立派な企業サイト構築も可能です。なんといっても強みは開発コミュニティの充実ぷり。世界中に開発者がいるから、有象無象のプラグインが出ており、上手に使えばとても高機能なCMSにも変身します。ただし不具合時の保証はないのでご注意を。サイトを運営する側にも、ある程度のスキルが必要になるタイプでもあります。
②デバイスごとの利用シーンやゴールを意識する
- デバイスによって利用シーンは異なる。同じコンテンツを提供しているだけではダメ。
冒頭にも書いたとおりですが、スマートフォンのサイトって、PCサイトとは利用シーンが全然違うことがあります。昔担当したことがあるアクセス解析の商談で 、住宅メーカーさんがいるんですが、住宅メーカーさんのPCサイトとスマートフォンサイトの利用シーンは、コンテンツ、利用傾向、ゴールがまったく違っていることが分かって、それに合わせた改善を行うことで、ものすごくビジネスに貢献したということがあります。
私のサイト構築経験でも、業種問わず、利用するヒト、タイミングが違うことがほとんどで、それに合わせてサイトマップを作成し、導線設計をしています。
③アプリとの親和性を意識する
- スマートフォンサイトは、ソーシャルメディアからの流入がメイン
- スマートフォンサイトからは、アプリと連動して目的達成を考える
iPhoneやAndroidを使う最大のメリットは、豊富なアプリです。スマホを持っているならこれは誰もが共感できるはずですが、アプリが入っていないスマホなんて、ただの電池の持ちの悪いデカいケータイです。だからこそ、このアプリとサイトを連動させることが重要です。
TwitterやFacebookがこれほど普及したのもの、スマホの普及が大きな要因になっているのは有名な話。実際のデータからも、iPhoneがリリースされた直後から、Twitterの利用人口が爆発的に増加しています。
Twitterが普及しだすと、いろんなサイトに「ツイートボタン」が登場し、みんなそれを押すようになります。Facebookも同じくして、「いいね」ボタンがあちこちに登場するようになり、バイラルによる伝播はますます一般的になりました。
そうすると、それをみんなが見るようになります。友達のツイートで、「このサイト面白い」という内容があったら、そのURLをクリックすることもあると思います。Facebookで、「○○さんがこのリンクについていいね！と言っています」というのを見たら、アクセスすることもあるでしょう。スマートフォンの利用者は、割とそういうことに柔軟で、結果としてスマートフォンサイトへの流入は、ソーシャルメディアからの流入がとても多く、重要な導線になってきています。
ところで、スマートフォンサイト訪問者はどこへ行くのでしょうか。何か目的をもってPCサイトのように検索してきた人なら、目的の情報が得られればそのまま閉じてしまうかもしれませんが、仮にそうであっても、その目的が情報収集ではなく、お問い合わせだったとすれば、ワンタッチですぐに電話がかけられるよう、電話番号へは電話機能へのリンクを貼っておくことが重要ですし、目的地の場所を探しているのだったら、地図アプリへのリンクや、GPSで自分の場所を知らせてもらってナビゲーションを支援してあげることが大切です。
ではソーシャルメディアから流入してきた人っていうのはどうかというと、そんなに目的を持ってきた人は少なくて、「面白いと友達が言っていたから」「タイトルが気になったから」という理由が多いです。そういった訪問者は、実際に自分でその内容を確かめることができればそのサイトとはサヨナラです。サヨナラなんですが、もしその内容が、読んだ本人にとっても興味深いもので、共感できるものであったなら、「ツイート」するかもしれませんし、「いいね！」するかもしれません。そういった連携がスマホからカンタンにできることが必要で、そういったアプリに渡してあげる、あるいは簡単にブックマークできるような仕掛けが必要になってきます。
④端末とは割り切ったお付き合いを
- すべての機種・組み合わせへの対応はもはや不可能。標準の組み合わせに対応すればOK
- スマートフォンサイトの構築費用は、PCサイトと同じくらいかかると考えておいたほうがよい
昔、携帯サイトなんかでは、「全＊＊機種に対応」なんてことも言われましたが、もはやそんなの無理な話。全キャリア全機種を検証していたら、それだけで何週間もかかってしまうものでした。
スマートフォンサイトに取り組み始めた頃は、当時はiPhone3Gしかなかったし、搭載ブラウザもSafariしかなかったので、「iPhone3G＋Safari」だけを検証用としてみておけばよいものでした。
そんなスマートフォン市場ですが、あっという間にがこれだけ盛り上がってくると、Android、Windowsなどさまざま登場し、iPhoneもiOS5まで出てきて、Androidも1.6から3.Xまで出ていて、ブラウザも標準のものからDolphinやFirefox、Operaなんかも出てきています。じゃあどんだけ対応しなければならないのよ、といえば、計算するなら（iOSとAndroid）で言えば
iOSのバージョン×iPhone用ブラウザ＋AndroidのVersion×Android用のブラウザ×機種数になるわけなんですが、すでにこれだけでも現実的ではないレベルに来ています。
じゃあどこで線引きをするかってことになるんですが、私はiOS4系Safari、Android2系、３系の標準ブラウザ。これで全体の80％近くはカバーできてるそうです。アプリだとなかなかこうはいきませんが、今回はWebサイトのなので、こんなかんじでいいのかなと思っています。
また、製作コストについても触れておきたいと思うんですが、制作コストって、PCサイトと同等に考えておいたほうがいい。コンテンツも少ないし、表示できる範囲も少ないし、安くできるんじゃないの？って思われがちですが、むしろ逆で、そういう制約があるからこそ、情報設計に気をつけなければならないし、逆にHTML５にしっかり対応しているスマートフォンブラウザは、そういった新しい技術を使った表現なんかも可能になるため、CSS3やJavascriptの知識が大いに必要になってくるわけです。そういう意味で、サイトは小さいかもしれないけれど、それなりにコストがかかるんじゃないかと思います。
⑤HTML5＋CSS3でユーザにやさしいデザイン
- スマートフォンサイトは、HTML5で設計を
- ライブラリをベースに開発するのも有効
４つ目の続きにもなってしまいますが、スマートフォンに搭載されている標準のブラウザはHTML5に対応しています。IE6などの問題児くんがそもそも存在しないので、HTML5でシンプルにコーディングすることができるほか、HTML5+CSS3によって可能になったリッチな表現も、古い端末を意識せずに実装することができます。
これをさらに簡単に実現できるライブラリがいくつか出ています。最初のころはiUi、jQtouch、iWebKitなんかが主流ですが、最近だとjQuery Mobileがかなり有力です。こういったライブラリをベースに開発していくと、かなりの工数を抑えながら作ることができます。きっとほとんどのサイトで、こういったものが使われていると思います。便利な世の中です、まったく。
まとめ
まとめとしてはこんなかんじ。
- 最適なコンテンツマネジメントシステム（CMS）を導入
- デバイスごとの利用シーンの違いを意識する
- スマートフォンアプリとの親和性を意識する
- 端末には割り切って対応する
- HTML5+CSS3でユーザに優しいデザインを
いよいよスマートフォンの割合が、フィーチャーフォンを上回ろうとしていますし、PCの出荷台数も超えてきています。
さらにこれからはPCを持つ人自体が減っていくと思いますし、逆にスマートフォンやタブレット端末が一人１台が普通になる日も近いんだと思います。Webサイトも、PC向けよりもスマートフォン向けに最適化するっていうのがメインになってくるかもしれないのです。
3年後には、Webのあり方がまったく変わっているかもしれません。ワクワクしますねー。
公式のレポートページはこちらです。ぜひご覧くださいませ。
