ウェブラボ代表の山浦が、
Web担当者・経営者・起業家に向けて配信するコラム

Webを集客に活用したい人のための
Webサイト・マネジメント術

最新のトピックや実務家ならではの身近なちょっとした疑問に回答しています。

スマートフォン対応のやり方

2014.04.25

レスポンシブデザイン

質問自社のWebサイトをスマートフォン対応サイトにしたいのですが、スマートフォン専用のサイトを別途構築するか、レスポンシブWebデザインにするか迷っています。どちらがオススメでしょうか?

回答オススメは、Webサイトは基本的にレスポンシブWebデザイン、ランディングページなどはスマートフォン専用サイトを別途構築する方法です。

レスポンシブWebデザインとは、同じHTMLファイルを、ユーザーが閲覧しているブラウザのサイズに応じて、ページのレイアウトや画像のサイズを変更して表示する手法のことです。

レスポンシブWebデザインとは

画面例)セブン銀行 海外送金サービス  http://www.sevenbank.co.jp/soukin/jp/ 

レスポンシブWebデザインの例

ブラウザの幅を縮めていくと、それに合わせてレイアウトが変わる

レスポンシブWebデザインをオススメする理由は以下の3点です。

【理由1】
更新の際に、作業をする箇所が1か所で済むので、間違いがおきにくく、確認時の工数が少なくて済む

【理由2】
URLが1つになるので、ユーザーがシェアしたりリンクを張ったりしやすくなる。これはSEOにとっても無視できないことです。

【理由3】
googleが推奨しているから

Googleによるこの記事↓に衝撃を受けた制作者も多いと思います。
http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

しかし、レスポンシブWebデザインにもいくつかのデメリットはあります。そのうち最大のデメリットは、レイアウトやデザインの端末毎の自由度が減るというものです。

どういうことかと言うと、レスポンシブWebデザインの場合、基本的にはPCユーザーとスマートフォンユーザーでは、レイアウトは端末毎に最適化されますが、同一のHTMLソースを利用している以上、コンテンツの順序や内容は基本的には同じになります。

ですから、例えばスマートフォンユーザーにはWebサイトの文章をPCユーザー向けのものよりもコンパクトにしたいといったことが出来ないことがあります。

それが成果として顕著に現れてくるのが、リスティング広告等のランディングページです。

リスティング広告の目的の多くは、資料請求やお問い合わせの獲得です。

スマートフォンユーザーは、電車での移動時間など、隙間時間にWebサイトを閲覧している可能性が高いので、スマートフォンユーザー向けにリスティング広告を展開する場合は、その隙間時間内に資料請求やお問い合わせが出来るように画面やコンテンツを設計する必要があります。

そうなると、PCユーザーよりも内容はコンパクトにならざるを得ないですし、入力フォームなどの入力項目も、極力入力量が少なく簡単に済むようにしなければなりません。

逆に、PCユーザー向けのランディングページはむしろ親切に必要な情報はできるだけ伝えていかなければならないですから、PCユーザー向けとスマートフォンユーザー向けのランディングページを共通化させようとすると、非常に無理が発生してしまうのです。

ランディングページは、あまりSEOのことを気にする必要もないので、PCユーザー向けとスマートフォンユーザー向けでURLが分かれても問題ありません。

よって、当社では、スマートフォン対応をする場合、本体のWebサイトはレスポンシブWebデザインで、ランディングページはスマートフォン専用サイトで構築するようにしています。

【関連ページ】
スマートフォンサイト制作ガイド

山浦 仁

山浦 仁 / ウェブラボ株式会社 代表取締役

大学卒業後、大手Web制作会社にてWebディレクターとして数多くの国内大手企業のプロジェクトに携わる。2004年にウェブラボを設立。2007年には中小企業向けのWeb制作ノウハウとCMS機能をパッケージにした「サイト職人CMS」を発表。現在は、中小企業だけでなく大手企業からの引き合いも多く、Webコンサルタントとしても活動中。上級ウェブ解析士。全日本SEO協会認定コンサルタント。

オリエンシートダウンロード

採用サイト 絶対に外せない5つのチェックポイント

オリエンシートダウンロード

CONTACT

お電話でのお問い合わせ

03-5366-3277

受付時間:平日9:30〜18:30

メールフォームからのお問い合わせ

お問い合わせ(東京本社)

PAGETOP

Document資料請求

Contactお問い合わせ