ゴール設計は来店や電話を重視する
PC向けのサイトでは、入力フォームによる問い合わせや予約などをWebサイトのゴールに設定することが多くあります。しかし、PCに比べてキーボードが使いにくいスマートフォンの場合、長文の入力を伴うフォーム入力をサイトのゴールにするのは困難です。そのため、PCサイトとは違ったゴール設計が必要になります。具体的には、電話による問い合わせ、地図やクーポンを使ったリアル店舗への誘導、Twitterやメールを使ったURLの共有などが挙げられます。
電話による問い合わせ
スマートフォンは電話なので、電話を使った問い合わせに誘導できます。iPhone/Androidでは、携帯サイトと同様にワンタップで電話をかけられる「teltoリンク」が利用できるので、ページ内の目立つ位置に電話番号を表示して利用を促しましょう。
地図による店舗への誘導
小売店や飲食店など、実際にお客様に店舗へ訪問してもらうのが目的の場合には、地図を積極的に活用して来店を促すのがよいでしょう。iPhone/Androidには、Googleマップのアプリケーションが搭載されているので、わざわざ地図の画像を制作しなくてもアプリと連携するだけで詳細な地図を提供できます。あわせて、電話による問い合わせもできるようにすると効果的です。
クーポンの提供による店舗への誘導
リアル店舗への誘導が目的であれば、地図と合わせてクーポンを用意するのもよいでしょう。スマートフォンサイト内にクーポンページを用意し、精算時にクーポン画面を提示することで割引を受けられるようにします。クーポンによる集客効果を期待できるだけでなく、Webサイトの効果測定を簡単にできるメリットがあります。
さらにJavaScriptを使うと、時間帯に合わせてクーポンの割引率を変えたり、ランダムでサービスの内容を変えたりするなどして、お客様を楽しませることもできます。
URLをPCと共有する
ネットショップなど、スマートフォンだけでは完結しにくいタイプのWebサイトもあります。PCもアクティブに使うユーザーが多いスマートフォンでは、必ずしも無理にスマートフォンサイト内だけで完結させる必要はありません。
そこで、スマートフォンサイトではPCとURLを共有することをゴールとしてしまうのもひとつの方法です。この場合、「mailtoリンク」を設置して、スマートフォンに内蔵されたメールソフトを起動し、URLをメールで送信できるようにします。
TwitterでURLを共有する
Twitterと連携してクチコミ効果につなげる方法もあります。サイト内の各ページに「つぶやく」ボタンを設置し、「つぶやいてくれたら割引率アップ」などとクーポンと組み合わせれば、より効果を高められるでしょう。
ブックマーク、ホーム画面への追加
メディアサイトなどの情報が頻繁に更新されるサイトの場合は、アクセスアップにつながるリピーターの獲得をゴールとする方法もあります。
ブラウザーのブックマーク機能に加えて、iPhone/Androidにはブックマークよりもアクセスしやすい「ホーム画面」の存在があります。ホーム画面に登録したWebサイトは1タップですぐにアクセスできるので、ユーザーにホーム画面への登録を促すのも手です。たとえば、Google Buzzでは検索サイトからアクセスした場合に、ホーム画面への登録を促すふき出しが表示されます(こうした演出にはJavaScriptを使います)。
また、iPhoneの場合は「WebClipアイコン」と呼ばれるホーム画面用のアイコンを設定できます。アイコンを用意することで、ユーザーにより愛着を持って利用してもらえるでしょう。
そのほかのゴール
そのほか、iPhone/Android向けアプリの購入ページ、壁紙、音楽のダウンロードページなど、さまざまなゴールが考えられます。Webサイトの目的に合わせてゴールを設定し、導線を設計しましょう。
階層は浅く、1ページは長く設計する
3G回線下で利用されることも多いスマートフォンは、高速なネット回線が当たり前のPCのようにWebページ間をさくさく移動する、といった使い方は想定できません。また、移動中など、Webサイトを閲覧中に電波状況が不安定になり、続きのページが読めなくなることもあります。
そこで、できるだけ一度の操作で多くの情報を読み込み、操作性を損なわないように工夫しましょう。たとえば、livedoorでは、ニュース記事やブログ記事のランキングなど、見出し情報のほとんどすべてを読み込んで1ページ内に表示しています。高さが4000ピクセル以上(縦向きの場合)もある非常に長いページですが、各エリアの右上にページ内を移動するリンクボタンを設置し、ストレスなく各コーナーを流し読みできるようになっています。
このように、1ページ内に情報をできるだけ収めて、階層を浅くするページの作り方は、携帯サイトに通じるものがあります。以下の表のように、大手サイトのスマートフォンサイトは開閉パネルなどのユーザーインターフェイスを使って、長いページを快適に閲覧できるようにしています。
サイト名 | 縦幅※1 | 縦幅(開閉パネル展開時)※1 |
---|---|---|
Yahoo! JAPAN | 1685px | ― |
楽天 | 908px | 2006px |
NAVER | 1340px | 2844px |
Amazon.co.jp | 713px | 2094px※2 |
asahi.com | 2038px | ― |
※1 2010年8月17日の実測値。実際のピクセル数は見出しの文字数などで変動する ※2 商品一覧ページにおいて |