モバイルフレンドリーなUIとは?確認方法も解説

 

スマートフォン(モバイル)に最適なUI(User Interface)を実現するためには、デザインの観点が必要になってきます。Googleが最低限クリアしてほしいと発表している内容を紹介します。

モバイル対応とは? - SEOを気にするサイト

モバイルフレンドリーにするための注意点

モバイルフレンドリーを守るために必要な注意点

  • 読みやすいフォントサイズ・行間にする
  • タップ要素の間に適切な間隔を空ける
  • 再生できないコンテンツを掲載しない
  • インタースティシャルを回避する
  • 表示速度を速くする

読みやすいフォントサイズ・行間にする

フォントサイズは16〜18px程度をおすすめします。フォントサイズが小さすぎると、ユーザーがスマートフォンで閲覧した場合「ピンチして拡大する」作業をさせることになります。それはユーザーフレンドリーではありません。 行の高さはフォントサイズの1.5倍程度の間隔を指定することをおすすめします。

タップ要素の間に適切な間隔を空ける

ボタンやリンクなどタップできる要素が近すぎる場合、ユーザーが誤タップしてしまう可能性があり、モバイルフレンドリーではありません。 フォントサイズと同じく、タップ要素自体のサイズを大きくした上で、周囲に配置している要素とのスペースを確保して、タップ操作を行いやすくする必要があります。

Googleが推奨しているタップ要素の最小サイズは48pxです。 アイコンの幅と高さが24pxの場合、余白を指定してタップできる範囲を48pxまで拡大します。48×48ピクセル領域は約9ミリ四方となり、平均的な大人の指の腹と同等になります。 タップ要素同士は誤タップを避けるため、水平方向と垂直方向とも約32pxの間隔を空けましょう。

再生できないコンテンツを掲載しない

モバイル端末で再生できないコンテンツをモバイル用ページには設置しいない。ライセンスによる制約があるメディアや、Flashなどモバイル端末ではサポートされていないプレーヤーを必要とするものが当たります。

インタースティシャルを回避する

インタースティシャルとは、ユーザーが閲覧するページのコンテンツの大部分を覆うコンテンツを指します。 ユーザーが読みたいコンテンツを隠すため、ユーザーフレンドリーではありません。特にスマートフォンでは、ネイティブアプリのインストール訴求画面や広告バナーがインタースティシャルとして表示されるケースがあります。

Googleは、2017年1月からインタースティシャルなコンテンツを表示するページの評価を下げています。 訴求したい場合は、画面の上部か下部に設置するようにしましょう。

表示速度を速くする

ページの表示速度は、2010年から検索順位の評価要因として採用されています。 Googleは、2018年1月に「2018年7月からモバイル用ページの表示速度をモバイル用ページの表示速度をモバイル用ページの評価に利用する予定」と発表しました。モバイル用ページの表示速度を高速化することが重要になります。

https://developers.google.com/search/blog/2018/01/using-page-speed-in-mobile-search?hl=ja

モバイル対応とは? - SEOを気にするサイト

モバイルフレンドリーの確認方法

モバイル用ページに問題がないか確認する方法があります。

  • モバイルフレンドリーテストツール
  • Search Console
  • Chrome DevTools

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

Googleが提供している「モバイルフレンドリーテストツール」は、ページURLを入力するだけでモバイルフレンドリーでない項目を教えてくれます。

https://search.google.com/test/mobile-friendly?hl=JA

Search Console

Search Consoleでは、WEBサイト全体のモバイルユーザビリティをチェックし、モバイルフレンドリーでないページがあれば、通知がきます。定期的にエラーがないか確認しましょう。

https://search.google.com/search-console/about

Chrome DevTools

モバイル表示を確認する際は、モバイル端末で表示を確認することがベストですが、用意できない場合もあります。 その際は、PCのGoogle Chromeを開き、右クリック+「検証」をクリックしてDevToolsのパネルを開きます。 パネルの左上のモバイルアイコンをクリックすると、左側に表示さる画面は、プルダウンメニューでシミュレーションとなる対象デバイスを切り替えることができます。