実践して分かったモバイルファーストの本当の利点

原正樹

2013年4月24日

ここ数年でスマートフォンをはじめとしたモバイルデバイスの進化と普及が急速に進んでいます。近い将来、モバイルからのインターネット利用の割合がPCに追いつき、抜き去って行くだろうとも予想されています。今や、モバイル向けのウェブサイトを用意することは当たり前の時代になっています。

最近ソシオメディアで扱った案件で、PCとモバイルの両方で展開しているウェブサービスを改修する、というプロジェクトがありました。そのプロジェクトではまず先にモバイル向けサイトから着手し、そのデザインが固まった後にPC向けサイトをデザインしたのですが、この進め方がお客様とのやり取りや最終的なデザインの質に功を奏したので、プロジェクトを振り返って感じたことをまとめてみます。

これまではPCがメイン

よく使われる「モバイル対応」という言葉が示すように、これまでは既存のPCサイトがまず先にあって、それをいかにしてモバイル向けに変換するかが主なテーマとなっていました。

PCサイトをモバイル向けに変換する場合、もともとPC版にあった機能や情報を削っていくようなマイナスの活動と捉えられがちです。
このような視点の活動では、サイトの運営者の意識として「モバイルサイトも用意したけど、ほんとうに使ってもらいたいのはPCサイト」といった、モバイルに対して消極的なスタンスに陥りやすくなります。ユーザーとしてもこうしたモバイルサイトからベストな体験を得ることはできません。

ユーザーがウェブに接する機会としてモバイルが普通のものになった今、ユーザーはモバイルに最適化されたユーザーインターフェースを当然のものとして期待しています。もしかすると、ユーザーが目にする貴社のサイトはモバイル向けサイトだけかもしれません。こうした局面にあって、モバイルサイトはPCサイトありきの二次的な位置づけのままでよいのでしょうか？

これからはモバイルがメイン

ここでサイト運営者のかたにお勧めしたいのが、モバイルをメインに捉えてサイトやサービスをデザインする、いわゆる「モバイルファースト」の考え方です。

モバイルでの利用に最適化されたサイトは、ユーザーにとって次のような良い点があります。

絞り込まれた選択肢から、欲しいコンテンツ・機能に素早くたどりつける
平易なレイアウトや大きめのボタン、タップを基本とした単純な操作によって手軽に扱える
場合によっては、電話やカメラ機能、位置情報と連携した便利な機能を利用できる

しかしこれらは単にモバイル向けデザインの特徴であり、モバイルファーストの利点とは言えません。

ではモバイルファーストの利点とは何でしょうか。
実際のプロジェクトでモバイルファーストを実践して、以下のことが分かってきました。

モバイルファーストの利点

1. 組織内でサイトの目的について強く意識共有ができる

モバイル、特にスマートフォンのスクリーンは小さいので、そこに盛り込める画面構成要素の種類や量は限定されます。よほど小規模なサイトでない限り、要件として挙がった機能や情報のすべてを画面内に表示することはできません。必然的に、コンテンツや機能に優先順位をつけ、画面内の表示要素を絞り込むことになります。もちろん、PCサイトでも同様に画面要素の優先順位付けが求められますが、モバイルサイトではスクリーンが小さい分、よりシビアな取捨選択が必要になります。

サイトに盛り込むべきコンテンツ・機能について運営組織内の様々な立場から意見が集まるようなケースでも、このシビアな取捨選択の議論を経て、ぶれることのない明確な優先順位が組織の中で共有されることになるのです。分かりやすく魅力的なサイトを組み上げるうえで、この組織内の意識共有は大きな強みになります。

当然そこで共有された考え方は、その後PC向けサイトやその他のソリューションをデザインする上で重要な意味を持つでしょう。

2. 新しいウェブ技術を使用することでもっとクリエイティブになれる

少し実装寄りになりますが、モバイルデバイスの主流である iOS や Android のブラウザは、HTML5 や CSS3 といった新しいウェブ標準技術に対応しており、これらを積極的に使っていくことができます。

一例ですが、HTML5 を使うことでフォームの入力内容（メールアドレスや電話番号など）に応じて最適なキーボードを表示したり、入力のヒントを薄く表示したりするなどの親切な工夫を簡単に盛り込むことができます。また CSS3 を使えば、影のついたテキストや角丸のブロック、グラデーション、簡単なアニメーションをこれまでよりも格段に少ない工数で実現できます。

今なお多くのウェブ開発者を悩ませ続けているレガシーなブラウザへの対応も、モバイルサイトの開発では気に留める必要がありません。

PCにレガシーなブラウザが居座り続ける限り、モバイルはPCよりも自由で美しく革新的なUIが生まれる可能性を持っていると言えます。

IE6〜8 といったウェブ標準への準拠度が低い環境を考慮して本来的ではないハックや暫定コードの追加に労力をかけるよりも、洗練された新しい手法でクリエイティビティを発揮することに注力でき、目指すべきデザインの方向を明確にすることができます（とはいえブラウザ環境の違いによる不具合への対処が無くなるわけではありませんが）。

3. 公開後の改善サイクルを素早く回せるようになる

モバイル向けサイトではたいていの場合、シンプルなシングルカラムのレイアウトを採ります。また、前述の優先度付けによって画面要素が少なく抑えられているはずです。サイトが簡潔であることは、公開後の改善活動においてもプラスの効果があります。

画面要素が少ないことに加え、ユーザーが最終的な目的を達成するまでの過程が端的になっていますので（すべきですので）、ユーザー行動に関する仮説立てとその検証がPCサイトよりも比較的容易におこなえるでしょう。また、公開後でも画面要素の差し替えや配置位置の組み替えなど手を加えやすいので、改善サイクルをスピーディに回すことができます。

そしてそのような改善のスピード感やそこから分かってくるユーザーの反応傾向などによって、運営チームに「選択と集中」の文化が生まれ、組織力がアップしていきます。

この先の数年で、多くのサイトはモバイル向けデザインがメインで、PC向けはその拡張版といった位置づけになっていくと予想されます。
ですからすぐにでも、自社のビジネスにおけるモバイルサイトの位置付けを確認し、コンテンツ・機能の大胆な再定義をはじめる必要があると思います。
そしてモバイルファーストへの流れをうまく利用し、サービスの向上とチームの強化を実現しましょう。