ホームページをスマホやタブレットなどのモバイル端末に対応させることの重要性は、多くの方がすでに知ることと思います。しかし、私たちから見ると、本当の意味でモバイル対応されているホームページは非常に少なく、まだまだ「モバイル端末でも違和感なく見れる」程度です。
今回は、そんなホームページの正しいモバイル対応について、制作時に気をつけたい４つの注意点をご紹介いたします。

モバイル対応は必須事項となりました

2018年3月27日にGoogleの「ウェブマスター向け公式ブログ」にて、モバイルファーストインデックスの本格始動が通知されました。このモバイルファーストインデックスとは、簡単に言うと、Googleがホームページを評価する際、これまではパソコン版のホームページを評価対象にしていたのに対し、これからはモバイル版のホームページを評価対象とするということです。つまり、モバイル版のホームページ（スマホ向けサイト）を持っていない企業は、Googleからの正しい評価を受けられず、検索順位を徐々に落としてしまうということを意味しています。
これにより、ホームページ集客を行うすべての企業は、ホームページのモバイル対応が必須のものとなり、避けては通れない基本事項となりました。このモバイルファーストインデックスについては、弊社のコラム「ユーザーの利用環境に合わせてホームページをモバイル対応させましょう」にて詳しく解説していますので、あわせてお読みください。

本当の意味でモバイル対応させるための４つの注意点

上述のとおり、ホームページのモバイル対応は必須の事項となりましたが、ただスマホやタブレットで見ることができれば良いというものではありません。あくまでも、モバイル端末で「適切に見れる」必要があります。そのためには、自社のホームページについて、以下の４つの事項が正しく行えているかを確認し、本当の意味でモバイルファーストインデックスに対応したホームページ運営を行いましょう。

ビューポートの設定

ビューポートとは、各デバイスの画面の幅と思ってください。この画面の幅にホームページが合っていないと、小さくて見づらかったり、逆に大きすぎて横にスライドしなければ見れなかったりと、ユーザーにとっては非常に使い勝手の悪いホームページになってしまいます。そのため、モバイル対応したホームページは、スマホでもタブレットでも、それぞれの画面サイズに合わせてホームページのデザインが可変するとうなレスポンシブ対応で制作されていることが求められます。

フォントサイズを大きく

当たり前のことですが、スマホやタブレットは、パソコンと比較して画面サイズが大幅に小さくなります。そのため、パソコンで使用しているフォントサイズのまま文章を表示してしまうと、モバイル端末では文字が小さくてよく見えません。モバイル端末で見られるときは、文字の大きさがちょうど良い大きさに自動で拡大されるような仕組みで制作しましょう。

タップエリアを大きく

モバイル端末でホームページを見るときは、パソコンとは異なり、指でタップして操作されます。そのため、タップエリアが小さすぎると、誤って思わぬ部分をタップしてしまったり、タップできる箇所かできない箇所なのかが分かりづらかったりと、非常に使いにくいホームページになってしまいます。モバイル対応させる際は、必ず、男性の親指でも難なくタップできるような、ゆとりあるデザインでホームページを制作しましょう。

flash動画を使用しない

以前は、flash動画というアニメーションをホームページに盛り込むことが流行しました。しかし、現在ではそのサポートも終了し、Apple社製の全端末や多くのモバイル端末では、flash動画を使用しているホームページは、その部分だけエラーで見れなくなってしまっています。現在のホームページにflash動画を使用している場合は、速やかに通常の動画か、静止画に差し替えてください。

モバイルゲドンの影響

今回ご紹介したようなモバイルファーストインデックスによる影響（検索順位の下落など）は、非常に波紋を呼んでおり、大きな影響をもたらしていることから「モバイルゲドン」と呼ばれています。
ある調査によると、このモバイルファーストインデックスの実施前と、実施後を比較すると、モバイル対応していないホームページのアクセス数が約12%低下したと言われています。この数字はこれからもどんどん大きくなっていくものと考えられており、全ての企業において、早急のモバイル対応が必須です。