スマートフォン対応ページのデザインで気をつけたほうがいい4つのポイント

今までスマートフォン対応の小ネタばかり書いてきたので、ちょっとまとまった記事を書いてみました。
これまでのPC向けのWEBデザインの感覚とは違う部分があるので、これからスマートフォンのデザインをやるって人も、すでにやってる方も参考にしてみてください。

画像などのコンテンツの幅をデバイスの幅ぴったりにしない

スマートフォンのブラウザはスクロールした時にスクロールバーがひょっこりと表示されます。
画像などを幅ぴったりに表示してると、上にスクロールバーが重なって見栄えがよくないです。

なので、重ならないように左右に余白をもたせましょう。
iPhoneを基準に考えると、8px程度あれば大丈夫です。

余談ですが、私がスマートフォン対応ページを作るときはリキッドデザインにします。(Androidの様々な解像度や横向きの対応を考えて)
iPhoneの幅320pxに左右8px(計16px)余白をもたせると304pxですね。
この304pxって数字は、320pxに95%を掛けることで求められます。

なので、基本はwidthには95%以内で指定しておくと収まりがよくなりますので、覚えておいて損はないでしょう。

repeatのできない背景画像のデザインはなるべく避ける

スマートフォンは縦・横向きに変更することが可能で、横向きの場合を考えると端末の高さに合わせた大きな画像を準備する必要があります。
Retina Display対応を必須と考えると、最低でも幅960px、高さ712pxの画像が必要です。

幅960px・高さ712pxの1枚画像となると結構な容量になることは経験上わかりますね。

できれば背景画像はrepeat可能な画像や、ベタ塗りまたはCSS3でグラデーションが使えるのでグラデーションにしてあげたほうが無難でしょう。

フォーム系はなるべくデフォルトのものを使用しない

以前「select要素の見た目を変える」でも書きましたが、フォーム系は特にAndroidのブラウザでは見た目がバラバラでナンセンスなものが多いです。
解決策は上の記事にも書いてますが、CSSで見た目は好きなように変えることが可能です。

また、ラジオボタンに関しては、label要素のfor属性を指定していても、タップできる範囲が○の部分しかないので、工夫が必要になってきます。

この解決策は下記の記事が参考になります。

スマートフォン向けサイトのラジオボタンを良さ気な感じに。 – CSS HappyLife

その辺も踏まえてフォームのパーツもこだわって作りましょう。

タブレットまで意識したデザインを

モバイルサイトをスマートフォン向けに作り直す場合、動画・音楽などの再生環境を考えると、タブレットまで対象にするページも時にあると思います。
そんな時にスマートフォン向けに作ったから問題ないと思って見てみると、かなりスカスカに感じたり、リキッドデザインで画像のwidthを100%で指定してると拡大されてしまって荒くなってしまいます。


なので、max-widthは何pxなのかを念頭に置いておき、デザインをしていきましょう。
全体を囲うdivにはタブレット用にメディアクエリで個別にそのwidthとmargin:autoを指定しておき、メインで使うような画像もそのサイズで作ります。
個人的にはRetina Displayを基準と考えて、max-widthは640pxに決めています。

まとめ

もしかすると自分の中では当たり前すぎて、まだまだ伝えきれてないポイントがあるような気がします。
また何かあれば小ネタ的に出していこうと思います。

ちなみに画像は「フリー写真素材 :: Free.Stocker【無料・商用可・著作権表示不要】」、フォントは「ポケモンフォント」を使用させていただきました。この場を借りてお礼申し上げます。

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

WEBサイトの製作に大変役に立ちました!
コメントだけで申し訳ないですが、お礼申し上げます。

少しだけ工夫を拝借してます。^^;

グッド2012年8月11日 5:11 PM

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