7/23 DeNA Creative Seminar Vol.2

1. 企画編集グループ 鈴木 哲之

2. アジェンダ
No 内容
1 自己紹介
2 サイト構成について
3 サイトコンセプト
4 UIについて(事例4つ)
5 UXについて(事例3つ)
6 まとめ

3. 自己紹介
No Q A
1 名前 鈴木 哲之(すずき てつゆき)
2 職種 UI/UXディレクター
3 よく見るサイト B：TechCrunch
M：ITpro/Markezine/Web担
C：Think IT/WebクリエイターBOX
4 好きなアプリ LINE/Flipboard/Clear
5 DeNAに入って フリーランチ
良かったこと
6 お会いしたい人 たにぐちまことさん(左)、ちきりんさん
(右)

4. サイト構成について

6. サイト bidders.jp auショッピング
mixiモール
※co.jpは旧サイト モール
横断 UI/UX/PF/SEO
企画 特集/キャンペーン 特集/ソーシャル
制作 デザイン/コーディング コーディング
■Point
・企画/制作は横断系と各サイト固有施策に分けて業務効率化を図る。

7. jQuery json
スマート
フォン html css
(更新：随時) jQuery local
Mobile storage html
Genarator
API
jQuery
PC html css
(更新：年1)
■Point
・PCとスマートフォンを敢えて分断する事でスマートフォンを推
進。
・リッチコンテンツにjQuery、機能コンテンツにjQuery Mobileを
実装。

8. サイト bidders.jp auショッピングモー
mixiモール
※co.jpは旧サイト ル
SNSボタン ソーシャルボタン(FB/twr/mixi/G＋)
PC カウントあり
デバイス
スマホ カウントなし※商品ページ カウントあり
設置箇所 トップ/商品ページ/お店トップ/特集ページ
Facebook
内部施策 もってる
企画 twitter
LPO 気になる
公式アカウント
■Point
・ソーシャル企画はサイトやユーザーの特性に合わせて実施する。
・モバイルではSNSボタンは重いので、iframe版、カウントなしで実
装する。

9. サイトコンセプトについて

10. UI/UXについて
■ユーザビリティ
ISO 9241-11有効さ、効率、ユーザの満足度、利用状況 (保守的)
■ユーザーエクスペリエンス
より価値の高い体験の提案 (革新的)
■ゴールド・エクスペリエンス
より価値の高い体験がユーザーに普及 (改革的)

11. ミニマムデザインについて
「ミニマルデザイン」は単なる「シンプルなデザイン」ではありません。
コンポジションのようなインパクトには欠けますが、
ユーザが高く評価するデザインは対象者向けに特別に設計されているかのように
感じられ、好感の得やすいクリエイティブです。
■Point
・スマートフォンはタップ領域のスペースが必要なため、
バナーなどのパーツも余白を持ったミニマムデザインで設計する。

12. バナークリエイティブの変化
■フューチャーフォン ■スマートフォン
ポイント
グルメ
日用品
ファッション

13. 高速PDCA
P(1week) D(1week)
・施策案だし ・実装/リリース
・調査/分析
・要件
A(1week) C(1week)
・再リリース ・分析
定量評価
定性評価
■Point
・各ディレクターが上記施策を月3,4本リリース。
・改善が見られない場合は元に戻す。

14. UIカイゼンについて

15. UI:買い物カゴ改修
■改修前 ■改修後
②スマホラ
イクな削除
機能
①非同期で個数変更
及び金額、ステータ
ス変更を表示
③最下部にも購入
ボタンを設置

16. UI:買い物カゴ改修(定量評価)
リリース日
①
■Point
①リリース前後比で離脱数が3.19％⇒2.81％
と減少し、次ページ到達率が96.81 ％
② ⇒97.19 ％へ増加。
②購入以外の遷移が減った。要因として購入
ボタンを下にも追加した事が考えられる。

17. UI:買い物カゴ改修(定性評価)
◆ユーザーエージェント ◆ユーザーエージェント
Android 2.3.5; F-03D Android 2.3.5; IS13SH
◆ご意見ご要望 ◆ご意見ご要望
買い物かごを一度０にしたいので 買い物かごから削除するにはどう
すが、削除をしてもなりません。 したらよいのでしょうか？
◆ユーザーエージェント
iPhone OS 5_1_1
◆ご意見ご要望
買物かごに間違えた商品がらけせ
ない

18. UI:買い物カゴ改修(再改修案)
■改修前 ■再改修

19. UI:404エラーページ改修
■改修前 ■改修後

20. UI:404エラーページ改修(定量評価)
■404ページ(改修前)
■404ページ(改修後)
■ サーバーエラー(500)ページ

21. UI:サーバーエラーページ改修案

22. ①
UI:入会フォーム改修 ABテストを実施
A.ファーストビュー
B.入会メリット
■改修前 ■改修後A
■改修後B
ファースト
ビュー
②パスワード入力を
一回に。
cssでパスワード表
示
③長押しで
テキストコピー

23. UI:入会フォーム改修 ■ニックネームアシストページ
①IDの
バリデートチェック
ファースト
ビュー
②アシストページへ遷移させ
ず、
IDのカーソルへ移動

24. UI:入会フォーム改修(定量/定性評価)
■定量評価
■改修前 ■改修前(前月同時期) ■改修後
■定性評価
◆ユーザーエージェント
◆ユーザーエージェント Android 2.3.3;
Android 2.3.5; ISW11K
SonyEricssonSO-02C
◆ご意見ご要望 ◆ご意見ご要望
会員登録出来なかった 最初のIDとパスワード登録なかなかで
きない！どうしたらいいの？

25. UXについて

26. UX：リスティング改修
■縦表示 ■横表示

27. UX：タイムセール会場
■縦表示 ■横表示

28. UX：商品ページ
■商品ページ ■拡大画面 縦表示
■拡大画面 横表示

29. まとめ
IF No 内容
1 スマートフォンはファーストビューにこだわる。
主要ボタンは最下部にも設置する。
2 必ず定性評価と定量評価でチェックする。
UI
3 Android/iPhoneのUI差異を理解する。
4 定量評価は前後と前月同時期だけでなく、
近しいページや機能と比較する。
5 UXは新しい価値を提供する事で、
サイトの先進性やブランドプロミスを体験してもらう。
UX
6 1画面で完結する主要ページは横表示も最適化をおこなう。
7 ユーザーエクスペリエンスがキャズムを超えたときは
GX 「ゴールド・エクスペリエンス」と叫ぼう！
8 「nintendo 3DS 鬼トレ」7/28発売！

30. ご静聴ありがとうございました。
入会フォームABテスト結果は
「DeNAクリエイターブログ」にて掲載します。
http://creator.dena.jp/