「モバイルファースト」という考え方についてまとめてみた

Advertisement

去年の終わり頃からアメリカで話題の「モバイルファースト」について、自分なりの考えをまとめてみた。

僕が考える「モバイルファースト」とは「サイト構築の起点をモバイル向けにする」という「レスポンシブ・ウェブ・デザイン(RWD)」を前提とした考え方で、そうすることで「自然とデスクトップ向けの制作にも良い効果が生まれる」ということ。それぞれの接続デバイスに最適化されたユーザ体験を提供する「レスポンシブ・ウェブ・デザイン」を採用した制作には、大きく分けると2つの進め方があります:

  1. デスクトップ向けの制作からはじめて、モバイル向けに最適化していく方法
  2. モバイル向けの制作からはじめて、デスクトップ向けに最適化していく方法

この方法のうち、モバイル向けの制作からはじめることを「モバイルファースト」と言っているようです。最近RWDで実際に制作をしてみているのですが、「モバイルファースト」は理にかなっていると実感しています。※ここでいうモバイルにはガラケーは含まれませんが…

ところで、ここでは便宜上「デスクトップ」と「モバイル」に分けていますが、それらの本来の意味合いは以下のとおりです:

  1. デスクトップ = 画面サイズ、メモリ、接続スピード、通信料金などの物理的な制限が少ないデバイス
  2. モバイル = それら物理的な制限がより多いデバイス

「モバイルファースト」の3つのポイント

「モバイルファースト」のポイントは以下の3つだと考えます。

  1. コンテキストを意識した制作
  2. よりフォーカスしたコンテンツ
  3. サイトの最適化

3つともモバイル、デスクトップに関係なく考慮されるべきポイントではあるのですが、「モバイルファースト」だと、より自然に、そして、より強くそれらを意識した制作ができるという考え方だと認識しています。

コンテキストを意識した制作

「コンテキスト」は一般的に「文脈」と訳されることが多いらしいですが、ちょっと意訳すると「利用シーン」といったところでしょうか?ウェブサイトを制作する際に、モバイルをはじめに考えることで「コンテキスト」を意識した制作が強いられる。

制作するサイトは、

  1. 誰に、
  2. どんなときに、
  3. どんな場所で、
  4. どのように

使われるのか。

モバイル向けの制作では、そういった「利用シーン」をより強く意識させられる。
本来、モバイルでもデスクトップでも、そうあるべきだとは思いますが、常時携帯するモバイル端末を考慮してサイト制作をすると、自然と利用シーンを想像し、それに合わせた制作ができる。

よりフォーカスしたコンテンツ

モバイル向けの制作では小さい画面、遅い接続スピード・CPUなど、物理的にデスクトップより制限の多い端末向けに設計するので、よりフォーカスした機能やコンテンツの実装が強いられる。デスクトップ向けのサイト制作でも考えられるべきことですが、一般的にモバイルだと物理的な制限がデスクトップより大きいために、よりフォーカスした選択をしなくてはならない。

「モバイルファースト」にすることで、ユーザのニーズにフォーカスしたコンテンツ・機能を提供できるというメリットが生まれる。

サイトの最適化

モバイル端末のインターネット接続の現状を考えると、モバイル向けの制作では接続スピードやデータ通信料は大いに考慮されるべきポイントの一つです。JavaScript、HTML、CSS、画像の最適化など、どれもデスクトップ向け制作でも考慮されるべきことですが、「モバイルファースト」で制作することで、そういった最適化をより自然に進められるメリットがある。

まとめ

上にあげた3つのポイントのすべてに当てはまるのですが、デスクトップ向けに実装されたさまざまな機能を、モバイル向けに削って行く、もしくは隠していくという作業では必ずしもモバイル向けには最適な実装ができない。逆に、よりフォーカスしたコンテンツや機能をモバイル向けにはじめ実装し、その後にデスクトップ向けに補完していったほうが、モバイルとデスクトップの両方の最適化がしやすい。

日本でもiPhoneだけでなくAndroid端末などのスマホが充実してきました。ここ数年のあいだには(もしくは数ヶ月?)デスクトップとモバイルの位置づけが同等、もしくはモバイルのほうが重要になることも大いに考えられます。

そんななか「モバイルファースト」という考え方は、現実的で理にかなっているように思いました。

最後に…

モバイル端末といっても携帯電話、タブレット、ネットブックなど、それぞれの端末で利用シーンが微妙に異なると想定されます。また、デスクトップといっても13インチのノートブックから27インチのデスクトップPCまで、サイズや特性が大きく異なります。モバイル vs デスクトップという大雑把なカテゴリ分けをするのではなく、それぞれの端末の特性やそれら端末にあった利用シーンを想定したウェブ制作が作る側には求められているのだと思います。

また、RWDやモバイルファーストについて読んでいると出てくる「モバイルからウェブサイトを見る際、アクセス情報などを探すことが多いと想定される」というのは、ちょっといい加減な憶測な気もします。調査してみないとわかりませんが、端末による「利用シーン」や「ウェブサイトの目的」には、意外と差異がないのでは?とも思っています。

About the author

Rriverのステッカーが貼られたMacBookの向こうにいる自分のMemojiの似顔絵

「明日のウェブ制作に役立つアイディア」をテーマにこのブログを書いています。アメリカの大学を卒業後、ボストン近郊のウェブ制作会社に勤務。帰国後、東京のウェブ制作会社に勤務した後、ウェブ担当者として日英バイリンガルのサイト運営に携わる。詳しくはこちら

ウェブ制作・ディレクション、ビデオを含むコンテンツ制作のお手伝い、執筆・翻訳のご依頼など、お気軽にご相談ください。いずれも日本語と英語で対応可能です。まずは、Mastodon @rriver@vivaldi.net Twitter @rriver 、またはFacebook までご連絡ください。

“「モバイルファースト」という考え方についてまとめてみた” への1件のコメント

  1. […] ▽「モバイルファースト」という考え方についてまとめてみた http://parashuto.com/rriver/development/mobile-first-responsive-web-design […]