モバイルフレンドリーとは検索順位を上げる手段!基礎知識について

2019年2月28日

この記事は”3分”で読めます

モバイルフレンドリー スマホ端末

モバイルフレンドリーとは、サイトの表示がモバイル向けに最適化されていることを指します。近年のWebデザインにおいて全く無視できない技術なのですが、テンプレートを使用する場合を除き、専門性の高い技術です。基本的な知識、サイトの確認方法などを紹介します。


目次


 

◆モバイルフレンドリーとは?Googleからの評価を上げる仕組みの1つ

スマホ端末を持つ手元

モバイルフレンドリーとは、「サイトの表示がモバイル向けになっているサイト」のことを指します。モバイルフレンドリーとなっているサイトの特徴は次の通りです。

・モバイルの画面に合わせた形で表示されている
・スマートフォンで検索した際に上位に上がる
・世界中の言語での検索順位に影響がある

現在、スマートフォンが普及し、世界中で多くの人々がスマートフォンでインターネットを利用するようになりました。これまではPCで閲覧することのみを想定していたサイトも、モバイルフレンドリー化することで、スマートフォンを利用するユーザーにとって利便性の高いサイトに変わります。モバイルフレンドリー化は、検索順位にも影響するため、SEO対策を行う上で必須の技術です。

◆なぜモバイルフレンドリー化が必須なのか

電車内でスマートフォン

現代のサイト制作にあたってモバイルフレンドリー化が必須となった理由は3つあります。

・近年のインターネット利用はスマートフォンがメイン
・モバイルフレンドリー化するとスマートフォンでの閲覧が容易
・Googleの検索順位が向上する

近年のインターネット利用はスマートフォンがメイン

Googleから、アメリカのスマートフォンユーザーの94%が地元の情報をスマートフォンで検索しているという結果が発表されました。更に2018年5月に総務省の発表した「通信利用動向調査」でも、インターネット利用媒体に多いのはPCよりもスマートフォンであることが分かります。そのため近年では、PC向けよりもモバイル向けデザインの方が重要視されています。

モバイルフレンドリー化するとスマートフォンでの閲覧が容易

PC向けの表示をしているサイトをスマートフォンで見ると、非常に文字が小さく読みづらくなります。そのままスマートフォンで閲覧するにはピンチ、ズームなどの操作が必須になり、これは誤操作が増える原因にもなります。モバイルフレンドリー化にすることで、スマートフォンでも見やすく、余計な操作が少なくなり利便性が増します。

Googleの検索順位が向上する

スマートフォン利用率の背景から、Googleがモバイルフレンドリーのサイトの検索順位を上げるようになりました。モバイルフレンドリー化することで、多くの人にとってサイトの利便性が増し、検索結果の上位に表示されるようになるので、認知度、評価が共に向上します。

◆最も評価が高いのは?モバイルフレンドリーの3つの対応方法

パソコン画面

PC向けのサイトをモバイルフレンドリーに対応させる方法は3つあります。

・レスポンシブWebデザイン
・ダイナミックサービングタイプ
・セパレートタイプ

レスポンシブWebデザイン

画面のサイズに合わせUIを変化させるタイプ。ページが表示されるまでの読み込み時間が早く、PC向けと同じファイル・URLを使うので、サイトの共有やリンクが簡単です。Googleからの評価が高く、Googleが実装を推奨している方法です。

ダイナミックサービングタイプ

PC向け、モバイル向けの2つのテンプレートを切り替えるタイプ。こちらもPC向けと同じファイル・URLを使いますが、2つのテンプレートを作る必要があり、レスポンシブWebデザインよりも制作が面倒です。しかしその分、デザインの自由度は高くなります。

セパレートタイプ

PC向け、モバイル向けで2種類URLを用意するタイプ。2つの異なるURLを利用するので独立した運営管理が可能ですが、更新に手間があり、流入が分散されます。3つのタイプの中でアクセス速度が最も遅いため、Googleからの評価が低いです。

◆サイトがモバイルフレンドリーかを確認する方法

サイトがモバイルフレンドリー化されているかを確認するには、Googleの提供する、モバイルフレンドリーテストツールを利用します。確認したいサイトのURLを欄に入力して、「テストを実行」をクリックするだけでチェックが可能です。

◆モバイルフレンドリーテストでの主なエラー6つ

モバイルフレンドリーテストツールで確認できる主なエラーは以下の6つです。

モバイルフレンドリーテスト(※外部サイトへリンクします)

「互換性のないプラグインを使用しています」

Flashなどスマートフォンが対応していないプラグインを使用していると起こるエラーです。HTML5などを使用してページを再設計する必要があります。

「ビューポートが設定されていません」

Viewport(ビューポート)とは、ページのサイズと画面サイズを合わせて調整する設定のことです。ユーザーは、大きなPCや小さなスマートフォンなど、画面の大きさの違う媒体を使用してサイトを閲覧しています。さまざまなデバイス向けにページを最適化するにはmeta viewportタグを使用してviewportを指定する必要があります。

「ビューポートが「端末の幅」に収まるよう設定されていません」

Viewportが固定幅で指定されていると、異なる画面サイズに合わせることができません。サイトのページにレスポンシブデザインを導入し、デバイスの幅とスケーリングに合わせてviewportを設定する必要があります。

「コンテンツの幅が画面の幅を超えています」

文章や画像を表示するのに左右のスクロールが必要になるサイトに起こる可能性のあるエラーです。サイトの CSS 宣言に絶対値を使用している場合や、ページの画像が特定の幅で表示されるように設計されていると発生。サイトのCSS要素と画像に相対的なスケーリングを施す必要があります。

「テキストが小さすぎて読めません」

モバイル端末で閲覧するにはフォントサイズが小さく、文字を拡大しなければならない場合に起こるエラーです。Viewport内で適切にフォントサイズをスケーリングする必要があります。

「クリックできる要素同士が近すぎます」

クリックするボタンやリンクなどが近すぎると起こるエラーです。スマートフォンでは指で画面をタップして操作するため、ボタンが隣接しているとタップ操作が難しくなります。クリックできる要素は、スマートフォンユーザーに適するよう間隔をあけなければいけません。

◆サイトをモバイルフレンドリーにして検索順位を向上させましょう

モバイルフレンドリーとはサイトの表示をモバイル向けに最適化していることです。近年ではモバイルでの検索が重要視されているため、サイトのデザインがモバイル向けになっていることが、検索を上位にする要因になっています。

モバイルフレンドリーのサイトを作成するための作業は、かなりの専門的知識、技術を要します。今後、そういった技術を要したWebディレクター、もしくはデザイナーは非常に貴重な人材になると言えるでしょう。

▼EX.モバイルフレンドリーに関連するWEB業界のお仕事

イマジカデジタルスケープではモバイルフレンドリーに関連するWebディレクター、Webデザイナーの転職・求人情報を掲載しています。
少しでもご興味がある方は下記から自分にあったお仕事を探してみましょう。

WEBディレクターに関する求人を見る

WEBデザイナーに関する求人を見る


トップへ戻る

マイページログイン

Web・ゲーム・映像業界専門の求人・転職・派遣ならイマジカデジタルスケープに登録する