モバイルフレンドリー？ それともモバイルファースト？
公開: 2015-10-09
スマートフォン、タブレット、その他のモバイル デバイスはどこにでもあります。 彼らは、私たちが昼食を注文したり、写真を撮ったり、交通案内を取得したり、BFF にジョークを送信したりするのを助けてくれます。
そして、私たちはそれらの使用を私たちの消費生活に限定しません. ビジネス旅行者として、チケットエージェントで搭乗券をフラッシュし、その飛行機を待っている間に提案を確認します。 私たちの多くにとって、スマートフォンでビジネス メールをチェックすることは、朝一番に行うことであり、夜は最後に行うことです。
クリエイティブ エージェンシーの Babcock & Jenkins が指摘するように、「モバイルはデバイス カテゴリではなく、生き方です。」
この傾向については何も減速していません。 comScore のデータが示すように、モバイル ユーザー数は増加しています。
…そして、この Kleiner Perkins Caufield Byers のグラフ (eMarketer のデータに基づく) は、デバイスの種類ごとのユーザーごとの平均時間数で表しています。
では、モバイルでバイヤーに会っていますか? それは彼らにとって良い経験ですか？
モバイルデザインを優先する
古い習慣はなかなか消えません。 従来、Web ページ、ランディング ページ (および電子メール) のデザインは、デスクトップ ユーザーのエクスペリエンスと、そのメディアでうまくテストできるものを中心に展開されてきました。 私たちの多くは、これでかなり上手になりました。
しかし、現在、私たちの多くにとって (おそらく遅かれ早かれ)、モバイル トラフィックはデスクトップ トラフィックを追い越しています。 私たちのサイトでの読者のモバイル エクスペリエンスを、彼らが求め、期待するものを満たす (できれば、それを超える) ものにする必要があります。
つまり、オンライン デジタル エクスペリエンスの設計方法を変更する必要があります。 モバイルデザインを優先する必要があります。
レスポンシブ デザインとアダプティブ デザイン
モバイル消費用の Web およびランディング ページの設計に使用される推奨アプローチは、レスポンシブ デザインとアダプティブ デザインの 2 つです。
レスポンシブ デザインは、ユーザーのデバイス (デスクトップ、タブレット、モバイルなど) や画面サイズに関係なく、同じ URL で同じ HTML コードを提供します。 流動レイアウトを1 つ作成します。 Web ページは、メディア クエリを使用して、表示されるデバイスの画面サイズを把握します。 次に、柔軟な画像、流動的なグリッド、サイト ナビゲーション、流動的なレイアウトを画面に合わせて調整し、最も重要な部分に焦点を当てます。
アダプティブ デザインでは、定義済みの一連のビューポート サイズとその他の特性に基づいて、複数の画面サイズのセット数に対して複数の固定レイアウトを作成します。 たとえば、特定のモバイル サイズに対して 1 つのレイアウトを持つことができます。 特定のタブレットサイズ用の別のもの。 デスクトップ/ラップトップ用のさらに別のもの。
ほとんどの人は、さまざまな理由からレスポンシブ デザインを好みます。 1 つの理由: 画面サイズは頻繁に変更され、レスポンシブ デザインは追加作業なしでこれらの変更に適応しますが、アダプティブでは新しいレイアウトを構築する必要があります。
3 番目のオプションは、デスクトップ アクセスとモバイル アクセス用に別々のサイトを設計することです。 これは、ほとんどの企業にとって実用的なソリューションではありません。 1 つ目は、2 つの異なるサイトを維持するのは非常に手間がかかることです。 2 つ目: バックリンクが 2 つのサイトにまたがってランク付けされる可能性が低くなるため、SEO に悪影響を与える可能性があります。 最後に、サイトが同期しなくなるリスクが高くなります。
SEOといえば…モバイルは非常に重要です。
SearchEngineLand の Danny Sullivan は、Google が 2015 年 4 月 21 日に実装した、モバイル フレンドリーでない Web サイトにペナルティを課す検索アルゴリズムを説明するために「Mobilegeddon」という造語を作ったことで功績を認められました。 結果が表示されるまでに数か月かかりましたが (ほとんどのアルゴリズムの変更では徐々に結果が生成されます)、結果が表示されました。
Alistair Barr によるウォール ストリート ジャーナルのブログ投稿で報告されているように、Stone Temple Consulting は上のグラフに示されているように、大きな変化を発見しました。
さらに、現在 Google の検索トラフィックの大部分はモバイルからのものです。つまり、多くの人が小さな画面で検索し、見つけていることを意味します。 彼らがあなたのサイトを利用する際に優れたユーザー エクスペリエンスを提供することが重要です。
モバイルデザインを始める
ページが「モバイル フレンドリー」と見なされるには、いくつかの基本的な要件を満たす必要があります。 Google によると、これらが最も重要です。
- 読みやすいテキスト (タップまたはズームなし)
- 適切な間隔で配置されたタップ ターゲット (指でタップしてページを操作できるボタンまたは画像)
- 「再生できないコンテンツ」なし (特定の種類のビデオ、フラッシュ コンテンツなど)
- 横スクロール不要
シンプルさ
スペースが限られているということは、脂肪を取り除き、最も効果的で最も重要な情報を前面と中央に配置する必要があることを意味します。
覚えておくべきいくつかの重要なポイント:
- 行動を促すフレーズ (CTA) は、すっきりとシンプルに、そして非常に明確で具体的なものにします。
- コピーは短く簡潔にします。 レスポンシブ レイアウトで動き回っても意味のあるチャンクで記述します。
- セグメント！ ページが対象とする正確な読者を指定できる場合は、短いコピーを使用してより具体的にすることができます。
ターゲットをタップ
設計者と科学者は、最適なサイズについて意見が分かれています (Apple、Microsoft、MIT Touch Lab によるタップ ターゲットの調査。「ボタンをどのくらいの大きさにすればよいか」という質問に対する明確な答えはありませんが、サイズを選んでテストしてください。
ページ速度
ユーザーは、ページが読み込まれるまで長く待つことはありません。
ページ速度のベスト プラクティスの完全なリストについては、Moz によるこの便利なガイドをご覧ください。 自分の Web サイトのパフォーマンスをテストするには、https://www.webpagetest.org/ をチェックしてください。
フォームを簡素化する
多くの場合、モバイル ユーザーはマルチタスクや移動を行っていることに注意してください。 必要な手順が多ければ多いほど、ユーザーが「時間がない」と言わなければならない理由が増えます。 フォーム内のフィールドはできるだけ少なくしてください。 この摩擦のないフォームのガイドをご覧ください。
テスト、そしてまたテスト
A/B テストは、Web ページの 2 つのバージョンを相互に比較して、どちらのパフォーマンスが優れているかを判断する方法です。 コピー、色、配置、およびレイアウトをテストできます。 感嘆符のような単純なものを足したり引いたりするだけでも、コンバージョンに違いが生じる可能性があります。 小さなモバイル画面では、すべての詳細が重要です。
モバイルフレンドリーかモバイルファーストか？ 違いは何ですか？
「モバイル フレンドリー」の全体的な考え方は、通常、必要なときに小さな画面で機能できる優れたレスポンシブ Web デザインを作成する方法を理解することです。 「グレースフル デグラデーション」というかなり洗練された表現は、最適な画面サイズでフル機能のエクスペリエンスを構築し、次に「考えられるそれぞれのデグラデーションを考慮し、欠点があってもサイトが機能し続けることを保証する」ことを指します。 (CodeMyViews に関するデザイナーの視点からの完全な説明をお読みください。)
「モバイル ファースト」は、その概念を一変させます。 ここでは、必需品で構成される無駄のないサイトから始めます。 見栄えがよく、うまく機能するはずです。 次に、「プログレッシブ エンハンスメント」を適用して、設計をより大きなデバイスに適応させます。 熱い創造的な開始エネルギーはモバイル デバイスに入り、残りの部分は削り取るのではなく、継続的に構築します。 それはすべてを変えます。
Beyond Nines (世界中の非営利団体にサービスを提供している機関) は次のように述べています。
Babcock & Jenkins からの別の引用: 「モバイル ファーストのアプローチは、堅牢なエクスペリエンスを低下させるのではなく、高度に焦点を合わせたものを強化します。モバイルはマーケティングの前提であり、延長ではありません。」
では、モバイル フレンドリーか、それともモバイル ファーストか。 どう思いますか？ コメントセクションで、あなたの経験を教えてください。
メールやランディング ページにレスポンシブ デザインを実装する準備はできましたか? 無料のウェビナーをご覧ください: レスポンシブ デザイン – Web ページとメールの 10 のすべきこととすべきでないこと.