サイト改善 / 制作 2020.12.10

今すぐホームページをスマホ対応に!スマホ対応させる具体的な4つの方法!

スマートフォン

ホームページをスマホ対応にしておらず、スマホからのお客さんを逃がしてしまうのは非常にもったいないです。現在ホームページのスマホ対応は、Webマーケティングを行う場合には欠かせない条件になっています。この記事では、スマホ対応しなければならない理由と、スマホ対応の方法をご紹介します。

自分のホームページがスマホ対応かどうか確かめる方法      

スマホ対応していないホームページをスマートフォンから見た場合は、画面がぎゅっと凝縮されて文字がほとんど見えない状態になったり、画面をスクロールしようとするとおかしな方向に画面が動いてしまったり、リンクがクリックできなかったりします。

ホームページをスマホ対応させることでこれらの問題を解決できるため、デメリットがなくなるだけでなく、スマートフォンからのアクセスも増える可能性があるため、メリットはかなり大きいです。スマートフォン で閲覧した時にスマホ版のホームページが表示されれば、ユーザーは安心してサイトを閲覧できるので、ストレス軽減の意味でも大きな効果があります。

自分のホームページをもっていても、それがスマホ対応になっているかどうかがわからない方もいらっしゃると思います。スマホ対応できていればこれからコストをかけて改修する必要もなくなるので、まずは確認するところから始めましょう。

スマホ対応できているかどうかを確かめるためには、Googleのモバイルフレンドリーテストを行うのがおすすめです。Googleのモバイルフレンドリーテストでどの程度スマホ対応できているのかを確認してみましょう。

参考:モバイル フレンドリー テスト – Google Search Console

このツールは、Googleが提供しているサービスであり、モバイルデバイス=スマホやタブレットなど=の使いやすさをテストするものです。自分のホームページのURLを入力し、確認ボタンを押してください。しばらくするとテスト結果が表示されます。

もし、テスト結果が「このページはモバイルフレンドリーです」という表示になっていれば問題ありません。スマホ対応できているということになります。「このページはモバイル フレンドリーではありません」と表示された場合は、修正するべき点も合わせて表示されますので、ぜひ一度試してみてください。

スマホにはiPhone、アンドロイド、タブレット端末なども含まれる

「スマホ対応」と一言で言っても、モバイルデバイスは、iPhoneやアンドロイド、タブレット端末など多くの種類があります。モバイルデバイスごとに画面サイズは異なるため、ホームページもそれぞれのサイズに合わせて表示させるのが好ましいです。

それでは、デバイスごとに画面サイズはどれくらい違うのでしょうか。iPhoneは、画面サイズが最も小さいものですと3.5インチ、最も大きいもので6.7インチと同じiPhoneでも約2倍のサイズ差があります。

アンドロイドは4インチのモデルが最も小さく、最も大きいもので6.8インチとなっています。タブレットは、7インチが最も小さく、一回り大きい10インチのモデルもあります。

(2020年12月現在)

10インチのタブレットにもなると画面自体が大きく、PDFやエクセルなどのワークシートの閲覧もノートパソコン並みに快適になります。

ちなみに、ノートパソコンの画面サイズは11インチ以上です。大きいものだと17インチ以上のものあります。タブレットとは明確にことなる画面サイズですので、ユーザーが快適にWebサイトの閲覧を行うためには、10インチ以下のモバイルデバイス向けの表示ができるWebサイトも用意しなくてはいけません。

ホームページをスマホ対応させた方が良い3つの理由

ホームページをスマホ対応させるべき理由を改めて詳しく説明していきます。

1. ユーザービリティが上がり、離脱率が下がる

離脱率は、Webページがユーザーによって開かれた数と、そのページから離脱した数(WebページだけでなくWebサイトそのものから離脱した)の割合を表す指標です。

計算式はそのページの離脱数÷そのページのPV数(ページビュー数)となります。

スマホ対応していないページは、読みにくい・画像が見にくい・クリックしづらいなどの理由で離脱率が高くなります。見にくいサイトは、閲覧行動そのものがストレスとなり、早く別のサイトに移動したいと思われてしまいます。まずは、ユーザーが離脱する要因を一つずつ減らしていきましょう。

