モバイルファースト

何かあったらすぐスマホで調べるのが当たり前。

たくさんの情報から速く簡単にアクセスできる世の中では

スマホで見られることを前提に制作しなければいけません。

モバイルファーストとメリットについてまとめています。

モバイルファーストとは

スマホなどのモバイル端末で表示されることを想定し、最初にモバイル用の記述や装飾を行い

あとからデスクトップ用の適用をさせていくことをモバイルファーストといいます。

画面幅の小さいモバイル端末用の設定から、画面の大きいモニターで見られることまで

想定したwebサイトを制作しましょう。

モバイルファーストにする理由

現在のスマホ普及率は98％を超え、一人一台スマホをもっているのが当たり前になっています。

過去にPCから見ていたサイトでも、スマホで見ることは珍しくありません。

モバイル用に制作されていないと、文字が大きすぎたり不自然な余白ができて

見づらいサイトになってしまい、離脱の原因となってしまいます。

そのため、スマホで見られることが一番多いことを想定してページを作っていく必要があります。

メリット

モバイルファーストで制作することのメリットは「表示が速くなること」です。

速いレスポンスに慣れているユーザーは、待たずに離脱して他のコンテンツへ移動します。

読み込みが遅いサイトだと、すぐに他のページを見に行きますよね？

もちろん速さだけではなくページを見やすくすることも大切です。

魅力的なページを速く表示されることでPVを上げることにつながります。

レスポンシブwebデザイン

画面幅によって見え方を変えるデザインをレスポンシブwebデザインといいます。

モバイル用の記述ができたら、メディアクエリを使用して見た目を変更していきます。

@media(min-width: 800px)　：最小800pxの際に適用される
@media(max-width: 800px) ：最大800pxの際に適用される

モバイルファーストでメディアクエリを使用する場合はmin-widthの方を使用します。

最小で800px幅の時、ということは800px以上の幅の時に適用されることになるので、

コードの意味を間違えない様にしましょう。

単位

CSSで幅や高さなどを指定する際は単位を指定する必要があります。

相対単位：ブラウザのサイズや他の要素によってサイズが相対的に変わります。%やvwなど。
絶対単位：他要素に影響されずに指定サイズがそのまま表示されます。pxなど。

レスポンシブwebデザインではデバイスの種類や画面幅で見え方が変わるため、

相対単位で記述するとサイズが柔軟に変化して使用しやすいです。

まとめ

モバイルファーストのメリットやレスポンシブwebデザインについてまとめました。

少し前まではPCで見ていたコンテンツも、今はスマホで見るのが当たり前です。

遅い、見づらいサイトは見られることなく離脱されてしまうので、

どんな環境からアクセスされても柔軟に変化して見やすい構成を作りましょう。