スマートフォン向けにサイトを最適化する

スマホとPCでサイトの表示を変える

スマートフォンが相当普及してきたので、ネットへのアクセスの仕方も変わってきています。ちょっと前まではパソコンからのアクセスの方がたくさんありましたが、今では（2013年秋現在）パソコンとスマホで半々くらいの比率になっています。

スマホ対応の必要性

パソコン用に作られているページをスマホで見るとストレスを感じます。文字が小さかったり画面の左右幅が入りきらない状態で表示されるサイトはスマホに対応したページを用意するべきですがページ数が100以上にもなるサイトだと、修正するのは大変な作業になります。

スマートフォンとパソコン、それとタブレット、なるべく最小限の労力でそれぞれのデバイスで見やすく表示する方法を考えてみました。

スマホサイトへ最適化

PCサイトをスマホで見たときに多くのサイトで感じることは、表示が小さくなってしまって文字が読みづらいこと。これが最もイライラを覚えることだと思います。テキストサイズの最適化、これが一番の改善点です。この他にスマホサイトに手直しするときの修正ポイントとしては、

シンプルなデザインにする
一画面に表示される情報量をコントロール
左右幅を100％にして画面全体を使って表示

といったことが挙げられます。

シンプルなデザインにすることで、通信速度による表示スピードの遅さをカバーできます。CSSで装飾している画像を読み込まないようにしたり、シンプルなCSSだけで作れるデザインに変えるだけでも速くなります。また、スマホの画面は小さいので一画面に表示される情報量をコントロールする必要があります。

カラム数の図

レイアウトの構成を2列、3列から1列にすることでスマホでも見やすくなります。サイドバーなどはメインコンテンツの下に表示するようにレイアウトを替え、優先度の高いものから表示させるようにします。

レイアウトの左右幅を数値指定して固定化しているサイトだと不必要な白スペースができてしまいます。これはスマホ画面の左右幅から数値指定された幅に比率をあわせて表示するためです。左右幅を100％使って表示させるように指定・変更することで余分なアキができず画面全体を使って表示されます。

スマホ最適化

最適化への手順

METAタグにviewportを設定する
CSSを振り分ける

スマホ対応サイトはこの2つを押さえておくだけで見やすさがだいぶ違います。

viewport

METAタグのviewportの設定はてっく煮ブログさんの記事が役立ちます。とりあえずスマホに対応させたいなら <meta name="viewport" content="width=device-width"> とメタタグを入れておけば文字は大きくなります。

レイアウトの幅を数値指定している場合には
<meta name="viewport" content="width=640">
といったようにレイアウトの幅と数値を揃えてを指定することで余白ができるのを防ぐことができます。viewportには他に次のような設定があります。

width="200〜10000の範囲"：表示領域の幅（device-widthとすると画面の幅に合わせる）
height="233〜10000の範囲"：表示領域の高さ（device-heightとすると画面の高さに合わせる）
initial-scale="minimum-scale〜maximum-scaleの範囲"：初期のズーム倍率
minimum-scale="0〜10の範囲"：最小倍率
maximum-scale="0〜10の範囲"：最大倍率
user-scalable="yes or no"：ズームの操作
複数の指定する場合はカンマで区切って記述。
<meta name="viewport" content="width=640, initial-scale=1, minimum-scale=0.5, maximum-scale=2">