モバイルファーストコーディングも大事という話
言わずもがなで大事なモバイルファーストインデックス
- もう今更いうまでもないのですが、Googleはモバイル表示の状態をベースにサイトの情報を吸い上げて（クロール）して、検索エンジンに登録（インデックス）していきます
- なので、モバイル表示時の動作を大切にしましょうねというのが、モバイルファーストインデックスという考え方になります
コーディングでも大事なモバイルファースト
- サイトの設計にモバイルファーストが大事なように、サイトのコーディングにもモバイルファーストを心がけるのが大切です
- 普段、レスポンシブなコーディングをするときにメディアクエリで指定するブレイクポイントは「max-width: 767px」と「min-width: 768px」どちらが多いでしょうか？
- 「max-width: 767px」を使うことが多いという方は、ややPCファーストのコーディングになっているかもしれません
- とかくパソコンで作業をしていると、PC表示を優先してスタイルを書いて、モバイル用のレイアウトを後から「max-width: 767px」で書くという順序になりがちです
モバイル表示の方がデザインが素直
- 表示領域の多いPC表示のサイトデザインは、複雑で手の込んだものになります。一方モバイル表示の方は、素直に要素を上から順に並べていくことが多いです
- PCファーストでコーディングをすると、「①PC用に複雑なスタイルを指定→②モバイル用に複雑なスタイルを解除しつつ、モバイル用のスタイルを指定」という流れになります
- 一方、モバイルファーストでコーディングをすると、「①モバイル用に簡易なスタイルを指定→②PC用に複雑なスタイルを指定」という流れになります
- 前者と後者を比べると、最終的なコード量、工数、スタイルシートの可読性など、多くのケースでモバイルファーストのコーディングをした方がいい結果につながることが多いはずです
- なにより、モバイルファーストインデックスのこの時代に、モバイル用の最適化をし忘れるということがなくなります
まとめ
- サイトの設計段階でモバイルファーストを意識するのと同じように、コーディングの段階でもモバイルファーストを意識すると、コードを早く、キレイに、（レスポンシブ対応を）漏れなく書くことができます
- 時代のトレンドに合わせて、コードのスタイルも、コーディングのスタイルもうまく切り替えていきたいものですね
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。