スマホとPC ではサイトのレイアウトは全く違う
スマホファーストを実践するために「スマホサイトにおける情報設計」＝「レイアウト」の違いについて考えてみましょう。
PCサイトでは、視線がZ型に動くと言われています。画面サイズが横に広いため、左上から右上〜左下に目線が流れていき、情報を得ていくというのがセオリーです。
PCサイトをスマホ対応させるという従来の考え方では、このレイアウトを流用しがちです。しかしPCサイトでは、横長の画面に合った形で情報・画像が並んでいるため、スマホの画面で見ると、すべてが小さくなってしまいます。また、画面に無駄な余白もできるため、インパクトが弱いページになりがちです。
スマホの場合、画面サイズの横幅はすべて目線のなかに収まります。そのため、視線が上から下にシンプルにスライドしていくI型の動きとなります。つまり、画面内の情報設計を考える際には、縦型にレイアウトしていくことが重要になるのです。
また、画面サイズに制約がある分、画像の見せ方にも一工夫必要です。例えば、インパクトを出したい写真や画像は、角版でレイアウトするのではなく、ページの背景に引いてしまうのです。こうすることでインパクトやダイナミックさも表現することができ、非常に印象的なページになります。こういった考え方は、PCサイトにはない考え方で、スマホファーストを意識しているからこそ出てくる発想です。PCサイトの延長としてスマホサイトを作ってしまうと、スマホの特性を活かしきれていないデザインになってしまうのです。
スマホならではのデザインは、コピーやメッセージを伝える際の考え方にも応用できます。通常のウェブページでは、コピーや文章は横書きで書くのが一般的です。しかし、よりインパクトを出したいコピーや文章は縦書きにレイアウトするのです。スマホは目線がI型に動くため、その流れも邪魔しません。縦書き文字をポイントで使用することで、目に留まりやすくインパクトのあるページにすることができます。
スマホならではの UI ヒント集
上記の他にも、スマホでの利用を考えたサイト設計が必要です。ちょっとした積み重ねがユーザビリティの違いに表れ、売上をアップする大きな要因となってきます。PCサイトにはないスマホならではの視点が求められますので、いくつかご紹介します。
・「トップに戻る」ボタン
ランディングページや比較的長いページの場合、ページの下部から上部に戻るためには、何度も上にスライドさせる手間がかかります。ページの最上部まで戻れるボタンを設置しておくことで、すぐに頭から情報を確認できるようになります。細かい部分ではありますが、こういったボタンが実装されていると使いやすさが断然異なります。
・固定されたオファーエリア
特にランディングページは情報量が多く、比較的長いページになるため、ページ中の何箇所かに購入ボタンを設置する場合が多いでしょう。しかし、いざ購入しようと思った瞬間に、ページ内で購入ボタンを探すのが手間となってしまう場合があります。
そのような手間を減らすために、購入ボタンのオファーエリアを画面上に固定する形で常に表示しておくという方法があります。商品の説明を読み、顧客が「買いたい」と思ったときにすぐに購入できる状態にしておくのです。あまりにもボタンのサイズが大きいとページを読むのを邪魔してしまうためサイズの調節は必要ですが、固定したオファーエリアを設定しておくことは、販売機会を失わないためには非常に効果的だと言えます。
・アコーディオン形式での情報掲載
スマホサイトでは、情報を一様に掲載するとボリュームが多くなり、最も伝えたい重要な情報が何なのか分かりづらくなってしまいます。
スマホサイトでは、一画面で表示できる情報量が限られているため、消費者に適切な情報伝達をする必要が出てきます。その際、情報をうまく伝えるために利用できるのがアコーディオン形式でのUIです。情報のタイトルや見出しのみを表示しておき、内容は伏せておくような形式です。
スマホサイトは全体が縦長のデザインのため、スライドするごとに情報がどんどん流れてしまいます。そのため、最初から一番強調させたいところだけを読める状態にしておき、内容自体はアコーディオン形式で閉じておきます。タイトルに興味があれば、開いて内容を閲覧することができます。
そうすることで、ページのスペースを無駄に使わず、効率的に欲しい情報を取得することが可能になります。たくさんの情報に煩わしさを感じることなく情報を得られるため、とても効果的です。
入力の手間があると顧客は離れる
入力フォームの離脱分析をしていると、購入フォームへ入力する情報が多すぎることを理由に、最後まで完了せずに途中離脱するケースはかなり多いものです。顧客の性別や年齢、生年月日など、様々な情報を購入時に取っておきたいというのがメーカーの本音だと思います。しかし、それらの情報を一度に聞こうとすると、購入のハードルはどんどん上がります。いかに決済までスムーズに誘導できるかが最初のポイントなのです。
顧客視点で考えると、フォームに入力する情報がより少ないほうが、手間がかかりません。顧客に入力させる内容は極力省いたほうが離脱は少なくなるのです。
それでも、入力項目を省くことができない場合もあるでしょう。その場合は、１つの画面で一度に入力させるのではなく、画面を分けて段階的に入力させることが望ましいと言えます。
例えば1つの画面に入力する項目が10項目並んでいるものと、2画面に分けられ、5項目ずつ並んでいるものだと、後者のほうが入力完了というゴールまでのステップが見えやすく、離脱しづらくなります。
決済時に情報を取得しようと考えているのであれば、顧客に手間と思わせないような工夫をしておく必要があるでしょう。
その他の方法として、情報の取得は決済時ではなく、商品購入後にアンケートをとって確認するという考え方もあります。
もちろんすべての顧客から情報取得することは難しくなるかもしれませんが、購入後であればフォームでの途中離脱は減らすことができます。
入力フォームと決済は、通販ビジネスの最後の山です。店舗とは違い、商品をレジに持っていって買うという流れではないため、どうしても顧客に負担が生じます。そのため通販では、ここが大きなハードルとなるのです。
できるだけ簡略化したスムーズな動線を意識することは、すぐに売上改善に繋がるポイントですので、自社の入力フォームがどのような状態になっているのか、いま一度確認してみるとよいでしょう。
スマホで閲覧されるとはどういうことか
スマホファーストでECサイトやランディングページを作る際に重要なことは、デザインだけではなく、その使いやすさです。
PCとスマホで大きく違うのは、操作方法です。スマホでは、マウスではなく指で画面を操作し、サイトを閲覧していきます。すると、スマホ特有の考え方として「指を使ってボタンがタップしやすいかどうか」という課題が出てきます。スマホでボタンをタップするとき、ほとんどの方は親指が人差し指を使います。その際、ボタンのサイズが小さいと、違う場所を間違えてタップしてしまうこともあり、非常に使いにくくなります。このようなことを十分に考えずに作られたスマホサイトでは、ボタンが小さすぎてタップしづらいということがよく起きります。実際問題として、これが離脱要因のひとつにもなっているため、人差し指や親指で押されることを前提にしたサイズのボタンを実装しなければなりません。
ちょっとしたTipsをお話しすると、ボタンに表示する文言も工夫したほうがクリック率は高くなります。「購入する」や「カートに入れる」という文言よりも、「77%オフで今すぐ試す」という文言のほうが、明らかにクリック率が高くなります。なぜなら、具体的なメリットを示すことで、購入への最後のひと押しとなるからです。こういった細かい文言も、「マイクロコピー」と言って購入率を大きく変える要因となりますので、検証してみるといいでしょう。
この記事の著者
- EC・通販コンサルタント クリームチームマーケティング代表兼CEO
-
2006年より化粧品、健康食品業界に特化したダイレクトマーケティング支援を行い、これまで150社250ブランド超の売上アップを実現。業界に特化した豊富な経験やノウハウ、リソースを提供している。
・著書『化粧品・健康食品業界のためのダイレクトマーケティング成功と失敗の法則』
・著書『化粧品・健康食品EC・D2C新規参入パーフェクトガイド』
・書籍と同名のコラムを日本ネット経済新聞にて連載中
