はじめに
私は個人開発でWebアプリケーションを作成しました。しかし、そのアプリはPC全画面で見ることしか想定しておらず、横幅が小さくなるとデザインが崩れてしまいます。そこで、スマホでも使えるようにしようとレスポンシブデザインについて調べていると、どうやらモバイルファーストという考え方があるそうです。今日はモバイルファーストについて調べたことをまとめます。
モバイルファーストとは
調べたら明確な言葉の定義はなく内容もまちまちでしたので、多少私自身の解釈も入っているかもしれません。
モバイルファーストとは、Webサイトやネットサービスなどの開発・運営方針の一つで、スマホを含めた全てのデバイスに対してユーザーニーズを最適化するためにマルチデバイス対応のサイト構造、デザインにすることです。
モバイル端末は、PCと比べて以下のような特徴があります。
・画面が小さい
・タップやスワイプで操作する
この特徴を考慮せず、PC用の画面をそのままモバイル端末に表示すると、使いにくくなります。
例えば、PC向けの文字サイズをモバイル端末に圧縮して表示すると、文字が小さくで見辛くなります。また、PCではカーソルを合わせてクリックしていたボタンも、スマホで指でタップするとなると小さくて押しづらくなります。
このように、PCのデザインをモバイル端末に転用するとユーザビリティが悪くなります。
一方で、モバイル端末のレイアウトを先に考えておけば、それをPC用のデザインにするのはさほど難しくありません。したがって、「モバイルファースト」で考える必要があるようです。
私はPCに合わせたデザイン、サイト構造を考えて、その後スマホにも対応できたらいいな、という感じで考えてきました。しかし、モバイル端末での使用も考慮するなら、そちらを先に考えた方が良かったっぽいです。
TailwindCSSの場合
私はTailwindCSSを使用しているので、TailwindCSSにおけるレスポンシブデザインについて少し触れます。
TailwindCSSでは、クラス名にsmやmdなどのprefixをつけることで、特定の横幅「以上」の場合のデザインをつけることができます。つまり、まず横幅が小さい端末でのデザインをつけて、横幅が大きい端末に合わせたデザインにするときはprefixをつけます。
まさに、モバイル端末→PCの順で考えるのに適したものとなっています。
MFIとは
MFI（モバイルファーストインデックス）とは、モバイル端末におけるページが魅力的であるほど検索順位が有利になるGoogle検索アルゴリズムです。つまり、モバイルファーストを意識したサイト作成は検索エンジンの最適化(SEO)にもつながります。