「レスポンシブ化とモバイルファースト」ページのヘッダー画像
Home >responsive_design

レスポンシブ化とモバイルファースト対応を分かりやすくご説明しております。

ホームページでの訴求効果(集客向上)には、レスポンシブ化とモバイルファースト対応は必須です。

 現在ではスマホによるホームページの検索が80%以上と言われています。この状況に対応するため、ホームページをスマホサイズとパソコンサイズの双方で扱いやすくする施策が求められています。この施策を『レスポンシブ化』このようなデザインを『レスポンシブ ウェブデザイン』と呼んでいます。
更に、グーグルの評価対象が従来のパソコン用ページからスマホ用ページとなったため、スマホでの扱いやすさ(モバイルフレンドリー)が重要点となりました。

このページでは、レスポンシブ、モバイルフレンドリー、モバイルファーストの意味、重要性、実施方法、そして訴求効果への影響などをご説明しております。

2カラムのPCサイトイメージ画像
2カラムのPCサイトをレスポンシブ化したイメージ画像

左2カラム構成のホームページのレスポンシブ化

先ずは上の2つの画像をご覧ください。

これは『左2カラム』というレイアウトを持つホームページを単にレスポンシブ化したイメージ画像です。
左の画像がパソコンサイズ用の、左側にサイドバーを持つページです。スクロールしていただくと全体のレイアウトが簡単にわかります。

一方、このパソコン用の左2カラムのページを単純にスマホ用にレイアウトすると、右図のようにとても長いページになることがわかります。

先ずは上の2つの画像をご覧ください。
これは『左2カラム』というレイアウトを持つホームページを単にレスポンシブ化したイメージ画像です。

左の画像は、パソコンサイズ用の左側にサイドバーを持つページです。スクロールしなくても全体のレイアウトが見てとれます。

一方、このパソコン用の2カラムのページを単純にスマホ用にレイアウトした右側のページは、全体がとても長いページとなり、スクロールを行わないと全体が見れません。

 このように、メインコラムの横にサイドバーを持つサイトは数多く存在します。特にスマホの普及前に作られたホームページのコード上の構成は、大まかに①ヘッダー画像、②サイドバー、③メインコンテンツ、④フッターという順番で縦に並んでおり、それらを上下左右にレイアウトしているものが大半です。
このレイアウト構成をスマホの小さな画面(モニター)に合わせるには、縦の配列にしなくてはなりません。その場合に起こる問題は、ページ全体がとても長くなってしまうこと、次に肝心要な重要な記事や情報が表記されているメインコラムよりも、比較的補助的な記事や情報が表記される左サイドカラムが上に配列されてしまうことです。

このページでは、このようなレスポンシブ化によって起こる構造的な問題と、グーグルのスコアリング、訴求効果への影響への対応策をご説明していきたいと思います。

『モバイルフレンドリーテスト』のクリアは第一歩の段階に過ぎません

 上述のように、パソコンのモニターサイズ用だけのホームページをスマホのモニターサイズに合わせてデザインを可変させることを『レスポンシブ化』または、制作の段階での可変レイアウトを『レスポンシブ ウェブデザイン』といいますが、制作の段階であればパソコン、スマホの双方のモニターサイズを考慮してページを作ることが可能です。
問題なのは、既にパソコンのモニターサイズ用に作られたページを如何にスマホの小さなモニターサイズで見やすく、そして扱いやすくレイアウトするか・・・ということです。横方向に向かってレイアウトされたパソコン用のレイアウトを、単に横幅の狭いスマホ用のレイアウトにすることはさほど難しいことではありません。
問題なのは、そのようなレイアウトを行った後、いくつかの障害が発生する可能性があるということです。

どのようなレスポンシブ化を行っても、グーグルのモバイルフレンドリーテスト(※1)をクリアすることは可能です。

モバイルフレンドリーテスト結果の画像
 この画像は、当サイトが別途運営する約8年前にパソコンサイズで制作したホームページ内のページを、モバイルフレンドリーテストした結果です。
日々アップデート(更新)されるグーグルアルゴリズムがホームページにどのように影響するかということを、様々な角度から検証するために敢えてレスポンシブ化したページとしていないページを混在させています。その検証結果を基にこのホームページの記事を作成しています。

画像を見た通りですが、左の結果はレスポンシブ化を行ったページのもの。右は行っていないものです。
このように、レスポンシブ化を行いグーグルのテストに合格することはさほど難しい作業ではありません。モバイルフレンドリーテストはホームページの構造がスマホで安易に扱える状態になっているか否かを、グーグルの尺度で測っただけのものです。
グーグルによるページの評価に対してのテストのクリアは重要ですが、実際の扱いやすさはユーザーが決め、行動に表すことですので、テストにクリアしたからといって安心することはできません。

