最近「モバイルファースト」という言葉を聞きますか？ これは６、７年前に流行った言葉ですが、モバイルファーストという言葉は新しく生まれ変わり、一周して再び使われるようになりました。デザイントレンドは、モバイルファーストからレスポンシブWebデザインへ移り変わり、そしてまたモバイルファーストへと戻ってきました。しかし、この変遷はいかがなものでしょうか。
モバイルテクノロジーは計り知れないほどの変化を遂げたのにも関わらず、「モバイルファースト」に戻ってくるのでしょうか。むしろ、今その単語を流行語として耳にすると、モバイルデザインにおける新しい段階の呼び方として正しくないように感じます。モバイルファーストよりもユーザーファーストデザインのほうがより良い呼び方でしょう。
ここでは、モバイルデザインの理論がどのように発展してきたかを紐解いていき、その時代ごとの状況を考察しつつ、ユーザーファーストデザインがどこへ向かっていくのか考えていきましょう。
モバイルデザイン理論の略歴
モバイルファーストデザイン
スマートフォンが普及し、必要不可欠な存在となっている現代では、たった10年前にはスマートフォンがとても斬新な存在であったことを忘れがちです。当時は小さなスクリーンのフィーチャーフォンが一般的で、ユーザーはモバイル端末に対して、アクセスの速さや自由さを期待していませんでした。ダイヤルアップ接続を覚えていますか？ 2007年当時のモバイル環境では、Steve Jobs氏でさえも光る平らな物体（初代iPhone）を指して「魔法のような革命的な製品だ」と、興奮して言ったほどでした。
2009年までに、スマートフォンはやっと「真新しい」段階を抜け出しましたが、フィーチャーフォンの影を薄くするほどではありませんでした。その頃、Luke Wroblewski氏がモバイルファーストのデザインについての話をしました。
元々Luke氏は、小さなスクリーンでも利用できて、なおかつ大きいスクリーンではより詳細な要素を組み込んだデザインをするべきだと唱えていました。このコンセプトは単純に聞こえますが、革命的なものでした。Luke氏は、デザイナーや開発者と同様に今ではユーザーも大きさの異なるさまざまなスクリーンサイズのデバイスを利用できるようになったことを提唱したのです。では、どのようにしてポケットサイズのスクリーンからデスクトップまでのあらゆる大きさのスクリーンにコンテンツを適応させればよかったのでしょうか？
時間が経つにつれて、このスクリーンサイズ問題はより顕著になっていきました。2013年４月、スマートフォンに転機が訪れます。スマートフォンの売上高が最高値をたたき出し、フィーチャーフォンの売上が追いつく見込みは完全に絶たれたのです。
経済的にも興味深い出来事ですが、普通のモバイルユーザーにとっても革命的なことでした。インターネットは突如として、さまざまなスクリーンサイズのデバイスからアクセス可能になりました。Luke氏が2009年に主張したことが現実になったのです。Webサイトのオーナーやマーケティング担当者、代理店などの人々は、さまざまなスクリーンサイズのデバイスを使って自分たちのWebサイトにアクセスする現象を目の当たりにします。そして、規定値となっていたデザインのサイズが崩れ、小さなスクリーンでは利用できないことを知りました。Luke氏が推奨した、モバイルファーストデザインによるWebサイト作成の手法が、軌道に乗り始めたのです。
Neil Hughesからの画像
レスポンシブデザイン
デザイナーと開発者は、どのようにして「さまざまなスクリーンサイズに適応する１つのWebサイト」に挑んだのでしょうか？
１つの選択肢は、モバイルオンリーのサイトを作成することでした。当時よく見られた「m.website.com」（サブドメインをモバイルのmにするなど）のようなモバイル用のサイトです。この方法は、デスクトップからモバイルへと移ったユーザーに対してまったく異なる体験をもたらした一方で、モバイルでもサイトを見ることができるというメリットもありました。しかしサイト管理は悪夢のようでした。想像してみてください、幅広いスクリーンサイズに対応したWebサイトを作成・公開し、２つの完全に異なるバージョンのサイトを管理運営しなくてはならないのです。
ほどなくして、モバイルだけのサイトは信頼性を失い、デスクトップ時代に見られたようなアップデートはほとんど行われなくなりました。またWebサイトの開発チームは、コーディングの作業に日々追われただけでなく、同一サイトを複数のバージョンで設計しなくてはなりませんでした。つまり、長続きできる方法ではなかったのです。
2010年3月、Ethan Marcotte氏は新しい方法論を紹介しました。それがレスポンシブデザインです（コンセプトは2007年以来注目され続けていましたが）。レスポンシブWebデザインは、デスクトップファーストに基づいています。つまり、レスポンシブWebデザインはデスクトップ向けのWebページにある要素を、モバイルビューでもきれいに見えるように並び替えるというものでした。開発者は、スクリーンサイズが変わるブレークポイントを設定して、それぞれの要素がレスポンシブデザインのどこに配置されるかを設定するだけでした。ポケットサイズのモバイル端末でも、「デスクトップサイトに移動する」必要がなくなりました。
Gif by Karol Podleśny
これは素晴らしい解決策でした。たった１つのコードを基本にサイト管理が行えて、どのデバイスを使っても同じ体験をユーザーに提供することができます。しかしモバイルファーストのデザインと同じように、レスポンシブWebデザインにも欠点がありました。
それは、デスクトップ表示で重要なコンテンツを、モバイルのスクリーンでどう表示するか？ ということです。コンテンツ戦略の成長を見てきたように、モバイルサイトは取り扱いづらいです。ユーザーは関連する情報を見つけるために、延々とスクロールをしなければなりません。デスクトップのWebサイト全体を小さなスクリーンサイズで表示できるように要素のサイズを変えることは、コンテンツ量が豊富なサイトにとっては適切な解決策ではなかったのです。
ユーザーファーストのデザイン
2015年、GoogleはレスポンシブWebデザインを行う開発者たちにとって転機が訪れたことを発表しました。デスクトップよりもモバイルからのサイトへのアクセス数が上回ったのです。大手検索企業は、良いモバイル体験だと検索結果の上位に表示されやすいアルゴリズムにするための微調整を始め、その結果デスクトップやノートパソコンからのトラフィックよりもモバイルのトラフィックが上回ったのです。さらに2016年、Googleはユーザーのために、モバイル体験を作るための25項目のリストを提供しました。
編注：元の記事には2016年とありますが、「モバイル体験を作るための25項目のリスト」は2014年に公開されているものです。
この発表以来、デザインチームはモバイルファーストデザインへと回帰しています。しかし、何か重要なポイントを見逃しているように感じます。それは、Googleは単にモバイルファーストを推奨しているのではないということです。たしかにGoogleは検索インデックスにおいてモバイルファーストをより評価するように変更しましたが、それはユーザーニーズに応じた体験を作り出すという視点から行われています。これは新しい考え方、ユーザーファーストです。
コンテキスト重視への転換
モバイルフレンドリーのサイトは、小さなスクリーンでも表現できるように、ただWebサイトを細かく分解したものではありません。ユーザーファーストには、思考の転換が求められます。
ユーザーファーストとは、ユーザーがサイトを利用する状況を考慮し、使用するデバイスやプラットフォームによって生まれるニーズを、どのように満たすかを考えることから始める必要があります。基本的にデザイナーや開発者は、ユーザーの利用状況に関する手がかりを可能な限り入手して、ユーザーが必要なときに必要なものを提供しなければなりません。
ユーザーファーストデザインの原動力となるのは、マイクロモーメントと呼ばれるものです（Googleはこれについて言及し続けています）。ユーザーはさまざまな目的のためにスマートフォンを使っており、モバイル向け検索はスポット情報などを素早く提供するのに適したものであるという考えです。
たとえば、これはユーザーが歯医者の住所や電話番号を知りたいと思ったときにすぐに情報を提供することなどが挙げられます。マイクロモーメントは、ユーザーの意図が重要です。マイクロモーメントを活用すると、ユーザーは素早く情報を得られて、ユーザーは素早く情報を得られ、購入、学習、閲覧、表示、検索ができるようになります。このインタラクションにおいて、ユーザーはだらだらとFacebookを閲覧したりゲームをしたりしているのではなく、何らかの目的を達成しようとしています。ユーザーは使いやすさだけでなく、素早くて正確な情報を求めています。Apple Mapsがはじめて配信されたときの大失態を覚えているでしょうか。あれはマイクロモーメントの成功例とはとても言い難いものでした。
使い勝手の前では、ブランドへの忠誠心は関係ないのかもしれません（Google MapsやWazeを好んで利用しているiPhoneユーザーもたくさんいます）。モバイルユーザーは、あなたがその製品やテーマに関するオーソリティであるかどうかを重要視しません。あなたのサイトがモバイル検索で上位に表示されていなければ、それは価値がないのです。ユーザーの問題に最初に回答するか、あるいはニーズを満たすことによってほかのサイトより優位に立つことができます。Googleはユーザーのニーズにもっとも速く応えるサイトを優先して表示しています。
ユーザーファーストを実践に移す
では、チームはどのようにしてユーザーファーストデザインを実践するのでしょうか？ 以下に事例を紹介します。
あなたはレストランのオーナーで、Webサイトを作成しています。モバイルデバイスでサイトを閲覧する際、まずはどのような情報が一通り必要でしょうか？ ユーザーは車の中にいて、レストランに行く途中だと考えられます。おそらく、営業時間や住所、電話番号が必要でしょう（モバイルフォンであれば、電話番号表示オプションも必要でしょう）。
タブレットだとスペースが大きく、調べる時間ももっとあるかもしれません。お店の雰囲気やメニュー、予約機能、詳細事項も記載しましょう。
デスクトップでは、情報を載せるためのスペースが十分にあります。画像やレストランの沿革、レストランで最近行われたイベントなどを写真と一緒にブログにして記載しましょう。また地元の業者と一緒に開発した季節のメニューを掲載したり、ケータリングのオプションやパーティールームの詳細などの項目も掲載できるでしょう。
私は、デスクトップサイトよりもモバイルのほうがユーザー体験が低下するということを言っているのではありません。ユーザーがいる場所や状況に応じた、ある特定のニーズに合わせて作成する必要があるのです。モバイルでも、ドロップダウンメニューでケータリングオプションをぜひ掲載してください。ただしモバイルでは、時間が重要な要素です。ユーザーが知りたいことを探すために、時間がかからないようにしてください。
ユーザーを知る
これらすべての流れとモバイルファーストの話が、Web開発の中心的な信念、つまりユーザーを知ることに回帰します。アリストテレスが弁論術の授業で教えたように、サイトの閲覧者がWebサイトの表示方法に影響しています。
Google Analyticsでは、サイト訪問ユーザーのデバイスの種類やOS、ランディングページまで、すべてのことを見られます。これらの情報は、ユーザーを知るために価値のある情報の痕跡を提供してくれます。そして、この痕跡を明らかにして、ユーザーがより素早く知りたい情報たどりつけるようにして、目標をより簡単に達成するための手助けを行うことが我々の仕事です。
最近の良い事例として、ヘルスケア産業があります。Marli Mesibov氏とJason Levin氏は、ヘルスケア産業ではスマートフォンユーザーの50％がヘルスケアアプリをダウンロードしていると説明しています。しかしこれは、残り50％のユーザーはヘルスケアアプリをダウンロードしていないことを意味します。では、残り半分のデスクトップやタブレットなどのブラウザからヘルスケア情報へアクセスすることを好む人たちのために、どのようなデザインをするべきでしょうか？ このような人たちに対しては、モバイルファーストの話はまったく関係なくなります。Marli氏が勧めるジャーニードリブン・デザインとは、私がユーザーファーストデザインと呼んでいるものと非常に似ています。
ここから向かうべきところとは
デザインやテクノロジーは、つねに過去に生まれたものから学び、そして再び生まれ変わるでしょう。モバイルファーストとレスポンシブWebデザインとは相反するものではなく、むしろ変化の過程における段階なのです。Googleはこれを正しく実践していると私は思います。ユーザーにとって可能な限り最善の体験を提供するという意図のもとで、モバイルに重点を置いているのです。ユーザーは依然として、サイト作成を行う上で中心的で重要な存在であり、つねにそうであるべきでしょう。
ユーザーを調査しましょう。ユーザーのニーズや要望、パターン、妨げとなるものを知ることが成功へつながります。そしてチームの能力を査定して、管理が可能なWebサイトを作成しましょう。大事なのはWebデザインの理論ではなく、ユーザーを中心に考えた施策です。サイトの読み込み時間からメニューオプション、インタラクティブ要素まで、サイトのあらゆることはユーザーに依存しています。
テクノロジーではなく、体験を作り出しましょう。ユーザーが必要とするときにもっとも良い体験ができて、ユーザーが答えを素早く得ることができる限り、間違った答えなどないのです。
