こんにちはshiovoです。

先日、ようやくアルカナHPのスマホサイトをOPENしました。
ひとまずは公開となりましたが、まだまだ改善したい個所もあるので、より良いサイトを目指して今後ブラッシュアップしていく予定です。

今回は、スマホサイトを作るにあたって注意したい点について書きます。

ターゲットと目的を明確に

これはPCサイトでも言えることですが、
ユーザーがどういった情報を欲しているか、どこへゴールして欲しいかによってコンテンツが決まってきます。
モバイルで企業サイトを見る場合、アクセス情報や、電話番号等の情報を調べる事が多いのではないでしょうか。
電話番号をタップして電話がかけられる自動リンク機能や、Googleマップとの連携でPCとは違ったアプローチを工夫したいところです。

サイトの設計について

端末によって画面解像度やディスプレイサイズはバラバラですが、
現時点ではもっともユーザー数が多く、解像度も１番低いiphone 3G/3GSに合わせて画面設計をすれば良いみたいです。※現時点ではそうですが、機種も増え、シェアが移れば変わる可能性もあります。

各端末の解像度一覧
～iphone 3GS　320×480px
iphone 4　　　640×960px
ipad touch　　768×1024px
Android　　　 320×480px～640×960px

ユーザビリティを考えたデザイン

・長くて見やすいページを考える（ページ遷移は少なく抑えておきたいので、スライドやアコーディオン等のjsを使い、見易さ、操作性を高める。）
・リキッドデザイン（縦でも横でも閲覧ができる、端末によって解像度はバラバラなため、pxで固定は避けたい）
・テキストは画像化しない(容量を抑えるため、見だしやボタンはCSS3を駆使してテキストのみで作る)
・屋外で利用することを考慮し、コントラストを十分とる
・ボタンは押しやすいよう大き目に作る
・リンク要素はわかりやすく（ロールオーバーが無いため、予め下線を付けたり、画像リンクには矢印をつけて工夫する ）
・文字サイズはPCサイトより大きめにする

PCサイトや携帯サイトとは違った、タッチ操作を考えたスマホならではの工夫が必要ですが、HTML5やCSS3の新しい技術も積極的に活用できるところが魅力ですね。
次回はHTML5やCSS3を使ったコーディングについて書こうかな。