2. SEOとしては必須項目

スマホ対応は、SEOの施策としても有効な手段になります。スマホ対応によってユーザーの離脱率が低下すれば、ユーザーがWebサイトを閲覧する時間も増えます。ユーザーの滞在時間が増えることはSEOとしても効果があります。

また、逆にスマホ対応していないサイトは、検索順位が下がる可能性が高いです。2015年以降、スマホ対応していないページは検索順位を下げるとGoogle側が公式に発表しています。もし、現在の検索順位が低くなかなか上がらない場合は、スマホ対応しているかどうかは見直すべき項目の1つです。

3. ほとんどのWebサイトにおいてはPCよりもスマホユーザーの方が多い

2000年頃からスマホが普及し始め、その10年後の2010年には2人に1人、2020年ではほぼ8割から9割の人がスマホユーザーとなっています。ここ20年の間にスマホユーザーが急激に増えた結果、パソコンでインターネットに接続してWebサイトを見るよりも、スマホからアクセスする人の方が増えています。

閲覧するサイトの種類やジャンルによっても当然変わってきますが、平均するとスマホからWebサイトにアクセスする人が6割から7割、パソコンが3割、残り5%程度がタブレットという調査結果もあります。

このように、PCからWebサイトにアクセスするユーザーよりも、スマホユーザーの方が多い点から考えてもWebサイトのスマホ対応は必須というわけです。

参考:「スマートフォン市場の変化と現在 数字から探る移り変わり

>>スマホ対応についてヒトノテに聞いてみる

ホームページをスマホ対応させる具体的な4つの方法

それでは、ホームページをスマホ対応させるために、どんな方法があるのか見ていきましょう。

1. 自動変換ツールを利用する

例えば、自動変換ツールと呼ばれるものを使って、既存のページをスマホ対応させることができます。

以下では、自動変換ツールの例をご紹介します。有料ですが、自動的に変換してくれるので技術や知識がない方でも気軽に利用することができます。

モビファイ

パソコン用とスマホ用のサイトを分けない、レスポンシブデザインに変換されます。SEOにもマイナスな影響が出ないため、安心してスマホ対応できます。

フラミンゴ

こちらは規模の大きなサイトのスマホ対応を行うのに適したツールです。

スマホ対応の際のデザイン自由度が高いのが特徴ですが、HTMLやCSSといった一定レベルの専門知識が必要になるので、注意が必要です。管理画面からページやコンテンツ単位でスマホ対応ができる他、まったく新しいスマホ用ページを作ることもできます。

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

WordPressを利用してホームページを作っている方は、専用のプラグインをインストールして設定すればスマホ対応することが可能です。

一例としまして、WPtouchというプラグインがあります。インストール時に不具合が起きる恐れもあるため、テスト環境で試してから本番環境に反映することをおすすめします。不安であれば、専門知識を持ったエンジニアに依頼するのが良いでしょう。

3. スマホ対応したデザインのホームページを1から作る

もちろん、スマホページを1から作ることもできます。今のホームページを全面的にリニューアルして、新しいものを作る場合におすすめの方法です。

コスト面や運用面をシンプルにしたい方にとっても、パソコンとスマホでコンテンツにそごが起きないよう、レスポンシブデザインで作ることをおすすめします。

4. スマホ対応できるプロに依頼する

スマホページを1から自力で作ることも不可能ではありませんが、1つのホームページ制作するためには、さまざまな知識が必要になりますし、画像やテキスト、動画などのコンテンツ作成についても自分1人だけで行うのは非常に困難です。

また、自分でスマホ対応を行う場合、プロ並みのスキルを持っているのであれば問題ないですが、スマホ対応後のホームページのクオリティは完全に担当者のスキルに依存してしまいます。

非常に多くの工数もかかってくるため、他の業務と両立させながら対応していく場合、かなりの日数が必要になることが予想されます。そして、自分で行うことの最も大きなデメリットは、ユーザー視点を維持することが難しいということです。実際のWebサイトの見やすさや使いやすさはユーザーが判断するものです。

