スマホの普及率があっという間に高くなり、今や高齢者さえiPhoneを使いこなしているほどになっている。
新しいデバイスの普及率の高さは、新デバイスへの対応が企業担当者の悩みになることも意味する。
つまり、コンシューマーがターゲットの担当者ばかりでなく、B2B企業にとってもWEBサイトのスマホ率の上昇をアナリティクスで目にするたびに、「スマホ化」の4文字が頭をよぎるようになってきたということだ。
今回の記事では、今話題のレスポンシブWEBデザイン（「レスポンシブル」と言う人が時々いるが、「ル」は要らない。「レスポンシブ（responsive）」は反応が良いという意味）について、初級者を対象に「なぜレスポンシブWEBデザインが、多くの企業担当者の心をとらえるのか」を、実際に自社サイトのレスポンシブWEBデザイン化に踏み切った担当者の声をまじえて解き明かしていきたい。
あなたがもし、スマホ対応に迫られている、もしくは検討中なら、きっと何らかの答えが見つかるはずだ。
レスポンシブWEBデザイン、スマホ専用デザインとは？
- レスポンシブWEBデザイン
- ひとつのソース（HTMLファイル）で、ユーザーがWEBサイトを閲覧する端末（PC、タブレット、スマホ）に合わせて、デザインを最適化させるフォーマットのこと。
たとえば、PCで閲覧する場合は1,000pxなどの幅広画面に対応したデザイン。スマホなら640pxの幅が狭いデザインというように、自動的にデザインが切り替わる。
- スマホ専用デザイン
- あらかじめPC用とスマホ用、それぞれにデザインした2つのHTMLファイルを用意しておき、WEBサーバーが閲覧者の環境を判断し、PCでのアクセスならPC用のHTMLファイル、スマホでのアクセスならスマホ用のHTMLファイルを表示させる。
レスポンシブWEBデザインは、パソコン上でブラウザの表示幅を狭くしていくと分かる。ブラウザをある幅まで縮めると、自動的にデザインが切り替わるのが、レスポンシブWEBデザイン。ブラウザの幅を縮めるとスクロールバーが表示されれば、レスポンシブWEBデザインではない。スマホ専用サイトを持っているかどうかは、イミューレーターでアクセスするか、スマホでアクセスして判断するしかない。
レスポンシブWEBデザインのメリット・デメリット
メリット
- 開発費用が抑えられる
-
WEBサイトを完全にスマホ対応するということは、
（1）WEBサイトの全体構成
（2）各ページの構成
（3）デザイン
（4）HTMLコーディング
（5）システムを2種類つくることになる。開発コストが2倍になるわけだ。
これに対し、レスポンシブWEBデザインを選択すれば、（1）WEBサイトの全体構成、（2）各ページの構成のコストを抑えることができる。
- 運用コストがかからない
-
レスポンシブWEBデザインは、ひとつのソース（HTMLファイル）で管理しているので、更新・修正は1ファイルに手を加えるだけで済む。修正箇所が少ないということは、片方だけ修正し忘れるといった間違い（＝情報の不統一）も圧倒的に少なくなる。
- SEO的に恩恵が大きい
-
Googleは、「コピーコンテンツ」を極端に嫌う。
「製品A」のPC用ページとスマホ用ページの内容がほぼ同じであれば、コピーコンテンツと捉えられ、どちらか一方のページをオリジナルと判断、オリジナルしかインデックスしない可能性があるのだ。
ワンソース（ひとつのHTMLファイル）で管理されていれば、PC用かスマホ用、どちらか一方がネット上から理不尽に葬られることもなくなるので、SEO的にも恩恵があることを意味する。
http://googleWEBmastercentral-ja.blogspot.jp/2012/06/google.html
デメリット
- 画像の使い方に工夫が必要
-
同じソースであるということは、画像化した文字や写真を共有するのが基本だ。
ただ、まったく画面サイズの異なるPCとスマホでは、画像の拡大縮小には限度がある。たとえばPC画面では十分に読み取れる画像文字をスマホ用に縮小すると、視認できないほど小さくなってしまうことがあるからだ。
これを回避するには、PC用の画像とスマホ用の画像2つを用意することになるのだが、多用しすぎると、HTMLの構造が複雑になったり、ファイルの読み込み速度が遅くなったりしてしまう。
こういった理由から、文字はできるだけテキストにした、シンプルなデザインにという傾向になる。
- PC・スマホのどちらにも完璧なデザインにはならない
-
レスポンシブWEBデザインは、アクセスの主流となっている端末に基準をおいて、情報要素を配置したり、デザインを行うことがほとんどだ。ただどちらかに軸足を置くと、他方の情報やデザインに物足りなさを感じることになってしまうことがある。
上記のメリット、デメリットを踏まえて、レスポンシブ、スマホ専用デザインに向いているWEBサイトを挙げてみよう。
レスポンシブWEBデザインに向いているサイトとは？
- 更新頻度の高いWEBサイト
-
運用コストのことを考えれば、迷う余地はない。
頻繁にニュースを発信したり、商品情報の修正追加や、コンテンツマーケティングに力を入れていこうとするなら、レスポンシブにしておく方がパフォーマンスは圧倒的に高い。 - 広く一般に情報を提供する使命をもつサイト
-
自治体など公的な使命をもつWEBサイト、企業であっても広くユーザーにお知らせすべき情報が多く掲示されているWEBサイトはこれにあたる。IR情報や商品の使用方法、施工マニュアル、業界シェアが高く啓蒙的な内容を掲示しているWEBサイトなど。
スマホ専用サイトを別で運営していると、コストの問題などから「今回の追加はPCサイトだけでいいか」という発想になりがちだ。
将来的な運用面も考えて判断すべきだろう。 - 客先で営業ツールとして活用されるWEBサイト
-
WEBサイトも、営業スタッフが訪問先で販促資料として活用される場面が増えてきた。そういった際にも、正確な情報提供がなされていること、商品詳細ページは「PCサイトにリンク」ではなく、タブレットやスマホでも見やすいことが強力な営業ツールとなり、営業スタッフをサポートする。
スマホ専用デザインに向いているWEBサイトとは？
- スマホ閲覧率が圧倒的に高いサイト
-
極端にスマホからの閲覧が多いなら、スマホのサイズに最適な文字量やボタンのデザインを選択するのも良い選択といえる。レスポンシブWEBデザインの場合は、ワンソースなのでどうしても要素が多くなってしまう。ターゲットユーザーの閲覧状況をチェックしながら判断しよう。
- オンラインショップなど、使いやすさが優先されるサイト
-
商品購入に誘導するなど明確なゴールが決まっている場合、「WEBサイトの使いやすさ」の優先順位はさらに高くなる。特にオンラインショップの場合は、商品検索の結果画面や、カートの使い勝手が購入率にそのまま影響するため配慮が必要だ。
- 運用コストをカバーできるだけの利益を上げられるサイト
-
最も大切な判断基準は、それだけの運用コストがかけられるWEBサイトであること。PCサイトとスマホサイトの両方をしっかりとメンテナンスするだけの利益が上げられるか、人手をかけられるかが最終的な判断基準となる。
レスポンシブWEBデザインを採用した企業の声
実際に企業のご担当者はどのように決断したのか？
レスポンシブWEBデザインまたは、スマホ専用サイトを運営される企業の広報ご担当者に話を伺った。
＜製薬メーカー様＞
- レスポンシブWEBデザイン化しているサイト
-
コーポレイトサイト、商品サイト
- 実施時期
-
2014年
- 動機は？
-
商品サイトのスマホユーザーが50%を超えたため、リニューアルと同時に対応。コーポレイトサイトについてはどうしても、という理由はなかったが商品サイトとクオリティを揃えておきたかったため実施。
- スマホ専用デザインという選択肢はなかった？
-
開発コスト、運用コストがほぼ倍になることと、SEO的にもデメリットが多いため、レスポンシブWEBデザインを選択した。
それぞれにメリット・デメリットはあるが、どこかで妥協しなければならない。当社は、レスポンシブWEBデザインのメリットを選択した。 - 評価・効果は？
-
当初、コーポレイトサイトの必要性はあるだろうかとも感じていたが、今ではスマホからのアクセスも50%程度に増えた。先行して取り組んだことになり、結果的には良かったと思っている。
＜機械製造メーカー様＞
- レスポンシブWEBデザイン化しているサイト
-
コーポレイトサイト
- 実施時期
-
2015年
- 動機は？
-
WEBサイトのリニューアルをきっかけに。B2Bがメインの業界であるためスマホ閲覧率はそれほど高くはないが、リニューアル後しばらく手を加える予算が取れないため、一気に実施することにした。
- スマホ専用デザインという選択肢はなかった？
-
全くなかった。ダイレクトに売り上げに結びつくことのないコーポレートサイトなので、更新の手間が倍になることは考えられないし、スマホ用に別サイトを作るメリットを思いつかなかった。
- 評価・効果は？
-
スマホにも対応しているということで、社内外の評価は高まっている。現場でもタブレットやスマホでのアクセスが増えると思われるし、浸透すれば携帯端末からのアクセスも増えるのではないかと考えている。
総合的に考えると、ほとんどの一般企業はレスポンシブWEBデザインを選択すべき
自社サイトへのスマホからのアクセスがどの程度なのかは、Google アナリティクスで簡単に調べることができる。日本のスマホ普及率（2015年3月時点で約60.6％）と比較してみると、一定の判断材料になるだろう。
ただ、現状自社サイトのスマホアクセス率が低かったとしても、今後スマホでのアクセスが増えていくことは間違いない。現行サイトがスマホ対応でないから閲覧されていないという可能性もあるし、上記の製薬メーカーのように、レスポンシブWEBデザイン化に踏み切ったことでスマホからのアクセスが増えたという例もあるのだ。
打ち合わせや外出時にもスマホは手放せない存在。「あのサイトなら、スマホでも見やすい」ということがターゲットに浸透すれば、競合サイトより一歩先を行くことにもつながる。
要は、ターゲットユーザーが必要とする情報すべてに関して、気軽に便利に使いたいデバイスで閲覧できるように配慮することが大切なのだ。