Webサイトのスマホ対応が必須な理由と正しいやり方を解説

こんにちは、RAデザインの保浦です。

今回はWebサイトのスマートフォン対応について解説します。

なぜスマホ対応が必須なのか？スマホ対応の正しいやり方とは？
ぜひご覧ください。

今の時代、スマートフォンに対応していないと大きな機会損失に

ホームページをパソコンで閲覧するのはもう昔の話。

今やホームページへのアクセスはパソコンよりスマートフォンが大きく上回ります。

最近ではパソコンを持っていないという若者も増えてきており、分からないことはスマホで調べるといった文化がすっかり定着しましたね。

そんなスマホ全盛の時代に、ホームページがスマホ対応をしていないというのは非常にまずい状態と言えます。

スマホ対応をしていないと表示が見づらかったり、下手すると表示されない場合さえあります。

結果、せっかくホームページへアクセスしてくれたユーザーの大半を失うことになります。

しかもGoogleはスマホ対応していないサイトの検索順位を下げるとも発表しており、そもそもホームページを見つけられなくなってしまうかも…。

Webサイトをスマートフォン対応させる3つの方法

では具体的にどうやってWebサイトをスマートフォン対応させるのか？

ここでは代表的な3つの方法を紹介します。

①レスポンシブWebデザイン

レスポンシブWebデザインとは、1つのWebサイトが画面サイズに合わせて自動で表示を切り替える仕組みのことです。

専門的な話をすると、1つのHTMLコードに対しCSSのメディアクエリなどを用いて表示を変更させています。

この方法が最も良いスマホ対応です。

デバイスごとにURLが変わらないのでリンクやシェアなどが分散されません。

検索エンジンとしても1つのページ情報を収集するだけで良いのでクローラーの負担も少なくてすみます。

そのためGoogleはスマホ対応の方法としてこのレスポンシブWebデザインを推奨しています。

②デバイスに応じて表示コードを変更する

デバイスごとにコードを用意しておき、その都度最適な表示を反映させるという方法もあります。

この方法は1つのWebサイト内でコードが切り替わる仕様のため、レスポンシブWebデザインと同じでリンクやシェアなどが分散されず、SEO効果も下がることはありません。

しかし、デバイスごとにコードを書き換える必要があり、もし掲載内容に変更があれば各デバイスの数だけ修整しなくてはいけません。

このようにレスポンシブWebデザインと比べて作成・サイト運営に手間がかかるというのが難点です。

③デバイスに応じて別のWebサイトを作る

スマートフォン用のWebサイトを別でもう1つ作り、スマホから閲覧時はそちらのWebサイトへ振り分けるという方法です。

この方法は、はっきり言っておすすめしません。

なぜなら、下記のデメリットがあるからです。

• URLが変わってしまうため、SEO効果が出づらい
• SNSなどのシェアも分散されてしまう
• デバイスの数だけWebサイトが必要になる(PC・タブレット・スマホ)
• サイト運営、管理に大きなコストがかかる

スマホ用のWebサイトがあるからスマートフォン対応はバッチリだ！と勘違いされている企業さんはかなり多いです。

もし心当たりがある方は、なるべく早めにWebサイトをリニューアルすることをおすすめします。

スマートフォン対応の際に気を付けるべきポイント

ここからはスマートフォン対応の際に気を付けるべきポイントを紹介していきます。

①文字サイズは適切か？

スマートフォンの画面はパソコンと比べると非常に小さいため、ユーザーが読みやすい文字サイズに設定することが大切です。

例えばGoogleは基本のフォントサイズを16pxにすることを推奨しています。

必ずしもこのサイズにしなくてはいけないわけではありませんが、あまりにもこの16pxからかけ離れた小さい文字サイズにするのはやめておきましょう。

②ボタンなどのリンク要素はタップしやすいか？

パソコンとスマホの操作方法の違いも忘れてはいけません。

パソコンではボタンをクリックしますが、スマホではタップという動作をおこないます。

このタップ動作がしやすいような表示にすることが非常に大切になってきます。

例えば、ボタンとボタンの距離が近いと誤タップの原因になりますし、リンクが小さいと指で隠れて見えなくなってしまいます。

誤タップを防ぐため隣接するボタンは距離を開けたり、パソコンよりも大きくて目立つようなリンク表示にして、ユーザーの利便性をあげていきましょう！

③PCブラウザ限定の技術を使っていないか？

パソコンでは表示・作動するけれどスマートフォンでは利用できない技術というのは多数存在します。
(例えばYoutube埋め込み動画の自動再生、Flashなどが挙げられます)

セキュリティーや消費電力の関係でiPhone側、Android側が対応していない場合が多く、これらはどうすることもできません。

Webサイト作成時には、スマホでも利用できる技術なのかをしっかりと確認しましょう。

まとめ

まとめるとWebサイトのスマホ対応が必須な理由は、

• 今やホームページへのアクセスはパソコンよりスマートフォンが大きく上回る
• スマホ対応をしていないと表示が見づらかったり、下手すると表示されない場合さえある
• スマホ対応をしていないWebサイトは、スマホでの検索順位が下がってしまう

もし自社のWebサイトが対応していなくて、リニューアルしたい！という方はぜひ一度RAデザインにご相談ください。