スマートフォン(モバイル)に最適なUI(User Interface)を実現するためには、デザインの観点が必要になってきます。Googleが最低限クリアしてほしいと発表している内容を紹介します。
モバイルフレンドリーにするための注意点
モバイルフレンドリーを守るために必要な注意点
- 読みやすいフォントサイズ・行間にする
- タップ要素の間に適切な間隔を空ける
- 再生できないコンテンツを掲載しない
- インタースティシャルを回避する
- 表示速度を速くする
読みやすいフォントサイズ・行間にする
フォントサイズは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
モバイルフレンドリーの確認方法
モバイル用ページに問題がないか確認する方法があります。
モバイルフレンドリーテストツール
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のパネルを開きます。 パネルの左上のモバイルアイコンをクリックすると、左側に表示さる画面は、プルダウンメニューでシミュレーションとなる対象デバイスを切り替えることができます。