ファンを育てるパネル型UI|スマホファーストビュー新常識

Pocket

img00-firstviewファッション系スマホECサイトで最近見られる大型の写真を縦列に並べるトップページUIはモバイルサイトのファーストビューを再定義するユーザビリティである。

アパレル等、中心となるユーザー世代が比較的若年層(10~30代)のほうが相性がよいと思われるので全ての業界で通用する訳ではないがスマホサイト上でブランド・商品のファンを醸成する手法としてWeb設計担当者の参考になると思う。

ブランドの世界観を伝える大型写真によってビジュアルを明確に訴求し、ブランドに興味を持って貰い、購買に繋げる手法で、メニュー配置も含め、従来のモバイルUIの設計思想とは大きく相違しています。

ファッションECサイト「fifth」を例にどのような点が新しいのかを見ていきたいと思います。

-目次-
1:パネル型ファーストビューの実例:「fifth」
2:パネル型UI設計の3つの視点
3:従来のUIとの相違点の考察

1:パネル型ファーストビューの実例:「fifth」

「fifth」は20-30代女性をターゲットとしたアパレル商品ECです。従来のファーストビューの大きな相違点としてはパネル型に大型写真を配置していることと、メニューの新しい配置場所の視点で「カテゴリー検索とフリーワード検索の存在感がない」点です。
img01-firstview

従来のモバイルサイト設計ではカテゴリー検索やフリーワード検索は最上部にあるのが一般的でした。
img02-firstview

つまり、カテゴリー検索とフリーワード検索は商品にたどり着くための最短ルートとして従来は重要視されていた訳ですがfifthではそうではなくなった点に新しさがあります。

カテゴリー検索やフリーワード検索はユーザーが自分の意志を強く持って自発的に商品を探し出す導線です。

サイトに訪問した時点で、ある程度、ワードやカテゴリーが浮かんでいる状態である訳です。

fifthでは自発的に商品を探し出すよりもブランドイメージを喚起する写真を実際に見て、「かわいい」、「欲しい」、「かっこいい」と感じさせることに優先度を置いています。

従来のモバイルUIでは最も伝えたいことを最上段に配置するのが鉄則でしたが、スマホの性能向上によりスクロールにより上下移動がスムーズになったこと等を背景に従来のUI設計ルールのみを追い求める必要がなくなってケースもあることの現れだと思います。

2:パネル型UI設計の3つの視点

見てきたようにパネル型UI設計は写真を起点にしたユーザー導線設計ですが、ただ画像を配置すればよい訳ではありません。

重要なのは下記の3点です。

・大型のブランド写真を最上段に配置することによりユーザーの利得に訴求するよりも感覚を刺激することでブランド・商品に興味を持って貰う

・サイトに訪問した時点ではユーザーは自分が欲しいカテゴリーをイメージしていないことを前提にビジュアル(写真)による喚起を重要視し、写真も利得ではなく世界観喚起を狙う

・カテゴリー検索とフリーワード検索は従来のサイト設計よりは優先度を低く設計するが、一方でそのルートにも対応できるように下部もしくはメニュー内に配置はする

3:従来のUIとの相違点の考察

この取り組みはモバイルサイトファーストビューの再定義であると私は考えます。

従来のモバイルサイトのファーストビューは無駄を一切なくし、購買に繋がる情報やメニューだけを徹底的に抽出することが求められました。

具体的にはユーザー利益(送料無料etc)、信頼性(○○のオフィシャルサイトetc)を限られた表示領域にユーザビリティに最大限配慮しつつ詰め込んでいましたが、スマホでは通信速度や操作性向上、表示容量クリア等のデバイス性能を背景に必ずしも最上部から伝えたいことを伝える必要はなくなってきたのかもしれません。

もしかしたらユーザー利益ばかり伝えるとユーザーの気持ちと相反してしまうということもあるのかもしれません。

スマホだけでネット接続しているユーザー層も少なくないことから、テキストによる操作説明は不要で、写真によって商品の魅力を視覚的に伝えるほうが効果的なのでしょう。

それによってサイトで取り扱っている商品に期待感が生まれ、商品購入に結び付けやすくなるのだと考えられます。操作の話で言えばLINEやスマホアプリのように操作説明などを見ないでも感覚的に使い始めることが出来るのが近年のトレンドの一つです。

もうひとつ参考になる記事が過去ログにあります。よければご参照ください。
ファーストビューで売上の9割は決まる!設計に重要な4ポイント
(2015年4月1日UP)

 

Pocket

無料ebook:ミナクル式スマホサイト改善
スマホECの売上を2割アップする!
スマホサイト改善ちょっとしたコツ
76連発レポート!

業界によっては6割以上がスマホからのアクセスになりましたが、「実際にどうサイトを改善したらいいかわからない」という声をたくさん頂きます。

本PDFは、弊社のお客様に改善提案する中で生まれたノウハウを体系化した全100ページ以上にわたる資料です。

  • 自社のサイトは大丈夫だろうか
  • スマホサイト改善と言っても実際どうしたらいいか分からない
  • スマホでの売上をアップしたい

などとお考えの方はぜひご覧ください。

ebook無料でダウンロードする

【弊社実績一例】



ヤマハ発動機株式会社様/積水化学工業株式会社様/株式会社パルコ様/株式会社エポスカード様/アディダス ジャパン株式会社様/株式会社フジゼロックス様/シュウウエムラ様/ダノンジャパン株式会社様/株式会社マイナビ様/第一三共ヘルスケア株式会社様/株式会社サイバーエージェント様/株式会社船井総合研究所様

コメントをどうぞ

*