文字が多い、色が多い、バナーが多い。日本の大手ECや老舗の通販サイトは、そう言われがちです。この記事では、その情報量を欠点と決めつけず、なぜ残ってきたのかを考えます。
「シンプルが正解」は、誰にとっての正解か
デザインを学ぶとき、手本になるのは美術大学の課題、洗練された海外サイト、Pinterestのコレクションです。そこでは余白が広く、言葉は短く、写真が大きく使われます。美しいのは確かです。
ただ、国内の買い手が求めているものと一致するとは限りません。写真と価格と購入ボタンだけのページでは、送料も、届く日も、他の人の評価も分かりません。買うつもりで来た人ほど、答えを探して離れてしまいます。
なぜ日本語圏では情報量が受け入れられるのか
よく挙げられる説明が2つあります。どちらも有力な仮説です。
- 文字の凝集度: 漢字は一文字に多くの意味を詰められます。そのため、狭い面積でも多くの情報を読み取りやすい、という説明です。
- 買う前に確かめたい傾向: ランキング、口コミ、在庫、他の人の選択を見比べて、失敗の不安を減らしてから買うという行動です。
後者には、関連する研究があります。日本・ドイツ・米国を比べたVishwanathの研究では、不確実性を避ける傾向が強い日本の利用者は、情報が限られた状況で行動が大きく変わると報告されています。またKoらの研究(2015)では、韓国の消費者には自国の文化に合わせたサイトが効果的で、米国の消費者では支払意思額に有意な差が出ませんでした。
一方で、欧米ではシンプルでないと読まれず離脱されやすい、という話もよく聞きます。ただ、これは現場の実感として語られることが多く、国別の離脱率を厳密に比べたデータを、私たちは確認できていません。
ガイドラインは「売り方」までは教えてくれない
AppleのHuman Interface GuidelinesやGoogleのMaterial Designは、優れた資料です。操作の一貫性やアクセシビリティを学ぶうえで欠かせません。
しかし、これらはOS上のアプリを使いやすくするための基準です。日本の買い手が何を見て購入を決めるのかは書かれていません。これだけを手本に国内サービスを作ると、整っているのに売れない画面になる恐れがあります。
楽天のような巨大サイトから学ぶ理由
楽天市場をはじめ、国内で長く売れ続けているサイトの画面は、デザイン賞の基準では評価されにくいかもしれません。それでも、億単位の予算が動く事業で、何年も改善が重ねられ、生き残ってきた画面です。そこには、美術的な良し悪しとは別の知見が残っています。
私たちが注目しているのは、次のような要素です。
- ランキング: 他の人が何を選んでいるかが、迷いを減らす
- トレンド: 急上昇の語句が、探し方を知らない人の入口になる
- 数字の明示: 価格、送料、レビュー件数を先に見せて、確かめる手間を省く
- 一覧性: 画面を移動せず、見比べられる
もちろん、そのまま真似てよいわけではありません。巨大サイトが売れている理由には、ブランド、品揃え、ポイント制度も含まれます。多くの店舗が同居するモールならではの事情もあります。学ぶのは見た目ではなく、その要素がどの不安を解消しているかです。
実行ボタンの前に説明を置く、というおもてなし
日本向けの画面で、私たちが特に大切だと考えているのがこの点です。「購入」や「送信」のボタンを押す前に、押すとどうなるのかを説明しておくことです。
対面の接客を思い浮かべてください。良い店員は、会計の前に「送料はかかりません」「明後日には届きます」「包装は無料です」と先に伝えてくれます。お客様が聞く前に不安を取り除く。これは、おもてなしの考え方そのものです。
ボタンだけが置かれた画面は、見た目はすっきりしています。しかし、押す人には「押したら買ったことになるのか」「いくらかかるのか」という不安が残ります。説明は画面の邪魔ものではなく、安心して押してもらうための接客だと私たちは考えています。
ボタンの直前に書く内容は、次の4つが基本です。
- 押すと何が起きるか: 「かごに入ります。まだ購入は確定しません」
- いくらかかるか: 送料や手数料、無料になる条件
- いつ届くか: 「11/10(火)ごろ」のように具体的に
- やり直せるか: キャンセルや返品の条件
大切なのは、ボタンから離れた場所に書かないことです。ページの下にまとめた注意書きや別ページのガイドは、押す瞬間には読まれません。説明とボタンを、ひとかたまりに見えるように置きます。
<!-- 説明とボタンを同じかたまりにし、読み上げでも関連づける -->
<div id="beforeBuy">
<p>送料 550円(あと1,760円のお買い上げで無料)</p>
<p>このボタンを押すと、商品がかごに入ります。まだ購入は確定しません。</p>
</div>
<button aria-describedby="beforeBuy">買い物かごに入れる</button>
長ければ良いわけではありません。ボタンが画面の外に押し出されるほど長い説明や、不安をあおる文言は逆効果になりかねません。短く、具体的に書きます。
デモでの設計
架空の茶舗「碧泉堂」のデモでは、ここまでの考え方を売り場にしました。
- 選ぶ: 売れ筋ランキング、急上昇ワード、レビュー件数、送料を一画面に並べました
- 押す前: 「買い物かごに入れる」の直前に、送料、お届け日、賞味期限、返品条件をまとめました。送料は内容量に合わせて、お届け日は注文する時刻に合わせて変わります
- 比較: 「シンプル」に切り替えると、写真とキャッチコピーと購入ボタンだけになります。何が失われるかを確かめられます
AIが出す「標準的な正解」を、人が見直す
私たちも、サイトの制作にAIを使っています。AIは、整った標準的なデザインを短時間で出してくれます。余白があり、配色がそろい、操作の定石にも沿っています。出発点としては、とても優秀です。
ただし、それが標準的な正解であることと、そのお客様にとって最適であることは別です。売る地域はどこか。その文化で何が安心につながるのか。業種ごとの買い方はどう違うのか。こうした点に合っているかどうかは、人間がしっかり見ていく必要があります。
たとえば、贈答用のお茶の通販なら、のしの有無やお届け日が購入の決め手になります。こうした細部は、何も指定しなければ、きれいな標準の画面からこぼれ落ちてしまいがちです。AIで作る時間が短くなった分、「この地域の、この業種の、このお客様に合っているか」を考える時間に使うべきだと私たちは考えています。
どう判断すればいいか
- 高額商品、贈答品、比較検討が長い商材: 情報を厚くする余地が大きい
- ブランドの世界観で選ばれる商材: シンプルな表現が合うことも多い
- 海外向けと国内向けの両方がある場合: 同じ画面を翻訳するだけでなく、情報量まで調整する
一番確実なのは、自社の顧客で試すことです。流行や好みではなく、アクセス解析や比較テストの結果で決めましょう。