「レスポンシブ化」でPCサイトをモバイル対応にするポイントは!?

PCサイトをモバイル環境での表示に対応させる

更新日:2017年10月05日 | 公開日:2017年10月05日

ここ数年でスマートフォンやタブレットなどモバイルデバイスを利用するユーザー数は急増し、webサイトを閲覧する環境も大きく変わってきました。

また、2016年にはGoogleがモバイルデバイスへの対応をサイト評価に取り入れることを明らかにしました。これにより検索上位に表示されるにはモバイル対応が実質上必須の要件になったことから、多くのサイトがモバイルデバイスへの対応を加速させたのです。

モバイルデバイスに対応するには、パソコン(PC)用とは別に専用のサイトを作る方法もありますが、最近では1つのサイトをPCやスマートフォン、タブレットなど複数のデバイスから閲覧できる「マルチデバイス対応」が主流になっています。

「マルチデバイス対応」のなかで、それぞれのデバイスの画面サイズに合わせて表示を調整する方式が「レスポンシブwebデザイン」です。
また、レスポンシブwebデザインを取り入れてwebサイトをマルチデバイス対応にすることを「レスポンシブ化」と言います。

この記事では、PC向けサイトの「マルチデバイス対応」を考えている人のために、「レスポンシブ化」を成功させるためのポイントを解説していきます。

1. 「レスポンシブ化」はGoogleが推奨するスマホ対応法

レスポンシブ化によってサイトへのアクセスが増える

1-1 PCサイトのコンテンツをスマホで閲覧できるようにする方法

PCにしか対応していないサイトのコンテンツをスマートフォンから閲覧ができるようにする手段として、「専用サイト」「変換サービス」「レスポンシブ化」という3つの方法があります。

専用サイト」とは、文字どおりPCサイトとは別にスマートフォン、タブレットなどのデバイスごとに専用のサイトを分けて作る方法です。
デバイスに合わせて専用化するのでデザインや機能の自由度は高くなりますが、サイトごとに制作・管理をするので、その分のコストと手間がかかってしまいます。
また、URLがPCサイトとは別になるため、SEO上は不利になります。

変換サービス」は、PCサイトをスマートフォンに適したサイトに変換してくれる外部サービスを利用するものです。
専用サイトを作るのにかかる初期費用を抑えられるだけでなく、同一URLを使えるサービスであればSEO上のデメリットも発生しません。
ただし、外部に依頼することになるので、毎月の利用料金がかかるほか、サービスの継続性のリスクがあります。

レスポンシブ化」は、冒頭で紹介したようにレスポンシブwebデザインを用いて、1つのサイトをデバイスに関係なく同じURLで閲覧することができるように、それぞれのデバイスの表示幅に合わせてデザインを変えるものです。

現在はこの「レスポンシブ化」が主流となっています。
次の項目では、その「レスポンシブ化」のメリットについて詳しく見ていきましょう。

1-2 レスポンシブ化のメリット

(1)ワンソースでメンテナンスや管理が簡単

1つのサイトですべてのデバイスに対応するため、コンテンツを一元管理でき、それぞれの専用サイトを作るのに比べて日々のメンテナンスや管理が格段に楽になります。
当然、デザイン上の意図した対応を別にすれば、デバイスによって違う情報が表示されるという問題も発生しません。

(2)URLが同一になり、SEOに有利

専用サイトを別々に作ると、アクセスが分散し検索順位はなかなか上がりません。
加えて、同じHTMLの記述が複数存在することになり、webサイトの情報を収集するGoogleのクローラーは「どちらが正しいサイトなのか」「不正なサイトなのではないか」と判断に迷い、サイトの評価が下がってしまう可能性もあります。
レスポンシブ化すれば、ワンソースのため複数のURLやHTMLの記述は存在しなくなり、モバイル対応していることも含めて評価が上がりやすくなるため、SEO上も有利に働きます。

実際、Googleのウェブマスター向けの公式ブログでも次のようにレスポンシブwebデザインを推奨しています。

2. PCサイトの「レスポンシブ化」を成功させるポイント

PCサイトのレスポンシブ化を成功させるために設計する

ここでは、既存のPC向けサイトの「レスポンシブ化」を成功させるためのポイントをお伝えします。

