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

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

[モバイル ファースト インデックスを開始します (Google公式ブログ)](https://webmaster-ja.googleblog.com/2018/03/rolling-out-mobile-first-indexing.html)

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

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

> 参考元
- [Best practices for mobile-first indexing](https://developers.google.com/search/mobile-sites/mobile-first-indexing?hl=ja#best-practices)
- [【チェックリスト】MFIに向けてやるべきこと：SMX West 2018レポート](http://www.seojapan.com/blog/seo-for-googles-mobile-first-index-mobile-friendly-world)

## デザインに関わる部分を抜き出す
弊社Webサービス「[あなたのマイスター](https://yourmystar.jp/)」は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](https://m.ikea.com/se/sv/) | [Southwest air](https://mobile.southwest.com/) | [Potterybarn](https://www.potterybarn.com/m/) |
|:------------:|:------------:|:------------:|:------------:|
|Image| <img width="203" alt="0001.png" src="https://qiita-image-store.s3.amazonaws.com/0/225591/69492aea-2836-2258-4b7e-3cf5123f1d46.png"> | <img width="203" alt="0002.png" src="https://qiita-image-store.s3.amazonaws.com/0/225591/bc6321f6-66c5-9e32-7201-9e777b0a4234.png"> | <img width="203" alt="0003.png" src="https://qiita-image-store.s3.amazonaws.com/0/225591/225aed65-b7ad-7e69-d036-017576961e0c.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](https://qiita-image-store.s3.amazonaws.com/0/225591/b55b6108-1a50-bb78-d3e6-0ffc6ce59d1d.png) | ![0005.png](https://qiita-image-store.s3.amazonaws.com/0/225591/fcc1f0e7-b9f1-7bdd-e689-ec5b9a76fbb4.png) |


| Googleショッピング | Googleショッピング詳細|
|:------------:|:------------:|
| ![0006.png](https://qiita-image-store.s3.amazonaws.com/0/225591/6f532963-35cd-28e1-e5e3-9361889a7c48.png) | ![0007.png](https://qiita-image-store.s3.amazonaws.com/0/225591/0610b504-a6d7-bbe0-872e-7fc0336a706d.png)  |


- 単位は`px`
- 12px〜16pxがよく利用されている。最小は`11px`。最大で`19px`
- タップターゲットのマージンは上下`14px`左右`24px`
- font-familyは`Roboto` `HelveticaNeue` `Arial` `sans-serif`
- line-heightはフォントサイズの`1.5倍`程度

2016年11月から[Googleはモバイルファーストインデックスの取り組みをはじめている](https://webmaster-ja.googleblog.com/2016/11/mobile-first-indexing.html)ので、すでに実装済という仮定のもと、一旦Google日本語版を先生とすることにしました。


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

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

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

| Before | After |
|:------------:|:------------:|
| ![2-11](https://user-images.githubusercontent.com/36430054/38300723-8b96e8b8-3838-11e8-8b40-fabd939db67a.png) | ![Detail-Floating-Menu Copy.png](https://qiita-image-store.s3.amazonaws.com/0/225591/a6732c23-6933-be2a-789b-d28dda91872b.png) |

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

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


## 追記(2018年12月14日)
無事、あなたのマイスターもモバイルファーストインデックスが有効になりました。10月くらいに有効になっていた模様です。よかった！
![mfi.png](https://qiita-image-store.s3.amazonaws.com/0/225591/5f78a0b3-e2ba-d9de-c881-ed820fe443a5.png)