7/16の勉強会にて発表された資料です。 Yahoo! JAPAN DeNA「iOSエンジニア・UI/UXデザイナー勉強会」 http://dena.com/campaign/2014/yahoo_dena/

1. スマデバリッチ広告を
プロトタイプで作り上げる
小林 大介
@bonegollira

2. 自己紹介
小林 大介
Yahoo! JAPAN
エンジニア
アルティメットフリスビー

3. こんな話します
こんな広告をやりました
こんな広告をこうやって作ってます

4. こんな広告をやりました

5. スマデバリッチ広告って？

6. インラインバナー
AD

7. フローティングバナー
AD AD
スクロールしても画面下部へついてくる

8. タップしてエキスパンド
AD
AD
広告をタップすると画面全体へ広がる

9. リッチ広告って？

10. その1
https://www.youtube.com/watch?v=UuQIOYb5LC8

11. その2
https://www.youtube.com/watch?v=U56PHAAcVnI

12. こんな広告のことです

13. こんな広告を
こうやって作ってます

14. こんな広告を
こうやって作ってます
!
アイデア

15. リッチ広告って
どんなUI/UXがいいのか

16. 見ていて面白い
ユーザの行動を邪魔しない
広告主の商品を存分にアピール

17. 見ていて面白い
タップ、スワイプ、ジャイロと連動
視差
色んな表現を広告に応用

18. ユーザの行動を邪魔しない
コンテンツの閲覧を妨げない
ユーザの意図しない挙動
UXを下げない

19. 広告主を存分にアピール
スマートデバイスでは画面が小さい
広告の領域はさらに小さい
チャンスは一瞬

20. こんな広告を
こうやって作ってます
!
取り組み

21. まず自分の中のアイデアの
プロトタイプを作る

22. プロトタイプを見て
チームでアイデアを膨らます

23. この2つの繰り返し

24. !
!
もっと面白くするには？
マッチするクライアントは？
もっとUXを良くするには？
もっと良いUIはないのか？
!
アイデアを思いつく
アイデアをプロトタイプ化
個人
みんなで

25. 通常のプロトタイプ
デザイナーやエンジニアで認識を合わせたい
手戻りを少なくしたい
ユーザからの評価を得たい

26. 広告のプロトタイプ
動くものを見ないと良さがわからない
とりあえずアイデアの数だけ作る

27. 無駄が多く手戻りだらけ！

28. でもプロトタイプから作る
何故か？

29. 広告を実現するまでの
ステップ

30. 広告開発者 広告企画 アプリ
営業
代理店
レップ
広告主
広告は関係者が多い

31. 広告開発者 広告企画 アプリ
営業
代理店
レップ
広告主

32. 5ステップ

33. どこかで
「これ面白いの？」
っていう疑問が生まれる

34. 企画書では
ファーストインプレッション
が弱い

35. プロトタイプでは伝わる

36. アイデアの時点から
面白さがわかるプロトタイプを
持って話す

37. アイデアプロトタイプ

38. まとめ

39. プロトタイプから作って
アイデアを膨らます

40. 「！」な広告

41. ご清聴ありがとうございました