2-1 PCと別デバイスの違いを意識する

1つのソースでPCとスマートフォン、タブレットに表示する場合、デバイスによってデザインや文字サイズ、さらには内容にも違いが出ることがあります。
これは画面の幅の違いや構造上どうしても避けることができません。

例えば、PCではコンテンツを横に5つ並べて表示されるものがスマートフォンやタブレットでは縦1列に5つ並んで表示されたり、長く複雑な構成のコンテンツがカットされてしまったりすることがあります。
コンテンツを横に2つあるいは3つ並ぶように調整することもできますが、無理にやるとスマートフォンやタブレットでは画像や文字が小さくなってしまい、ユーザーにとって大変見にくい画面になってしまいます。

PCでの表示を軸にしながらも、スマートフォンやタブレットで表示されたときにどのような違いになるかを常に意識し、両方にとってバランスの取れた表示となるデザインを目指すことがとても重要です。

2-2 モバイルで操作しやすい画面を意識する

ボタンの大きさや配置、背景の色やパターンなどについて、PCの画面上では全く気にならなかったのにスマートフォンやタブレットで見ると違和感や見づらさを感じることがあります。
これは、主に画面が縮小されたり、表示範囲が変わったりすることが原因です。

また、PCでは整列して一覧できるグローバルメニューの表示が、途切れたり崩れたりしてしまう場合もあります。
こうした事態を避けるには、グローバルメニューの項目を絞ったり、重要な機能のボタンは一律に縮小されないようにしたりするなど、モバイル端末で操作をしやすいように調整するのが1つの方法です。
また、PCでは一覧表示しているグローバルメニューを、モバイルデバイス向けではハンバーガーメニューに切り替え、メニューをクリックするとプルダウンしてそれぞれの項目表示されるようにする方法もあります。

2-3 webサイト内のユーザーの導線を意識する

サイト制作をする最初の段階で、webサイトを見に来てくれたユーザーにどのようなアクションをしてもらいたいかを考え、そのための導線を意識して制作したことと思います。
しかし、PCサイトとモバイル向けサイトでは導線が全く違います。

PCサイトでのユーザーの目線は左から右、上から下へと動いていきます。
それらを組み合わせて「Z型」や「F型」になるように目線に合わせて導線を作るのがセオリーです。

一方、スマートフォンやタブレットでは、webサイトの表示自体が縦長になります。
ユーザーは縦にスクロールしていくことになるので、目線もその流れに合わせてサイト上を進みます。
そのユーザーの目線の動きに合わせて、コンテンツやボタンを配置し、いかに最終的に問い合わせや申し込みにつながる導線を作れるかが大きなポイントとなります。

【まとめ】全面リニューアルするという選択肢も

サイトのリニューアルも視野に入れてレスポンシブ対応を行う

この記事では、既存のPC向けサイトを「モバイルデバイス対応」にしたいと考えている人のために、現在の主流になっている「レスポンシブ化」の内容を説明し、成功させるためのポイントを紹介しました。

古いサイトのなかには構造的に簡単にレスポンシブ化できないものもありますが、基本的に「PCサイトをスマートフォンやタブレット(モバイルデバイス)でも表示できるようにする」だけであればそう難しいことではありません。

ただし、モバイルデバイスでも使いやすいものにするためには、サイトそのものに大きく手を入れることが必要なケースもあります。

なかには、全面的にリニューアルしたほうが、PCでもモバイルデバイスでも使いやすく、よりユーザーにとって魅力的なサイトになり、費用対効果が高い場合も考えられます。

「現在のサイトのレスポンシブ化について相談できる制作会社を知りたい」「実績のある制作会社を紹介して欲しい」というご希望がありましたら、ぜひ日本最大級の業者比較サイト「アイミツ」までご相談ください。
あなたの会社の希望に応じた最適な制作会社を無料でご紹介させていただきます。

いま知りたいこと
コンシェルジュが解決します!

コンシェルジュサービスは
3万社以上が利用している無料の相談サービスです。

コンシェルジュ

発注は時間も手間もかかりますよね?

コンシェルジュが解決します!

コンシェルジュに相談、あなたにあった業者を提案、発注の手間を削減!

完全無料

まずはお気軽にご相談ください