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

スマホ対応のホームページとは、スマートフォンの小さな画面でも読みやすく、ボタンやバナーなどが指で押しやすいように最適化されたものです。

スマホ未対応のホームページはパソコンの画面サイズに合わせてデザインが作られているため、スマホで見ると「字が小さすぎて見えない」「レイアウトが崩れてしまう」「問い合わせボタンが表示されない」といった不具合が発生します。

しかし、総務省が発表した2019年の情報通信機器の保有状況は、スマホは83.4%、パソコンは69.1％と、パソコン所有者よりもスマホを持っている人の方が約14％多くなっています。

日常生活を振り返ってみても、ビジネス・プライベート双方においてスマホは必須になりつつあります。

そのため、ホームページはスマホでの見え方を意識して作成することが不可欠です。

どれだけホームページの内容が優れていても、ユーザーに見てもらえなければ意味がありません。ホームページをスマホ対応させないことで、サービスの実績や品質に関わらず、大切なビジネスチャンスを逃してしまう恐れがあるのです。

スマホ対応が必須な理由を理解するためには、スマホ未対応によるデメリットを知っておきましょう。主なデメリットは、次の2点です。

• 訪問者の直帰率が上がる
• 検索順位が下がる

訪問者の直帰率が上がる

直帰率とは、ホームページを訪れたユーザーがそのページだけを見てページを閉じた割合のことです。直帰率が高いほどサイト内回遊率が低く、ユーザーニーズにマッチしていないことを表します。

スマホ未対応のページは、ページが正しく表示されなかったり、文字サイズが小さすぎたりと、ユーザーの使いにくさ（ユーザビリティの低さ）が目立ちます。ユーザーは視認性や機能性にストレスを感じると即座にページを離脱してしまうため、直帰率が高くなるのです。

せっかく優れたサービスを提供していてもスマホ未対応のホームページでは「時代に即したサービスにアップデートできていないのではないだろうか」「ユーザーの利便性を考慮していないのではないか」と不安を感じるユーザーも少なくないでしょう。

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

検索順位が下がる

世界的に高いシェア率を誇る検索エンジン・Googleは、Webサイトの検索順位の決定やインデックスの登録に、スマホサイトを基準に行う方針（モバイルファーストインデクス）を発表しています。

これにより、スマホに対応していないサイトはモバイルファーストインデックス非対応となるため、必然的に検索順位が下がります。検索順位が下がることでユーザーの流入も減り、ホームページ自体の存在意義も低下してしまうのです。

SEO対策（検索エンジン最適化）のためにも、スマホへの対応を早めに行いましょう。

新規でスマホ対応のホームページを制作する方法は次の2つです。ホームページのリニューアルを検討している場合には、掲載コンテンツの見直し・改善も含め、新規で制作するのがおすすめです。

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

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

こちらは、パソコン用ホームページと同様に、スマホ専用のホームページを制作する方法です。パソコンからアクセスしたらパソコン用のホームページ、スマホからアクセスしたらスマホ用のホームページというように、アクセスしたデバイスに合わせたページを表示します。サイズ・レイアウトはデバイスごとに固定されているので、それぞれ精度の高いデザインを採用できるのがメリットです。

パソコン用の既存ホームページがあればコンテンツの流用が可能ですが、同じ内容のページを二重に管理する必要があるため、大規模サイトには向いていない方法です。また、タブレットなど対応していないデバイスでは最適化されないため、デバイスごとに新しいページを制作することになります。

HTMLやCSSの仕組みを理解している方であれば制作自体の難度はそれほど高くありませんが、管理・更新の負担を考えるとあまりおすすめの方法ではありません。

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

レスポンシブデザインとは、スマホやパソコンなどデバイスに左右されず、いつでも見やすく使いやすいサイトデザインのことを指します。ページごとにデザインが固定されているのではなく、閲覧者が使用しているデバイスに合わせて可変するのが特徴です。

レスポンシブデザインのメリットは主に3つです。

1つ目は、管理のしやすさ。パソコン用ホームページ・スマホ用ホームページと分かれていると、更新時にそれぞれ手を加える必要があります。しかし、レスポンシブデザインのWebサイトは構築しているHTMLが1つのため、情報の更新・修正が1回の作業で完了します。

