「UI/UXデザインでサイトを改善しよう」というテーマで開催します。 EC-CUBEを例にして、ユーザー満足度を上げられるようにするにはどうしたら良いか、みなさんで考えてみようと思います。 「UI/UXデザイン」って何? という方は、以下などが参考になると思います。 http://blog.excite.co.jp/spdesign/19566265/ http://www.find-job.net/startup/god-slides-of-ui-ux 前回の資料はこちら https://www.facebook.com/nanasess/posts/751633458213464

1. UI/UXデザインでサイトを改善しよう
名古屋EC-CUBE勉強会 vol.16
@_aromaforest 2014/08/02 大河内健太郎

2. 自己紹介
• 名前: 大河内健太郎(@nanasess) 年齢: 37才
• 出身: 愛知県西尾市一色町
• 在住: 宝塚市
• 前職: 寿司屋の板前(安城市の「ひで寿司」)
• 資格: 調理師・ふぐ処理師
• Mac OS X / Windows Azure / FreeBSD 使ってます
• EC-CUBE コミッター・公式エバンジェリスト
• 特技: 野鳥の識別

3. Agenda
• UI/UXデザインって何?
• UI/UX デザインのアプローチ
• プロジェクトのゴール設定
• コンテキスト分析
• ペルソナ設定
• ストーリーの抽出
• ストーリーボードとメンタルモデル

4. UI/UXデザインって何?
• UI - User Interface
• システムの操作感
• UX - User eXperience
• 使用者の経験や満足度
• 使用者経験や満足度を重視し、画面を設計する

5. UI/UX デザインのアプローチ
• プロジェクトのゴール設定
• コンテキスト分析
• ペルソナ設定
• ストーリーの抽出
• ストーリーボードとメンタルモデル

6. 今回の課題サイト
http://www.bruna.jp

7. 現在の課題
• スマホに注力できてない
• 売上をいっぱい上げたい
• SNS連携に力を入れたい

8. プロジェクトのゴール設定
• 「達成したいビジネスゴール」と「Webサイ
トのゴール」を明文化する
• ビジネス面でのゴール
• 売上を2倍にしたい
• Miffy Night Lamp の月間60個販売し
たい
• Webサイトのゴール
• PCだけではなく、タブレット、スマー
トフォンで使いやすいサイトにしたい

9. コンテキスト分析
• ユーザーが使用する環境、状況を理解する
• どんな時にアクセスする? アクセスの動機は?操作時間は?
• 版権元のサイトからの流入が多い
• そもそもちゃんと分析できてない
• どんな端末でアクセスする? PC? スマホ?
• スマホの方が多そう
• いつアクセスする? 家の中? 移動途中?
• 日中のアクセスが多い
• 午後注文が多い

10. コンテキスト分析
• 全体の状況を理解する
• 会員数 - 3000くらい
• 購買率 - 1%未満
• 直帰率 - 44.83%
• 平均購入単価 - 5000〜6000円
• スマホからのアクセスがほとんど(だと思う)
• そもそも、スマホサイトに GA のタグが埋まってなかった…
• スマホからの購入が圧倒的に多い
• etc…
顧客満足度を増やすことでゴールに近づけたい
本当は市場全体の状況
を明らかにする

11. ペルソナ設定
氏名
年齢
性別
自宅/通勤
家族構成
属性
性格
趣味・趣向
年収
IT環境
その他
製品・サービスを使用する象徴的なユーザー
副ペルソナになる要素は無いか検討する

12. ストーリーの抽出
• どのような動機でサイトへ訪問するか?
• メルマガ配信
• ミッフィー関連のイベントを見て、サイト
を訪問し、ランプを見つけた
• 本来の目標のあるべき姿を考える(To-Be)

13. ストーリーボードとメンタルモデル
ストーリー
• ミッフィー関連のイベントを見て、サイトを訪問し
、ランプを見つけた(リピーター)
1コマ
ストーリーボード
Goal
Do
Think
Feel

14. 主な改善点
• 自社サイトにアクセスして, ランプを見つけてもらうための導線が必要(リスティング広告など)
• meta タグをきちんと入れること
• 1カラムで売りたい商品を強調する
• リピーターなので、もうどんな商品かは知っている
• 新着商品がわかりにくい
• Newsバナーが押したいけど押せないので枠線をなくす
• バナーっぽくなくす
• 押せるところが押せそうに見えない
• 紹介ページを作ったほうがモチベーション上がる

15. 続きの流れ
• ワイヤーフレーム作成
• ビジュアルデザイン作成

16. 今日はここまで
ご静聴ありがとうございました!