スマートフォンに対応したWEBサイトを作るときに、
・携帯サイトと同じような感じで作ればいい?
・それとも、PCと同じような表現が可能だからPCサイトと
同様にサイトを作ればいい?
悩ましいところですね...
丁度その中間に該当するところがスマートフォンであり、
また、スマートフォン独自のタッチインターフェイスもあるため、
従来のWEBサイト開発と異なります。
では、何を参考に
それは...「Mobile First」です。
この数年に登場したキーワードとして「Mobile First」という
考え方があります。
Mobile Firstは、2010年2月にバルセロナで開催された
カンファレンスにおいて、GoogleのCEOであるエリック・シュミット氏が
新戦略として唱えたことで話題になりました。
では、どのようなものでしょうか
■スクリーンサイズと解像度の多様性
各キャリアやメーカーが様々なモバイル向けOSを搭載した機種
それぞれでスクリーンサイズや解像度、その他の仕様が異なります。
そのため、横幅や縦幅、画像のサイズなどに気を付けないといけません。
widthを定数で指定するとレイアウトが崩れてしまうこともあるので、
基本はリキッド(可変幅)でコーディングしましょう。
また、スマートフォンの向きによって、横置きと縦置きと変わり、
横幅が変化します。
上記と同じようにリキッド(可変幅)にしてレイアウトが
崩れないよう注意する必要があります。
勝手に拡大縮小することができますので、そこまで
配慮できればなおよいでしょう。
【要点】
・リキッド(可変幅)で幅指定する
・できるだけシンプルなレイアウトにする
■パフォーマンスの最適化
端末スペックや回線速度はやはりそこはモバイル端末です。
スマートフォンでは、3G回線で利用する場合も非常に多いです。
3G回線はWi-fiと比べると転送速度は格段と落ちるので、
表示時間にかかるストレスを極力軽減する必要があります。
そのため、画像を極力使用せず、通信速度の遅い
スマートフォンの回線でも閲覧されることを考慮し、
画像の使用頻度を減らしてサイトの容量を減らしましょう。
画像を抑える代わりに、スマートフォンのブラウザでは
CSS3やHTML5を惜しみなく使用することが出来ます。
CSS3のグラデーションやテキストシャドウを活用して
見栄えの良いデザインを作ることが出来ます。
border radius、text shadow、box shadow、gradientあたりが
使いやすいと思います。
【要点】
・HTML5、CSS3を積極的に利用する
・画像を極力減らす
・表示時間を軽減するため、画面遷移そのものを極力減らす
(Javascriptなどを用いることにより、画面を遷移させる等)
■タッチインターフェイス
従来と異なり、タッチ操作で快適に使えます。
それは、マウスポインタのように繊細な操作が
できないという制約はりますが、直感的な操作を
することができます。
タッチ操作は、大雑把な操作になるため、
最適な行間や余白をとるようにしましょう。
【要点】
・繊細な操作ができないことを前提にする
・最適な行間や余白をとるようにする
・馴染みのあるUIを参考にするのも一つです
■位置情報システム
位置情報システムは、モバイル環境で特に有効な機能でしょう。
GPSなどを利用した位置情報システムを利用すれば、
現在私がいる位置をGPSで取得できます。
【要点】
・外出先で必要ということを前提に位置情報を利用する
■デバイスの能力
位置情報システムも含め、加速度センサーやカメラなど
モバイルデバイス特有の機能があり、またHTML5/ CSS3などの
Web技術への対応も進んでいるので、それらの技術を
できる限り利用する。
【要点】
・位置情報、加速度センサー、カメラ等、スマートフォン特有の
機能が利用できないか検討する
・HTML5、CSS3を積極的に利用する
やはり、スマートフォン特有の内容が多いですね。
まだまだ、ノウハウも少ないので、これからこういったことを
考慮できるようになると、スマートフォン業界は右肩上がりなので、
特に重宝されるのではないでしょうか