自分で制作する場合、既にホームページの中身を知っているため、ユーザーからの視点を持つことが難しくなり、結果としてユーザーが使いづらいホームページになってしまう可能性もあります。

そういった理由から、自信のない方は、1から作る際はプロの制作会社に依頼することをおすすめします。

>>スマホ対応についてヒトノテに聞いてみる

スマホ対応の3つのパターン

1つのURLで1つのコンテンツ(レスポンシブデザイン)

1つのURLに対して、1つのコンテンツを用意するパターンです。コンテンツが同じ=HTMLが同じ、ということです。

コンテンツを見るデバイスによって、同じコンテンツの見せ方(表示形式)を変えます。見せ方を変えているだけなので、コンテンツの中身は全く同じであり、コンテンツの内容を変更した場合、PCとスマートフォン両方にその変更が適応されることになります。そのため、管理もしやすいです。

1つのURLで2つのコンテンツ

1つのURLに対して、2つのコンテンツを用意するパターンです。1では、見せ方を変えることでホームページを見るデバイスが変わっても対応させていましたが、こちらのパターンでは、見せ方を変えるのではなく、コンテンツ自体をデバイスごと(ユーザーごと)に変えてスマホ対応を行います。

コンテンツが異なるので、HTMLも異なります。スマホユーザーとPCユーザーで異なるコンテンツを配信していきたい場合は便利ですが、同じコンテンツを配信していきたい場合は、毎回PCとスマホでそれぞれ更新を行わなくてはいけないため、1のレスポンシブデザインよりも工数がかかる点がデメリットです。

2つのURLで2つのコンテンツ

3つめは、PCとスマートフォンでそれぞれ別々のURLとコンテンツを用意するパターンです。PCのページを見ていた際に、「スマホのページはこちら」というテキストリンクを目にしたことははありませんか?

PC用に作成しているホームページは、スマホから見ると文字が小さくて見えにくかったりもします。そういった場合に、PCからスマホ用サイトに誘導することで解決を図るスマホ対応方法です。

ヒトノテにスマホ対応を依頼した場合のメリットと具体的なプロセス

ヒトノテでは、SEOのためのスマホ対応はもちろん、ユーザビリティを意識したスマホ対応のご支援が可能です。最近ではCore Web Vitalsというアルゴリズムが新たに導入されることもあり、単にレスポンシブウェブデザインにすれば大丈夫ということでもなくなりました。

お客様に課題やご依頼に具体性がない場合でも、弊社ではコンサルタントが貴社のサイトを分析して要件定義をすることが可能です。「何をやればよいかわからないけど何も出来てないからなんとかしたい」という方でも、遠慮なくご相談ください。

まとめ

ホームページのスマホ対応についてご紹介しました。スマホ対応は、スマホからWebサイトを閲覧するユーザーが多いこと、SEOの観点、ユーザーの使い勝手、集客数や売り上げなど、サイト全体に関わるさまざまな要素から考えると、未対応の場合は今すぐに対応した方が良い課題です。

スマホ対応させるための知識がない場合は、そのページ自体の完成度、コンテンツ、コスト、運用面から考えても、自力で行うよりも外注した方が良いでしょう。まずは、ご自身のホームページがスマホ対応されているかどうか、チェックするところから始めましょう。

>>スマホ対応についてヒトノテに聞いてみる

ヒトノテロゴ

執筆者:兼重勇希

株式会社ヒトノテのディレクター。自社メールマーケティング、オウンドメディアの記事制作、WEB広告の運用など幅広い分野を担当。

ヒトノテ坪昌史

監修者:坪昌史

株式会社ヒトノテの代表取締役CEO。 エンジニアとしてキャリアスタートし、サイバーエージェントのSEO分析研究機関を経て、リクルートの横断マーケティング組織のマネージャー&全社SEO技術責任者を務める。その後、独立しSEOを中心としたクライアントの課題解決を行う。2017年、株式会社ヒトノテを創業し、様々な企業のウェブマーケティングの支援を行う。

ご質問やご相談など
お気軽にお問い合わせください

お問い合わせ お電話でのご相談は平日10:00-18:00 03-6265-6636