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

　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ページ内に情報をできるだけ収めて、階層を浅くするページの作り方は、携帯サイトに通じるものがあります。以下の表のように、大手サイトのスマートフォンサイトは開閉パネルなどのユーザーインターフェイスを使って、長いページを快適に閲覧できるようにしています。

スマートフォンサイトの画面設計

　Webサイトの構造設計ができたら、次は各ページのレイアウトを決める画面設計です。ワイヤーフレームと呼ばれる線画だけで構成された図を作成し、この後の「デザイン作成」がスムーズに進められるようにします。ここでのポイントをいくつか紹介します。

PCサイトと同様、ワイヤーフレームを作成して画面設計する

正確な画面サイズを把握する

　前回説明したとおり、iPhoneの画面サイズは320×480ピクセルですが、常に画面のすべての領域を利用できるわけではありません。Safariを起動した直後の段階では125ピクセルがアドレスバーとツールバーに利用されており、実際にWebページの表示に使える領域は320×355ピクセルしかありません。さらにキーボードを表示すると295ピクセルがキーボードに使われるため、Webページの表示領域は185pxしか残りません。

iPhoneのSafariの画面領域。アドレスバーやツールバーを除くと実際に使える領域は狭い

　Android端末は機種によって異なりますが、HTC Desireの場合は以下のような仕様になっています。

HTC Desireの画面領域。iPhoneと同じくアドレスバーなどの領域を把握しておこう

　特に広告バナーなどを配置する場合は、スクロールせずに表示される「ファーストビュー」の領域に収める必要があるため、ターゲットとする端末の有効表示領域を把握してページを設計する必要があります。

画面の向きの初期状態

　ほとんどのスマートフォンは、本体を傾けることで画面の縦横の向きを変えられるため、スマートフォンサイトはどちらの向きでも正しく表示されるように作る必要があります。

　では、ユーザーがWebサイトを閲覧するときの「はじめの向き」は縦・横のどちらが多いでしょうか？　基本的には「縦」が標準と考えてよいでしょう。iPhoneや多くのAndroid端末のホーム画面には横向きがなく、ブラウザーを起動した直後の画面は縦向きになっています。そのため、ほとんどのユーザーは縦向きでWebサイトを閲覧することが多いと考えられます。

　auから発売された「IS01」のように横画面しかない端末もあり、悩ましい問題ではありますが、画面設計は「縦」を基本に考えるのがよいでしょう。

長いページを使いやすくする工夫

　iPhone/Androidのブラウザーにはスクロールバーが存在せず、操作を指でするため、長いページ内を一気に移動するのは困難です（iPhoneの場合は画面の一番上をタップするとページの先頭に戻れますが、あまり知られていないようです）。そこで、次のような工夫をするとよいでしょう。

・ページ内リンクを配置する

　前に紹介したlivedoorのように、ページ内リンク要素を配置することで、ページ内の他の箇所へスムーズに移動できるようになります。

livedoorではページ内のコーナーを移動するリンクボタンが設置されており、各項目を順に閲覧できる

・折りたためるようにする

　JavaScriptを利用して、折りたためるパネルでスペースを節約しながら、読み込み頻度を減らせます。たとえば、Amazonではすべての商品の「購入するボタン」を折りたたんでおいて、必要に応じて表示できるようにしています。

Amazon.co.jpでは商品一覧に伸縮するパネルを採用しており、ボタンをタッチすると詳細な説明が格納／展開する

・タブで区切る

　複数のジャンルがあるコンテンツをジャンルごとに「タブ」で区切って表示します。タブをタップするとページ遷移なしでコンテンツが切り替わり、限られたスペースで多くのコンテンツを展開できます。

Yahoo! JAPANのトップページはタブによってコンテンツを切り替えるユーザーインターフェイスを採用。ページ遷移なしで多くの情報を得られる

　これらのテクニックを利用して、1ページの長さと収めるコンテンツ量を調整していきます。

タップしやすくするための工夫

　ほとんどの操作を指で済ませることが多いiPhone/Androidでは、小さなリンク要素や文章内のリンクは非常にタップしにくく、誤操作やユーザーのストレスを招く原因となります。そこで、次のような手段を検討しましょう。

・大きなボタンを配置する

　mixiのログイン画面のように、画面の幅いっぱいの大きなボタン要素を配置します。

mixiのログイン画面。画面幅いっぱいにログインボタンを表示してタップしやすくしている

・リストにする

　複数のリンクが並ぶ場合には、NAVERのようにリストにするとよいでしょう。今後紹介するCSSのテクニックを用いれば、リスト内の余白部分やリストの横幅いっぱいまでをリンク領域にできます。

NAVERの画面。縦幅の広いリストで項目を並べている。リストの各項目全体がリンク領域になっておりタップしやすい

・アイコンにする

　リストでは地味になる場合は、iPhoneのホーム画面のようにアイコンを並べてコンテンツを選んでもらうインターフェイスもあります。nanapiではアイコンとリストを組み合わせて配置しています。

nanapiの画面。iPhoneユーザーを意識してか、アイコンでコンテンツを選べるようにしている

文字サイズはPCサイトよりも大きく

　移動中に利用することも多いスマートフォンでは、細かい文字が実際のサイズ以上に読みづらく感じることがあります。拡大ボタンをタップしたり（Android）、ダブルタップやピンチしたり（iPhone）すると拡大できますが、実際のところ拡大／縮小操作をしながらの閲覧はなかなか面倒です。

　そこで、本文の文字サイズはPCよりも少し大きめの14～15pt程度に設定して画面を作るのがよいでしょう。場合によってはPCサイトよりも文章の量を減らすなどの工夫が必要になることもあります。

iPhoneでの文字の大きさ。本文は14pt～15pt程度を目安に設定しよう

◆

　スマートフォンサイトの設計では、小さな画面に各パーツを大きく配置しなければならず、やりくりが難しくなります。今回紹介した手法を参考にして、うまくスペースを節約しながら操作性のよいサイトを設計しましょう。

　次回はデザイン制作におけるポイントを解説します。