サイトをスマートフォン対応させる時に大切なことは何でしょうか？
いかにナビゲーションを分かりやすくするかでしょうか、遅い回線に合わせて読み込み時間を短縮することでしょうか、それとも他の何かでしょうか。
どんな形を選ぶとしても、スマートフォン上で使いやすく・見やすいウェブサイトにすることは大事なことですよね。なぜなら、平均ページビューや直帰率や離脱率やそしてコンバージョンレートなど、重要な指標にダイレクトに影響してくるからです。
しかし、ただ横幅をフレキシブルにして480px当たりを目安にする…といったようなシンプルな話でもありません。
では何を着にすればよいのでしょうか？
そこで今回は、どのあたりを押さえておけばいいの？という内容です。
目次
サマリー
参考事例と結果
海外のマーケサイト“ConversionXL”に「How Responsive Design Boosts Mobile Conversions」という記事がありました。
モバイル対応をレスポンシブ・デザインで行った所どれくらい効果が出たかという事例が載っています。レスポンシブ・デザインは、Googleもモバイル対応して推奨しているもので、今最もポピュラーなスマートフォン対応手法なのかなと思います。
もちろん、端末ごとにサイトを切り替えたり、CSSの読み込みだけを変える方法などがいい場合もあります。その辺りはケースバイケースですね。予算と納期とECかそうじゃないか、運用体制などで最適解は変わってきます。
その上での事例です。
1. O`Neill Clothingの例
O`Neill Clothingの事例は結構色々な所でみる事例です。ECサイトですが、レスポンシブデザインによってモバイル対応を行った結果
【iPhone/ iPad】
- コンバージョン数：65.71%アップ
- トランザクション数：112.5%アップ
- 収益：101.25%アップ
【Android】
- コンバージョン数：407.32%アップ
- トランザクション数：333.33%アップ
- 収益：591.42%アップ
という結果になったそうです。Androidの方がアップ率が高いのは、iPhoneに比べてAndroidは、PC向けサイトの操作性が悪いということかもしれません（想像です）
2.Skinny Tiesの例
こちらは、1971年創業のネクタイ販売会社ですがスマートフォン対応させた結果
- iPhone経由の売上が377.6%アップ
- 前デバイスからの売上としては42.4%アップ
- iPhoneからのコンバージョンレートが71.9%アップ
- トータルとしてのコンバージョンレートは13.6%アップ
- 直帰率は23.2%ダウン（改善）
という、こちらも大きな成果につながっています。
しかし、ただスマートフォンで見やすくしたからこの結果につながったかというと、そうでもないようです。元記事では、これらの結果を出すためには、押さえるべきポイントがあったとしています。
そして、それを5つのポイントとして掲載しています。
それがこちらです。
スマートフォン対応で押さえるべき5つのポイント
1.お客さんが最も知りたいこと、そしてバリュープロポジションをまず明確に伝える
今回、とにかくこれに尽きるのかなと思っています。
バリュープロポジションとは
顧客に提供する価値の組合せ。製品やサービスのメリット、自社の存在価値や独自性を顧客に伝え、その価値を高めること。
バリュー・プロポジションを検討する際には、顧客の立場に立って自らの製品・サービスを見つめることが必要だ。顧客は、自分たちが想定している価値とは別の価値を求めていたり見出してたりする可能性もある。 例えば、ある喫茶店が、コーヒーへの拘りこそが自社の価値だと考えていても、顧客からは単にタバコの吸える喫茶店と見なされているかもしれない。
ということ、平たく言うと「お客さんが、潜在的・顕在的関わらず最も知りたいこと」でしょうか。
そのサイトを見に来る人が一番知りたいことってこれじゃないのか？という内容。それをトップページに分かりやすくまず持ってこようということです。
スマートフォンは、
- 一画面に掲載できる情報が少なく
- スキマ時間に利用されるものであり、大概相手は時間にシビアであり
- 複数ウィンドウを開けない
- 回線が遅いので、テキパキ表示をさせられない
といったデバイスです。なので、いかに「知りたいことを」「必要十分に」「分かりやすく」相手に伝えられるかが大きな勝負どころとなります。ということです。
何を表示すべきかは
- 扱っているサービスによっても違う
- 理想的には、相手のニーズによっても違う
ので一概には言えません。特に後者は悩ましいですね（PPC広告ならキーワードごとに別のランディングページを作るなどすればよいかもしれませんが）
事例：Folk
例として「Folk」というオープンソースのCMSサイト。このサイトに来る人は「Folk」というツールの名前を聞いて「いったいどんなものなんだろう？」と思ってくるんじゃないだろうか、それが大多数ではないのか？ということで、このようなトップページにしたそうです。
一番上に「Folk is an Open Source cms tha will rock your world」と記載することで、FolkはオープンソースのCMSなんだと伝えます。
そしてその下で、使いやすそうなインターフェイス、テーマやマーケティング領域に注力しているCMSなんだな、と、いうことを伝えています。
これが正しいのかはさておき、「相手の最も知りたいことを考え、それに特化したトップページにする」ということを行なっています。
事例：Kumon
また、2つ目の事例としては公文（KUMON）です。海外のKUMONサイトですね。
公文の場合は、自分の子供がこうなったたらいいなという「白昼夢」を見せてあげる事が大切ですよね。
なので動画を使っています。
文字でずらずらと説明されるより、動画によって相手に「得られるベネフィット」を伝えてあげるというやり方です。
このように、相手は自分のサービス（あるいは自分たちの業界）に対してどんな事を考えて、どんなことをまず知りたくて、何を伝えたら興味を持ってもらえるかを考えて、それに絞り込んだトップページにするというやりかた。
これがポイントの1つ目です。
２．CallToActionをとにかく使いやすくする（内容も）
「お申し込みはこちら」「メールレターに登録」「こちらをクリック」など、相手の行動を促すものをCallToActionといいます。反応装置なんていう言い方をされることもありますね。
これもPCと同じではなくスマートフォンに合ったものに変えるべきです。見た目はもちろんのこと、内容もです。
内容というのは、例えば
- PCにおいては「15ページのPDFをダウンロード！」というのは問題ない。
PDFは簡単に開ける、保存してどこかにとっておくことも簡単 - しかしスマートフォンの場合は、PDFを開くことが出来ても、それはPCほど簡単に読むことはできない。PC向けにつくられたPDFなら字は小さくて読みづらいことも。
- なので、それよりは「ニュースレター」や「Facebookでいいね！して」のようなものの方が反応がいい
ということです。
ボタンを大きくしたり、目立つようにするということはよく聞きますが、CallToActionもモバイル向けに最適なものを用意しようということも大切ですよね。
Audiの例があげられています。
（※すでにAudiのサイトはこのデザインではないようですので、実際の動きを確認できませんでした。EXPLORINGするとどうなったんでしょうね）
3.画像や動画を効果的に使い、テキストを使い過ぎない
先ほどの事例だと公文がそうですが、ファーストビューで「直感的に」「受け入れやすい」「分かりやすい」情報を出すことが大切です。
それはテキストでは実現しにくいです。なので、ファーストビューにおいては動画や画像がよいとのことです。
ただ、読み込み時間には要注意で「iOS端末では4秒以内に始まらないとNG」だったりする調査結果が有るようです。
4.フォームは可能な限り短く
スマートフォンのネックの一つは「入力が面倒」「入力しづらい、ミスしやすい」ことです。
なのでそこを極力減らしてあげる事はやはり大事です。フォームはその重要性がもっとも試されるとことです。
この記事ですすめられているのは
- フィールドの数は5〜6までに収める
- 後でメールや電話で得られる情報は極力フォームからは削る
- 項目名と入力フィールドは横に並べるのではなく、縦に並べる
- 適切なグルーピング
などです。それをうまく行なっているのが以下のHertzのフォームです。
これを見ると、先ほどのポイント以外でも
- デバイスがもともと持っている入力補助機能（日付の入力など）をうまく使う
- サブミットボタンとそれ以外のボタンのデザインを変え、誤操作を減らす
- 一画面に収める
なども気を使っているのではないかと思います。特に「一画面に収まる」って大切だなと思います。
5.なるべくスクロールを減らすために開閉タブを使う
多分Amazonのアプリなどを使っている方、あるいはkakaku.comや楽天をスマートフォンから使われている方はおなじみかと思います。
タップすることで詳細情報が現れたり消えたりするインターフェイスです。これはやはり効果的なようです。
それは
- 最初は各項目が最小化しているので、自分の探している情報を見つけやすい
- 見つけた後に詳細情報を見るのが簡単（画面遷移がない、あるいは読み込み直さなくてもいい遷移）
からではないかと思います。特に、画面遷移がないことが、非常にストレスを減らす効果があるのではないかと。
終わりに
スマートフォンに対応することはとても大切です。なぜなら、単純にスマートフォンからホームページを見る人の割合がどんどん増えており、トレンドとしてもそれが変わることはしばらくないと思われるからです。
しかしだからと言って、中途半端にモバイル対応をしてしまうと、むしろ「PCサイトをそのまま見せていたほうが良かった」ということにもなりかねません。
きちんとモバイルユーザの状況や気持ちを考えた上で、自社のサービスや体制にあった形でスマートフォン対応させていく。
この考え方がまず何よりも必要なのではないかと思っています。
この記事がご参考になれば幸いです。
Discussion about this post