【Follow up】
レスポンシブWebデザインを支える「モバイルファースト」
レスポンシブWebデザインに関連して知っておきたいのが、「モバイルファースト（Mobile First）」の考え方です。
ルーク・ウロブルスキ氏
モバイルファーストは、2009年ごろ、デジタルプロダクトデザイナーのルーク・ウロブルスキ（Luke Wroblewski）氏が提唱した考え方で、Webサイト設計に限らず、マーケティングやプロダクトの設計などを、モバイルを起点として始めるというコンセプトです。従来のように、PC向けのWebサイトやプロダクトから作り始めて、モバイル版を最後に考える「モバイルラスト」とは真逆の考え方と言えます。
モバイルファーストの考え方の背景には、以下の3つの理由があると、ウロブルスキ氏は唱えています。
ウロブルスキ氏の著書「Mobile First」(A List Apart)
- GROWTH=OPPORTUNITY 「成長」＝機会
- CONSTRAINS=FOCUS 「制約」＝集中
- CAPABILITIES=INNOVATION 「機能」＝能力
- 1.GROWTH=OPPOTUNITY 「成長」＝機会
- iPhoneの世界的なヒットやAndroid端末の普及によって、スマートフォンからのWebアクセスが急増しています。たとえば、Googleマップの利用者は全世界で20億人を超えていますが、そのうちの40％がスマートフォンなどのモバイル端末からのアクセスです。
また、2015年にはPCの利用者をモバイル端末が超えるという予想もあり、モバイル端末の市場自体、今でも大きく成長しています。そこには、モバイル端末の販売のみならず関連商品を販売するなどのあらゆる「機会」が生まれるのです。 - 2.CONSTRAINS=FOCUS 「制約」＝集中
- スマートフォンに代表されるモバイル端末は、PCに比べてスクリーンサイズが限られています。ユーザーが1画面から得られる情報は必然的に少なくなるため、ユーザーが本当に必要としている情報を表示する必要があります。そのため、コンテンツホルダーは何を表示するのかを熟考する必要があり、結果として無駄なコンテンツは削ぎ落とされることになります。
- 3.CAPABILITIES=INNOVATION 「機能」＝能力
- 「ケイパビリティ（Capability）」とは、モバイル端末の機能を利用することです。たとえば、スマートフォンにはモーションセンサーがあり、端末の傾きや移動時の加速度によって表示や動作を変えられます。こうした機能はモバイル端末特有のもので、PCにはありません。
そのほかにも、スマートフォンならではの機能として以下のようなものがあります。
| アプリケーションキャッシュ |
| CSS3&Canvasパフォーマンス最適化 |
| マルチタッチ |
| 位置情報 |
| 加速度センサー |
| オリエンテーション |
| 音声出力／音声入力 |
| ビデオカメラ デバイスから出力 |
| プッシュ（リアルタイム） |
| デバイス近接 |
| 自動調光機能 |
| RFIDリーダー |
| 触覚（ハプティック） |
| バイオメトリクス（網膜・指紋） |
モバイルファーストは、レスポンシブWebデザインとどのように関わるのでしょうか。もっともよい例は、CONSTRAINS=FOCUSです。狭いモバイル端末の画面に表示できるコンテンツは限られているので、モバイルファーストの考え方がなければ、PC向けのWebサイトと同じようにあれもこれもとなんでも詰め込んでしまうかもしれません。結果として、重くて見づらいモバイルWebサイトができあがってしまうでしょう。
モバイルファーストの考え方をコンテンツホルダーもサイト制作者も共通して持っていれば、コンテンツが吟味され、軽量で見やすいモバイルWebサイトをユーザーに提供できるはずです。
著者：菊池 崇（きくち・たかし）
Web Directions East LLC代表。allWebクリエイター塾講師。米国にてマーケティングを専攻修了。貿易会社を経て、allWebにてXHTML+CSS基礎講座、XHTML+CSS中級講座、XHTML+CSS上級講座、microformats講座などの講師。オーストラリア、米国、カナダなどで開催されている世界的に有名なカンファレンス「Web Directions」の日本版である「Web Directions East」の発起人。
