スマホフレンドリーなWEBサイトって?

未分類

スマホフレンドリーとは?(モバイルフレンドリーとは?)

あなたのWEBサイトはスマホに優しい、スマホフレンドリーなサイトになっているでしょうか?

スマホフレンドリーは私の造語ですが、Googleではこれをモバイルフレンドリーと言っています。

どちらも意味は同じです。

スマホの普及にともない、GoogleはモバイルフレンドリーなWEBサイトを重要視しています。

具体的にモバイルフレンドリーなWEBサイトとはどういったものなのか気になるところですが、難しく考える必要はありません。

スマホで使いやすいWEBサイトがモバイルフレンドリーなWEBサイトになります。

モバイルフレンドリーではないサイト例

モバイルフレンドリーではないWEBサイトとは、スマホで使いづらい、スマホ見にくいサイトです。

具体的には…

・Flashが使用されている

Flashはiphoneやipadなどのブラウザーでは再生できないため、スマホでは一般的ではないソフトウェアであり、使用しているとモバイルフレンドリーではないとみなされます。

サイトをカッコよく、オシャレなイメージにしてくれるので、17、18年はとても流行り、どのサイトもこぞってトップページにFlashを持ってきていたぐらいです。特にミュージシャンサイトやアパレルサイトでよく使われていました。一生懸命作っていたのが、今となっては懐かしいです。

・ビューポートが設定されていない

スマホで表示した際、パソコン画面の幅でページが表示され、文字が小さく、タップしいサイトです。

ひと目見て、『あっ!このサイト古いな!』と感じるサイト、まさしくそれです。

画像や要素が画面からはみだし、ユーザーが横にスクロールしたりズームしたりして、やっと内容を確認することができるサイトで、コンテンツのサイズが統一されていないのでとても見にくく、フォントサイズが小さすぎたり、大きすぎたり、ボタンやリンクなどタップする要素同士が近すぎてタップしにくいなど、ストレスがかかります。

・インタースティシャルが使用されている

インタースティシャルとはページコンテンツを覆い隠すようなポップアップ画面や、目的のWEBページが表示される前に別のページを表示される仕組みのことです。

主に広告に誘導したり、サイト内のアカウント登録ページなどへ誘導する目的で使用され、俗に言う、今風のサイトによくあります。

私個人的には一番嫌いなWEBサイトです。

記事を見ようとしたら、広告が邪魔をしてきます。

ボタンを押さないと進めない、スクロールにずっとついてくるなど非常にストレスフル。

こういうサイトに出くわした場合、とても煩わしく、私はコンテンツを見るのをやめます。

インタースティシャルを表示するツールなどを導入しているのであれば、少なくともモバイルページでは表示されないようにするのが無難です。

モバイルフレンドリーなWEBサイトの5つの条件

モバイルフレンドリーなサイトであると認識されるためには、5つの点を考慮する必要があります。

モバイルフレンドリーなWEBサイトの5つの条件

Flashを使用していないこと

ページの大きさがスマホ画面に最適化されており、横にスクロールしたり、ズームせずに読めること

③リンクを指でタップした際に、近くにある別のリンクをタップしてしまうことがないよう、リンク同士が離れていること

スマホ上でズームすることなく読める大きさのテキストを使用していること

⑤余計なポップアップや広告といったインタースティシャルを使用していないこと

モバイルフレンドリーテストツールを使う

モバイルフレンドリーかどうかを診断できるツールがあります。

Googleが無料で提供しているモバイルフレンドリーテストです。

モバイルフレンドリーテストを利用することで、Googleのモバイルフレンドリー基準をクリアしているかどうかを確認できます。

Error 404 (Not Found)!!1

モバイルフレンドリーなサイトであればこう出ます。

モバイルフレンドリーではない場合はこう出ます。

モバイルフレンドリーではないと判定された場合は、指摘された部分の訂正を行う必要があります。

サーチコンソールに登録している場合、クロールの際にモバイルフレンドリーかどうかの判定は自動で行ってもらえます。

モバイルフレンドリーなサイトを実現する3つの方法

・レスポンシブWEBデザイン

1つのURLで1つのHTMLを配信し、デバイスによって適した表示に切り替える方法です。

ソースコードは同じですが、パソコンで表示した場合にはパソコン用のレイアウト、モバイル端末で表示した場合にはモバイル用のレイアウトに切り替わります。

・動的な配信

サーバー側で把握したデバイス情報に応じて、異なるHTMLを生成します。

パソコンからアクセスした場合にはパソコン用の、モバイルでアクセスした場合にはモバイル用のHTMLが表示されます。

・別々のURLを持つ

モバイル用ページとパソコン用ページで別々のURLを用意し、デバイスによって振り分ける方法

今ではレスポンシブデザインのWEBサイトが一般的です。

レスポンシブデザインが選ばれるのは、その手軽さもありますが、Googleのアップデートによる影響が少なく、アップデートの都度WEBサイトを大きく変更する必要がないことも選ばれる理由の一つです。

モバイルフレンドリー実現のためのポイント

WEBサイトの使いやすさはGoogleの表示順位に影響します。

検索におけるスマホユーザーの比率はパソコンユーザーを上回っていますので、今後はパソコンではなくスマホをメインに使いやすさを考慮する必要があります。

何度も言いますが、スマホで使いやすいページかどうかが検索結果に影響します。

かつては、モバイル検索の表示順位もパソコン版のコンテンツの評価によって決まっており、モバイル版コンテンツの内容は考慮されず、モバイルフレンドリーかどうかを補助的に見ているだけでした。

しかし、モバイルファーストインデックス実施後は、モバイル版コンテンツの評価をもとに表示順位が決まるようになりました。

モバイルフレンドリーなWEBページの表示順位が向上し、逆にモバイル対応になっていないWEBページは表示順位が下がっています。

モバイルフレンドリーがどうかはそれだけ重要な要素なのです。

スマホフレンドリーなサイトにする方法

モバイル環境に最適化されたWEBサイトにするには、HTMLやサーバーの知識などが必要です。

現状、スマホフレンドリーなサイトになっていなくても安心してください。

弊社のWEBコンサルティングでは、スマホフレンドリーにするための技術的支援はもちろんですが、SEO対策、WEBサイトを使って売れる仕組みの構築支援行っています。いつでもご相談ください。

コメント

タイトルとURLをコピーしました