2014/09/24

レスポンシブWebデザインにするか別にスマホサイトを作るべきか

いまやスマホでのホームページアクセスは5割を超える。時と場所を選ばないスマホのインターネット利用が増えるのは当然だろう。特に若い世代でのスマホ普及率は非常に高い。
もし、あなたが企業のWeb担当者だとして、まだスマホサイトに対応していないなら、いろいろ検討することは多いだろう。この記事ではスマホサイトを導入する際にどうやって現在のWeb運用からスマホ対応へ移行していくか、レスポンシブがいいのか、そうでないほうがいいのかなどを具体的にみていく。

目次

  1. 採用ページだけでもスマホ対応するといい
  2. スマホサイトを簡単に導入にするにはどうすればいいか
  3. おすすめのスマホサイト対応方法は?
  4. 決まったらWeb制作会社にはこう伝える

採用ページだけでもスマホ対応するといい

Webサイトの閲覧対象者が若い人が多いならスマホ対応はしたほうがいいだろう。よくあるパターンは採用ページだけでもスマホ対応するというもの。コーポレートサイトがBtoBの場合、スマホの閲覧はあまり意味がない。
というのもビジネス目的の人はオフィスのPCなどでゆっくり見て検討するのだから、その人むけにわざわざスマホ対応を無理してコストと時間をかけて作る必要はない。しかし、若い人むけに人事採用ページをスマホ対応する意味はある。

特に外部の採用サイト(マイナビとか、リクナビとかリブセンスとか)で募集をかけている場合は、スマホ対応にすると効果は顕著だろう。そういった媒体で興味をもった人は、たいていその会社のサイトをググってくる。
その際、もちろんコーポレートサイト全体がスマホ対応しているにこしたことはないが、採用ページすらスマホに最適化されていないと、閲覧がしづらいためにすぐサイトから出て行ってしまうのだ。

せっかく興味をもって応募しようとしてくれた人をみすみす逃がすことになる。こういった理由でスマホを持っていて、そういう層が一番見そうな採用ページだけでも、スマホ対応する意味はある。
私の経験上、スマホ対応しただけでWebサイトの直帰率が半分以下になり、問い合わせが増えた事例などは多数ある。

スマホサイトを簡単に導入にするにはどうすればいいか

そこで具体的にスマホサイトにするにはどうすればいいか、技術的な仕様を考える必要がでてくる。Webサイトをスマホ対応するには大別して2つの方法がある。

  1. レスポンシブWebデザイン
  2. UA判定によるスマホサイト

レスポンシブWebデザイン

これはPCとかスマホではなく、ブラウザ(インターネットを閲覧するソフト)の画面の幅に応じてWebサイトの表示が切り替わるという技術。URLはPCでもスマホでも同じ。実はこのブログ自体がレスポンシブWebbデザインでできている。

PCでご覧の方は、ブラウザの幅を狭めたり広めたりすると、デザインが切り替わるのが分かるだろう。468px未満はスマホ、469px〜980pxはiPadなどのタブレット、981px以上はパソコンで快適に閲覧できるように作られている。
技術的な話をするとCSSのメディアクエリという機能で切り替わっている。難しいプログラミングを勉強しなくても、htmlに免疫がある人ならそんなに時間をかけずに習得できる。

ライバル会社のWebサイトがレスポンシブなのかどうか気になったら、ブラウザの幅を広げたり閉じたりすればそれがレスポンシブかどうかすぐに分かる。

UA判定によるスマホサイト

UAとはユーザーエージェントの頭文字をとったもの。URLはPCはとスマホで違う。インターネットにアクセスできる端末は、インターネットにアクセスする時は例外なく必ず端末自身の情報をWebブラウザに渡している。

その際、「私はWindowsのIE8です」とか「iPhoneのsafariです」といった感じで情報を渡すのだが、これがUAである。UAを受け取ったWebブラウザはUAに応じたWebサイトを表示する。WindowsならPC用のホームページ、スマホならスマホサイトといった具合である。これを導入するにはそれなりの専門知識が必要で、レスポンシブよりは難しい。

レスポンシブとUA判定スマホサイトの比較

Web担当者が自分で対応できるなら何も問題ないが例えば外部のWeb制作会社にスマホサイトの制作を依頼するとき、この2つの違いは理解しておく必要がある。丸投げすると後で痛い目をみるどころか、そもそも話がすすまない。