※1【モバイルフレンドリーテスト】グーグルが無料で提供する、レスポンシブされたページがグーグルが推奨する容態になっているかをテストするプログラム。またはそのテスト結果。現在のところ、グーグルはタブレット(iPadなど)はモバイルとして捉えていない。

モバイルフレンドリーテストの次は、ページの表示速度を改善します

ページ展開速度のテスト結果の画像
 この画像は、レスポンシブ化したページの表示速度をテストした結果です。
特にスマホの場合は、パソコンよりもページが開く速度が遅く、各ユーザーの通信環境によって更に表示速度が低下することがあります。グーグルは、ページのスマホでのパフォーマンスは重要という考えの元、この表示テスト『PageSpeed Insights』でのサービスを2018年11月中旬から開始しました。

ページ側の原因で表示速度が遅くなるケースは多々考えられますが、特に動画やその他のプログラム(JavaScriptなど)を多用しているページは対策が求められています。
グーグルの2019年1月30日の公式ブログにて『Rendertron によるダイナミック レンダリング』について触れており、多くのフロントエンド フレームワークは、コンテンツの表示に JavaScript を使用しています。そのため、Google がコンテンツをインデックスに登録したり、インデックスに登録されたコンテンツの更新に時間がかかる場合があります。と明記しました。
ダイナミックレンダリングとは、グーグルが将来的に開発を進めている検索エンジン(クローラー)の新しい機能のひとつで、ページの読み込みに時間がかかるプログラムをいくつかのパターンに分けて、スムーズに行うようにするということのようです。

ページの表示速度の改善は、難しい内容のものばかりではありません。先ずはスマホページにおいて、大きなヘッダー画像をスライドさせたり、容量の大きい画像を使用したり、動画を配置したりといった、初歩的な原因の解決から進めてみると良いと思います。

スレスポンシブ化=モバイルフレンドリーではありません

 モバイルフレンドリーに関するグーグルのスコアリング基準は、あくまでもテストをクリアするためのひとつの指針でしかありません。これらは構造上の問題箇所の修正によって解決しますが、構造的ではない部分、即ち「コンテンツ自体への評価」については頭を悩ませるところではないでしょうか・・・?
これは、何かを小さくしたり、ずらしたりといった、明確な形を持った施策ではありませんので、答えの導きがとても難しい課題です。難しいから目を背けてしまうケースも現実として多くみられます。
目を背けても、グーグルのホームページへの評価は日々行われていますので、問題を抱えているページの解決策を講じない場合は、それなりの検索順位しか得られない結果となってしまいます。また、レスポンシブ化を行っても、その処理方法がグーグルのポリシーやアルゴリズムに沿っていない場合は、実質的なモバイルフレンドリーとしての評価は得られません。

 おそらく多くの方が悩まれるのは、パソコンページ向けのたくさんの情報や記事を、どうやって小さなスマホのモニターサイズに合わせてレイアウトするか?ということではないかと思います。
グーグルの推奨は、「パソコンページにある情報や記事は、スマホページで省いてはいけない」というものです。また一方では、スマホで扱いやすい、見やすいレイアウトを推奨しています。

 明確な方向性が定まらない中、色々と苦肉の策を講じているというのが現状ですが、比較的多く見られる対策として文章を隠してしまうという方法があります。これは記事の最初の数行だけ表示しておき、『・・・続きをみる』をクリックすることで全体の文章が現れるというものです。確かにページ自体はスッキリしますし、扱いやすいような気もします。しかし、この方法には大きな問題が隠されています。それは『隠しテキスト』という、グーグルのガイドラインに反する行為として扱われるのではないかということです。

隠しテキストとは、キーワードを視覚的に見えない状態でページ内に羅列し、SEO内部施策での効果を狙った施策を指し、現在ではグーグルの対策(ペナルティ)の対象となっている重大なガイド違反行為です。

テキストが少ないページがスマホでの見やすいページという解釈があるわけではありませんし、テキストが多いから評価が高いとも限りません。これは、そのページを訪れたユーザーの行動によって検索エンジンが評価することになりますので、現状でスマホ検索の順位が高く、アクセス数も想定通りであれば、テキストは隠しておいても良いかと思いますし、状況がよくない場合は修正も視野に入れるべきだと思います。但し、はっきり言えるのは隠しテキストは対策(ペナルティ)の対象となりますが、テキストが多いことでペナルティを受けることはないということです。更に、グーグルアルゴリズムのアップデートはいつ行われるかわからず、ある日突然順位を失うことも有り得ますので、隠しテキストなどの冒険はあまり行わない方が良いように思います。

