現在、ほとんどの人がスマートフォンを持っており、モバイル向けコンテンツの存在はより重要なものとなっています。
今回は、モバイル向けWebサイトを構築する際に気を付けておきたいポイントについて解説します。
目次
気を付けておきたいポイント
アクセスした人の目的が達成されやすいデザイン
ユーザーにとって心地のよいサイトデザインとはどのようなものでしょうか？その一つに、アクセスした人の目的が達成されやすいデザインがあります。サイトを訪れた人にとって最も重要になることは、アクセスした目的が果たされるかどうかになるからです。例えば、行きたいレストランの場所を調べることや、好きなテーマのブログを読んで楽しむことがあります。ユーザーは、こうした目的のもとにサイトを利用し、反対に、目的が果たされないとあまりいい気持ちにはなりません。このように、サイトの利用者とって最も重要なことは目的が達成されることであり、そうしたデザインはユーザーにとって心地良いものと言えます。
カスタマージャーニーを利用したデザイン
モバイルサイトにおいて、カスタマージャーニーを想定することでユーザーにとって使いやすいサイトをデザインすることができます。カスタマージャーニーとはマーケティング手法の一つであり、商品やサービス購入までの過程を表しています。具体的には、商品を認知し、関心を持ち、購買意欲が現れ、購入するといった一連の流れや顧客の心理を視覚的に表すことなどがあります。顧客が商品購入までに経験する流れを理解することに役立つことになります。つまり、モバイルサイトにカスタマージャーニーを想定することで顧客の購入体験を理解し、ユーザーにとって使いやすいサイトを考えることができます。
段階を整理する
では、どのようにモバイルサイトにカスタマージャーニーを適用することができるのでしょうか？
最初に、サイトにおいて想定することができるカスタマージャーニーの段階を整理しましょう。アクセスした人の利用目的をより細かく把握するためです。例えば、レストランサイトにおけるカスタマージャーニーは、(1)レストランを知る（認知）、(2)いい雰囲気だと思う（関心）、(3)そこに行きたいと考える（購買意欲）、(4)実際に行く（購買行動）。以上のようになります。段階分けすることで、ユーザーのサイト利用目的がより明らかになりました。このように、カスタマージャーニーの段階を整理することでユーザーの目的を把握しましょう。
各段階をユーザーが簡単にたどれるようにする
次に、想定したカスタマージャーニーの段階をユーザーが簡単に辿れるような設計をしましょう。サイトを使いやすくするためです。たとえば上記の例においては、(1)レストランを知るための簡単な説明ページをトップに設定し認知してもらう、(2)実際のレストランに忠実で魅力的なデザインを採用し関心を持ってもらう、(3)おいしそうな料理の写真やリーズナブルな価格を表示し購買意欲を持ってもらう、(4)アクセスマップと予約フォームを用意し購買行動を起こしてもらう。以上のように設計することで、ユーザーは目的を達成しやすくなります。つまり、想定したカスタマージャーニーを利用し各段階に簡単にたどれるようにすることでサイト利用者がより心地よく使えるようにすることができます。
さらに、ユーザーがサイトに対して起こすアクションを少なくすることも大切です。サイトの情報をより簡潔にし、サイトの利用者にとって便利にするためです。具体的には、(1)レストランを探している人が検索エンジンからサイトにアクセスする、(2)メニューを確認する、(3)予約フォームから予約する、とすることができます。最低限のアクションを求め簡潔に目的を達成できるようにすることで、より便利になっています。このように、ユーザーがサイトに対して起こすアクションを少なくすることで、より心地よいサイトになります。
以上、アクセスした人にとって心地のよいサイトとはユーザーの目的が達成されやすいデザインであり、そのためにカスタマージャーニーを利用することが有効であることを説明しました。
ウェブサイトの有効性を測定するには
サイトの有効性は、ユーザーの一番の目的がどのくらい簡単に達成できるかを基準に測定することができます。 参考として、モバイルのショッピングサイトを訪れたユーザーが最も重視することは使いやすさであることが分かっています。
目的を行いやすくし、目的をスムーズに達成させよう
ユーザーが持っていると想定される目的に優先順位をつけることで、一番重視されるべき目的を考えましょう。その目的が達成されやすいモバイルサイトを構築することで、ユーザーはスムーズにサイトを使うことができます。
デザインを工夫し、使いやすくしよう
デザインを工夫することもサイトを使いやすくするために大切です。
デザインの一貫性
サイト全体のデザインや印象が一貫するようにしましょう。
操作感の統一
サイト全体の操作や使い勝手を統一するようにしましょう。
様々なデバイスに利用できるデザインを選択しよう
レスポンシブデザインとは
レスポンシブデザインとは、あらゆるデバイスにおいても同じURLとコードを使って表示できるデザインのことです。例えば、PC・タブレットやスマートフォンのデバイスのどれにおいても同じURLから表示できるウェブサイトのことです。
レスポンシブデザインを使うことで、デバイスそれぞれにサイトを用意するよりも管理が簡単になります。
レスポンシブデザインを実装するには
よりよいWebデザインを作るための基礎は4つあります。
速度、統一性、信頼性、そして魅力のあるコンテンツです。
(1)速度
サイトの読み込みが遅いと、ユーザーは不快に思います。速度の速いサイトを作るようにしましょう。
(2)統合性
デバイスに対応していると感じられないサイトは、いいサイトと思われにくいです。
ウィンドウの遷移などを少なくし、モバイルの操作性に対応しているようにしましょう。
(3)信頼性
セキュリティの欠陥や、また遅い接続や断続的な接続をなくすようにしましょう。
(4)魅力のあるコンテンツ
楽しい操作性や美しいデザインを提供しましょう。
・優れたモバイル サイトデザインの条件
(1)サイト内ナビ
・重要なタスクは、スクロールせずに見える最初の位置に配置しましょう。
・メニューを設置するときは、項目を絞り短く分かりやすくしましょう。
・ホームページに簡単に戻れるようにしましょう。ロゴをタップすると戻れるなどです。
・サイト内で最も目立つ場所に広告を表示しないようにしましょう。ユーザーが不快に思うだけでなく、検索ランキングが下がる可能性もあります。また、広告は簡単に消せるようにしましょう。
(2)サイト内検索
・ユーザーの探している情報がすぐ見つけられるよう、すぐ目に入る場所にサイト内検索ボックスを表示しましょう。
・サイト内検索では、不要な情報ができるだけ表示されないようにしましょう。
・検索結果を絞り込むためのフィルタを分かりやすい場所に用意しましょう。
・ユーザーの目的が幅広いと想定される場合には、検索ボックスを表示する前に質問をすることでより適切な情報を提供しましょう。
(3)ショップとコンバージョン
・登録しなくても内容を見れるようにしましょう。早すぎる段階で登録が必要になると、ユーザーは不快に感じます。
・アカウントを作る必要がなければ、ゲストとして購入ができるようにしましょう。
・アカウントがあるユーザーは、既に入力したことがある情報を繰り返し使えるようにしましょう。
・クリックするだけで、確認表示なく電話を掛けられるようにしましょう。
・ユーザーの別の端末でも処理できるようにしましょう。リンクをSNSで共有できることや、メールで自分宛てに送信できると便利です。
(4)フォーム入力
・ENTERを押すと自動的に次の入力フィールドに移るようにしましょう。
・入力タイプ（キーボードの形）が適切なものになるようにしましょう。
・日付の選択には、カレンダーを表示しましょう。
・誤った入力のあるフォームは、入力した段階でリアルタイムにエラーを確認できるようにしましょう。
・自動入力を活用し、ユーザの負担を減らしましょう
(5)ユーザビリティ
・サイトの一部のみでなく、全体をモバイル版にしましょう。一部のみがモバイル版になっているサイトは、すべてがPC版のサイトよりも使いづらいです。
・ピンチ操作のいらないサイトにしましょう。
・必要な画像は拡大できるようにしましょう。商品画像など、詳細が確認できると便利です。
・必要な画面の向きをユーザーに知らせましょう。また、どの向きでも重要な操作ができるようにしましょう。
・新しいウィンドウは開かないようにしましょう。また、必要な情報をユーザーが別ウィンドウで探す必要がないようにサイト内で提供しましょう。
・PC版がサイトの完全版であり、モバイル版がそうでないと思われる表現は避けましょう。
・ユーザの位置情報が必要になるときは、必要な理由を明示しましょう。