モバイルデバイスを利用する人の増加に伴い、企業もモバイルサイトのエクスペリエンス向上にかつてないほど力を入れています。
また、Googleが2015年4月と2016年3月に実施した検索アルゴリズムの更新により、検索順位においてもモバイルフレンドリーなウェブサイトが優先されるようになりました。すでに1年以上前から、デスクトップからの検索クエリ数よりスマートフォンからの検索クエリ数が多くなっている状況を考えれば、当然の流れと言えます。
今後もこの流れは変わらず、Googleが設定する「モバイルフレンドリー」の基準（読み込み速度を含む）はますます高くなっていくはずです。それが検索アルゴリズムにも反映されていくでしょう。ですから、まだモバイルエクスペリエンスの向上に注力していない企業は、今すぐ優先課題として取りかかる必要があります。何もせずにいれば、検索順位が下がることは避けられません。
そこで今回は、モバイル検索クエリ数の増加とGoogleのアルゴリズム変更を受け、モバイルウェブサイトのデザインを変更する際に参考となるような、海外の素晴らしいサイトを18サイトご紹介します（自社サイトのモバイルフレンドリー度をテストするには、Googleの「モバイル フレンドリー テスト」をご利用ください)。
Shutterflyは、ユーザーがフォトブックやパーソナライズしたカード、文具等を作成することのできるオンラインサービスです。多くの人がスマートフォンで写真を撮ったり写真データにアクセスしたりするようになった今日、同社は快適なモバイルエクスペリエンスがカスタマーにとってどれだけ重要かを察知し、的確に対応しています。
Shutterflyのモバイルサイトでは、2つの重要な目的を達成しています。
同社のモバイルサイトを開くと、大きなボタンで表示されたメニュー項目が画面下半分に表示され、ユーザーはすぐに興味のある項目を選択して詳細を知ることができるようになっています。
いずれかの項目をクリックすると、Shutterflyでできることが大きな写真画像で紹介され、ユーザーはその内容を簡単にブラウジングすることができます。
お気に入りの地図や道案内アプリは人によって異なるでしょうが、私のお気に入りはGoogleマップです。徒歩、自動車、自転車、公共交通機関、どの手段で移動する場合でも使っています。Googleマップのモバイルサイトの特徴は、同社のモバイルアプリとほとんど区別がつかないという点です。
以下のスクリーンショットはGoogleマップのモバイルサイトのものです。アプリをお使いの方なら、アプリと瓜二つなのがお分かりいただけるでしょう。見た目が同じだけでなく、スピードや機能もアプリと変わりません。
Typeformはバルセロナを拠点とするテック企業です。「フォームをもっと快適に」というシンプルなミッションを掲げ、多岐に渡るオンラインフォームを提供しています。同社のデスクトップウェブサイトは非常に美しくデザインされており、大きなフォントで表示された簡潔なコピーに加え、高解像度の動画、関連性の高いアニメーションなど、複雑なデザイン要素が組み合わされています。
しかし、こうした複雑なデザイン要素は、モバイルデバイスではページの読み込み速度に大きく影響したり、さまざまな問題の原因となったりします。同社はこの点をしっかり認識し、モバイルサイトでは多くの要素を取り除いて、すっきりと快適なモバイルエクスペリエンスを提供しています。その結果、モバイルサイトはデスクトップサイトよりずっとシンプルになっていますが、デザインの美しさは変わりません。
メニューボタンのサイズに注目してください。モバイル画面を指でタップするのに十分な大きさです。
Etsyはビンテージアイテムやハンドメイドアイテムを売買できるeコマースサイトです。Etsyのサイトを訪れる人の大多数は、特定のアイテムを探しているか、興味のあるカテゴリーでアイテムをブラウジングしたいかのどちらかです。
そして同社のモバイルサイトは開いた瞬間からそのどちらのニーズにも完璧に対応しています。サイトを開くと、特定のアイテム、ショップ、カテゴリを探せるように、検索バーとメニューオプションが最初に表示されています。
そしてそのすぐ下には、Etsyで購入可能な「話題のアイテム」のサムネイル画像が表示されています。ユーザーはこうしたアイテムをタイル形式でブラウジングすることが可能で、各アイテムの画像は指でタップするのに十分なサイズになっています。
次に紹介するのは、UXデザイナー、ライター、スピーカーであるAdrian Zumbrunnen氏の個人サイトです。彼のサイトを訪れてみると、とにかくユニークなのに気付かれるはずです。なんと会話形式のサイトになっているのです。
見た目はまるでスマートフォンでテキストメッセージをやりとりする画面のようです。相手の入力中に表示される「…」まで同じです。やり取りを進めるごとに、ユーザーには2つの返答オプションが表示されます。まるで選択ルートがたくさんあるRPGゲームのようでもあります。
また彼のデスクトップサイトとモバイルサイトのエクスペリエンスにはあまり違いがなく、デスクトップサイトも主にモバイルデバイスを意識して作られているように感じます。今後はこうした方向性のサイトが増えていくことが予想されます。
会話形式のやり取りをしたくない人は、スクロールダウンすれば、彼に関する詳細が確認できます。
「Elf on the Shelf」は、同名の絵本から生まれた比較的新しいクリスマスの習慣です。馴染みのない方のためにご説明しますと、絵本の内容は「サンタクロースから世界中の家々に派遣された妖精たちが、子どもたちが良い子にしているかを観察してサンタクロースに報告している」というものです。
親たちは絵本と一緒に妖精の人形を購入し、家の中で子どもが気付くような場所にこっそりと置いておきます。そしてクリスマスまで毎晩、子どもたちが眠っている間に人形を別の場所に動かして、妖精が本物であり、子どもたちを観察しているという演出をするのです。
Elf on the Selfのモバイルサイトを開くと、購入可能なアイテムが多数あることが分かります。しかしユーザーはテキストベースの長いリストをスクロールする必要はなく、左から右へスワイプすることで簡単に全オプションを確認することができます。サイトで商品をブラウジングしたい訪問者にとって理想的なデザインです。
BuzzFeedはビジュアルコンテンツと人気クイズで知られるニュースサイトで、私も通勤時間の娯楽の1つとして楽しんでいるサイトです。
私が通勤時に何を使ってBuzzFeedをチェックしていると思いますか？ そう、もちろんスマートフォンです。同社は多くの訪問者がモバイルからアクセスしていることを認識しており、モバイルユーザーにスムーズなエクスペリエンスを提供することに心を砕いています。
BuzzFeedのモバイルサイトを開くと、最初に目につくのはシンプルなタイル形式で表示された人気記事の数々です。各タイルには大きめの画像が使用され、指でタップしやすいようになっています。
特定の記事カテゴリーに関心のあるユーザーには、画面左上にメニューが用意されており、クリックすると全カテゴリーが一覧表示されるようになっています。
Evernoteを使うと、ノート、画像、ウェブ記事などを保存できるだけでなく、保存したコンテンツに別のデバイスからアクセスすることもできます。この性質上、ほとんどのユーザーがコンピューター、スマートフォン、タブレットなど複数のデバイスからEvernoteアプリをダウンロードしたり、Evernoteサイトにアクセスしたりするため、当然ながら快適なモバイルエクスペリエンスを提供することは同社にとって非常に重要となります。
デスクトップコンピューターでEvernoteのホームページを開いてみると、デザインが非常にクリーンであることに気付くはずです。バリューステートメントは簡潔で要を得ており、画面構成には画像を使用していますが、ごちゃごちゃせず整然としています。モバイルサイトを見てみるとまったく同じデザインとスタイルが適用されているのが分かります。モバイルサイトもクリーンかつシンプルで、アプリの価値を一切損なっていません。
さらに、CTAボタンも十分な大きさで、モバイルユーザーに最適化されています。
Huffington Postは政治から時事問題、エンターテインメント、テクノロジーにいたるまで幅広い分野を扱うニュースサイトです。同社のモバイルサイトの特徴は、モバイルユーザー向けにヘッドラインを少し変えて、走り読みしやすいようにしている点です。
デスクトップサイトとモバイルサイトを比較してみると、モバイルサイトのほうがホームページに表示されている文字数が少ないのが分かります。ヘッドラインも短く一目で把握できるようになっており、モバイルデバイスの小さな画面で斜め読みしたり、閲覧したりするのに最適です。
BuzzFeedと同じく画面左上にメニューが用意されており、タップすると全カテゴリーが一覧表示されるようになっています。
Expressは若者をターゲットとしたファッションストアです。同社のウェブサイトを訪問する人の大部分は洋服をブラウジングすることを目的にしていますから、大きくて見やすい商品画像を用意することが重要となります。特にモバイルデバイスでは、画面上の商品を指でタップして購入情報へ進む必要があるのでなおさらです。
さらにExpressは、他の多くの小売りサイトと比較して、一歩進んだモバイルエクスペリエンスを提供しています。商品画像上で指を左から右へスライドさせると、同じ商品の別のアングルの画像が表示されるようになっているのです。言い換えれば、同一商品の複数の画像を見るために、いちいち別のページを読み込む必要がないということです。
以下の2つのスクリーンショットの右上の画像を比べてみてください。スワイプすることで別の画像が表示されていることがお分かりいただけると思います。
Nationwide Insuranceは保険と金融サービスを提供しています。金融会社ならきっと複雑なウェブサイトだろうと思われるかも知れませんが、同社のモバイルサイトは非常にシンプルなユーザーエクスペリエンスを提供しています。
モバイルサイトを開くと、最初に表示されるのは郵便番号を入力するフィールドで、郵便番号を入れることですぐに見積もりを請求できるようになっています。あるいは「エージェントを探す」オプションをタップすれば、サービスの詳細情報を知ることができます。同社のモバイルサイトで提供されているのは基本的にこれだけです。ログインしたりサインアップしたりする必要もありません。
この場合ユーザーが選択できるオプションは限られていますが、モバイルデバイスの小さな画面で閲覧しているユーザーにとっては、これがかえって快適なエクスペリスになっています。潜在顧客を正しい方向へ導く素晴らしいテクニックだと言えるでしょう。
Squaredotは、HubSpot（ハブスポット）のパートナーエージェンシーで、インバウンドマーケティング戦略のサポートを提供しています。同社のモバイルサイトは非常にカラフルかつシンプルで操作しやすいデザインです。ただそれだけではありません。私が最も感心したのは、モバイルユーザーに向けたブログの見せ方です。
下のスクリーンショットを見てみてください。多数あるブログ記事の1つが表示されています。各記事には画面の横幅いっぱいに広がる、目を引く画像とテキストが使われ、モバイルユーザーがさらりと走り読みできるようになっています。
さらにオンラインフォームもモバイル向けに最適化されています。下の購読CTAにおけるテキストと入力フィールドの大きさを見てください。ピンチアウトしてズームしなくても十分に入力できるですね。
Zappoは服と靴を扱うオンラインショップで、最高のカスタマーサービスを提供していることで有名です。同社のモバイルサイトでは、ユーザーが探しているアイテムを簡単に見つけられるようにすることが最優先されており、画面の最上部と最下部に大きな検索バーを配置され、ラクに検索できるようになっています。
同社のモバイルサイトの最上部：
最下部（検索バーの下には「Fun and Little Weird（楽しくてちょっと変わってる）」という愛嬌のあるコピーが入りページが終わっています）：
ABCは「The Bachelorette」「BattleBots」「General Hospital」などの人気番組で知られる米テレビ放送局です。ABCのデスクトップサイトを訪れると、番組表、アカデミー賞受賞者一覧、好きな番組のネット視聴、さらには番組に関連したエンターテインメントニュースまで、多数のオプションが表示されます。
しかし、ABCは「モバイルデバイスのエクスペリエンスはシンプルであるべきだ」ということをよく理解しているようです。モバイルデバイスで同社のサイトを訪れると、デスクトップサイトのようなさまざまなオプションは表示されません。提供されているのは各テレビ番組の大きな画像をスクロールするオプションだけ。ユーザーは画像をスクロールして、好きな番組をクリックし、その番組の詳細を確認することができるようになっています。
Lean Labsは、HubSpotのパートナーエージェンシーで、エンゲージングでレスポンシブかつ高いコンバージョン率を誇るウェブソリューションを提供しています（また同社はABCの人気テレビシリーズ「Shark Tank」でも紹介されました)。このLean Labsもモバイルユーザーにスムーズなエクスペリエンスを提供することに成功しています。特にデザインテクニックや、コアバリューのアピールは見事で、訪問者がモバイルサイトを開いてすぐに見て取ることができます。
また同社のモバイルウェブサイトでは、縮尺や色を工夫して、ページ内の特定の要素をうまく目立たせています。
さらに、モバイルユーザーがホームページをスクロールすると、前述のとおり同社のコアバリューである、「成長戦略」「レスポンシブ ウェブ デザイン」「インバウンドマーケティング」が、関連性の高いアイコンと共にはっきりと表示されています。
SAPはビジネスオペレーションとカスタマーリレーションを管理する、大企業向けのエンタープライズ ソフトウェア メーカーです。同社のモバイルサイトでは情報を凝縮することにより、モバイルエクスペリエンスを高めています。
具体的には、例えばデスクトップサイトでは水平に並べて表示しているCTAの一部を、モバイルサイトではスライダーへ入れ込むことでエクスペリエンスを向上しています。こうした工夫でサイトをシンプルに保ち、モバイルユーザーが情報量に圧倒されないようにすると共に、各CTAの表示が小さすぎて読めなくなることを防いでいます。
KISSmetricsは企業向けにアナリティクスソフトウェアを提供しています。同社のデスクトップサイトのホームページには、ソフトウェアに関する豊富な情報と「お客様の声」が表示されています。
しかしモバイルサイトでは、明るい背景のモジュールと暗い背景のモジュールを交互に配置し、情報をリスト化して表示しています。こうすることで、ユーザーが戸惑うことなく簡単にページを走り読みできるようにしています。
またモバイルユーザーとのインタラクションを向上するため、フォーム内のテキストと入力フィールドは大きめに表示されています。
idig Marketingは開発＆コミュニケーションプロバイダーです。同社のモバイルサイトのレイアウトはデスクトップのそれと似ていますが、さまざまな工夫が見られます。例えば、各ブログ記事にはインタラクティブなハートアイコンが用意されており、ユーザーは記事が気に入った場合にはハートアイコンを押すことができるようになっています。これはInstagramやTwitterで使用されている「いいね」ハートアイコンを真似たものなので、SNSに慣れているユーザーは直感的に使うことができます。
以上、私たちのお気に入りのサイトの一部を紹介しました。他にも皆さんの目を引いたモバイルサイトがあれば、是非コメント欄で共有してください。
編集メモ：この記事は、2016年6月に投稿した内容に加筆・訂正したものです。Rachel Sprungによる元の記事はこちらからご覧いただけます。