このページの本文へ

スマートフォン対応サイトを設計するときのノウハウ (2/3)

2010年08月18日 17時05分更新

文●たにぐちまこと/H2O Space.

  • この記事をはてなブックマークに追加
本文印刷

ゴール設計は来店や電話を重視する

 PC向けのサイトでは、入力フォームによる問い合わせや予約などをWebサイトのゴールに設定することが多くあります。しかし、PCに比べてキーボードが使いにくいスマートフォンの場合、長文の入力を伴うフォーム入力をサイトのゴールにするのは困難です。そのため、PCサイトとは違ったゴール設計が必要になります。具体的には、電話による問い合わせ、地図やクーポンを使ったリアル店舗への誘導、Twitterやメールを使ったURLの共有などが挙げられます。

電話による問い合わせ

 スマートフォンは電話なので、電話を使った問い合わせに誘導できます。iPhone/Androidでは、携帯サイトと同様にワンタップで電話をかけられる「teltoリンク」が利用できるので、ページ内の目立つ位置に電話番号を表示して利用を促しましょう。

目立つ位置に電話番号を表示し、電話による問い合わせを促す(画面は「保険市場」)

地図による店舗への誘導

 小売店や飲食店など、実際にお客様に店舗へ訪問してもらうのが目的の場合には、地図を積極的に活用して来店を促すのがよいでしょう。iPhone/Androidには、Googleマップのアプリケーションが搭載されているので、わざわざ地図の画像を制作しなくてもアプリと連携するだけで詳細な地図を提供できます。あわせて、電話による問い合わせもできるようにすると効果的です。

小売店などリアル店舗がある場合にはGoogleマップへのリンクを設置し、来店を促す(画面は「三井のリハウス」)

クーポンの提供による店舗への誘導

 リアル店舗への誘導が目的であれば、地図と合わせてクーポンを用意するのもよいでしょう。スマートフォンサイト内にクーポンページを用意し、精算時にクーポン画面を提示することで割引を受けられるようにします。クーポンによる集客効果を期待できるだけでなく、Webサイトの効果測定を簡単にできるメリットがあります。

 さらにJavaScriptを使うと、時間帯に合わせてクーポンの割引率を変えたり、ランダムでサービスの内容を変えたりするなどして、お客様を楽しませることもできます。

飲食店などであればクーポンページを用意し、持参したユーザーに対する特典を提供できる(画面は「ぐるなび」)

URLをPCと共有する

 ネットショップなど、スマートフォンだけでは完結しにくいタイプのWebサイトもあります。PCもアクティブに使うユーザーが多いスマートフォンでは、必ずしも無理にスマートフォンサイト内だけで完結させる必要はありません。

 そこで、スマートフォンサイトではPCとURLを共有することをゴールとしてしまうのもひとつの方法です。この場合、「mailtoリンク」を設置して、スマートフォンに内蔵されたメールソフトを起動し、URLをメールで送信できるようにします。

URLをメールで共有し、PCでじっくり閲覧できるようにする(画面は「Amazon.co.jp」)

TwitterでURLを共有する

 Twitterと連携してクチコミ効果につなげる方法もあります。サイト内の各ページに「つぶやく」ボタンを設置し、「つぶやいてくれたら割引率アップ」などとクーポンと組み合わせれば、より効果を高められるでしょう。

Twitterの「つぶやく」ボタンを設置し、クチコミ効果を狙う(画面は「Yahoo!ニュース)

ブックマーク、ホーム画面への追加

 メディアサイトなどの情報が頻繁に更新されるサイトの場合は、アクセスアップにつながるリピーターの獲得をゴールとする方法もあります。

 ブラウザーのブックマーク機能に加えて、iPhone/Androidにはブックマークよりもアクセスしやすい「ホーム画面」の存在があります。ホーム画面に登録したWebサイトは1タップですぐにアクセスできるので、ユーザーにホーム画面への登録を促すのも手です。たとえば、Google Buzzでは検索サイトからアクセスした場合に、ホーム画面への登録を促すふき出しが表示されます(こうした演出にはJavaScriptを使います)。

ホーム画面への登録を促すふき出しでリピーターを増やす(画面はGoogle Buzz)

 また、iPhoneの場合は「WebClipアイコン」と呼ばれるホーム画面用のアイコンを設定できます。アイコンを用意することで、ユーザーにより愛着を持って利用してもらえるでしょう。

ホーム画面には「WebClipアイコン」を配置できる

そのほかのゴール

 そのほか、iPhone/Android向けアプリの購入ページ、壁紙、音楽のダウンロードページなど、さまざまなゴールが考えられます。Webサイトの目的に合わせてゴールを設定し、導線を設計しましょう。

階層は浅く、1ページは長く設計する

 3G回線下で利用されることも多いスマートフォンは、高速なネット回線が当たり前のPCのようにWebページ間をさくさく移動する、といった使い方は想定できません。また、移動中など、Webサイトを閲覧中に電波状況が不安定になり、続きのページが読めなくなることもあります。

 そこで、できるだけ一度の操作で多くの情報を読み込み、操作性を損なわないように工夫しましょう。たとえば、livedoorでは、ニュース記事やブログ記事のランキングなど、見出し情報のほとんどすべてを読み込んで1ページ内に表示しています。高さが4000ピクセル以上(縦向きの場合)もある非常に長いページですが、各エリアの右上にページ内を移動するリンクボタンを設置し、ストレスなく各コーナーを流し読みできるようになっています。

スマートフォン向けの「livedoor」トップページ。高さが4000px以上もある超縦長のページ

 このように、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 商品一覧ページにおいて

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く