スマホ対応のWebサイト構築の考え方｜スマホ対応のための２つの方法

2015/10/15

簡単・シンプル・使いやすい！月間100万人が使うブログサービス【JUGEM】

そろそろホームページをリニューアルしようか？と考えている企業のWeb担当者へアドバイス。

リニューアルするなら「スマホ最適化」を視野に入れて企画･制作を考えましょう！

昨今では、パソコンでホームページを閲覧するよりもスマホで閲覧するユーザーのほうが多くなっています。

スマホのみ利用が1.6倍、スマホのみ検索キーワードが7倍、ヤフーの調査にみる検索市場の将来
マルチデバイス化の傾向は変わらずも、スマホのみユーザーの急拡大によって検索のスマホシフトが加速
http://web-tan.forum.impressrd.jp/yahooads/2015/01/27/19061

スマホ最適化とは、スマホの小さな縦長画面でホームページを閲覧したときに、その画面特性に併せてレイアウトを観やすく最適化されるような技術を導入したサイトのことを指します。

まぁ、ここまでは日々の業界情報などでWeb担当者であればご理解いただいていることと思いますが、「スマホ最適化」には2つの方法があるということをお伝えしておきます。

ひとつは、パソコンとスマホでそれぞれにページ（HTML）を用意しておき、アクセスしたユーザーの環境（画面サイズ）を判断してどちらのHTMLを表示するかを判断させるタイプ。

ふたつめは、ひとつのページ（HTML)をアクセスしたユーザーの環境（画面サイズ）を基に読み込ませるCSSを変え、最適化するタイプ。これは俗にワンソースマルチユース型とも言われています。

昨今のスマホサイトは、上記のどちらかを採用していますが、それぞれにメリットデメリットが存在します。

それぞれにHTMLを準備する場合

最大のメリットは、それぞれの画面サイズに特化したサイト作りができるということで、パソコンとスマホでそれぞれにターゲットを設定し、構築することで成果を最大限に追及することができます。
デメリットとしては、運営管理の複雑化があげられるでしょう。パソコン版を更新したらスマホ版の修正も必要になり、単純に計算すると手間が2倍掛かるといえます。また双方のデータにアンマッチがあるとユーザーに混乱を与えることにもなり注意が必要になります。

ひとつのHTMLでCSSで切り替える場合

このメリットは、先のデメリットであった運営管理が容易であるということ。情報源のHTMLソースは１つのため、情報のアンマッチなどは起こりません。
デメリットとしては、細かなデザインやレイアウト、仕掛けなどに制限がでてしまうことがあげられます。１つのHTMLをCSSによってレイアウトを変更しているの過ぎないので「スマホではAのように、パソコンではBのように」といった各々に特化したようなデザインは表現できません。