素晴らしいモバイルウェブサイトデザイン15選

    著者: Shohei Toguri

    Date

    2016年01月19日

    モバイルデザイン

    今日、企業はかつてないほどモバイルサイトエクスペリエンスの向上に力を注いでいます。インターネットユーザーの80%が、オンライン検索にスマートフォンを使用していることを考えれば至極当然の流れでしょう(参照記事はこちら:Mobile Marketing Statistics compilation)。

    多くのマーケターたちが2015年4月21日にGoogleが実施し始めた大幅なアルゴリズムアップデートへの対策を行いました。一方でその流れに間に合わずに今後対策を急ピッチで進めなくてはいけないマーケターもいるはずです。「Googleの公式ブログによると「ウェブサイトがモバイルフレンドリーかどうかをランキング要素として使用し始める」とのことで、この変更がマーケティングの施策に大きな影響を及ぼし始めました(参照記事はこちら:Finding more mobile-friendly search results)。

    2015年4月のアップデートは、パンダアップデートやペンギンアップデートよりも大きな影響があるとされています。参考までにパンダアップデートの影響を受けたクエリは約12%、ペンギンアップデートの影響を受けたモバイルおよびデスクトップクエリは約4%のみです(参照記事はこちら:How Big Will Google's Mobile-Friendly Update Be? Bigger Than Panda Or Penguin)。

    インバウンドなウェブサイトなどを含めたインバウンドマーケティングでの5大要素について徹底図解した無料日本語ガイドはこちら。

    言い換えれば、モバイルエクスペリエンスの向上にまだ注力していない企業は、今すぐ優先課題として取り組むべき、ということです。そうでなければ検索ランキングが下がってしまうかもしれません。2015年3月のSerach Engine Landの記事によると、ウェブサイトの評価は「どの程度モバイルフレンドリーか」という評価ではなく、「モバイルフレンドリーである」「モバイルフレンドリーではない」のどちらかに大別されてしまうようです(参照記事はこちら:Google Clarifies "Mobile Friendly Update" Will Roll Out Over A Week, Be Yes/No Response & More)。

    そこで今回はモバイルフレンドリーかどうかということに重きをおいたGoogleアルゴリズムのアップデートに対して、モバイルサイトデザインの参考となるよう、優れたモバイルウェブエクスペリエンスを提供しているサイトを15ほどピックアップしました。

    素晴らしいモバイルウェブサイト15選

    1)Shutterfly

    Shutterflyは、ユーザーがフォトブックやパーソナライズしたカード、文具等を作成することのできるオンラインサービスです。多くの人がスマートフォンで写真を撮ったり写真データにアクセスしたりするようになった今日、同社は、快適なモバイルエクスペリエンスがカスタマーにとってどれだけ重要かを認識し、的確に対応しています。

    Shutterflyのサイトは、1)ユーザーがプロダクトやサービスの情報を簡単に見つけられること、2)それらの情報を美しい画像を使って売り込んでいること、というモバイルサイトで重要となる2つのゴールを満たしています。

    同社のモバイルサイトを開くと、大きなボタンで表示されたメニュー項目が画面下半分に表示され、ユーザーはすぐに興味のある項目を選択して詳細を知ることができるようになっています。

    shutterflyのモバイルサイトページの例

    いずれかの項目をクリックすると、Shutterflyでできることが大きな写真画像が表示され、ユーザーは簡単にブラウジングすることが可能です。

    shutterflyのモバイルサイトページの例

    2)Google Maps

    お気に入りの地図・道案内アプリは人によって異なります。私のお気に入りはGoogleマップです。徒歩、自動車、自転車、公共交通機関、どの場合にも使用しています。Googleマップのモバイルサイトの特徴は、同社のモバイルアプリとほとんど区別がつかないという点です。

    以下のスクリーンショットはGoogleマップのモバイルサイトのものです。アプリをお使いの方なら、アプリと瓜二つなのがお分かりいただけるでしょう。見た目が同じだけでなく、スピードや機能もアプリと変わりません。

    google mapsのモバイルサイトページの例

    google mapsのモバイルサイトページの例

    3)Etsy

    Etsyはビンテージアイテムやハンドメイドアイテムを売買できるeコマースサイトです。Etsyのサイトを訪れる人の多くは、特定のアイテムを探すか、興味のあるカテゴリーでアイテムをブラウジングするかのどちらかです。そしてEtsyのモバイルサイトは開いた瞬間からそのどちらにも完璧に対応しています。

    同モバイルサイトでは、特定のアイテムやショップを探すための検索バーが最初に表示されています。そして、そのすぐ下に、Etsyで購入可能な「話題のアイテム」のサムネイル画像が表示されています。

    etsyのモバイルサイトページの例

    ユーザーはこれらの話題のアイテムをリスト形式あるいはタイル形式で閲覧することができ、各画像は指で簡単にタップするのに十分なサイズになっています。

    etsyのモバイルサイトページの例

    4)Elf on the Shelf

    Elf on the Shelfは同名の絵本から生まれた、比較的新しいクリスマスの習慣です。馴染みのない方のためにご説明しますと、絵本の内容は「サンタクロースから世界中の家々に派遣された妖精たちが、子どもたちが良い子にしているかを観察してサンタクロースに報告している」というものです。

    親たちは絵本と一緒に妖精の人形を購入し、家の中で子どもが気付くような場所にこっそりと置いておきます。そしてクリスマスまで毎晩、子どもたちが眠っている間に人形を別の場所に動かして、妖精が本物であり、子どもたちを観察しているという演出をします。

    Elf on the Selfのモバイルサイトを開くと、購入可能なアイテムが多数あることが分かります。しかしユーザーはテキストベースの長いリストをスクロールする必要はなく、左から右へスワイプすることで簡単に全オプションを確認することができます。サイトで商品をブラウジングしたい訪問者にとって理想的なデザインと言えます。

    elf on the shelfのモバイルサイトページの例

    5)BuzzFeed

    BuzzFeedはビジュアルコンテンツと人気クイズで知られるニュースサイトです。私も通勤時間の娯楽の一つとして気に入っています。私が通勤時に何を使ってBuzzFeedをチェックしていると思いますか? もちろんスマートフォンです。

    BuzzFeedは多くの訪問者がモバイルからアクセスしていることを認識しており、モバイルユーザーにスムーズなエクスペリエンスを提供することに心を砕いています。

    BuzzFeedのモバイルサイトを開くと、最初に目につくのはシンプルなタイル形式で表示された人気コンテンツの数々です。各タイルは大きな画像で、指でタップしやすいようにデザインされています。

    buzzfeedのモバイルサイトページの例

    特定の記事カテゴリーに関心のあるユーザーには、メニューが画面左上に用意されていてクリックすると全カテゴリーが一覧表示されるようになっています。

    buzzfeedのモバイルサイトページの例

    6)Evernote

    Evernoteはノート、画像、ウェブ記事等を保存して、別のデバイスからもアクセスできるようにしてくれるアプリケーションです。通常、ユーザーはデスクトップコンピューター、スマートフォン、タブレットなど複数のデバイスからEvernoteアプリをダウンロードしたりEvernoteサイトにアクセスしたりするため、当然ながら快適なモバイルエクスペリエンスを提供することは同社にとって不可欠です。

    デスクトップコンピューターでEvernoteのホームページを閲覧してみると、デザインが非常にクリーンであることに気付かれるかと思います。バリューステートメントは簡潔で要を得ており、画面構成に画像を使用していますが、ごちゃごちゃせずすっきりとしています。

    モバイルサイトを見てみるとまったく同じデザインとスタイルが適用されているのが分かります。モバイルサイトもクリーンかつシンプルで、アプリの価値を損なっていません。

    evernoteのモバイルサイトページの例

    evernoteのモバイルサイトページの例

    7)Huffington Post

    Huffington Postは政治から時事問題、エンターテインメント、テクノロジーにいたるまで幅広い分野を扱うニュースサイトです。同社のモバイルサイトの特徴は、モバイルユーザー向けにヘッドラインに手を加え、モバイルデバイスから走り読みしやすいようにしている点です。

    デスクトップサイトとモバイルサイトを比較してみると、モバイルサイトのほうがホームページに表示されている文字数が少ないのが分かります。ヘッドラインも短く一目で読めるようになっており、モバイルデバイスの小さな画面で斜め読みしたり、閲覧したりするのに最適です。

    huffington postのモバイルサイトページの例

    huffington postのモバイルサイトページの例

    8)Express

    Expressは若者をターゲットとしたファッションストアです。同社のウェブサイトを訪れる大部分のオーディエンスの目的は洋服をブラウジングすることですから、大きくて見やすい商品画像を用意することが重要となります。特にモバイルデバイスでは、画面上の商品を指でタップして購入情報へ進む必要があるのでなおさらです。

    Expressは他の多くの小売りサイトと比較すると、一歩進んだモバイルエクスペリエンスを提供しています。商品画像上で指を左から右へスライドさせると、同じ商品の別の画像が表示されるようになっています。言い換えれば、ユーザーは同一商品の複数の画像を見るのに、別のページを読み込む必要がありません。

    以下の2つのスクリーンショットの右上の画像を比べてみてください。スワイプすることで別の画像が表示されていることがお分かりいただけると思います。

    expressのモバイルサイトページの例

    expressのモバイルサイトページの例

    9)Nationwide Insurance

    Nationwide Insuranceは保険と金融サービスを提供しています。金融会社ならきっと複雑なウェブサイトだろうと思われるかも知れませんが、同社のモバイルサイトは非常にシンプルなユーザーエクスペリエンスを提供しています。

    モバイルサイトを開くと「郵便番号を入力して見積もりを取る」「サービスの詳細を確認する」という2つのオプションが表示されます。基本的にはそれだけです。この場合ユーザーが選択できるオプションは限られていますが、モバイルデバイスの小さな画面で閲覧しているユーザーにとっては、これがかえって快適なエクスペリスになっています。潜在顧客を正しい方向へ導く素晴らしいテクニックだと言えます。

    nationwide insuranceのモバイルサイトページの例

    10)Zappos

    Zappoは服と靴を扱うオンラインショップで、最高のカスタマーサービスを提供していることで知られています。同社のモバイルサイトで最優先されているのは、ユーザーが探しているアイテムを簡単に見つけられるようにすること。そのため、モバイルサイトでは、画面の最上部と最下部に大きな検索バーを配置して、ラクに検索できるようにしています。

    同社のモバイルサイトの最上部:

    zapposのモバイルサイトページの例

    最下部:

    zapposのモバイルサイトページの例

    11)ABC

    ABCは米テレビ放送局で「ダンシング・ウィズ・ザ・スターズ」「モダン・ファミリー」「スキャンダル」などの人気番組で知られています。ABCのデスクトップサイトを訪れると、番組表、アカデミー賞受賞者一覧、好きな番組のネット視聴、さらには番組に関連したエンターテインメントニュースまで、多数のオプションが表示されます。

    しかし、「モバイルデバイスのエクスペリエンスはシンプルであるべき」ということをABCはよく理解しています。モバイルデバイスで同社のサイトを訪れると、デスクトップサイトほど多くのオプションは表示されません。提供されているのは各テレビ番組の大きな画像をスクロールするオプションだけ。ユーザーは画像をスクロールして、好きな番組をクリックし、その番組の詳細を確認することができます。

    abcのモバイルサイトページの例

    12)Lean Labs

    Lean Labsは、HubSpotのパートナーエージェンシーで、エンゲージングでレスポンシブかつ高いコンバージョン率を誇るウェブソリューションを提供しています。そしてLean Labsもモバイルユーザーにスムーズなエクスペリエンスを提供することに成功しています。特にデザインテクニックや、コアバリューのアピールは見事で、訪問者がモバイルサイトを開いてすぐに見て取ることができます。

    また同社のモバイルウェブサイトでは、縮尺や色を工夫して、ページ内の特定の要素を目立たせています。

    lean labsのモバイルサイトページの例

    さらに、モバイルユーザーがホームページをスクロールすると、前述のとおり同社のコアバリューである、「成長戦略」「レスポンシブウェブデザイン」「インバウンドマーケティング」がはっきりと表示されています。

    lean labsのモバイルサイトページの例

    13)Pharmacy Development Services

    Pharmacy Development ServicesはHubSpotをご利用いただいている企業で、独立して薬局を開業している方たちにコーチングを提供しています。同社のデスクトップサイトとモバイルサイトはどちらも非常にシンプルでユーザーフレンドリーな作りになっています。サイトはレスポンシブデザインで、デバイスが変わっても基本的にエクスペリエンスが変わらない点が優れています(関連記事はこちら:レスポンシブデザインを絶対参照する6つの理由)。

    モバイルサイトのホームページはインタラクティブになっており、ユーザーが自分のニーズに沿って空欄を埋め、CTAをクリックすると、求めている情報に合ったウェブページが表示される仕組みです。この時ユーザーが記入するフォームが非常に短くなっている点に注目してください。モバイルデバイスでたくさんの文字を打つのは大変ですから、意図的に短いフォームを使っているのです。

    pharmacy development servicesのモバイルサイトページの例

    pharmacy development servicesのモバイルサイトページの例

    14)SAP

    SAPはビジネスオペレーションとカスタマーリレーションを管理する、大企業向けのエンタープライズソフトウェアメーカーです。同社のデスクトップサイトではcall-to-action(CTA)を水平に並べて表示していますが、モバイルサイトではこれらのCTAの一部をスライダーへ入れ込むことで、情報を凝縮してエクスペリエンスを強化しています。

    こうしてサイトをシンプルに保ち、モバイルユーザーが情報量に圧倒されないようにすると共に、各CTAの表示が小さすぎて読めなくなることを防いでいます。

    sapのモバイルサイトページの例

    15)KISSmetrics

    KISSmetricsは企業向けにアナリティクスソフトウェアを提供しています。同社のデスクトップサイトのホームページには、ソフトウェアに関する豊富な情報と「お客様の声」が表示されています。しかし一方のモバイルサイトではテキストの多くと「お客様の声」が完全に省略されています。なぜでしょう?

    それは、モバイルユーザーはデスクトップユーザーと比べ、大量のテキストを読み飛ばす傾向があることを、KISSmetricsが理解しているからです。

    kissmetricsのモバイルサイトページの例

    以上、HubSpotのお気に入りモバイルサイトでした。他に皆さんがお気に入りのモバイルサイトはありますか? コメント欄で是非共有してください。

    the anatomy of inbound marketing(インバウンドマーケティングを徹底図解)のCTA

    編集メモ:この記事は、 2015年3月に投稿した内容に加筆・訂正したものです。Rachel Sprungによる元の記事はこちらからご覧いただけます。

    著者情報  Shohei Toguri

    HubSpot Japanのマーケティングマネージャー。ローカリゼーションやマーケティングストラテジーなども担当。趣味で国外のマーケティングイベント、スポーツイベント、ボランティアなどに参加している。LinkedInは こちら。Twitterはこちら@ShoheiToguri

    ブログ内検索

    ブログを
    購読する

    RSSリーダーで
    ブログを購読する

    ご質問は?

    メールはこちら: hubspotjapan@hubspot.com