Webデザイナー向け！モバイルファーストインデックスのデザインで気をつける6つのこと

Googleが昨年末発表した「モバイルファーストインデックス」を知っている人も多いと思います。

ご存知の通り、ウェブサイトはGoogleによって検索結果が順位付けされます。その順位を判定するアルゴリズムの新バージョンが、モバイル第一主義！なんです。モバイルユーザーがPCユーザーを上回っているので当然ですね。

いくら内容が充実した、見た目がいいデザインをしても、操作性が悪い＋表示スピードが遅い＋デスクトップとモバイルと同じurlでも全然内容が違う！なサイトだと、Googleは評価しない＝検索順位は上がらない＝サイトの訪問者数は増えない。ということは、そのビジネスが上手くいかない！ということに繋がります。今回は、そんなSEOのモバイルファーストインデックスに対応するウェブデザインをする上で知っておくべきことを、いくつかのポイントにまとめました。（※SEOの手法は数多くあり、Googleアルゴリズムは流動的でSEOに”絶対”は存在しないので、モバイルファーストインデックスに対応したWebデザインをしただけで検索順位が上がることは100％ではありません。）

1) レスポンシブであるべし

モバイルユーザーの割合が多いからといって、PCユーザーも、タブレットユーザーも存在するのです。モバイルだけでなく全てのデバイスに対応するため、同じソース、同じコンテンツを使った、全てのデバイスに対応するレスポンシブサイトであるべきです。すでにレスポンシブサイトを持っていれば問題ありません。しかし、すでにPCとモバイルで違うファイルを使って異なるページ・サイトを持っている場合、それぞれのページでそれぞれのデバイスに基準に沿って作られていることと、どちらも同じコンテンツを使用していることが必須になります。

2) アコーディオンやタブはOK

ウェブサイトで最も重要なのはコンテンツです。よって、そのページで一番重要なコンテンツを隠すことはできません。

例えば、ページのタイトルが<title>水彩画のはじめ方</title>だとして、そのページにアクセスした時に「油絵のはじめ方」のコンテンツだけ見えていて、「水彩画のはじめ方」のコンテンツがアコーディオンやタブ切り替えによって隠れているのはダメなわけです。ユーザーを迷わせるためです。

しかし、モバイルのスクリーンは小さい。PCと全く同じ内容でモバイルサイトを作ると、永遠とスクロールする長〜いサイトになるけど！はい、そうなんです。”全く一緒”ではダメなんですね。実は、Googleによりコンテンツは”モバイルの小さいスクリーンに最適に表示される”ことが推奨されています。

そう、むしろモバイルでは適切にhiddenコンテンツを使った方が評価される傾向にあるのです。

まとめると

・そのページ上で最重要なコンテンツ

＞アコーディオンやタブ切り替えで隠さない

（ページ閲覧時すぐに見えるよう明確に配置する）

・最重要ではないコンテンツ

＞アコーディオンやタブ切り替えで隠せる

実際、wikipediaはモバイルバージョンでアコーディオンを使用していますよ。

3) 重要なコンテンツはモバイルとPCで変えない

先にもあるよう、Googleによりコンテンツはモバイルのスクリーンに最適に表示されることが推奨されています。なくても差し支えないような内容はモバイルで非表示にすることも大丈夫でしょうが、必要なコンテンツはモバイルもPCも同じものを使う必要があります。

4) 多すぎるor重い画像を使わない

モバイルで特に重要なことに”スピード”があります。表示に時間のかかるモバイルサイトほどイライラするものはありません。ということで、表示速度の遅いサイトは評価されません。デザイン時から、なるべく少なく軽い画像、そしてCSSで表現が可能なデザインを意識する必要があります。

5) 指でタップしやすいデザイン

訪問したモバイルサイトのボタンが小さいため、押しづらくてイライラしたことはありませんか？モバイルデザインをする時、実機でボタンに指を置いてボタンの大きさを確かめていますか？ボタンの押しやすさ、入力フィールドの入力しやすさなどのユーザーが実際にアクションしなければいけない部分は、その動作だけで既にユーザーの負担になっているので、可能な限り使い勝手をよくしましょう。お問い合わせや購入ボタンなどのCTAはコンバージョンに最も大きく関わります。そのCTAが押しづらいためにユーザーがサイトを離脱してしまうなんて、、言語道断ですよね。ボタンはサイズだけでなく、他のボタンを誤って押してしまわないよう、ボタン周りに十分なスペースを確保しましょう。私個人としてはデザイン作業中、iPhone7, iPhone5, Android等スクリーンサイズが違うモバイルでチェックしながら進めます。 Photoshop CC、Sketchではモバイルにアプリをダウンロードすることで、デザイン作業中にライブビューでデザインを確認することができます。初めて使用した時、「そう！！これが欲しかったーーー！！」と叫びました。1pxの移動も瞬時にモバイルのデザインに反映された時は感動しました。

Photoshop CC "Device Preview"

1. "Adobe Preview"というアプリをダウンロード

2. アプリを起動 3. デザインファイルをPhotoshopで開く 4. "Device Preview"の"Check for Device"を選択（日本語バージョンはわかりません）

Sketch "Sketch Mirror"

1. "Sketch Mirror"というアプリをダウンロード

2. アプリを起動 3. デザインファイルをSketchで開く 4. "Mirror"を選択

可能であれば、コーディング後もサイト上で実際に操作しやすいかテストをしましょう。

6) ポップアップは廃止するべし

ユーザーはポップアップが大嫌いなんです。特にモバイルでは、鬱陶しいったらありません。ポップアップが開いた途端、ユーザーはそのまま離脱してしまいます。

あなたのモバイルサイトをテストしてみましょう！

モバイルフレンドリーテスト: URLを入力すると、そのサイトがモバイルフレンドリーかどうかGoogleが判定してくれます。こんな具合です

Googleによるモバイルファーストインデックスの発表後、「アルゴリズムの難しい話はいいから、それで、デザインでやっていいことと悪いことは何なの？」という疑問が私の中で生まれました。英語でも日本語でも探してもこれという記事が見当たらなかったので、自分なりにまとめたものを、せっかくなのでブログ記事にしてみました。