「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
-
Upload
kentaro-ohkouchi -
Category
Technology
-
view
369 -
download
6
description
Transcript of 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16
![Page 1: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/1.jpg)
UI/UX デザインでサイトを改善しよう名古屋 EC-CUBE 勉強会 vol.16
@_aromaforest 2014/08/02 大河内健太郎
![Page 2: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/2.jpg)
自己紹介• 名前 : 大河内健太郎 (@nanasess) 年齢 : 37 才• 出身 : 愛知県西尾市一色町• 在住 : 宝塚市• 前職 : 寿司屋の板前 ( 安城市の「ひで寿司」 )
• 資格 : 調理師・ふぐ処理師• Mac OS X / Windows Azure / FreeBSD 使ってます• EC-CUBE コミッター・公式エバンジェリスト• 特技 : 野鳥の識別
![Page 3: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/3.jpg)
Agenda
• UI/UX デザインって何 ?
• UI/UX デザインのアプローチ
• プロジェクトのゴール設定
• コンテキスト分析
• ペルソナ設定
• ストーリーの抽出
• ストーリーボードとメンタルモデル
![Page 4: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/4.jpg)
UI/UX デザインって何 ?
• UI - User Interface
• システムの操作感
• UX - User eXperience
• 使用者の経験や満足度
• 使用者経験や満足度を重視し、画面を設計する
![Page 5: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/5.jpg)
UI/UX デザインのアプローチ
• プロジェクトのゴール設定
• コンテキスト分析
• ペルソナ設定
• ストーリーの抽出
• ストーリーボードとメンタルモデル
![Page 6: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/6.jpg)
今回の課題サイトhttp://www.bruna.jp
![Page 7: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/7.jpg)
現在の課題
• スマホに注力できてない
• 売上をいっぱい上げたい
• SNS 連携に力を入れたい
![Page 8: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/8.jpg)
プロジェクトのゴール設定
• 「達成したいビジネスゴール」と「 Web サイトのゴール」を明文化する
• ビジネス面でのゴール
• 売上を 2 倍にしたい
• Miffy Night Lamp の月間 60 個販売したい
• Web サイトのゴール
• PC だけではなく、タブレット、スマートフォンで使いやすいサイトにしたい
![Page 9: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/9.jpg)
コンテキスト分析• ユーザーが使用する環境、状況を理解する
• どんな時にアクセスする ? アクセスの動機は ? 操作時間は ?
• 版権元のサイトからの流入が多い
• そもそもちゃんと分析できてない
• どんな端末でアクセスする ? PC? スマホ ?
• スマホの方が多そう
• いつアクセスする ? 家の中 ? 移動途中 ?
• 日中のアクセスが多い
• 午後注文が多い
![Page 10: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/10.jpg)
コンテキスト分析• 全体の状況を理解する
• 会員数 - 3000 くらい
• 購買率 - 1% 未満
• 直帰率 - 44.83%
• 平均購入単価 - 5000 〜 6000 円
• スマホからのアクセスがほとんど ( だと思う )
• そもそも、スマホサイトに GA のタグが埋まってなかった…
• スマホからの購入が圧倒的に多い
• etc…
顧客満足度を増やすことでゴールに近づけたい
本当は市場全体の状況を明らかにする
![Page 11: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/11.jpg)
ペルソナ設定氏名 小林 ゆきえ
年齢 38 歳
性別 女性
自宅 /通勤 兼業主婦 (正社員 )
家族構成 夫・自分・長女 12 歳 ( 公立小学校 6 年生 ) ・次女 4 歳 (私立保育園年中 )
属性 大学卒業後、外資系保険会社に就職後、 24才で結婚、妊娠後専業主婦になるが復職
性格 ポジティブで好奇心旺盛だが機械に弱いちょっとリッチ
趣味・趣向ショッピング・子供と料理・ Facebook 使ってる・キャラクター好
き
年収 400万円 ( 年収 ) / 世帯年収 1000万円
IT環境仕事で PC は使っている。普段はスマートフォン。パソコン教室に
通っている
その他近況を Facebook に投稿
友人同士で LINE は頻繁に使用する
製品・サービスを使用する象徴的なユーザー
副ペルソナになる要素は無いか検討する
![Page 12: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/12.jpg)
ストーリーの抽出
• どのような動機でサイトへ訪問するか ?
• メルマガ配信
• ミッフィー関連のイベントを見て、サイトを訪問し、ランプを見つけた
• 本来の目標のあるべき姿を考える (To-Be)
![Page 13: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/13.jpg)
ストーリーボードとメンタルモデル
ストーリー• ミッフィー関連のイベントを見て、サイトを訪問
し、ランプを見つけた ( リピーター )
1 コマ 1. イベントを見る 2. サイト検索 3. 商品を閲覧
ストーリーボード イメージ イメージ イメージ
Goal 商品をもっと見たい !モチベーション↑
自社サイトにアクセスしてランプを見つけて
くれる
商品の魅力を伝え、購入のモチベーションを
上げる
Do イベントでは限定商品のみ購入 ミッフィーで検索
トップページにアクセス
Thinkほかのものはサイトで買おうかな ?もっとゆっく
り見たいな
他の商品は何があるかな ?
キャンペーンバナーが押せない ?
Feel 娘のことより自分がほしい
版権元アクセスしたけど、どうやって買う
の ?
押せない !商品の内容がよくわからない
![Page 14: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/14.jpg)
主な改善点• 自社サイトにアクセスして , ランプを見つけてもらうための導線が必要 ( リスティング広告な
ど )
• meta タグをきちんと入れること
• 1カラムで売りたい商品を強調する
• リピーターなので、もうどんな商品かは知っている
• 新着商品がわかりにくい
• News バナーが押したいけど押せないので枠線をなくす
• バナーっぽくなくす
• 押せるところが押せそうに見えない
• 紹介ページを作ったほうがモチベーション上がる
![Page 15: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/15.jpg)
続きの流れ
• ワイヤーフレーム作成
• ビジュアルデザイン作成
![Page 16: 「UI/UXデザインでサイトを改善しよう」EC-CUBE勉強会 vol.16](https://reader035.fdocuments.net/reader035/viewer/2022070317/556615dcd8b42a7d608b49cb/html5/thumbnails/16.jpg)
今日はここまで
ご静聴ありがとうございました !