今回はGoogle検索チームのKentさんが紹介した”モバイルフレンドリーの方法”という動画を日本語に翻訳しました。
公式アカウントの動画
目次
さて本題に入りたいと思います。下記から翻訳文となります。(自己紹介やこちらで判断して翻訳を割愛したところもありますので、ご了承ください。)
なぜモバイルフレンドリーが重要かというと、Googleの検索トラフィックの半分以上がモバイルデバイスのユーザーからです。これらのトラフィックはみなさんのサイトにアクセスするポテンシャルユーザーと言っても過言ではないです。
物理上の制限で(モバイルデバイスのスクリーンはパソコンより小さいなど)モバイルデバイスで素晴らしいユーザー経験ができるようにデザインするのはとても難しいです。
意外なことに、簡潔なモバイルサイトでもよく大きスクリーンで綺麗に表示されます。
簡潔なサイトではユーザーがスムーズにご自身のアクセス目標に集中することができます。
モバイルフレンドリーはユーザーにとって大変重要です。ユーザーに重要ということはGoogleにとっても重要なタスクです。Googleはいままで多数のモバイルフレンドリーを実現できる記事などの情報を発信してきました。
Google Search Centralとweb.devのサイトを確認しましょう、みなさんの役に立つ記事があると思います。
では、始めましょう、まずテクニカルな改善方法を話してから、ユーザー経験の視点から改善方法を紹介します。
1、セパレートサイトの内容の一致性(sync)を確保
モバイルサイトとパソコンサイトを保有するのは間違ったことではありませんが、ただし、2つのサイトのうちどちらかがコンテンツや機能、パフォーマンス面で衰えることが発生します。
コンテンツと機能面での不一致は違うデバイスから来たユーザーに不快感を与えます。
もし2つのサイトを運営する場合、Puppeteerという自動ツールを使用して2サイトが同じく作動しているかどうかが確認できます。
PuppeteerはChromeのHeadless InstanceをコントロールできるAPIを提供できます。これはWebサイト制作中でもテストツールとして使えます。
上記の方法で2サイトの同期性を確保できます。2サイトの維持費用の予算の確保に注意してください。
よりいい方法といえば、やはり、レスポンシブサイトに統合することです。CSS mediaを使って、どのようなデバイスでもユーザーに一致性のあるエクスペリエンスを提供できます。また、コストも比較的低いと考えられます。
2、インデックス化する前提でモバイルサイトをデザインする
2点目は Googleがインデックス化する前提でモバイルサイトをデザインすることです。
なぜかというと、ほとんどのユーザーはモバイルデバイスで検索をします。
GoogleはHTTP headersの中にあるモバイルデバイスエージェントを使ってサイトをクロールし、サイトにあるコンテンツをインデックス化します。
もし検索エンジンによるウェブサイトのクローリングとインデックス化に詳しくない場合、Search Central のHow Search Works Pageを確認しましょう。
ここにモバイルサイトを含めたモバイルページをインデックス化する途中にインデックス化に重要な影響を与える情報を省略すること(ページサイズを縮小するため)による発生する問題の例が取り上げられています。
表示速度が速くなりますが、ウェブ上に表示されなくなるかもしれません、とてもいい副作用とは言えません。
ユーザーエクスペリエンスの中のInfinite Scroll、Load More Buttonsはモバイルデバイの中で幅広く使われています。
ただし、これによってGoogleがサイトの全てのコンテンツをスクロールできなくなる可能性があります。
ページのインデックス状況や他の問題を確認するとき、Search Consoleのrich insightsで確認できます。
Search ConsoleについてDanielの動画シリーズを確認しましょう。
全てのページのインデックス化をリクエストする場合はサイトマップを利用するか、Google Merchant Siteに所有のページをフィードすることでインデックス化申請できます。
3、サイトスピード
3点目はサイトのスピードを上げることです。
サイトスピードはモバイルデバイスにとって、永遠の大きな課題です。なぜかというと、モバイルデバイスは電波面とデータ面では比較的弱いです。イメージとJavascriptの改善法について、前の動画で説明してあります。下記リンクにてご確認ください。(日本語に翻訳済みしたバージョン)
ウェブフォントを使用するとき、また別の問題が出てきます。それはウェブフォントがローディングされていないとき、まずデフォルトのフォントが表示され、その後にウェブフォントが表示されます。これはcontent layout shift問題を引き起こします。
Page Speed Insightsではlab dataとfield dataがあるため、ページのパフォーマンスを下げる問題点のレポートや向上させるためのアドバイスがもらえます。
ウェブフォントについて、種類を減らせるかどうかを今一度ご確認しましょう。また、一番重要のフォントを適切に表示できるように確保しましょう。これについて、Katieさんの記事を確認しましょう。
もしサイトスピードを上げることは難しい場合、ユーザーの待っている時間を有意義な時間にすることをお勧めします。例えば、飲食店で、お客さんが料理を注文し終わって、待っている間に、お客さんにスペシャルオファーを提供したり、お店の近いうちのイベントを紹介したりとか。
4、テクニカルよりはユーザビリティー
４点目はテクニカルな課題を減らし、ユーザビリティーの配慮を増やすことです。
つまり、小さいデバイスやモバイルデバイスでも読みやすいようにすることです。
これを実現するためには、以下のことに注意が必要です。
①コンテンツがスクリーンをはみ出さないこと
②テキストも十分な大きさになっていること
③コンテンツをズームして大きく見えるようにすること
④ボタンやアイコンは認識できるぐらいの十分な大きさになっていること
自分の携帯や友達の違うデバイスで確認できますので、忘れずにやってみましょう。
なお、ページ作成中はChromeの検証機能で各種デバイスでサイトの様子がうかがえます。
5、読みやすさ
読みやすさに関して、追加で、例えば ナビゲーションメニューが小さいデバイスでうまく表示できないとか、ボタンが小さすぎてクリックできない、ボタンは手で操作しづらい、キーボードに過度に依存するなどの問題について、モバイルフレンドリーツールで解決できます。また、このツールはフォントが適切かどうか、古いプラグインがあるかどうかも確認できます。Search Consoleにもモバイルユーザビリティについてのレポートがあります。
6、ユーザーエクスペリエンスを簡略化
６点目について割愛させていただきます。
詳細はDuttonさんとKatieさんの記事をご確認ください。
Duttonさんの記事へ
Katieさんの記事へ
7、パーソナライゼーション
７点目のポイントはパーソナライゼーションです。
モバイルのユーザーはパーソナライゼーションを非常に期待します。これには色々な理由があります。たとえば、モバイルデバイスは個人のものというところと画面が小さくなったということはもっとユーザーと関連するコンテンツなどを表示しないといけないです。
ご自身のサイトにパーソナライゼーションを適応しているかどうかはサイト検査をすることです。これで、ユーザーのニーズがより満たされているかどうかが確認できます。
パーソナライゼーションのやり方をいくつか紹介します。
たとえば、ウェブサイトにユーザーが前回閲覧した商品を表示したり、ユーザーのプロファイルに合わせて商品をススメしたりとか。
これらのことはAIレコメンデーションエンジンも利用できます。
cookiesはユーザーの趣味を記憶する方法です。なお、cookiesを収集するためには、顧客に関連条項を容認したうえでサイトに登録してもらう必要があります。
8、余裕があればマルチなインプット方法を実践する
最後のポイントはサイトが各種機能を取り入れられるかどうかです。これらのツールでサイトとユーザーとのコミュニケーションとイントラクションを深めます。たとえば、ローケーション機能でユーザーに位置情報を伝えたり、バーチャルリアリティ機能で、ユーザーに商品を展示したりなど。
Google project Fuguではこういった機能のツールがありますので、ご利用ください。
またこれらのツールの使用範囲は caniuse.comで確認できます。