Drafts

@cm3 の草稿置場 / 少々Wikiっぽく使っているので中身は適宜追記修正されます。

モバイルファーストというバズワードについて

きっと、ブログを書くような文字の入力はそのうち音声認識に置き換わる、だから一般人にはキーボードは不要になる…

そういう予想は支持するが、モバイルファーストという言葉で指されるのは、大抵「だから、うちのソリューションでモバイルやりましょう」と持っていくための煽りが多くて正直馬鹿にしていた。

例えば、Webサイト設計で「モバイルファースト」はなぜ重要なのか?allWebクリエイター塾 菊池 崇 先生が解説 - schoo(スクー) WEB-campus では

  • バイルの方が市場が広い
  • バイルの画面が小さい分、本当に重要なことにフォーカスできる
  • バイルの機能が様々な新しいイノベーションの土台になる

とモバイルファーストのメリットが説明されている。

1つ目はわかる。2つ目はもともとZenの国日本がなんでYahooのトップ画面みたいなん好むねんみたいなデザインの問題の話であって、もし広い画面でも「本当に重要なことにフォーカス」できないならそれはデザインが悪い。3つ目はモバイルがもつセンサー機能を活用したウェブサイトが例に挙げられているが、そんなものはUXのデザインの時点で出てくる話であって、ウェブサイト設計の段階で出てくる話ではない。

…という具合に、全く学ぶところが見つからなかったモバイルファーストという概念だが、最近軽量な CSSフレームワークに乗り換えて開発することが多く、その Milligram | A minimalist CSS framework. になるほどな文言をみつけた。

The Mobile First is the design strategy that takes priority development for mobile devices like smartphones and tablets. It means all styles outside of a media queries apply to all devices, then larger screens are targeted for enhancement. This prevents small devices from having to parse tons of unused CSS.

「(前略)全メディアに共通するスタイルがまず適用されて、大きなスクリーンは拡張として対象にされる。小さいデバイスが使わない大量のCSSを解析するの無駄だろう」。

つまり、モバイルにもデスクトップにも対応しますって言ったときに、前者の方が非力なんだから後者の方が重くてよい。そうならばモバイルに最適化した設計をして、それをデスクトップに拡張する CSS を追加で書けという話になる。

skeleton-frameworkとかでもなんでリストの間こんなに幅が開いているんだろうと思ったけど、実際モバイルで操作すると、リストがリンクになってた場合、リストが詰まっていると指で押す場所が難しくなるのだ。デスクトップではもうすこし狭めに見せたいということなら、それを追加で書けばいいだろう。

これはまあウェブデザインだけじゃなくていろんな制度設計にも言えるけれど、弱くて人数の多い対象者を第一のモデルにしてデザインすることでデザインの想定と不一致があった場合に背負うユーザのコストの負荷を全体で最小化するというのは良いストラテジーで、それをウェブに適用したら「モバイルファースト」になるんだよね。

参考(これを書くにあたって読んだもの、というだけ):