ウェブサイトのレスポンシブデザインでは、モバイルファーストコーディングがクールでナウい、ってのが昨今のトレンドとなっています。
モバイルファーストコーディングとは、スマートフォン向けのコードをデフォルトにして、大画面用のレイアウトやデザインはメディアクエリを使って指定する、というコーディング手法のことです。
これが推奨される理由は、
- スマートフォンでの閲覧の方が多いのだからスマートフォン向けのコーディングを先にやるのは自然なことだ
- コードの量を減らすことができる。例えば大画面ファーストでfloatでレイアウトした場合、スマートフォン用のコードではfloat:none;の打ち消しコードが必要になるが、モバイルファーストなら打ち消しが不要。
の2点です*1。1番目は主観的な問題ですが、2番目は合理的ですね。特に大規模なサイトの場合、改行コードすらなくしてCSSのファイルサイズを減らそうってくらいシビアですから、無駄をなくす方法として取り入れないわけにはいかないでしょう。
で、問題は主要ページが10ページやそこらの小規模なウェブサイトの制作においてもこれが有効なのか？ってことです。私の主張は「もうモバイルファーストの時代は終わってないか？」ということで、その根拠を以下に述べます。
1 モバイルファーストは非常にやりにくい
私がモバイルファーストを試した時に直面した最初の問題がこれです。他のコーダーにも「やりにくい」という感想をもらったことがあります。とくに場数を踏んでいない人の場合、うまくいきません。
理由としては、「大画面向けのHTML構造の方が複雑であるから」が挙げられます。
モバイル用のデザインは、ほとんどの場合単純な縦並びになります。当然HTMLもシンプルになります。これを大画面用にアップグレードする際に、HTMLの構造にも修正が必要になることが多々あります。
大画面ファーストで組んだ場合でも、CSSを適用したときにHTMLの構造の手直しが必要になることは良くあります。しかし、モバイルファーストだと、大画面でのCSS適用後の確認が後になるため、この手直しの量が一気に増えます。
HTMLは入れ子構造にしなければならないため、修正の際に閉じタグの欠落など、問題が発生しやすくなり、作業効率の低下が避けられません。
2 コード量を減らす効果が現在は小さくなっている
先にモバイルファーストコーディングが推奨される理由の2番目に挙げたコード量を減らす効果ですが、これが言われていたのはCSS3、flexboxレイアウトが使えるようになる前の時代の話です。当時はレイアウトはfloatを使っていたため、この主張がかなり説得力がありました。
しかし、現在はfloatプロパティは本来の役割である「テキストの回り込み」にのみ使うようになっており、レイアウトにはdisplay:flex;を使うようになっています。
そして、flexboxレイアウトはデフォルトが大画面ファーストです。要素にdisplay:flex;のみを指定した場合、子要素はデフォルトで横並びになります。これを使うと、モバイルファーストコーディングでは打ち消しコードが必要になります。
3 表は特にモバイルファーストとの相性が悪い
これはflexと同じで、もともと大画面用がデフォルトの要素なのでモバイルファーストにすると逆にコード量が増えます。（これ当初から存在していた問題なんですが、モバイルファーストを布教していた人たちはこの点どう考えていたんでしょうね？）
列の数が多い表の場合、モバイル向けではth, td にdislplay:block;などを適用して表組を崩しますよね。モバイルファーストでこれをやってしまうと、大画面用のメディアクエリでdisplay:table-cell;を再指定しなければなりません。これではコード量を減らす目的を果たせません。
4 ユーザー数は別に理由にならない
閲覧する人がモバイル端末の方が多くなったからと言って、わざわざやりにくいコーディングを推奨する理由にはなりませんよね。
大事なのは効率（コーディングの効率とデータ量の効率の両方）であって、現在はモバイルファースト一辺倒が最適解とは言えないのなら、その方針は修正した方が良いと思います。
----
以上が、「モバイルファーストコーディングはもはや最良の方法ではない」という理由になります。gridレイアウトが使えるようになったら（つまりIE利用者がいなくなったら）またモバイルファーストもありになるかもしれませんが、直感的に作りやすいのはPCファーストでのコーディングなので、なかなか戻らないのではないかなあと思います。
で、現在の私のコーディングの方法なんですが、レイアウト回りはBootstrapをベースにして作った独自のCSSフレームワーク（ライブラリ？）を使っていて、これはモバイルファーストで組んでいます。レイアウトがfloat, flex両対応なので、モバイルファーストが有効に働きます。
一方、装飾周りのコーディングでは大画面ファーストで作っています。なんでもかんでもモバイルファーストで組むのは試してすぐに捨てました。
モバイルファーストが当然、ってな雰囲気がウェブ界隈にはありますが、金科玉条にすることなく、いい感じにコーディングしていく方が良いのではないかな、と思うのであります。
*1:他にもあるなら教えて
