こんにちはトミーです。

実家が造園業をしている為、昔から植物が好きです。
最近では盆栽に興味があるのですが、特に小さな盆栽が好きで、あの小さな空間で絶妙なバランスで作り上げていく姿に心を奪われてしまいます。

さてスマホという小さな空間をどのように作り上げていくにはどうすれば良いか。スマホサイトにおける見せ方の工夫についてお話します。

限られた空間をいかに上手く使うか

以前に私がスマホサイトでは一人当たりの閲覧ページ数が少ないという記事を書きました。

その中で、スマホは視野が狭い分レイアウトに制約がかかり、導線設計が難しいとしていますが、新しい見せ方をすることで、その制約を緩くすることが出来るのです。

その見せ方ですが、下記の画面を見ていただければ、一目瞭然かと思います。

■ もともとのページはコチラ

20150421_01

■ 新しい見せ方はコチラ

20150421_03

この見せ方が出来た背景はECサイト特有のユーザの属性とレイアウトの関係性からです。

ECサイトは大きく分けるとユーザは「衝動買い」と「目的買い(買う商品が絞り込まれている)」の2つの属性に分かれます。

このECサイトは当初「衝動買い」のユーザに向いているレイアウトになっており、特集などのバナーを並べて、ウインドウショッピングを楽しむ導線になっていました。

また、「目的買い」ユーザにとっては「カテゴリー」の導線を見つけることができず、目的の商品にどのように辿り着けば良いか分からないレイアウトになっていました。

そこで、カテゴリーを表示する新しい見せ方をしたところ、「目的買い」ユーザの導線も「衝動買い」ユーザの導線も一度に見せてあげることができ、CV率が大幅にUPしました。

このように平面だけでレイアウトを考えず、レイヤーのように立体的にレイアウトを考えることでスマホサイトが抱える制約を崩していくことができるのです。

ちなみに、今回のカテゴリーを表示する方法はhtmlの編集はほぼ行っておらず、Web接客ツールのサイト・パーソナライザというツールを利用して生成しております。

変更が容易で、導入もすぐにできるサービスですので興味がある方はぜひ検討下さい。