項目 レスポンシブWebデザイン UA判定スマホサイト
制作コスト PCページを1とした場合、1.5倍 PCページを1とした場合、2倍
運用コスト PCを1とした場合、1倍 PCを1とした場合、2倍以上
端末に応じた細かい作り込み ほぼ不可能 簡単
デザインの良し悪し 関係ない 関係ない
URL 同じ 異なる
対SEO 普通 場合によってはペナルティの可能性あり

こまかく説明すると、レスポンシブWebデザインはあくまでPCでもスマホでも同じページなので、管理が楽で、制作時も1ページのカウントとなるため、スマホサイトを別に作るより安いのである。同じページのため閲覧内容も同じで、画幅に応じてレイアウトが調整されるだけ。

一方、UA判定をするとページはPCとスマホで2つに別れるため、制作コストも管理の手間も倍となる。ただし、別のページ扱いのため、それぞれに応じた内容を作り込める。本格的に運用するならこちらがいいだろう。

SEOについては大差ない。レスポンシブのほうが有利ということはない。ただし、UA判定によるスマホサイトは、同じような内容が2ページあり不正だと検索エンジンに見なされる可能性がある。
これを回避するにはスマホサイトである旨を明記する必要がある。アクセス解析の際もアクセスが重複して、PVなどが増えたように感じる可能性があるので注意が必要。

おすすめのスマホサイト対応方法は?

大抵の場合レスポンシブということになるだろう。注意すべきはCMSを導入しているかどうかだ。
CMSを導入していれば、比較的簡単にコーポレートサイト全体をレスポンシブに対応することが可能だ。ただし、CMSを導入していない場合は、コストの安いレスポンシブといえど、対応に時間はかかる。
なので、本当にスマホ対応をすることで効果が上がりそうなページをよく検討し、そのページだけでも先にスマホ対応するというのが一番現実的だし、実際にそうやって、既存のWebサイトから順次スマホ対応している会社はけっこう多い。

ただし、効果を上げている会社は事前の調査がしっかりしている。本当にコストをかけて回収できるか、サイト閲覧者にスマホアクセスが多いかなどを時間をかけて調べている。
こういった手間があってこそ、スマホサイトにした際に効果があるのであって、ライバル会社がスマホ対応したからとか、なんとなくレスポンシブが流行っているからなどの理由で安易にWebサイトをスマホ対応しても意味がないことのほうが多い。

決まったらWeb制作会社にはこう伝える

さて仮に、検討の結果レスポンシブWebデザインを導入することになった場合、それをWeb制作会社に伝えるなり、社内のWebデザイナーに伝えることになると思う。その際注意すべき点は以下の通り。

多様な環境で確認する

今のインターネットアクセス環境は実に多様なため全てを網羅することはできない。最低限押さえておきたいのはWindows IE8、IE9、FireFox、Chrome、Mac Safari、iPhone、Androidなど。特にIEは利用者が多いのと、バージョン8と9を境にして大きな違いがあるので注意が必要。
また、多様なブラウザに対応するためにjavascriptを使うことがあるが、ちょっとした環境の違いでこれが無効になることがある。

無効になるとスマホの場合だけ写真が表示されないとか、あるいはその逆のことが起きたりする。こういったことを制作の段階から注意して進めないと、完成してから致命的なミスがあった場合、それを回復するには金銭的にも時間的にもコストが重くのしかかるので注意が必要である。

最後はすこし脅す内容となったが、レスポンシブWebデザインは手軽にスマホ対応する方法としては非常にいい。まだスマホ対応していないのなら、一度検討してみるといいだろう。

このブログの筆者

早川朋孝
早川朋孝
ネコ好きな読書家。
月一冊は専門書を読むのが目標。年間読書計画はだいたい決まっているが、だいたい横にそれるのが悩み。好きな作家は塩野七生さん、佐藤優さんなど。タバコ嫌いで、ちょい右寄りです。

仕事はウェブが専門。学生の頃よりウェブ制作に従事し、CMSの提案やアクセス解析が得意。上場企業や、東京オリンピック関連サイトなど大規模ウェブサイトのプロジェクトを多数経験。仕事のウェブサイトはこちら
TwitterとFacebookとRSSで更新情報を受け取れます
RSS

最近のエントリー