実装する必要のある8つの見落とされたモバイルデザインのベストプラクティス
インターネットユーザーの93％は、毎日モバイルデバイスでインターネットを閲覧しています。これは、いつでも携帯電話やタブレットであなたのウェブサイトを見る可能性のある35億人の人々です。
したがって、モバイル向けにオンラインプレゼンスを最適化するために、できる限り努力する必要があります。私を信じてください。デスクトップ以外のデバイスではまったく効果がないマーケティングファネルがあることほど悪いことはありません。
ガイダンスを提供するために、従う必要のある8つのモバイルデザインのベストプラクティスをまとめました。これらは、訪問者のユーザーエクスペリエンスを合理化し、あらゆるデバイスに対するマーケティングファネルの影響を最大化するのに役立ちます。
1.ナビゲーションバーを削除します
モバイルでは、不動産は貴重です。私のiPhone画面は、マンハッタンのダウンタウンの地図のように思います。ここでは、すべてのピクセルにかなりの費用がかかります。モバイルナビゲーションバーが使用できるスペースを確認してください。
モバイルナビゲーションバー
これは、モバイルでウェブサイトから得られるものを最大化する必要があることを意味します。
これを行う簡単な方法の1つは、ナビゲーションバーをモバイルにドロップすることです。
ノートパソコンやデスクトップでは、ナビゲーションバーが非常に役立ちます。これは、訪問者がサイトのページを閲覧するための簡単な方法であり、探しているものを正確に見つけることができます。
ニール・パテルとの協議
私の代理店があなたのウェブサイトへの大量のトラフィックをどのように促進できるかをご覧ください
SEO-大量のSEOトラフィックのロックを解除します。実際の結果をご覧ください。
コンテンツマーケティング-私たちのチームは、共有され、リンクを取得し、トラフィックを引き付ける壮大なコンテンツを作成します。
有料メディア-明確なROIを備えた効果的な有料戦略。
電話を予約する
しかし、モバイルでは、ナビゲーションバーが大量のスペースを占める可能性があります。そうしないと、テキスト、画像、またはWebサイトやランディングページにあるその他のコンテンツに使用される可能性があります。
今、あなたは訪問者がナビゲーションバーなしであなたのサイトを閲覧することをどのように期待されているのか疑問に思うかもしれません。これを回避する方法はいくつかあります…
最も一般的な方法は、ハンバーガーメニューを組み込むことです。これにより、はるかに小さい（ただしブランド化された）トップバーを作成できます。ハンバーガーメニューは引き出しとして機能し、画面の左側から引き出して、ナビゲーションバーのさまざまなメニュー項目を表示します。
または、Webページのサイズによっては、モバイルデバイス用に単一ページのレイアウトを作成することを選択する場合があります。ただし、ウェブサイトのコンテンツが比較的まばらでない限り、これはおそらくビジネスに最適なオプションではありません。
2.重要な要素を手の届く範囲に保つ
スマートフォンで過ごす時間を考えてみてください。
バスに乗っているときやスターバックスで列に並んでいるとき（または今この記事を読んでいるとき）など、かなり頻繁に使用することをお勧めします。今、あなたがそれをどのように保持するかについて考えてください。あなたが私たちのほとんどのようであるなら、あなたはあなたの親指の1つだけを使ってあなたのスクリーンを操作しています。
あなただけではありません。モバイルUXのエキスパートであるSteveHooberによる最近の調査によると、75％の人が親指を1本だけ使ってやり取りしています。
数年前、下の図はモバイルデザイナー向けのバイブルであり、ウェブサイトの訪問者の大多数のユーザーエクスペリエンスを最適化するためにコンテンツをどのようにレイアウトする必要があるかについての洞察を提供しています。
上記は当時は正確だったかもしれませんが、状況は急速に変化します（そして、テクノロジーではさらに速く変化します）。ここ数年、私たちの携帯電話と画面はどんどん大きくなっています…しかし、私たちの手は同じままです。
スマートフォンの持ち方が変わりました。そのため、画面の「ホットスポット」がシフトし、画面の外縁に近づくにつれてタッチの精度が低下します。
その結果、私たちデザイナーは、一次インタラクションを前面と中央に配置し、画面の上部と下部の端にある二次機能と三次機能を節約する方法でコンテンツを整理する必要があります。
電話スクリーンの主な機能
これらの機能の位置は、ユーザーのアクセスのしやすさに直接関係しています。一次機能はユーザーが親指で簡単にアクセスできる領域にあり、三次（およびある程度は二次）機能は精度の低いゾーンにあり、到達するにはもう少し作業が必要です。
3.ファイルサイズの最適化と最小化
ウェブサイトの画像のサイズを最適化することがいかに重要かをすでにご存知でしょう。これらは読み込み時間に大きく影響し、ユーザーエクスペリエンスとページの検索ランキングの両方に連鎖的な影響を及ぼします。
これはモバイルでは二重に重要です。モバイルでの接続の信頼性が低いだけでなく、モバイルユーザーは待つことを好みません。つまり、ページがすぐに読み込まれない場合は、ページを完成させるためにページが動かなくなる可能性があります。
TinyJPGなどのサイト、またはImageOptim（Macのみ）やPhotoshopの「Exportfor Web」などのツールを使用して、画像をWebサイトにアップロードする前に、画像のファイルサイズを最小化してください。
ファイルサイズに影響を与える2つの主要なプロパティがあります。
品質：簡単に言えば、品質はまさにそのように聞こえます。品質設定を下げると、画像の鮮明さが低下し、画像にアーティファクトが現れる可能性が高くなります。
サイズ/解像度：図を見てください–画像の実際のサイズはファイルサイズに大きな影響を与えます。明らかに、あなたはしたくない
画像を非常に小さくして、訪問者に表示されないようにします。ただし、たとえば、画像を配置する列の幅が600ピクセルの場合、画像の幅は1000ピクセルである必要はありません。アップロードする前に、サイズが合うようにサイズを変更してください。
4.電話番号と住所をリンクする
モバイル向けに最適化することは、訪問者のエクスペリエンスを合理化することです。できるだけ少ない手順で実行する必要があります。
これは、モバイルでのインタラクションを利用して、Webサイトへのアクセス（および製品の購入やビジネスへの連絡）を快適なものにすることを意味します。
あなたのウェブサイトが販売に依存している場合、または電話があなたのマーケティングファネルの重要なタッチポイントである場合、あなたができる最も重要なことの1つは人々があなたに電話をかけやすいようにすることです。
「お問い合わせ」ページに付加価値を付ける簡単な方法の1つは、電話番号をクリック可能なリンクにすることです。電話番号を入力するために携帯電話とブラウザアプリを必死に交換したり、電話番号をコピーしようとしてページ上の他のすべてのコンテンツを誤ってコピーしたりすることの苦痛を誰もが知っています。
私を信じてください、あなたの電話番号をクリック可能にすることは大きな違いを生みます。
あなたがする必要があるのはこのようにあなたの電話番号をリンクすることです：
そしてそれはこのように表示されます：
123-123-1234
これにより、ユーザーはクリックして電話をかけることができます。
同様に、他の重要な詳細もインタラクティブであることを確認する必要があります。たとえば、住所をクリックすると、訪問者のマップアプリケーションが開きます。 Facebookなどのほとんどのアプリはこれを自動的に設定しますが、アドレスをGoogleマップに入力し、[共有]リンクをコピーして、Webサイトのアドレスにリンクすることができます。
これらの小さなことにより、訪問者はモバイルでページにアクセスしたときに何も見逃していないように感じられ、余分な作業を行う必要がなくなります。
簡単に言うと、モバイルブラウジングエクスペリエンスがマーケティングと販売の目標到達プロセスを妨げないようにしてください。
5.応答性の設計
あなたがモバイルウェブの出現と蜂起の間にいたなら、ほとんどのウェブサイトが実際にiPhone以前の時代のより小さな画面で機能するモバイル用のまったく新しいレイアウトを構築したことを思い出すかもしれません。
これらのページは多くの場合最小限の画像を特徴としており、モバイルユーザーが非3G、非LTE、非WiFiネットワークで受信した低速のブラウジング速度に対抗するために比較的テキストが多かった。
約10年早送りすると、モバイル環境は完全に変化しました。画面は巨大で、インターネット接続は高速化され、タブレットは存在します。
これらの進歩（およびCSSなどのフロントエンド設計言語におけるその他の進歩）は、レスポンシブでアダプティブな設計への道を開きました。
これら2種類のデザインには微妙な違いがありますが、主な目的は同じです。つまり、各訪問者が使用しているデバイスに基づいて動的に応答および変更される単一のWebサイトレイアウトを作成します。
デスクトップからモバイルまでのレスポンシブデザイン
うまくいけば、使用しているウェブページテンプレートまたはランディングページエディタは、ページを作成するときにモバイル対応バージョンのページを自動的に作成し、手動で作成する手間を省きます。
応答性を検討する際に留意すべき点がいくつかあります。
画像サイズ：画像がページのコンテンツにとって重要である場合は、モバイルではっきりと表示されるようにしてください。デスクトップで50％の幅の画像は、モバイルでも50％で表示される可能性があり、それは小さすぎます。
コンテンツのレイアウト/順序：デスクトップ用にページ上の要素を整理する方法によっては、モバイルに移行したときにコンテンツがぎこちなく順序付けられる場合があります。他のデバイスであっても、すべてのコンテンツが正常であることを再確認してください。
アニメーション：デスクトップで見栄えのするアニメーションは、モバイルではうまく機能しない可能性があります。ページを公開する前に携帯電話でこれらをチェックして、問題がないことを確認してください。
ビデオ：ファイルサイズに関する以前の推奨事項を念頭に置いて、モバイルでビデオを非表示（または削除）することを検討してください。大きくて重いため、モバイルエクスペリエンスが大幅に低下する可能性があります。
JavaScript：JavaScriptは素晴らしくて魔法のようなものですが、モバイルで常に機能するとは限りません。機能することを確認してください。
6.ポップアップを無効にする
2017年、Googleは、「侵入型インタースティシャル」と呼ばれるものに対するソフトペナルティを展開しました。
素人の言葉で言えば、これはほとんどポップアップを意味します。これは、馬の口から直接出たいくつかの例です。
基本的に、モバイルデバイスのウェブページにポップアップを表示すると、訪問者はクリックして見つけたコンテンツにアクセスしたり表示したりできないため、ユーザーエクスペリエンスが大幅に低下します。これに対抗するために、Googleは検索ランキングを下げることでポップアップのあるページにペナルティを課し、人々が自分のサイトにポップアップを追加するのを思いとどまらせています。
簡単な解決策？モバイルでポップアップを無効にします。真剣に–それらをオフにするだけです。
伝えられるところによると、スクロールポップアップやクリックポップアップなどの一部のユーザートリガーポップアップはペナルティが課せられませんが、これを確認する場所が見つからないため、一粒の塩でそれを取ります。
ポップアップがかなり重要な場合は、コンテンツをページのセクションとして、コンテンツ内に追加します（またはev
折り目の上のen）。これにより、Googleがサイトの検索ランキングにペナルティを科すのを防ぐことができます。
7.フォームをモバイル向けに最適化
携帯電話でオンラインショッピングをしたことがあるなら、無限のフォームの後にフォームに記入するのがどれほど苛立たしいことかご存知でしょう。
モバイルでの全体的なタイピングエクスペリエンスはT9の時代から大幅に改善されましたが、それでも完璧ではありません。それはオートコレクトに大きく依存しており、それでも親指にかなりの負担をかける可能性があります。
ここでの教訓は何ですか？単純な三段論法：長い形式では多くの入力が必要です。入力すると、モバイルに悪影響を及ぼします。したがって…長いフォームはモバイルに吸い込まれます。
モバイルがコンバージョン率に与える悪影響を最小限に抑えたい場合は、フォームフィールドに次のいずれかの変更を加えてみてください。
ページのフォームフィールドの数を減らします
シンプルです。ユーザーが入力する必要のあるフォームフィールドの数を減らすと、知覚される作業負荷が大幅に減り、訪問者の摩擦を減らすのに役立ちます。
これが常に実行可能なオプションであるとは限りませんが、多くの場合、フォームフィールドは必要なために存在します。必要性の低いフィールド（姓、多分？）を減らしたり、複数のフォームフィールドを1つのフィールド（名前と姓）に結合したりします。たとえば）は大きな違いを生む可能性があります。
フォームを複数のステップに分割する
フォームを複数のステップに分割すると、モバイルでのコンバージョン率を高めるのに役立ちます。
たとえば、9つのフィールドがある場合、最初のステップに3つだけを入れたいと思うかもしれません。ユーザーがこれら3つに入力してフォーム送信ボタンを押すと、次のページに移動してさらにいくつかのフィールドに入力します。
これにより、フォームでの変換が最初は威圧感が少なくなるだけでなく、訪問者からリード情報を少しずつ収集できるようになり、最終的にフォームからバウンスした場合に役立ちます。フォームの最初の部分で少なくともメールを収集することをお勧めします。そうすれば、将来それらに売り込むことができます。
8.折りたたみ可能なセクション/アコーディオンを利用する
小さな画面でコンテンツがすべて1つの列にまとめられると、コンテンツははるかに長くなります。
これは、訪問者が探しているものをナビゲートして見つけるのが突然難しくなるため、モバイルの問題です。
これに対する洗練された解決策は、折りたたみ可能なコンテンツセクション（アコーディオンとも呼ばれる）を利用することです。
アコーディオンはコンテンツを保持するコンテナです。それらはヘッダーとしてのみ表示され、ユーザーがそれらをタップすると展開されます。これにより、訪問者は大量のコピーや画像をふるいにかけることなく、探しているコンテンツやトピックについてページをざっと読むことができます。
アコーディオンを組み立てるには、フロントエンドの作業を少し行う必要があるので、デザイナーや開発者を呼んでください。
まとめ
うまくいけば、これらのモバイルデザインのヒントが、モバイルでWebサイト（またはランディングページ）にアクセスする人々のユーザーエクスペリエンスを合理化する方法についての洞察を与えてくれます。
これらは見過ごされがちなことであり、デスクトップ以外のデバイスでのコンバージョン率の大幅な低下につながる可能性があります。
これらのヒントに従ってください。そうすれば、モバイル訪問者がサイトをより快適に利用できるようになり、コンバージョンにつながる可能性が高くなります。
幸運を！
著者について：Carloは、Wishpondのデジタルマーケティング担当者およびデザイナーです。コンテンツやA/Bテストを作成していないときは、音楽を作ったり、大量のコーヒーを飲んだり、スニーカーを購入したりしています。 TwitterとInstagram@carlonathanで彼をフォローしてください。
