無制限のコンタクト&企業データ、完全無料。月額$200からのオールインワンソフトウェア。月額$0からのオールインワンソフトウェア。変ですね...完全に一致した結果が見つかりませんでした。一度検索ワードを変えてお試しください。@shoheitoguriシェアシェアTweetシェア今日、企業はかつてないほどモバイルサイトエクスペリエンスの向上に力を注いでいます。compilation)。多くのマーケターたちが2015年4月21日にGoogleが実施し始めた大幅なアルゴリズムアップデートへの対策を行いました。一方でその流れに間に合わずに今後対策を急ピッチで進めなくてはいけないマーケターもいるはずです。2015年4月のアップデートは、パンダアップデートやペンギンアップデートよりも大きな影響があるとされています。言い換えれば、モバイルエクスペリエンスの向上にまだ注力していない企業は、今すぐ優先課題として取り組むべき、ということです。なければ検索ランキングが下がってしまうかもしれません。そこで今回はモバイルフレンドリーかどうかということに重きをおいたGoogleアルゴリズムのアップデートに対して、モバイルサイトデザインの参考となるよう、優れたモバイルウェブエクスペリエンスを提供しているサイトを15ほどピックアップしました。素晴らしいモバイルウェブサイト15選1)ShutterflyShutterflyは、ユーザーがフォトブックやパーソナライズしたカード、文具等を作成することのできるオンラインサービスです。多くの人がスマートフォンで写真を撮ったり写真データにアクセスしたりするようになった今日、同社は、快適なモバイルエクスペリエンスがカスタマーにとってどれだけ重要かを認識し、的確に対応しています。Shutterflyのサイトは、1)ユーザーがプロダクトやサービスの情報を簡単に見つけられること、2)それらの情報を美しい画像を使って売り込んでいること、というモバイルサイトで重要となる2つのゴールを満たしています。同社のモバイルサイトを開くと、大きなボタンで表示されたメニュー項目が画面下半分に表示され、ユーザーはすぐに興味のある項目を選択して詳細を知ることができるようになっています。いずれかの項目をクリックすると、Shutterflyでできることが大きな写真画像が表示され、ユーザーは簡単にブラウジングすることが可能です。Mapsお気に入りの地図・道案内アプリは人によって異なります。どの場合にも使用しています。Googleマップのモバイルサイトの特徴は、同社のモバイルアプリとほとんど区別がつかないという点です。以下のスクリーンショットはGoogleマップのモバイルサイトのものです。アプリをお使いの方なら、アプリと瓜二つなのがお分かりいただけるでしょう。見た目が同じだけでなく、スピードや機能もアプリと変わりません。3)EtsyEtsyはビンテージアイテムやハンドメイドアイテムを売買できるeコマースサイトです。Etsyのサイトを訪れる人の多くは、特定のアイテムを探すか、興味のあるカテゴリーでアイテムをブラウジングするかのどちらかです。Etsyのモバイルサイトは開いた瞬間からそのどちらにも完璧に対応しています。同モバイルサイトでは、特定のアイテムやショップを探すための検索バーが最初に表示されています。そのすぐ下に、Etsyで購入可能な「話題のアイテム」のサムネイル画像が表示されています。ユーザーはこれらの話題のアイテムをリスト形式あるいはタイル形式で閲覧することができ、各画像は指で簡単にタップするのに十分なサイズになっています。Shelfは同名の絵本から生まれた、比較的新しいクリスマスの習慣です。馴染みのない方のためにご説明しますと、絵本の内容は「サンタクロースから世界中の家々に派遣された妖精たちが、子どもたちが良い子にしているかを観察してサンタクロースに報告している」というものです。親たちは絵本と一緒に妖精の人形を購入し、家の中で子どもが気付くような場所にこっそりと置いておきます。クリスマスまで毎晩、子どもたちが眠っている間に人形を別の場所に動かして、妖精が本物であり、子どもたちを観察しているという演出をします。Selfのモバイルサイトを開くと、購入可能なアイテムが多数あることが分かります。ユーザーはテキストベースの長いリストをスクロールする必要はなく、左から右へスワイプすることで簡単に全オプションを確認することができます。サイトで商品をブラウジングしたい訪問者にとって理想的なデザインと言えます。5)BuzzFeedBuzzFeedはビジュアルコンテンツと人気クイズで知られるニュースサイトです。私も通勤時間の娯楽の一つとして気に入っています。BuzzFeedは多くの訪問者がモバイルからアクセスしていることを認識しており、モバイルユーザーにスムーズなエクスペリエンスを提供することに心を砕いています。BuzzFeedのモバイルサイトを開くと、最初に目につくのはシンプルなタイル形式で表示された人気コンテンツの数々です。各タイルは大きな画像で、指でタップしやすいようにデザインされています。特定の記事カテゴリーに関心のあるユーザーには、メニューが画面左上に用意されていてクリックすると全カテゴリーが一覧表示されるようになっています。6)EvernoteEvernoteはノート、画像、ウェブ記事等を保存して、別のデバイスからもアクセスできるようにしてくれるアプリケーションです。通常、ユーザーはデスクトップコンピューター、スマートフォン、タブレットなど複数のデバイスからEvernoteアプリをダウンロードしたりEvernoteサイトにアクセスしたりするため、当然ながら快適なモバイルエクスペリエンスを提供することは同社にとって不可欠です。デスクトップコンピューターでEvernoteのホームページを閲覧してみると、デザインが非常にクリーンであることに気付かれるかと思います。バリューステートメントは簡潔で要を得ており、画面構成に画像を使用していますが、ごちゃごちゃせずすっきりとしています。モバイルサイトを見てみるとまったく同じデザインとスタイルが適用されているのが分かります。モバイルサイトもクリーンかつシンプルで、アプリの価値を損なっていません。Postは政治から時事問題、エンターテインメント、テクノロジーにいたるまで幅広い分野を扱うニュースサイトです。同社のモバイルサイトの特徴は、モバイルユーザー向けにヘッドラインに手を加え、モバイルデバイスから走り読みしやすいようにしている点です。デスクトップサイトとモバイルサイトを比較してみると、モバイルサイトのほうがホームページに表示されている文字数が少ないのが分かります。ヘッドラインも短く一目で読めるようになっており、モバイルデバイスの小さな画面で斜め読みしたり、閲覧したりするのに最適です。8)ExpressExpressは若者をターゲットとしたファッションストアです。同社のウェブサイトを訪れる大部分のオーディエンスの目的は洋服をブラウジングすることですから、大きくて見やすい商品画像を用意することが重要となります。モバイルデバイスでは、画面上の商品を指でタップして購入情報へ進む必要があるのでなおさらです。Expressは他の多くの小売りサイトと比較すると、一歩進んだモバイルエクスペリエンスを提供しています。商品画像上で指を左から右へスライドさせると、同じ商品の別の画像が表示されるようになっています。言い換えれば、ユーザーは同一商品の複数の画像を見るのに、別のページを読み込む必要がありません。以下の2つのスクリーンショットの右上の画像を比べてみてください。スワイプすることで別の画像が表示されていることがお分かりいただけると思います。Insuranceは保険と金融サービスを提供しています。金融会社ならきっと複雑なウェブサイトだろうと思われるかも知れませんが、同社のモバイルサイトは非常にシンプルなユーザーエクスペリエンスを提供しています。モバイルサイトを開くと「郵便番号を入力して見積もりを取る」「サービスの詳細を確認する」という2つのオプションが表示されます。基本的にはそれだけです。この場合ユーザーが選択できるオプションは限られていますが、モバイルデバイスの小さな画面で閲覧しているユーザーにとっては、これがかえって快適なエクスペリスになっています。潜在顧客を正しい方向へ導く素晴らしいテクニックだと言えます。10)ZapposZappoは服と靴を扱うオンラインショップで、最高のカスタマーサービスを提供していることで知られています。同社のモバイルサイトで最優先されているのは、ユーザーが探しているアイテムを簡単に見つけられるようにすること。そのため、モバイルサイトでは、画面の最上部と最下部に大きな検索バーを配置して、ラクに検索できるようにしています。同社のモバイルサイトの最上部:最下部:11)ABCABCは米テレビ放送局で「ダンシング・ウィズ・ザ・スターズ」「モダン・ファミリー」「スキャンダル」などの人気番組で知られています。きな番組のネット視聴、さらには番組に関連したエンターテインメントニュースまで、多数のオプションが表示されます。「モバイルデバイスのエクスペリエンスはシンプルであるべき」ということをABCはよく理解しています。モバイルデバイスで同社のサイトを訪れると、デスクトップサイトほど多くのオプションは表示されません。提供されているのは各テレビ番組の大きな画像をスクロールするオプションだけ。ユーザーは画像をスクロールして、好きな番組をクリックし、その番組の詳細を確認することができます。Labsは、HubSpotのパートナーエージェンシーで、エンゲージングでレスポンシブかつ高いコンバージョン率を誇るウェブソリューションを提供しています。Labsもモバイルユーザーにスムーズなエクスペリエンスを提供することに成功しています。デザインテクニックや、コアバリューのアピールは見事で、訪問者がモバイルサイトを開いてすぐに見て取ることができます。同社のモバイルウェブサイトでは、縮尺や色を工夫して、ページ内の特定の要素を目立たせています。モバイルユーザーがホームページをスクロールすると、前述のとおり同社のコアバリューである、「成長戦略」「レスポンシブウェブデザイン」「インバウンドマーケティング」がはっきりと表示されています。ServicesはHubSpotをご利用いただいている企業で、独立して薬局を開業している方たちにコーチングを提供しています。同社のデスクトップサイトとモバイルサイトはどちらも非常にシンプルでユーザーフレンドリーな作りになっています。サイトはレスポンシブデザインで、デバイスが変わっても基本的にエクスペリエンスが変わらない点が優れています(関連記事はこちら:レスポンシブデザインを絶対参照する6つの理由)。モバイルサイトのホームページはインタラクティブになっており、ユーザーが自分のニーズに沿って空欄を埋め、CTAをクリックすると、求めている情報に合ったウェブページが表示される仕組みです。この時ユーザーが記入するフォームが非常に短くなっている点に注目してください。モバイルデバイスでたくさんの文字を打つのは大変ですから、意図的に短いフォームを使っているのです。14)SAPSAPはビジネスオペレーションとカスタマーリレーションを管理する、大企業向けのエンタープライズソフトウェアメーカーです。同社のデスクトップサイトではcall-to-action(CTA)を水平に並べて表示していますが、モバイルサイトではこれらのCTAの一部をスライダーへ入れ込むことで、情報を凝縮してエクスペリエンスを強化しています。してサイトをシンプルに保ち、モバイルユーザーが情報量に圧倒されないようにすると共に、各CTAの表示が小さすぎて読めなくなることを防いでいます。15)KISSmetricsKISSmetricsは企業向けにアナリティクスソフトウェアを提供しています。同社のデスクトップサイトのホームページには、ソフトウェアに関する豊富な情報と「お客様の声」が表示されています。一方のモバイルサイトではテキストの多くと「お客様の声」が完全に省略されています。?それは、モバイルユーザーはデスクトップユーザーと比べ、大量のテキストを読み飛ばす傾向があることを、KISSmetricsが理解しているからです。以上、HubSpotのお気に入りモバイルサイトでした。コメント欄で是非共有してください。2015年3月に投稿した内容に加筆・訂正したものです。Sprungによる元の記事はこちらからご覧いただけます。トピック:デザインメルマガ登録コメント申し訳ありません。過去のコメント履歴が削除されてしまいました。何か疑問やご質問がある方はこちららどうぞ。疑問や質問をツイートするにはこちら。Inc.法的事項プライバシーポリシーサイトマップ。