この記事では、ウェブサイトをモバイル向けに最適化するためのガイドをご紹介します。
この記事は全 2 部シリーズのパート 1 です。パート 2 では、広告をモバイル向けに最適化するためのガイドをご紹介します。
はじめに: モバイルの重要性について
ウェブサイトはモバイル デバイスで適切に動作することが重要です。まだウェブサイトのモバイル対応を行っていない場合は、ぜひ実施してください。次のような理由から、モバイルでビジネスの存在感を高めることは極めて重要になります。
- モバイル向けのサイトは検索結果の上位に表示される
- Google 検索のうち、モバイル検索が占める割合は半分以上
- ほとんどの広告主様は、サイトのトラフィックの大半がスマートフォン ユーザー
- モバイル向けになっていないサイトでは、ユーザーが直帰する可能性がモバイル向けサイトの 5 倍以上
ウェブサイトはモバイル向けになっていますか？
ユーザーの立場になって、スマートフォンで御社のウェブサイトを開いてみましょう。読み込みにかかる時間はどれくらいですか？求める情報を簡単に見つけることができますか？
モバイル デバイスでウェブサイトにアクセスするユーザーは、求める情報をすぐに必要としています。御社のビジネス情報をすばやくチェックして、必要かどうかを判断します。ウェブサイトでの体験は、そのビジネスに対するユーザーの印象と買い物に至る可能性を大きく左右します。
ウェブサイトをモバイル向けに設計するには、必要とされる情報にユーザーをすばやく誘導できる、シンプルで明確なナビゲーションを重視しましょう。
効果的なモバイルサイトの構成要素をご紹介します。
サイトの読み込みは速いですか？ページの読み込み時間が 3 秒を超えると、半数近くのユーザーがそのモバイルサイトを離れてしまいます。ユーザーがすばやく簡単にウェブサイトを移動できるよう、読み込み時間（ウェブページが画面に表示されるまでの所要時間）はできるだけ短くしましょう。
操作は簡単ですか？モバイルの小さな画面では、求める情報が見つかりにくい場合があります。情報を探してページの移動や拡大を行う回数が増えるほど、ユーザーはストレスを感じてサイトを離れやすくなります。サイトのメニューをシンプルにして、すべての要素を拡大せずに読めるようにすることで、ユーザーの求める情報が簡単に見つかるようにしましょう。
すぐに行動に移せますか？モバイルサイトでは、お店に電話する、商品を検索する、商品を購入するといった一般的な作業を、ユーザーが簡単に実施できる必要があります。フォーム送信やトランザクションの達成までの手順は、できるだけ最小限に抑えましょう。
モバイルサイトの読み込み速度をテストして、改善する方法をご確認ください。
具体的なビジネス目標を念頭にサイトを設計していますか？
読み込みが早く、操作性の高いモバイルサイトであっても、実際に効果的かどうかは、ビジネスの成果につながっているかどうかで決まります。
ウェブサイトをモバイル向けに最適化する方法を見極めるには、お客様にとって最も重要なビジネス目標を考えます。ウェブサイトでユーザーに期待する行動は何ですか？特定の商品の購入ですか？問い合わせフォームへの入力ですか？ウェブサイトでユーザーに期待する行動を明確にすれば、実際にそうした行動が達成される可能性を高めることができます。
ご自身のマーケティング目標に基づいて、サイトでユーザーに期待する行動が達成されるように改善を加えていきましょう。ここでは、目標別に最適化案をご紹介します。
オンラインでの売り上げを伸ばす
- サイトの操作を簡単にします。サイトのメニューをシンプルにして、拡大しなくてもすべての要素が読めるようにしましょう。
- 情報を確認しやすくします。商品画像を拡大できるようにして、購入前に細部まで確認できるようにします。
- 購入しやすくします。「今すぐ購入」ボタンなどの重要な要素は、常に目立つ場所に配置します。可能な場合は、ユーザーが登録したアカウント情報を使って、データ入力の項目を減らしましょう。
- パソコンで操作を再開できるようにします。ユーザーがスマートフォンからパソコンに切り替えても、内容を引き継いだショッピング カートで購入を完了できるようにします。
- Click-to-Call のボタンやリンクを使用します。番号を覚えたり拡大して見なくても、電話がつながるようにします。
- メニュー項目を減らします。お客様のビジネスに問い合わせる場合は電話が最適なことを明確にします。サイトのすべてのページから、電話番号やボタンをクリックして電話をかけられるようにします。
- 重要な項目に焦点を絞ります。宣伝や説明よりも、電話で問い合わせる方法が目立つようにします。
- フォームはシンプルにします。簡単にフォームにアクセスできるようにして、入力項目を減らし、親指で操作できるようにします。
- スクロールやズームの必要性を減らします。フォームはスマートフォンの画面サイズに収めます。スクロールやズームが必要になると、入力ミスが起こりやすくなります。
- 入力項目を工夫します。フォームは情報が入力しやすく、間違いがすぐにわかるように工夫します。入力内容の不備は、検証機能を使ってその場で示しましょう。
- 何よりも来店を促します。実店舗への来店がユーザーにとって最もメリットがあることを明確にします。サイトのすべてのページに地図や所在地情報のボタンやアイコンを表示して、タップすれば店舗の住所と営業時間がわかるようにします。
- コンテンツの量を抑えます。サイトの操作を合理化し、来店しようと思わせるために必要な情報だけを表示します。
- 重要な項目に焦点を絞ります。宣伝によって実店舗への来店を促しながら、過度の宣伝で操作性を損なわないようにします。
- 操作を簡単にします。シンプルなメニューと大きな文字で、購入前の下調べがしやすいようにします。スマートフォンの画面は小さいため、メニュー項目を減らして目的の項目が見つかりやすくします。
- デバイスを切り替えても作業を継続できるようにします。購入までの時間が長いほど、購入に至るまでに複数のデバイス（パソコン、タブレット、スマートフォン）で繰り返し下調べが行われる可能性が高まります。どのデバイスに切り替えても作業を再開できるよう、ユーザーの選択内容を保存しましょう。
- トップページのリンクを表示します。調べ物が見つからない場合には、いつでもトップページに戻ってやり直せるようにします。
ウェブ デベロッパーとの連携
ウェブサイトのモバイル対応を行うにはさまざまな手法がありますので、サイトの設計や変更を行う際には、ウェブ デベロッパーと連携して適切な方法を見極めましょう。
ほとんどの企業はウェブサイトにレスポンシブ デザインを導入し、さまざまな画面サイズ、解像度、デバイスに柔軟に適応できるレイアウトを構築しています。一方、パソコンとモバイルでウェブサイトのバージョンを分ける方法を採用している企業もあります。ぜひ御社のウェブ デベロッパーと連携し、御社のビジネス、ウェブサイトのニーズ、ウェブ デベロッパーのリソースを考慮して、最も合理的な方法を見極めるようにしてください。