レスポンシブが最適？スマホ対応の３つの方法

こんにちは。
大阪でWEBコンサルティングとWEB制作をしているワイズオフィスです。

今回はスマホ対応の３つの方法について書きたいと思います。

スマホ対応とは

現在スマートフォンが多く普及する中で、WEBサイトをスマートフォンで閲覧するユーザーの割合も非常に多くなってきております。

一般的に半分以上、中には９割以上がスマートフォンで閲覧されているサイトもございます。
そこで、もともとパソコンで閲覧することを前提に作られたホームページもスマートフォンで見やすい様に制作していく必要が出てまいります。それがスマホ対応の考え方です。

当然のことですが、パソコンとスマートフォンでは画面の大きさが違うため、パソコンサイトをそのままスマートフォンで見た場合は、文字が小さくなってしまったり、ボタンが押しづらくなったりと大変不便なものになってしまいます。
そこで、スマートフォンでもユーザーが使いやすい様に、画面のレイアウトや、文字やボタンの大きさを変更していく作業がスマホ対応の主な内容になります。

スマホ対応ができていないと、見づらいサイトになってしまい、ユーザーがサイトから離れていってしまいます。（直帰率の悪化）
また、Googleがその検索エンジンのアルゴリズムの中でスマホ対応を強く推奨しておりますので、スマホ対応ができていないとSEOにも悪影響が出てきてしまいます。

そのため現在のWEB制作においてスマホ対応は必須であると言えます。

スマホ対応の種類

スマホ対応にはその作成方法によっていくつか種類があります。
ユーザーにとっての見え方は基本的に同じでも、その作り方や効果は異なってまいりますので注意が必要です。

同じ内容のページに対してURLを分けて作成する方法

【PC】http://xxx.jp
【SP】http://sp.xxx.jp
といった風に別々のURLでパソコンサイトとスマホサイトのページを作成して
それぞれを対応させていく作成方法です。

スマホ対応が始まり出した頃にはこちらの方法が主流でした。

他にも
【PC】http://xxx.jp
【SP】http://xxx.jp/sp/

といった形で下層ページの中で分けてしまう方法もあります。

ただし、現在においてこの方法は下記の理由であまり推奨されておりません。
・URLが別々になってしまうことでユーザーが混乱してしまう
※スマホSNSでURLシェアをしたものを、他の人がパソコンで見るとスマホサイトが表示されてしまうなど
・Googleが評価するページが分散してしまって検索に悪影響がある。

別々にページを用意するが、システムでURLを一緒にする方法

パソコンサイトとスマートフォンサイトを別々に構築していきますが
ユーザーが閲覧する時には、同じURLのページとしてみせる方法です。



仕組みとしては、ユーザーがURLを打ち込んだ時に、システムがそのユーザーが利用している端末がパソコンなのか、スマートフォンなのかを判断して、それによって見せるサイトを対応するものに変更してくれます。

この方法であれば上記のURLが別々になっていることによる問題が発生しなくなります。

ただしこの方法でも、デメリットが一点残ってしまっています。
ホームページを修正、更新したい時に、パソコンとスマートフォンをそれぞれ作業しなくてはいけないことです。
※ブログ等はおそらく問題ありません。

更新する手間が2倍になってしまうことが、この方法の課題です。

レスポンシブ

パソコンサイト、スマートフォンサイトと別々に作るのではなく
それぞれに対応できるサイトを一つ作る手法がレスポンシブサイトです。
WEBサイトは、基本的な情報を記載するHTMLと、そのデザインを記載するCSSで構成されておりますが、レスポンシブではCSSのみを端末によって切り替えることができます。

同じ情報のデザイン部分のみを端末によって変更することで、一つのサイトを複数の端末で最適化することができるのがレスポンシブなのです。

この方法は、先ほどまでに案内した2つの手法のデメリットを解決できているので、現在のスマホ対応における主流になっております。

ただし、レスポンシブでサイトを作りには、その分技術力や制作時間が必要になるため、コストが少し高くなる場合があります。

まとめ

現在、当社では基本的に全てのクライアントに対してレスポンシブにてサイトを制作しております。
技術力と時間が必要となりますが、最もクライアントにとってメリットのある制作手法だからです。

また、既存のサイトをレスポンシブに変更していくなどの対応も可能でございます。

スマホ対応にお困りの場合は、ぜひ当社までご相談ください。