始めに
スマートフォンのサイト制作の際に注意、意識すべきこととその対策法を簡単にまとめました。
あくまでスマホサイト制作のまとめであり、レスポンシブデザインのまとめではないです。
(また別の注意点があるということですね)
スマホサイトの制作時に注意すること
デバイス幅は固定されている
PCとは違い基本的にスマートフォンではブラウザを縮小、拡大はできません。
デバイス幅は固定幅になります。
どうする？
viewport設定をしてあげます。
<meta name="viewport" content="width=device-width,initial-scale=1">
viewportとは
meta要素に name="viewport" を追加すると、文書の表示領域を設定することができます。
HTML5/ページ全般/meta要素 表示領域を設定する - TAG index
詳しい説明は割愛しますが、スマホの時はこの幅で表示しますよ、って設定してあげることができます。
スマホの画面の大きさに合わせて表示幅を変化させてあげることも出来ます。
(機会があればviewportの詳しい記事も書くかも。)
デバイス幅が機種でバラバラ
iPhone5,6,7にandroidに機種によってバラバラ。ほぼ無限です。
どうする？
リキッドデザインで作ります。
幅はpxで指定しません。
% rem em
上のviewportで表示領域を変化させたら、
次は画像や文字をブラウザの大きさに合わせて変化するように設定します。
px,pt,%,em 文字の大きさ 数値一覧表 - 山崎はるかのメモ
wi-fiのない3G回線など遅い環境を想定
ブロードバンド環境やwi-fiのないところでは、スマホはまだまだかなり遅いスピードになるかもしれません。
重いサイトは表示に時間がかかってしまうので、軽量化を考えなければいけません。
画像やJavaScript、動画を極力減らします。
またはスマホ用の軽量なものを用意するといいでしょう。圧縮はもちろんしましょう。
どうする？
CSS3のanimationの利用も考えます。
JavaScriptでの表現に近いことがanimationでも可能だったりします。
状況に合わせて使い分けるのも大事です。
タッチパネル操作で作る
スマホでは、タッチ、フリックなど指を使って操作します。よってマウスやスマートパッドを用いて小さなカーソルでの操作とはまた違う画面設計が必要です。
手の大きさ、小さな画面の中でも使いやすいことを意識しなければいけません。
どうする？
直感的に操作できる設計にします。
タッチ操作の指の大きさを意識します。
まとめ
大きく分けてですが、PCサイトの制作と比べてもこれはどの違いが出てきます。
レスポンシブのサイトにしてもそのまま縮めるだけでは、これらの使いやすさは実現しません。
ユーザビリティを意識した設計をしましょう。