最適化の理由

PC サイトをスマートフォンで表示できるというだけでは、十分なスマートフォン対応とは言えません。スマートフォンサイトはスマートフォンユーザーのニーズを念頭に置き、小さな画面で見やすいように設計されています。スマートフォン対応のサイトなら、スマートフォンユーザーにアプローチしてコンバージョンを増やすことができます。

スマートフォンの詳細

スマートフォンが重要な理由

あなたの顧客は既にスマートフォンに移行しているのでは？

出典：IDC Japan 2012
ユーザーは、あらゆる場所でスマートフォンを利用している。

出典：Our mobile planet 2012
スマートフォンで、ユーザーは、オンラインに常に接続している。

出典：Our mobile planet 2012
外出先や旅先で、ユーザーは近くのお店やサービスを探している。

出典：Our mobile planet 2012
スマートフォンは、買い物をするユーザーの強い味方になっている。

出典：Our mobile planet 2012

スマートフォンのベストプラクティス 10 か条

スピードを重視
多くのスマートフォンユーザーは時間に追われており、 1 日のちょっとした時間を活用してオンライン上のタスクをこなします。こうした多忙なユーザーを念頭に置きながら、サイトの読み込み時間を短縮し、テキストを読みやすくしましょう。
- スマートフォンユーザーがまず必要とするコンテンツや機能を優先しましょう。それには、デスクトップサイトのアクセスデータを調べ、スマートフォンユーザーがサイトで何をしているかを調べしょう。
- テキストは長文を避け、箇条書きを使って読みやすく構成しましょう。
- 画像は圧縮してサイズを抑え、サイトの読み込みを速くすることをおすすめします。
ユーザー登録／購買プロセスの簡略化
どのような種類のサイトであっても、スクリーン上のキーボードで、望む操作を容易に行えるようにする必要があります。商品の購入や問い合わせが簡単にできるようにしましょう。
- 表示する情報は、コンバージョンの達成につながるもの（商品の詳細情報など）に絞りましょう。
- 手続きの完了に必要なステップは最小限にしましょう。
- 申し込みなどの入力フォームは短くし、入力欄はできる限り少なくしましょう。
- チェックボックス、リスト、スクロールメニューなどを用意してデータ入力を容易にしましょう。
- 電話番号には必ず Click-To-Call 機能を設定しましょう。
シンプルな操作
操作がわかりにくいサイトを喜ぶユーザーはいません。操作をわかりやすくし、ユーザーが探している情報を簡単に見つけられるようにしましょう。大規模なサイトや複雑なサイトでは検索機能が役立ちます。
- スクロール操作を最小限に抑え、縦方向に限定しましょう。
- メニューの階層構造を明確にし、ロールオーバーの使用は避けましょう。
- [戻る] ボタンや [ホーム] ボタンをわかりやすく設置して、階層間の移動を容易にしましょう。
- 操作のためのリンクは 1 ページあたり 7 個以内に抑えましょう。
- 複雑な構成のサイトの場合、目立つ場所に検索ボックスを配置しましょう。
地域性を重視
スマートフォンユーザーが求める情報は、最寄りのガソリンスタンドや営業中のレストランといった地域情報です。ユーザーに見つけてもらい、来店してもらうために役立つ機能を用意しましょう。
- トップページに住所や店舗検索機能を掲載しましょう。
- 地図やルート案内を含めましょう。可能な場合は GPS を活用し、ユーザーの所在地に合わせてパーソナライズした情報を提供しましょう。
- 付近の店舗においての在庫をユーザーが確認できるようにしましょう。
親指での操作を意識
スマートフォンの操作上、特に親指が多く使われます。手の大きいユーザーでも簡単に操作できるようにサイトを設計しましょう。
- ボタンは大きめのサイズにして、中央に配置します。ボタン同士の間には十分なスペースを確保し、クリックミスを防止しましょう。
- 小さいボタンはパディング設定などで余白を調整し、クリック可能な面積を大きく確保しましょう。
- チェックボックスは、テキストの部分もクリックできるようにして操作しやすくしましょう。
シームレスな利便性を実現
今やユーザーは 1 日の間にさまざまな場所から何通りもの方法でインターネットに接続します。デスクトップサイトの機能は可能な限りスマートフォンサイトでも提供し、デスクトップとスマートフォン上でシームレスで利便性の高いサイト体験を実現させます。
- よく検索される内容や、ショッピングカートの中身を保存できるようにしましょう。
- サイトの主要な機能を、デスクトップやスマートフォンなど、可能な限りすべての端末で提供するようにしましょう。
- 商品やサービスについては、どのサイトでも同じ情報を提供しましょう。
読みやすさを考えたデザイン
スマートフォン向けに構築されたサイトは、ユーザーの目を疲れさせることなくメッセージを伝えることができますので、読みやすさを意識しましょう。スマートフォンの使用環境が、照明の暗い場所にある可能性も考慮して、サイトをデザインします。
- 背景とテキストとのコントラストを適度に持ちましょう。
- コンテンツは画面にきちんと収まるようにレイアウトし、ピンチズームをしなくても読めるようにしましょう。
- コンテンツを詰め込みすぎず、何も表示しないスペースも十分に残しましょう。
- リンクやボタンの重要度がわかるようサイズと色を工夫しましょう。
- ボタンには立体エフェクトやシャドウイングを使用しましょう。
スマートフォンサイトへのリダイレクト機能
スマートフォンサイトへのリダイレクト機能とは、スマートフォンを使用しているユーザーを自動的に判別し、スマートフォン対応サイトに誘導する機能のことです。サイトにリダイレクトコードを実装し、スマートフォンからアクセスするユーザーにはスマートフォンに適したサイトを表示するようにしましょう。
- デスクトップサイトに戻るオプションを用意すると同時に、スマートフォンサイトにも簡単に戻れるように工夫しましょう。
- 次回アクセス時に表示するサイトをユーザーが選べるようにしましょう。
- リダイレクト先のページには住所や店舗検索機能などの主要な情報を表示しましょう。
アクセス性の確保
スマートフォンサイトは、すべての端末で動作し、画面の縦横の向きを問わないのが理想的です。
- Flashは一部の端末では動作しません。替わりの技術を活用しましょう。
- インタラクティブな機能やアニメーションは HTML5 を使って実現することが可能です。
- 画面が縦長でも横長でも対応できるようなサイトを作成しましょう。
- ユーザーが画面の向きを変えても表示箇所がずれないようにします。
ユーザーの声を汲み取り、分析し、最適化を継続的に実施
優れたスマートフォンサイトはユーザーのニーズを的確に反映したデザインになります。対象ユーザーの声に基づいて設計されているのです。デスクトップサイトのユーザーに「スマートフォンサイトに求めるものは何か」を尋ね、テストと最適化のプロセスを継続的に実施します。
- アクセスデータを活用し、サイトがどのように使われているかを調べましょう。
- 可能であれば（特に複雑なサイトの場合）サイトの公開前にテストを行い、公開後にユーザーからのフィードバックを収集しましょう。
- このプロセスを繰り返し行い、調査に基づいて継続的にサイトを改善していきましょう。