モバイルファーストインデックス(MFI)について

 ホームページの制作者の中にも時折「モバイルファースト」と「モバイルフレンドリー」を混同している方がいるようですので、ここではこの2つのよく似ていて紛らわしい言葉の意味からご説明したいと思います。

 先ずはモバイルファーストですが、本来はモバイルファーストインデックスが正しい呼称となります。意味は、グーグルの検索エンジン(クローラー)がホームページを巡回(クロール)し、ページの情報をデータベースに収める(インデックス)際の評価対象として、モバイル用のページを優先しているという意味です。
パソコン用のページよりもモバイル用のページを先に作るという意味ではありませんのでご注意ください。

 次にモバイルフレンドリーですが、こちらはモバイル、即ちスマホユーザーが扱いやすいスマホ向けに特化したページ作りを指します。そして、スマホでの扱いやすさを計るための指針として、グーグルが提供しているモバイルフレンドリーテストがあるということです。
このテストの適応度が高い方が、グーグルの評価上で優れたページということになります。

よって、モバイルファーストはグーグルの検索エンジンの評価方法を指しているわけですから「モバイルファーストを意識したページの制作」という表現は誤りということになります。正しくは、モバイルファーストインデックス対策のためのモバイルフレンドリーなページの制作という表現となります。

スマホで扱いやすい、検索エンジンに高評価なページとは

 モバイルフレンドリーなページを制作する場合、通常はグーグルが提供するモバイルフレンドリーテストをクリアさせるところからスタートします。
何故なら、このテストがクリアできていない、または極端にスコアが低いページはスマホに対応していないページとして扱われ、スマホでの検索に対してページが圏外、または後順位に追いやられてしまう可能性が多大にあるからです。
スマホでの検索が80%以上とも言われている昨今のインターネットの検索事情において、スマホページが主要キーワードで上位表示されない状況は集客に対して致命的といって良いと思います。

 モバイルフレンドリーテストにはクリアしなければならない項目がいくつかあります。主だった対策、最低限必要な対策として、検索エンジンにレスポンシブ化されたページであることを正しく伝え、次に文字の大きさ、画像の容量とサイズ、そして1番重要なのは、ページの表示速度の早さと、ページを横スクロールさせないということが挙げられます。
パソコンでもスマホでも、ページがなかなか開かない、横スクロールしないとコンテンツが見れないというページは、扱い難さからユーザーの離脱率が高くなりますので、同時に検索エンジンからの評価が下がってしまう結果となります。評価が下がればスマホでの検索結果に優位な位置で表示されない可能性が高まります。
よって、大容量な画像、過度なプログラムの導入など、検索エンジンの読み込みを妨げる要因となるものへの修正、画像や各コラムの横幅が大きくてスマホのディスプレイに収まりきれず、右方向に突き出してしまわないようなレイアウト調整が必要となります。

 他にも、スマホでページを開くと、突然ポップアップ画像が現れたり、様々なバナーやボタンが浮き上がってきて記事部分を覆うように隠してしまうなど、一見すると気が利いてるように思われる施策も、検索エンジンの視点では『扱い難いページ』としてジャッジされてしまいますので注意が必要です。

モバイルフレンドリーはあくまでもグーグルが設定した基準への適応度を示すだけのものに過ぎません。スマホで扱いやすいページとはテストにクリアするだけではなく、スマホユーザーが記事や情報を読みやすく、長く滞在しやすい状態を作り、維持する気配りが求められます。

◆ご自身のホームページがなかなか検索に乗らないなどの問題を抱える運営者さんへ

●ご自身のホームページが予定していたキーワードで上位表示されない
●社名でも検索にヒットしない
●SEOについての知識をほとんど持っていない
●ホームページ制作を依頼した制作会社がなくなってしまった
●SEOを誰に頼んで良いかわからない

上記のようなホームページ運営者さんがいらっしゃいましたらSEOに関して無料で診断致します。

ご希望の方は下記アドレスまでメール、またはメッセージフォームからご連絡願います。

※件名は『HP無料診断』として頂き、本文にはご担当者さまのお名前、対象サイトのURLを記してください。

E-mail/seo-ux@fukusen-design.com
【福泉デザイン】 高 橋  輝
千葉県市川市新田2-28
当サイトに記述されているテキスト等の引用、流用は固くご遠慮願っております。Hold The Copyright(C)2016 Fukusen-Design