2018年3月27日。ついにGoogleからモバイルファーストインデックス (MFI : Mobile First Indexing)へ移行するとの正式にアナウンスがありました。
モバイル ファースト インデックスを開始します (Google公式ブログ)
これまでのGoogle検索では、パソコン版のページの中身を見て順位づけが行われていました。しかしこれからはスマートフォンの向けのページを重視して順位付けが行われる形になります。
弊社サービス「あなたのマイスター」では現在大規模なリニューアルを行っており、このタイミングでモバイルファーストインデックス（MFI）の基準を、なるべくクリアしたものにしたいと考え、簡単な調査をしました。
参考元
デザインに関わる部分を抜き出す
弊社Webサービス「あなたのマイスター」はBest practicesでいうところの、Dynamic Servingにあたります。MFIではアクセシビリティやサイトスピードなど、いろいろ重要視される項目があるのですが、まずは純粋にデザインに必要な部分を抜粋しました。
- テキストサイズは16pxをベースに必要に応じてスケール
- タップターゲットの幅を48px以上にし余白を32pxとる
- PC版とSP版で出しているコンテンツの差異をなくす
- 目的地に行くまでのステップを減らす
- 選択肢を少なくする
- 画像の品質をあげる
こうしてみるといいサービスを作る上で大事なことが並んでいますね。画像の品質やコンテンツの差異・ステップの短縮はエンジニアと相談、タップターゲットはHuman Interface GuidelinesやMaterial Designなどと比較するとして、このなかでやや曖昧なテキストサイズの項目を深掘りします。
テキストサイズについての調査
前段でテキストサイズは16pxをベースにスケールとあるのですが、具体的にどのサイズで表示すればよいのかを明確にします。特に小文字を多用する欧文と比較すると、全角文字を多用する和文は見た目の凝縮感が大きく、見えやすさの違いがあるので、どのサイズの日本語が読みやすいとGoogleは判断しているのかの予測を立てます。
イベント発表で16pxという具体的なサイズが出てきているので、CSSの中身をクローラーがチェックしている可能性もあると考え単位も調査しました。
調査方法はいたってシンプル。SMX Westの発表スライドに出ていたサービス群のソースコード調査と、Googleの各日本語サービスのソースコード調査です。
SMX Westのスライドに使用されていたサービス
| URL | IKEA | Southwest air | Potterybarn |
|---|---|---|---|
| Image |  |
 |
 |
| 単位 | 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のサービス
| 検索トップ | 検索結果 |
|---|---|
 |
 |
| Googleショッピング | Googleショッピング詳細 |
|---|---|
 |
 |
- 単位は
px - 12px〜16pxがよく利用されている。最小は
11px。最大で19px - タップターゲットのマージンは上下
14px左右24px - font-familyは
RobotoHelveticaNeueArialsans-serif - line-heightはフォントサイズの
1.5倍程度
2016年11月からGoogleはモバイルファーストインデックスの取り組みをはじめているので、すでに実装済という仮定のもと、一旦Google日本語版を先生とすることにしました。
フォントの定義をこうしました
- ページ内のフォントの平均値を14px以上にしておく
- 最小フォントサイズを11px
- タイトルは16px以上
- テキストは14px
- 単位は自由(今回はremを使用)
こちらを踏まえつつ作ったデザインがこちらです。
| Before | After |
|---|---|
 |
 |
ロゴ上のリード文とヘッダーメニューの文字は8pxと小さめなので、ロゴタイプと同様に、文字ではなく図形としてSVG化するか、アイコンのみで理解できるようにしようと考えています。（現在はサービス利用ユーザーのペルソナを考慮して文字を併記しています）
正直なところ、デザインが検索結果に及ぼす影響は軽微なものかもしれません。が、そうとも言い切れない部分が今回のモバイルファーストインデックスにはありそうです。今後デザインをする際にご参考になれば幸いです。
追記(2018年12月14日)
無事、あなたのマイスターもモバイルファーストインデックスが有効になりました。10月くらいに有効になっていた模様です。よかった！