2つ目は、デバイスごとにURLを分ける必要がない点です。スマホ専用のホームページを作る場合は、デバイスごとに違うページを表示する必要があるため、ページごとにURLが異なります。しかし、レスポンシブデザインの場合はデバイス別にURLを分ける必要がないので、1つのURLで最適化したデザインを表示することができます。そのため、被リンク効果の分散防止につながり、ユーザーにシェアされる確率も上がります。

最後に、スマホ対応サイトは検索結果の上位に表示されやすくなります。先ほどもお伝えしましたが、検索エンジンのアルゴリズムは「スマホで見やすい・使いやすい・速い」サイトを評価する「モバイルファーストインデックス」を適用しています。スマホに対応したレスポンシブデザインを導入することが、SEO対策の第一歩となるのです。

一方、デメリットを挙げるとすると、デバイスごとにデザインを制作した上で各ページのコーディングを行うため、サイト制作にやや時間がかかります。これからホームページを作るのであればレスポンシブデザインは最低限必要な機能だと思いますが、余裕のある制作スケジュールを見込んでおくことをおすすめします。

続いて、既存のホームページをスマホ対応させる方法をご案内します。主な方法は、以下の3つです。

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

変換ツールを活用する

変換ツールとは、既存のホームページのスマホ対応化をサポートをするツールです。スマホの普及に合わせて登場したサービスで、変換ツールを使うことでホームページをスマホ用に自動変換することができます。

変換ツールを使うメリットは、なんといっても簡単に対応できる手軽さです。HTMLやCSSが使えなくても変換可能なので、専門知識のない人でもOK。外部の制作会社に改修を依頼するよりもコストをかけずにスマホ対応を実現できます。

ただし、変換ツールを利用する費用相場は、サイトの規模や月間のPV数によって変化します。小規模サイトなら数万円程度のリーズナブルな価格で済みますが、たくさんのユーザーが閲覧する大規模サイトであればそれなりの金額がかかります。ランニングコストが継続的にかかるので、結果的に改修以上のコストがかかる恐れもあります。

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

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

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

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

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

メディアクエリとは、Webサイトの見た目を設定する言語・CSSの一つです。特に、レスポンシブWebデザインの作成で利用する設定のことで、デバイスに合わせてデザインを切り替える機能を持っているため、サイトをレスポンシブデザインに変更する際にはメディアクエリの知識が不可欠となります。

メディアクエリを活用するメリットは、1つのCSSの中にさまざまな画面に適応したスタイルを記述できる点です。その結果、他のCSSを読み込む必要がなくなります。レスポンシブデザインを自身で手がける場合には、CSSの習得が必須です。プログラミング経験のない人は習得に時間がかかりますが、使いこなせるようになればレスポンシブデザインへの変更を自ら行えるようになります。

引用：Google モバイルフレンドリーテスト

ホームページのスマホ対応が完了したら、制作したスマホ表示が正しく反映されているかテストを行いましょう。

おすすめの確認方法は、Googleのモバイルフレンドリーテストです。確認したいWebサイトのURLを入力すると、該当のサイトがスマホでの閲覧に適しているかどうかをチェックできます。利用は無料で、1〜2分ほどで結果を知ることができるので、「そもそも自社のホームページがスマホ対応しているか分からない」という場合も確認してみましょう。

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

今回はホームページのスマホ対応について、詳しくお届けしてきました。ホームページのスマホ対応は、ユーザーの流入数や検索順位にも影響するため非常に重要です。まだ対応されていない場合は、今回紹介した方法を参考に早急に対応しましょう。

弊社・ドコドアは会社設立以来、1,600社以上のホームページを制作してきました。Webサイトの新規制作をはじめ、レスポンシブデザインの対応や、ホームページのリニューアルにおいてもお客様のお悩みを解決してきた実績があります。

お客様が抱える課題に合わせ、見た目が美しいのはもちろん、閲覧者が正しく情報を受け取れるデザイン・導線をご提案。貴社の伝えたい情報が伝わる、効果的なホームページを制作します。

ホームページのスマホ対応を検討されている方は、ぜひ一度ドコドアにご相談ください。

◎お問い合わせ・ご相談はこちらから

▼ドコドアのホームページ制作事例一覧
https://docodoor.co.jp/design/

【こちらの記事もおすすめ】
▶︎2022年4月改正個人情報保護法施行｜プライバシーポリシーの見直しはお済みですか？
▶︎ランディングページ制作｜参考事例10選！新規受注・売上に繋がるLPの作り方
▶︎ホームページ制作に使える補助金・助成金とは？対象者や補助額を徹底解説