ホームページのスマホ対応！検索順位の明暗を分ける理由とは？

こんにちは。ホームページの運営と活用のヒントを分かりやすくお伝えするキャラクターの「くくり」です。

こんにちは、くくりさん。

今、友達のホームページをみているんですが、スマホからみていると文字が小さくて・・・

スマホからホームページって見づらいんですね～

それは、ホームページのスマホ対応をしていないからですね。

ホームページのスマホ対応って重要なんですよ～

ホームページのスマホ対応とは？

ホームページは、パソコンからもスマホからも見ることができます。

パソコンから見るホームページは、「パソコン版ホームページ」の画面になっています。

しかし、スマホから見るホームページが「パソコン版ホームページ」のままだと、非常に見づらく、使い勝手も悪いため、「モバイル版ホームページ」に変換されるようにしておく必要があります。

「パソコン版ホームページ」と「モバイル版ホームページ」の違いの例は、次の通りです。

写真や画像の並びが横から縦に変換されることにより、スマホから見やすくなっているということです。

スマホは、縦のスクロールがメインなのに、途中に横スライドがあると、ちょっと面倒な気持ちになりませんか？

ホームページがスマホ対応していない？スマホ未対応による3つの不具合

ホームページがスマホ対応していないために起こる不具合を【ホームページ訪問者側】と【ホームページ作成者側】の視点でみてみましょう。

「モバイル版ホームページ」は、縦のスクロールで画面が構成されています。

スマホで「パソコン版ホームページ」を見ると、文字などを拡大して見る必要があったり、 画像が横並びなのでスマホの画面に入りきらなかったりします。

せっかくホームページに来てくださったのに、すごく使いづらいホームページにストレスを感じ、全ての内容を見ることなく、他のホームページ移動してしまうかもしれません。

ホームページをみてもらえないということは、お店が伝えたい情報が上手く伝わりません。

さらにスマホからのホームページに来てくださった方から「残念なお店だな～」と思われ、お店の印象も悪くなります。

なにより怖いのは、スマホからの検索順位が下がる可能性があります。

スマホの検索順位が下がる？！ブラウザ国内シェア1位のGoogle chromeがはじめたこと！

現在インターネットブラウザの国内シェア1位は、Google Chrome です。

Google Chromeには、「ユーザーの閲覧履歴」や「検索行動パターン」を学習する機能が付いています。

たとえば、

このように、「ユーザーの閲覧履歴」や「検索行動パターン」を学習する機能で常にチェックし、インターネット検索される方にとって、役立つ情報を検索上位に上げる仕組みになっているのです。

2016年11月5日、Googleウェブマスター向け公式ブログ「モバイルファーストインデックスに向けて」という記事には、次のようなことが書かれています。

つまり、検索結果によるウェブページのランキングなどを決定するための評価は、パソコン版ホームページのコンテンツではなく、モバイル版ホームページのコンテンツが使用されるということです。

※2018年3月27日には、Googleウェブマスター向け公式ブログから「モバイルファーストインデックスを開始します」と発表がありました。

もう、モバイルファーストインデックスがスタートしているんです！！

スマホがインターネット利用機器のトップに！

平成30年5月に総務省から公表された平成29年通信利用動向調査の結果によると、個人のインターネット利用機器は、スマートフォンが最も使われているという結果になりました。

前回の結果では、まだパソコンのほうが若干優位でしたが、これからますますスマホの利用は増えていくんでしょうね。

たしかに、「この近くのイタリアンのお店は？」とか「元気の出る音楽は？」とか音声検索で気軽に検索できるので、スマホ検索ってホントお手軽ですよね。

ホームページをスマホ対応にする3つの方法

ホームページをスマホ対応にする3つの方法は、Google公式ページの「モバイル SEO の概要」に答えが書いてあります。

Google公式ページの「モバイル SEO の概要」の文章からはどういう意味かよくわかりませんね・・・

ということで、簡単な図で表してみますね。

レスポンシブ ウェブ デザイン

ユーザーのデバイス（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて（つまり「レスポンシブ」に）レンダリングを変えることができます。
Google では、デザイン パターンとしてレスポンシブ デザインをおすすめします。

特徴：　URLが1つ・ページが1つ

簡単にいうと、1つのウェブページを作って公開するだけで、パソコンとスマホからのアクセスに対して、パソコン用ホームページとモバイル用ホームページにそれぞれレイアウトを変えてくれます。

パソコンかスマホか、見る端末によってレイアウトを選択して変えてくれるので、とっても楽です。

動的な配信

デバイスに関係なく同じ URL を使用しますが、ユーザーのブラウザに関してサーバーが把握した情報に基づき、デバイスタイプごとに異なる HTML を生成します。

特徴：　URLが1つ・ページが2つ

簡単にいうと、パソコン用ホームページとモバイル用ホームページの2つのウェブページを作り、パソコンとスマホからのアクセスに対して、パソコン用ホームページとモバイル用ホームページに振り分けてくれます。

パソコン用ホームページとモバイル用ホームページの2つのウェブページを作る必要がありますが、URLは同じです。

別々の URL

デバイスごとに別々のコードを配信します。この設定方法では、ユーザーのデバイスの検出を試み、HTTP リダイレクトと Vary HTTP ヘッダーを使用して適切なページにリダイレクトします。

特徴：　URLも2つ・ページも2つ

簡単にいうと、パソコン用とモバイル用の2つのウェブページを別のURLで作り、パソコンとスマホからのアクセスに対して、パソコン用ホームページのURLからモバイル用ホームページのURLにリダイレクト(転送)してくれます。

パソコン用ホームページとモバイル用ホームページの2つのウェブページを別々のサイトで作る必要があります。

ホームページをスマホ対応にするおすすめの方法は？

ホームページをスマホ対応にする3つの方法の中で、多くに知識がなくても取り組めるのは、①レスポンシブ ウェブ デザインです。

Googleでも、デザイン パターンとしてレスポンシブ デザインをおすすめしています。

レスポンシブ ウェブ デザインは、自分で何かするわけではなく、それに対応しているソフトを使うとすごく便利です。

例えば、WordPress（ワードプレス）のような無料ソフトは、1つのウェブページを作って公開するだけで、自分で何かをしなくてもOKなんですよ。

WordPress（ワードプレス）が、自動的にスマホ対応してくれるので、とっても楽です。

新しく作るホームページだけでなく、他のホームページからの移行も行うことができますよ。

まとめ

ホームページのスマホ対応のことはおわかりいただけましたか？

ホームページがスマホ対応していないと、ホームページに来てくださった方のストレスになっちゃうんですね！

私も文字が小さくて見づらいな～と思っていました。

友達にホームページのスマホ対応の話をしてみます！

それがいいですよ！

ホームページはスマホ対応大前提で作るのが、もはや当たり前の時代ですから。