初めまして。デザイナーの高橋です。普段はUI設計や改善を担当してます。
前回、出口さんの旬ページリニューアル事例のエントリーでは、
スマホファーストの考えに基づき、「読ませる」より「見せる」にデザインの方向性を決めて「ビジュアル訴求を高めた」事例について紹介しました。
では、どのようにして「見せる」ことを実現させるためにスマートフォン上のデザインで解決していったのか？
今回はその事例をご紹介できたらと思います。
簡単に「見せる」と言っても、オイシックスの売り場の特徴はページの「長さ」にあります。
いかにしてお客さまがサイトに訪問していただいた時のテンションを維持したまま、ページの最後まで飽きずに「見て」いただくことが出来るかが、デザインの成功のカギだと考えています。
そのため、長さを極力意識させない工夫、またテンションを上げもらう工夫が必要です。
「見せる」ためにやったこと
そのために具体的にやったことが主に下記の3つです。
1. 画像サイズの使い分けによる「切り替え」の設計
2. 見やすい（読みやすい）文章レイアウト・テキスト量の設計
3. 料理工程にgifアニメーションを導入–ビジュアルコミュニケーションによる設計
1.画像サイズの使い分けによる「切り替え」の設計
大中小、またはサムネ各サイズの画像を使い分けることによって、切り替えしをおこし、単調にならないページランニングを意識しています。これにより長いページでも読み進めてもらう効果を狙っています。
2.見やすい（読みやすい）文章レイアウト・テキスト量の設計
「余白の効果」を使い、情報のまとまりをはっきりさせ、長いページのなかでも視認性・可読性を高めています。
また、テキスト量については事前にレイアウトを設計の上、文字数を最初から決めて、それにしたがって訴求のテキストを書いています。
3.料理工程にgifアニメーションを導入–ビジュアルコミュニケーションによる設計
見ていて「おっ！」と驚きのあるビジュアルコミュニケーションが取れるようなアニメーションもページの途中に入れつつ、飽きさせない工夫にもチャレンジしています。
検討段階では、動画やシネマグラフも検討しましたが、ページ表示速度の関係上、gifアニメーションが最も適当であると判断しました。導入後、ヒートマップでアニメーションの確認をした結果、見られているときもあれば、ほとんど見られていないときもあり、このあたりは物の売れ方の動向をみつつ、まだまだ試行錯誤が必要だと感じています。
結果から見えてきた課題・仮説
以上、3つの施策をおこなったことにより、リニューアルリリース後の過去1年前後のデータをもっとも変化した数字でみると、ページの「平均ページ滞在時間」が全体で30%UP、また主要なナビに限って再計算しても26％UPとなりました。
「見せる」ためにレイアウトを再設計し、ページ全体での滞在時間が以前よりも伸びた結果、リニューアル後のCVRの上昇や、思わず売上が上がる商品の出現、定性的なお客様の声などを見ても、「平均ページ滞在時間」の伸びは、明らかにポジティブな結果を生み出していると捉えてよさそうです。
とはいえ、お客さま個々の買い物に費やす時間を考えると、効率的にお買い物が出来、その中で楽しんでいただくことが大切なので、ただ「見せて」買っていただくだけでなく、購入前～購入時～購入後と、お客さまの生活シーンをより具体的にイメージしながら、サービス全体の中で、お客さまの課題を解いていく必要があります。
デザイナーとして、そういったサービス全体の設計に関わっていける機会があることが魅力だと感じており、今後も試行錯誤を重ねていきたいと思います。
