このページの本文へ

レスポンシブWebデザインとは

2012年06月04日 11時00分更新

菊池 崇/Web Directions East

  • この記事をはてなブックマークに追加
本文印刷

【Follow up】
 レスポンシブWebデザインを支える「モバイルファースト」

 レスポンシブWebデザインに関連して知っておきたいのが、「モバイルファースト(Mobile First)」の考え方です。

fu-zu01-2.png
ルーク・ウロブルスキ氏

 モバイルファーストは、2009年ごろ、デジタルプロダクトデザイナーのルーク・ウロブルスキ(Luke Wroblewski)氏が提唱した考え方で、Webサイト設計に限らず、マーケティングやプロダクトの設計などを、モバイルを起点として始めるというコンセプトです。従来のように、PC向けのWebサイトやプロダクトから作り始めて、モバイル版を最後に考える「モバイルラスト」とは真逆の考え方と言えます。

 モバイルファーストの考え方の背景には、以下の3つの理由があると、ウロブルスキ氏は唱えています。

fu-zu02-2.png
ウロブルスキ氏の著書「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」の発起人。


この連載が本になりました!

本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。

レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック

定価:2,625円 (本体2,500円)/形態:B5変 (232ページ)
ISBN:978-4-04-886323-0

Web Professionalトップへ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

Webディレクター江口明日香が行く