スマートフォンの普及率がぐんぐん上がり、スマホサイトのプロジェクトも増えています。 制作のたびに色々と調べるのですが、基本的なポイントをメモ。

（スマホの進化とともにポイントも変わってきますが・・）

 

●レイアウト

・ターゲットユーザーがほしい情報はページ上部に表示

・PC版がある場合はPCサイトへのボタンを設置

 

以下PSDにてデザインする場合のサイズです。

※Retina対応のため2倍

 

●横幅 　640ピクセル

※左右に20ピクセルのマージンを設ける

 

●フォントサイズ

通常テキスト　28px

テキストリンクの場合はタップ領域を考慮して十分なスペースを確保しておきます。

読んでもらえなくてもいいけど、表示しておかないテキスト等は20pxでもOKと思います。

ただ、ターゲットユーザーや閲覧環境によっては最小は24pxの方がいいかもしれません。

 

●ボタンサイズ

最小88pxと言われているようです。

しかし、指の太さによりますがちょっとタップしにくい気がします。

わたしの指は一般的なサイズ（と思う）ですが押し間違えることが多々あります。

スマホは歩きながら操作することも多いので、重要なボタンは120pxほどあると操作しやすいです。

 

●カラー

サイトの用途によりますが、屋外で閲覧することも多いのでUIに関わるコントラストははっきりさせた方がいいでしょう。

機種によって色の出方が大きく違ってくるので、これも要注意。

たまたま手元にあるiPhoneとAQUOS PHONEで検証してみましたが、AQUOS PHONEは赤みが強い印象です。（設定によるのかな）

比べずに単体で見れば気にならないかもしれませんが、色はサイトのイメージに大きくかかわってくるので可能な範囲での検証をおすすめします。

———————————-

PC画面でデザイン作業をしているとサイズの感覚が分かりにくいので、わたしは実機でサンプルサイズ画面を見ながらレイアウトしていきます。

 

スマホサイトはユーザーが情報を探して迷ったり、表示に時間がかかると離脱率が高いです。

そのため、しっかりとしたUI設計が必要・・。

 

そんなわけで今日も手のひらサイズの小さい画面で四苦八苦しています・・。