即席というぐらいスピーディに時間もコストもかけずにサイトの立ち上げが求められる場合があります。これは今年の夏に実際に体験したことです。また、PC/Mac＆スマホ＆携帯とマルチデバイス対応をする必要がありました。これはできるだけ多くの成約率をあげるために対象ユーザーを広げる方法として必要でした。
その際とった手法は“スマホ版から作る”ということです。何故、そのような方法をとったのか。ここで書いておきたいと思います。
スマホ版構築に使ったjQuery mobile
まずスマホ版サイト構築に利用したのがjQuery mobile。これは学習する時間を節約してスマホ版サイトが構築できます。少し乱暴に言えば、HTMLに３行のコードを入れて、jQuery mobileのコーディングルールに従ってHTMLを書いていけば、さくっとスマホ版サイトができてしまうのです。
基本的にタグ打ちで書いていますが、ややこしいスクリプトは使いません。HTMLタグとその属性の組み合わせで書き進めていくだけです。これが開発コストを下げていきます。
スマホ版から作るメリット
とりあえず、サイトを立ち上げなければならない。コンテンツとか構成もまだ無く後からついてくる、という場合です。一般的なサイト構築だと情報設計をしてサイトマップを作って、デザインをして、という流れでしょう。ここではいきなり何かをアップしなきゃいけない、という状態にあるときです。
こんな時にスマホ版から作ってずいぶんと助けられました。
スマホ版サイト構築はPC/Mac版と携帯版のちょうど間に位置するターゲットデバイスになります。これが功を奏して下記のようなメリットをもたらしてくれました。
- HTMLの確認がPC/Macのブラウザ（Chrome or Saferi）で確認できる
→ファイルをブラウザでとりあえず開けばよい。iOSシミュレータやi-modeのシミュレータなどシミュレーター、実機がなくてもとりあえず動作確認ができ、確認が素早くできる - とりあえずデザインをする必要が無い。デフォルトのテーマカラー５色から選んで適用するだけ。
→デザインをする時間が不要。豊富なUIボタン、メニューが用意されているのでレファレンスに沿ってHTMLを書いていくだけ - 実はPCでも携帯でも閲覧ができる。
→スマホ版といえども携帯でみればテキストサイト的な感じで見ることができる。またPCもIE以外であればそこそこ表示されて動く。
つまりスマホ版を作ったことで、PC/Macから携帯までとりあえず閲覧が可能なサイトができあがることになります。
ここで早期にサイトを立ち上げて、世の中に告知することでその他のデバイス対応の時間稼ぎをします。そして後からPC/Mac版、携帯版それぞれのデザインをして立ち上げることで、それぞれのデバイスに最適化されたコンテンツを提供することができます。
コンテンツの情報整理にも有効
スマホ版でサイトを立ち上げいくときはPC版と違いシンプルなHTML構造なので、サイト構造の組み替えがサクサクできます。PC版だとナビゲーションを変えたりとか画像を作り直したりとか面倒なことが多いです。しかし、サイトに入るコンテンツが固まるまでは先にスマホ版でサイト構造を調整し、FIXした段階でPC/Mac版に着手する、というやり方が腑に落ちてきました。
また、スマホ版の画面の面積と携帯版の面積も近いので、どの程度でページ分割しておくかの整理もこの時点でできるので、携帯版のファイル作成の準備にもなります。
HTMLを編集するのですが、スマートフォンでの導線を確認しながら、テキストのコピペ・編集のみのでコンテンツの情報整理が進められるので、PCや携帯版に落とし込む時にも考えをまとめるのに役立ちます。
マルチデバイス対応が今後重要になる
おそらく今後のWebサービス・コンテンツはあらゆる端末、自宅パソコンからスマートフォン、携帯、テレビ、タブレット端末・・・、といった感じでどこからでもアクセスできるというのが重要になると思います。先日、ブログにも書いたようにhuluのような動画配信サービスでもあらゆる端末間でどこまで見たかという情報を連携しながら海外ドラマなどを楽しんでいくことができます。
これはどのようなコンテンツなのかにもよりますが、より多くのデバイスに対応していることが、多くのお客さんを得るチャンスの獲得につながります。
ブログツールなどでも簡単にスマートフォン対応、携帯対応できるものもありますが、もしスクラッチでサイトを作る場合はこのようなやり方もある、というのを参考までにここに書き留めておきます。
コメント