UI/UX デザインでサイトを改善しよう名古屋 EC-CUBE 勉強会 vol.16

@_aromaforest 2014/08/02 大河内健太郎

自己紹介• 名前 : 大河内健太郎 (@nanasess) 年齢 : 37 才• 出身 : 愛知県西尾市一色町• 在住 : 宝塚市• 前職 : 寿司屋の板前 ( 安城市の「ひで寿司」 )

• 資格 : 調理師・ふぐ処理師• Mac OS X / Windows Azure / FreeBSD 使ってます• EC-CUBE コミッター・公式エバンジェリスト• 特技 : 野鳥の識別

Agenda

• UI/UX デザインって何 ?

• UI/UX デザインのアプローチ

• プロジェクトのゴール設定

• コンテキスト分析

• ペルソナ設定

• ストーリーの抽出

• ストーリーボードとメンタルモデル

UI/UX デザインって何 ?

• UI - User Interface

• システムの操作感

• UX - User eXperience

• 使用者の経験や満足度

• 使用者経験や満足度を重視し、画面を設計する

UI/UX デザインのアプローチ

• プロジェクトのゴール設定

• コンテキスト分析

• ペルソナ設定

• ストーリーの抽出

• ストーリーボードとメンタルモデル

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

現在の課題

• スマホに注力できてない

• 売上をいっぱい上げたい

• SNS 連携に力を入れたい

プロジェクトのゴール設定

• 「達成したいビジネスゴール」と「 Web サイトのゴール」を明文化する

• ビジネス面でのゴール

• 売上を 2 倍にしたい

• Miffy Night Lamp の月間 60 個販売したい

• Web サイトのゴール

• PC だけではなく、タブレット、スマートフォンで使いやすいサイトにしたい

コンテキスト分析• ユーザーが使用する環境、状況を理解する

• どんな時にアクセスする ? アクセスの動機は ? 操作時間は ?

• 版権元のサイトからの流入が多い

• そもそもちゃんと分析できてない

• どんな端末でアクセスする ? PC? スマホ ?

• スマホの方が多そう

• いつアクセスする ? 家の中 ? 移動途中 ?

• 日中のアクセスが多い

• 午後注文が多い

コンテキスト分析• 全体の状況を理解する

• 会員数 - 3000 くらい

• 購買率 - 1% 未満

• 直帰率 - 44.83%

• 平均購入単価 - 5000 〜 6000 円

• スマホからのアクセスがほとんど ( だと思う )

• そもそも、スマホサイトに GA のタグが埋まってなかった…

• スマホからの購入が圧倒的に多い

• etc…

顧客満足度を増やすことでゴールに近づけたい

本当は市場全体の状況を明らかにする

ペルソナ設定氏名 小林 ゆきえ

年齢 38 歳

性別 女性

自宅 /通勤 兼業主婦 (正社員 )

家族構成 夫・自分・長女 12 歳 ( 公立小学校 6 年生 ) ・次女 4 歳 (私立保育園年中 )

属性 大学卒業後、外資系保険会社に就職後、 24才で結婚、妊娠後専業主婦になるが復職

性格 ポジティブで好奇心旺盛だが機械に弱いちょっとリッチ

趣味・趣向ショッピング・子供と料理・ Facebook 使ってる・キャラクター好

き

年収 400万円 ( 年収 ) / 世帯年収 1000万円

IT環境仕事で PC は使っている。普段はスマートフォン。パソコン教室に

通っている

その他近況を Facebook に投稿

友人同士で LINE は頻繁に使用する

製品・サービスを使用する象徴的なユーザー

副ペルソナになる要素は無いか検討する

ストーリーの抽出

• どのような動機でサイトへ訪問するか ?

• メルマガ配信

• ミッフィー関連のイベントを見て、サイトを訪問し、ランプを見つけた

• 本来の目標のあるべき姿を考える (To-Be)

ストーリーボードとメンタルモデル

ストーリー• ミッフィー関連のイベントを見て、サイトを訪問

し、ランプを見つけた ( リピーター )

1 コマ 1. イベントを見る 2. サイト検索 3. 商品を閲覧

ストーリーボード イメージ イメージ イメージ

Goal 商品をもっと見たい !モチベーション↑

自社サイトにアクセスしてランプを見つけて

くれる

商品の魅力を伝え、購入のモチベーションを

上げる

Do イベントでは限定商品のみ購入 ミッフィーで検索

トップページにアクセス

Thinkほかのものはサイトで買おうかな ?もっとゆっく

り見たいな

他の商品は何があるかな ?

キャンペーンバナーが押せない ?

Feel 娘のことより自分がほしい

版権元アクセスしたけど、どうやって買う

の ?

押せない !商品の内容がよくわからない

主な改善点• 自社サイトにアクセスして , ランプを見つけてもらうための導線が必要 ( リスティング広告な

ど )

• meta タグをきちんと入れること

• 1カラムで売りたい商品を強調する

• リピーターなので、もうどんな商品かは知っている

• 新着商品がわかりにくい

• News バナーが押したいけど押せないので枠線をなくす

• バナーっぽくなくす

• 押せるところが押せそうに見えない

• 紹介ページを作ったほうがモチベーション上がる

続きの流れ

• ワイヤーフレーム作成

• ビジュアルデザイン作成

今日はここまで

ご静聴ありがとうございました !