about

モバイルファーストについて考えてみる

このご時世、色々なモノでホームページを見ることができるようになりました。デスクトップやノートPCで見るだけでなく、スマートフォンやタブレット等でもホームページを手軽に見ることが出来ます。
そのようなご時世なので、作る方も「モバイルファースト」と言う考え方でホームページを作る事が良いとされるようになってきたのであります。

はてさて、このモバイルファーストってどういうものなのでしょうか? この辺りをサクッと纏めていきたいと思います。

モバイルファーストって言うことはスマホが1番?

モバイルファーストと言う考え方は、ざっくりと言えば

「色々な機材で表示させる必要があるホームページは、表示させる基準をスマホに合わせ、そこから情報を表示させる媒体に合わせて拡張し、無駄やデザインの破綻が無いホームページを作りましょう」

と言う考え方です。
スマホのホームページを作ればOK!ってなわけでも、まず最初にスマホのホームページを作りましょうって言うわけでもないのでした。
(私もこの言葉を最初に聞いた時は、スマホのホームページをまず最初に作りましょうって言う話かと思ってました。IT用語って難しいですね。)

モバイルファーストで作業して良かった事

メディアクエリはmin-widthで行うと分かりやすくなる

昔はmax-widthでPC画面からスマホ画面へとレスポンシブしていくようなCSSを書いていたのですが、スマホが基準となるモバイルファーストですとmin-widthで値を設定する事になります。

例えば、横幅1000pxでPCのレイアウトにするCSSを書く場合

/* 小→大へとレスポンシブ */
@media screen and (min-width: 1000px) {}
/* 大→小へとレスポンシブ */
@media screen and (max-width: 1000px) {}

(max-width: 1000px)と書くと、1000px以下の横幅でCSSの変更を行います。
ただし、これだと1000pxでCSSが変更されてしまうので実際には
(max-width: 999px)と記載します。

(min-width: 1000px)と書けば、1000px以上の横幅でCSSの変更を行います。1000pxでcssが変わるのでこちらの書き方ですとこのままで良いです。

min-widthの方が実際の数字をそのまま書けば良いので、ちょっとだけ便利。

書き方がちょっと違うだけのように見えますが、実際には結構CSSの書き方が変わります。min-widthで書く場合は、レイアウトの変更に合わせてCSSが増えていく感じですが、max-widthから書く場合はレイアウトがシンプルになっていくので、設定していたものを削るような形になります。

リキッドレイアウトで考えやすい

リキッドレイアウトと言うのは、ブラウザの横幅に合わせてレイアウトが自動的に調整される様に作るレイアウトのことです。

レスポンシブデザインですと、メディアクエリで設定した横幅(ブレイクポイント)以外の部分でも、ある程度自動的に横幅が調整されるデザインにしておく必要があります。そこでリキッドレイアウトを取り入れることによって、どの横幅でも大丈夫なサイトが出来上がります。

モバイルファーストの考え方ですと、スッキリとしたレイアウトから進めていく事になるので、自動的にリキッドレイアウトで考えやすくなります。

さいごに

このような感じで、簡単にモバイルファーストについてまとめてみましたが、仕事内容によってはPCから作るべきだったりすることもあるかもしれませんし、作業方法の1つとして覚えておけば仕事の幅も広がるかななんて思ったりします。

ホームページをスマホ対応させたいな等とお悩みでしたら、お気軽にお問い合わせください。