“あなたのウェブページはモバイルフレンドリーですか？”

【あなたのウェブページはモバイルフレンドリーですか？】
Web業界にいる方はこのセリフにピンとくると思いますが、
詳しくご存知でない方は「モバイルフレンドリ〜〜〜？今流行りのゲームかなんかかな？？？」
となることでしょう。(ならないかもしれません。)

Webサイトがモバイルフレンドリー化していないと、検索順位の低下などの無視できない影響があります。
今回は、モバイルフレンドリーの意味と、Webサイトのモバイルフレンドリー化が済んでいるかのチェック方法を解説します。

【目次】
1．モバイルフレンドリーとは？
2．なぜモバイルフレンドリーでなければいけないのか
3．スマホ未対応デメリット3選
4．ウェブページがモバイルフレンドリーか確認する方法
5．モバイルフレンドリーの対応方法
6．モバイルフレンドリーの現時点でのまとめ

1．モバイルフレンドリーとは？

モバイルフレンドリーとは、モバイル（スマホ）用に表示を最適化し、ユーザーが快適にモバイルWebサイトを閲覧できるようにすることです。

2021年3月から、強制的にスマホサイトが評価の基準となりました。
ですので、スマホサイトをモバイルフレンドリーにすることは、SEO対策で欠かせないことになっています。
実際に、スマホでホームページを見ている人の割合は9割もあるので、スマホファーストのホームページを作らないといけません！

あなたのホームページはどうですか・・・？

2．なぜモバイルフレンドリーでなければいけないのか

スマートフォンユーザーの増加

2021年1月のモバイル社会研究所による調査によると、日本国内でスマートフォン、ケータイの所有者のうちスマートフォン比率が92.8％となりました。年々、日本国内におけるスマートフォン比率は増加しており、2010年には4％程度だったスマートフォンの所有比率ですが、2015年に5割を突破し、2019年に8割を超えました。そして2021年にはスマートフォンの比率は9割を超えました。

スマートフォンの検索順位に影響がある

前述したとおり、モバイルフレンドリーでないとスマートフォンにおける検索順位に悪い影響が出てしまいます。
これは「モバイルフレンドリーアップデート」と呼ばれ、モバイルフレンドリーなページの検索順位が引き上げられます。

ページの見やすさが向上する

スマートフォンはPCに比べると、ディスプレイサイズが小さいという特徴があります。PCに最適化されたページをスマートフォンで表示しようとすると、全体的に縮小表示になり文字が小さく読めないページが表示されてしまいます。これではアクセスしてきたユーザーは内容を読めず、ストレスが溜まってしまいます・・・。

スマートフォンに最適化されたページを用意することで、ユーザー満足度を損なうことなく最適な体験を提供できるようになります。

3．スマホ未対応デメリット3選

訪問ユーザーの離脱

PC用のサイトをスマートフォンで見ると、
「文字が小さくて見づらい・・・」
「バナーボタンやリンクのタップがしづらい・・・」
「表示されるのが遅い・・・」
などなど、上記のような原因でストレスを感じたユーザーは、他のサイトへ移動してしまいます。
せっかく訪れてもらったのに、同業他社へ行ってしまっている可能性もあります。
→集客・売上アップの機会を失ってしまいます‼︎

検索順位の引き下げ

Googleはスマートフォンの閲覧に対応していないホームページの順位を、引き下げるアルゴリズムを2015年4月21日から全世界で実装しています。

つまり、現時点でスマートフォンに対応していないホームページは、スマートフォン検索でアクセスが集まりにくくなっているのです。

求人採用に悪影響

2021年1月時点で、携帯端末のスマートフォン比率は92.8%です。
つまり、ほとんどの人がスマートフォンを持っているわけです。

当然、仕事探しをする際に求人を見るときもスマートフォンで見る人の方が多いです。
学生など若ければ若いほど、スマートフォン利用率は顕著に上がります。

多くの企業ホームページがスマートフォン対応している中、そうでない会社は応募の選択肢から外されるケースもあります。
なぜなら見るのがストレスだからです。また、企業イメージも良くありません。
「この会社はいまどきスマホ対応もしていないのか・・・」と思われる可能性もあるからです。
→採用の現場で、優秀な人材の機会損失が起きている可能性もあるんです‼︎

4．ウェブページがモバイルフレンドリーか確認する方法

Googleが無料で公開しているモバイルフレンドリーテストツールを用いると、Webサイトがスマートフォンでの閲覧に適しているかどうかを簡単にチェックできます！

モバイルフレンドリーのチェック項目は全部で4つあります。

1. フォントサイズが小さすぎないか
2. ビューポートが設定されているか
3. タップ要素同士が近すぎないか
4. コンテンツサイズがビューポートに対応しているかどうか

無料で誰でも使うことができるので、ぜひ一度使って見て自分のサイトの状態をチェックするようにしましょう！ツールにアクセスして、チェックしたいURLを入れるだけです^^

5．モバイルフレンドリーの対応方法

では、スマートフォンサイトをモバイルフレンドリーにするにはどうしたらいいのでしょう？

フォントサイズ

フォントサイズを、スマートフォンで見たときに見やすい大きさにしましょう。
大きすぎてアウトになるよりも、「小さすぎる」とGoogleに指摘される場合が多いです。

リンクの距離

リンクとリンクの距離が近すぎるとダメです。
なるべくテキストでのリンクではなく(タップしづらいので)、ボタンやバナーにして、それぞれの距離を離しましょう。

viewportの設定

「head」の中に、「meta」でviewportの設定をしましょう。この設定が無いと、cssでレスポンシブのコードを書いているのに反映されない場合もあります。

コンテンツ幅を調整

cssのメディアクエリでコンテンツの幅を表示画面に合わせましょう。
width:95%とかにしておくといいですね。
画像の幅も各デバイスの幅に収まるようにしましょう。

6．モバイルフレンドリーの現時点でのまとめ

恐らく現時点でスマホ対応していないホームページをお持ちということは、数年前に作られた古いホームページであると思います。
ネットの世界では移り変わりのスパンが速いので、古いホームページというだけで商品・サービスのブランディングにも影響を及ぼしますし、
ある程度作ってから期間が空いているのであれば、スマホ対応のレスポンシブデザインのホームページへリニューアルすべきだと思います。
そのほうが結果的に、ビジネス面で良い変化が起るはずです。

いまではスマホ対応のホームページも、昔ほど高額ではなくなっているのでリニューアルの敷居は高くはないと思います。
今すぐ機会損失を防いでおきましょう!!!

気になる方は、まずはGoogleのモバイルフレンドリーテストで、チェックしてみてください♪