スマートフォン対応サイトの作りかたの基礎（第2回）

みなさま、こんにちは。All About ホームページ作成ガイドの西村文宏でございます。

前回に引き続き、スマートフォン用ウェブサイトの作り方についてご紹介いたします。

前回は、スマートフォン用ページを新たに作る場合に、ページ全体が勝手に縮小表示されてしまうのを回避する方法をご紹介しました。

今回は、PC用に作ってあるページを、大きく改修することなく、できるだけスマートフォンでも見やすくする方法をご紹介いたします。

◆ スマートフォンでの縮小率が低くて済むように調整する

PC画面よりもスマートフォン画面の方が小さいため、PCで閲覧することを前提にレイアウトされたページなら、縮小して表示しなければならない点はどうしようもありません。

しかし、縮小率をできるだけ低く抑えることができれば、文字が小さくなりすぎるのを防げます。

そうすれば、縮小表示されている状態でも、ある程度の見やすさを保つことができるでしょう。

◆ どれくらいまで横幅を狭めても大丈夫なのかを調べる

まずは、レイアウトが崩れないギリギリの狭さを調べましょう。

PC上のブラウザでウェブページを表示させ、ブラウザのウインドウ幅を少しずつ狭めてみて下さい。レイアウトが崩れてしまう直前まで狭めます。

例えば、横幅1024pxくらいで閲覧されることを想定して作成されたページでも、800pxくらいまでは狭めても問題なく閲覧できるかもしれません。もしかすると、600pxくらいまで狭めても問題ないかもしれません。とにかく、「問題なく閲覧できる最小の横幅」を調べます。

仮に「640pxまで狭めても大丈夫」だと分かったなら、「画面の横幅が640pxだと仮定してレンダリング（描画）してから縮小する」ように、スマートフォン用ブラウザに指示を出しましょう。

そうすれば、縮小率を必要最小限に抑えられるため、自動縮小によって文字サイズが小さくなりすぎるのを防ぐことができます。

◆最小横幅をVIEWPORTの値に指定する

例えば、レイアウトの崩れない最小の横幅が640pxだったなら、HTMLソース内に以下の１行を記述します。

<meta name=”viewport” content=”width=640″>

上記のようにmeta要素を記述すると、そのページは「画面の横幅が640pxだと仮定してレンダリング（描画）した結果を、スマートフォンの画面内に収まるよう縮小」されて表示されます。

ですから、ここで指定する値（上記では640）が小さければ小さいほど、縮小率も小さくなり、（縮小表示されている状態でも）文字はそれだけ大きくなるわけです。

なお、もしスマートフォン画面の横幅が640pxよりも広い場合は、全く縮小されません。

縮小率をゼロにできなかったとしても、縮小率を低く抑えることで、PC用ページを（改修することなく）スマートフォンでも見やすくできます。文字は、小さいよりは大きい方が読みやすいでしょうから。

◆ 元々横幅を固定してレイアウトを作っているページでは

元々固定幅でページを作っている場合には、その幅をそのまま指定します。

例えば、横幅800px固定でページのレイアウトを作っているなら、以下のように記述します。

<meta name=”viewport” content=”width=800″>

前回は、この「640」や「800」という数値の代わりに「device-width」という文字列を記述していました。

これは、「描画する横幅を、端末の実際の横幅に合わせる」という意味です。

なお、上記のソースを記述する場所は、前回にもご説明した通りHTMLソースのhead要素内（＝「 」タグと「」タグの間）

ならどこでも構いません。

数値も含めて、すべての文字は半角文字で記述しなければならない点に注意して下さい。

このように、HTMLソースにたった１行のmeta要素を追記するだけで、PC用に作られたページを縮小されすぎることなくスマートフォンで表示させられるようになります。

「スマートフォン専用ページを作る余力はないが、既存ページをスマートフォンでも見やすく表示させたい」

という場合には、ぜひ試してみて下さい。

たった1行で済むので、とてもお手軽でおすすめです。

以上、今回の連載はここまでです。

最後までお付き合いいただきまして、ありがとうございました。またの機会を楽しみにしております。

講師「All About ホームページ作成ガイド　西村 文宏」のコラム一覧