目次
レスポンシブサイトとは
PC、タブレット、スマホなど異なるデバイスで、画面サイズに応じてCSSを切りかえる手法のことです。
レスポンシブサイトは、1つのHTMLファイルとデバイスごとのCSSを切り替えることで、デバイスごとに情報を更新する必要がないのがメリットです。
レスポンシブサイトのサンプルは、下記からダウンロードできます。
ブラウザのサイズが767px以下になると、レイアウトが変更されます。
responsiveサンプル
CSSを切り替えるには、CSS3で追加されたメディアクエリ（Media Queries）を利用します。
サンプルサイト内のstyle.css内に下記のような記述があります。
@media only screen and (max-width: 767px), print { }
これは、画面サイズが767px以下の場合に{ }内のCSSを使用するという記述です。
メディアクエリに関しては、3章、4章で詳しく解説していきます。
スマホサイトの注意点
PCサイトに比べ、タブレットやスマホなどのモバイルサイトは、指で操作する点や画面サイズが小さいという特徴があります。
その点を考慮してPCサイトとモバイルサイトの設計を行う必要があります。
まずは、画面サイズの小さなスマホサイトを設計する際の注意点を見ていきましょう。
レイアウトの基本は1カラム
画面の幅がせまいため、2カラム以上のコンテンツにすると、1行あたりのテキストが少なくなり読みづらくなります。
画像も小さくなるため、画像に何が写っているいるのか分かりづらくなります。
そのため、1カラムのレイアウトが基本です。
可変幅のレイアウトにする
スマホの画面サイズは様々で、pxベースの固定幅レイアウトで設計した場合、どのデバイスサイズを基準にするのかが問題になります。
そのため、幅は%を使った可変幅にするのが基本です。
文字サイズは大きめにする
スマホは、閲覧する環境が屋外や移動しながら見ることが多くなります。
そのため、小さい文字では読みづらく、可読性や視認性が低下します。
読みやすい段落（p要素）の文字サイズは、14px〜18pxが基本です。
見出し（h1〜h6）は、PCサイトのようにサイズを大きくすると1行あたりの文字数が少なくなり逆に読みづらくなります。
文字サイズで調整するのではなくmarginやpaddingを使い余白を空けたり、borderなどで装飾するなどの工夫が必要になります。
日本語フォントに関して
iPhoneの日本語フォントは「ヒラギノ角ゴ ProN W3」がデフォルトフォントになっています。
Androidはバージョンや端末ごとに、異なる日本語フォントがデフォルトになっています。
またAndroidでは、font-weight: bold; による太字指定が無視されるので注意しましょう。
画像は少なくする
PCに比べ、スマホは通信速度が遅くなります。
画像が多い場合、表示までに時間がかかりユーザーが離脱してしまう可能性が高くなります。
イメージ写真、画像は必要最低限にしましょう。
タップする領域
ボタンなどタップできる領域は44 X 44px以上にしましょう。
これはAppleのガイドラインで推奨されているサイズです。
サイズは絶対ではありませんが、これぐらいのサイズは必要だと考えていいでしょう。
テキストリンクは、タップ間違いなどの誤動作を避けるために、テキストリンクの行間や左右の間隔を広くとるように調整しましょう。
下記のサイトが参考になります。
ユーザインターフェイスのデザインのヒント
httpss://developer.apple.com/design/tips/jp/
画像の解像度
iPhoneは画像の解像度が2倍です。
Androidは一部のデバイスで、解像度が3倍の機種もあります。
画像解像度はピクセル密度のことで、幅100pxの画像であれば200pxのサイズの画像を使用しないと輪郭がぼけた画像になってしまいます。
そのため、画像が多くなると表示に時間がかかります。
配色に関して
野外でスマホを使用すると太陽光などで淡い配色は、ほとんど見えなくなります。
淡い配色は避け、コントラスト（明暗差）がはっきりする配色にしましょう。
Googleのモバイルサイトの評価
Googleは今までモバイルサイトの有り無しに関係なく検索の順位を評価していました。
しかし2016年に「モバイル ファースト インデックス」を発表します。
これは従来の評価方法と違い、モバイルサイトを基準にサイトの評価をしていこうという仕様です。
2017年1月の段階では、いつから実施されるかのアナウンスはされていませんが、モバイルサイトが重要であることが明確になったと言えます。
レスポンシブサイトは、PCサイトとモバイルサイトの内容が同じになるため、Googleも推奨している仕様です。