ホームページのスマホ対応が必須な理由｜スマホ対応にする方法も紹介

スマホ対応のホームページは、スマホの小さな画面でも読みやすく、ボタンやバナーなどが指で押しやすいように最適化されています。スマホ未対応のホームページをスマホで見ると、字が小さすぎて見えない、レイアウトが崩れていたなどの現象が起こります。

総務省発表の2019年の情報通信機器の保有状況は、スマホは83.4%、パソコンは69.1％です。パソコン所有者よりもスマホを持っている人の方が約14％多くなっています。このため、現在のホームページはスマホでの見え方を意識して作成することが不可欠です。

ホームページをスマホ対応させない主なデメリットは、以下の2です。スマホ対応を行わないと大切なチャンスを失うきっかけになる可能性があります。

• 訪問者の離脱率が上がる
• 検索順位が下がる

訪問者の離脱率が上がる

スマホ未対応のページは、ページの全てが表示されなかったり、字が小さすぎたりと見えにくさが目立ちます。ユーザーはうまく見えないことにストレスを感じ、即座に離脱してしまいます。ユーザーは一瞬でも「このページはだめだ」と感じるとその場で閲覧を停止して他のサイトへ移動してしまいます。

自サイトに長く滞在して複数ページを回遊してもらうためにも、スマホに対応することは必須条件です。

検索順位が下がる

Googleは、Webサイトの検索順位の決定やインデックスの登録に、スマホサイトを基準に行う方針（モバイルファーストインデクス）を発表しています。

スマホに対応していないサイトは、モバイルファーストインデックス非対応となるため、検索順位が下がります。検索順位低下の不利益を避けるためにも、スマホへの対応を早めに行いましょう。

新規でスマホ対応のホームページを制作する主な方法は以下の2つです。中途半端に変更するより、すべて作り変えたいなら、新規で制作していきましょう。

• スマホ専用のホームページを制作する
• レスポンシブデザインのホームページを制作する

スマホ専用のホームページを制作する

パソコン用ホームページと同様に、スマホ専用のホームページを制作します。通常どおり、HTMLとCSSでゼロからスマホ用のページ作っていきます。

パソコン用のホームページがあれば、コンテンツは既存サイトの流用できますが、同じ内容のページを2重に管理するようになるため、大規模サイトには向いていない方法です。

レスポンシブデザインのホームページを制作する

レスポンシブデザインとは、スマホやパソコンなどメディアに左右されない、いつでも見やすく使いやすいサイトデザインのことを指します。

レスポンシブデザインのメリットは主に3つです。HTMLは1つのため、情報の更新・修正は1回の作業で完了するので管理が楽です。次は、URLもデバイス別に分ける必要がないので、1つです。そのため、ユーザーにシェアされる確率もあがります。さらに、スマホ対応サイトは検索結果の上位に表示されやすくなります。検索エンジンのアルゴリズムは「見やすい・使いやすい・速い」サイトを評価する「モバイルファーストインデックス」を適用しています。

一方、デメリットとしては、スマホでの表示時間がかかります。さらに、デバイスごとにデザインを制作してそれぞれにコーティングするため、サイト制作は時間がかかり、ある程度の制作期間を見込んでおくことをおすすめします。

既存のホームページをスマホ対応させる主な方法は、以下の3つです。自分にとって最適な方法を選んで利用してみることをおすすめします。

• 変換ツールを活用する
• WordPressのプラグインを利用する
• メディアクエリを活用する

変換ツールを活用する

変換ツールとは、既存のホームページのスマホ対応するためのサポートをするツールです。変換ツールなら、自動的にホームページをスマホ対応用に変換してくれます。

変換ツールのツールを使うメリットは、簡単に変更できる手軽さです。HTMLやCSSが使えなくても変換可能で、外注するよりコストもかからない方法です。

変換ツールの費用は、サイトの規模や月間のPV数によって変化します。小規模サイトなら数万程度のリーズナブルに、大規模であれば、要見積もりでそれなりの金額がかかります。

WordPressのプラグインを利用する

既存のホームページがWordPressのみで作成されていれば、プラグインのインストールでスマホ対応可能です。

プラグインとは、標準のWordPressにない機能をインストールできる追加機能です。スマホ対応にするプラグインは無料で公開されているので、簡単なインストール作業のみで時間もお金もかからないところがメリットです。

ただし、見栄えは他の無料ブログと大差ないため、こだわりを持ちたい場合は、プロが採用しているレスポンシブデザインのテーマに乗り換えるのもおすすめです。

メディアクエリを活用する

メディアクエリとは、レスポンシブWebデザインの作成で利用する設定のことです。サイトをレスポンシブデザインに変更するなら、メディアクエリの知識は不可欠です。

メディアクエリはCSSを使って作成します。メディアクエリを活用するメリットは、1つのCSSの中にさまざまな画面に適応したスタイルを記述できます。その結果、他のCSSを読み込む必要がなくなります。

レスポンシブデザインの作成には、CSSの習得が必須です。プログラミング経験のない人はかかりますが、習得すればレスポンシブデザインへの変更を自ら行えるようになります。

ホームページのスマホ対応が完了したら、スマホ対応になっているかどうかテストを行いましょう。おすすめの確認方法は、Googleのモバイルフレンドリーテストです。テスト方法は簡単で、テストするURLを入力すると、サイトがスマホでの閲覧に適しているかどうかをチェックできます。

不合格になった場合は、適さない箇所をGoogleが指摘してくれるので、そこを修正して再度テストを行いましょう。

ホームページのスマホ対応は、ユーザーの反応や検索順位にも影響するため非常に重要です。未対応の場合は、今回紹介した方法を参考に、早急に対応しましょう。ドコドアではWeb制作サービス行っています。レスポンシブデザインサイト制作の外注をお考えなら、ぜひ利用を検討してみてください。