CSS
Design
SEO
モバイルファーストインデックス
MFI

モバイルファーストインデックス(MFI)を踏まえたデザイン

2018年3月27日。ついにGoogleからモバイルファーストインデックス (MFI : Mobile First Indexing)へ移行するとの正式にアナウンスがありました。

モバイル ファースト インデックスを開始します (Google公式ブログ)

これまでのGoogle検索では、パソコン版のページの中身を見て順位づけが行われていました。しかしこれからはスマートフォンの向けのページを重視して順位付けが行われる形になります。

弊社サービス「あなたのマイスター」では現在大規模なリニューアルを行っており、このタイミングでモバイルファーストインデックス(MFI)の基準を、なるべくクリアしたものにしたいと考え、簡単な調査をしました。

参考元
- Best practices for mobile-first indexing
- 【チェックリスト】MFIに向けてやるべきこと:SMX West 2018レポート

デザインに関わる部分を抜き出す

弊社Webサービス「あなたのマイスター」はBest practicesでいうところの、Dynamic Servingにあたります。MFIではアクセシビリティやサイトスピードなど、いろいろ重要視される項目があるのですが、まずは純粋にデザインに必要な部分を抜粋しました。

  • テキストサイズは16pxをベースに必要に応じてスケール
  • タップターゲットの幅を48px以上にし余白を32pxとる
  • PC版とSP版で出しているコンテンツの差異をなくす
  • 目的地に行くまでのステップを減らす
  • 選択肢を少なくする
  • 画像の品質をあげる

こうしてみるといいサービスを作る上で大事なことが並んでいますね。画像の品質やコンテンツの差異・ステップの短縮はエンジニアと相談、タップターゲットはHuman Interface GuidelinesやMaterial Designなどと比較するとして、このなかでやや曖昧なテキストサイズの項目を深掘りします。

テキストサイズについての調査

前段でテキストサイズは16pxをベースにスケールとあるのですが、具体的にどのサイズで表示すればよいのかを明確にします。特に小文字を多用する欧文と比較すると、全角文字を多用する和文は見た目の凝縮感が大きく、見えやすさの違いがあるので、どのサイズの日本語が読みやすいとGoogleは判断しているのかの予測を立てます。

イベント発表で16pxという具体的なサイズが出てきているので、CSSの中身をクローラーがチェックしている可能性もあると考え単位も調査しました。

SMX Westのスライドに使用されていたサービス

URL IKEA Southwest air Potterybarn
Image 0001.png 0002.png 0003.png
単位 px rem(htmlに62.5%指定) vw
メニュー 12px 14px(1.4rem) 8px
タイトル 14px 17px(1.7rem) 15px(4.1vw)
テキスト 11px 13px(1.3rem) 11px(3vw)

Googleのサービス

検索トップ 検索結果
0004.png 0005.png
Googleショッピング Googleショッピング詳細
0006.png 0007.png
  • 単位はpx
  • 12px〜16pxがよく利用されている。最小は11px。最大で19px
  • タップターゲットのマージンは上下14px左右24px
  • font-familyはRoboto HelveticaNeue Arial sans-serif
  • line-heightはフォントサイズの1.5倍程度

2016年11月からGoogleはモバイルファーストインデックスの取り組みをはじめているので、すでに実装済という仮定のもと、Google日本語版を先生とすることにしました。

フォントの定義をこうしました

  • ページ内のフォントの平均値を14px以上にしておく
  • 最小フォントサイズを11px
  • タイトルは16px以上
  • テキストは14px
  • 単位は自由(今回はremを使用)

こちらを踏まえつつ作ったデザインがこちらです。

Before After
2-11 Detail-Floating-Menu Copy.png

ロゴ上のリード文とヘッダーメニューの文字は8pxと小さめなので、ロゴタイプと同様に、文字ではなく図形としてSVG化するか、アイコンのみで理解できるようにしようと考えています。(現在はユーザーのペルソナを考慮して文字を載せています)

正直なところ、デザインが検索結果に及ぼす影響は軽微なものかもしれません。が、そうとも言い切れない部分が今回のモバイルファーストインデックスにはありそうです。今後デザインをする際にご参考になれば幸いです。