スマデバリッチ広告をプロトタイプで作り上げる #yxdena
DESCRIPTION
7/16の勉強会にて発表された資料です。 Yahoo! JAPAN DeNA「iOSエンジニア・UI/UXデザイナー勉強会」 http://dena.com/campaign/2014/yahoo_dena/TRANSCRIPT
![Page 1: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/1.jpg)
スマデバリッチ広告を プロトタイプで作り上げる
小林 大介
@bonegollira
![Page 2: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/2.jpg)
自己紹介
小林 大介
Yahoo! JAPAN
エンジニア
アルティメットフリスビー
![Page 3: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/3.jpg)
こんな話します
こんな広告をやりました
こんな広告をこうやって作ってます
![Page 4: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/4.jpg)
こんな広告をやりました
![Page 5: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/5.jpg)
スマデバリッチ広告って?
![Page 6: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/6.jpg)
インラインバナー
AD
![Page 7: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/7.jpg)
フローティングバナー
AD AD
スクロールしても画面下部へついてくる
![Page 8: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/8.jpg)
タップしてエキスパンド
AD
AD
広告をタップすると画面全体へ広がる
![Page 9: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/9.jpg)
リッチ広告って?
![Page 12: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/12.jpg)
こんな広告のことです
![Page 13: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/13.jpg)
こんな広告を こうやって作ってます
![Page 14: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/14.jpg)
こんな広告を こうやって作ってます
!アイデア
![Page 15: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/15.jpg)
リッチ広告って どんなUI/UXがいいのか
![Page 16: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/16.jpg)
見ていて面白い ユーザの行動を邪魔しない
広告主の商品を存分にアピール
![Page 17: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/17.jpg)
見ていて面白い
タップ、スワイプ、ジャイロと連動
視差
色んな表現を広告に応用
![Page 18: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/18.jpg)
ユーザの行動を邪魔しない
コンテンツの閲覧を妨げない
ユーザの意図しない挙動
UXを下げない
![Page 19: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/19.jpg)
広告主を存分にアピール
スマートデバイスでは画面が小さい
広告の領域はさらに小さい
チャンスは一瞬
![Page 20: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/20.jpg)
こんな広告を こうやって作ってます
!取り組み
![Page 21: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/21.jpg)
まず自分の中のアイデアの プロトタイプを作る
![Page 22: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/22.jpg)
プロトタイプを見て チームでアイデアを膨らます
![Page 23: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/23.jpg)
この2つの繰り返し
![Page 24: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/24.jpg)
!
!
もっと面白くするには? マッチするクライアントは? もっとUXを良くするには? もっと良いUIはないのか?
!
アイデアを思いつく アイデアをプロトタイプ化
個人
みんなで
![Page 25: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/25.jpg)
通常のプロトタイプ
デザイナーやエンジニアで認識を合わせたい
手戻りを少なくしたい
ユーザからの評価を得たい
![Page 26: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/26.jpg)
広告のプロトタイプ
動くものを見ないと良さがわからない
とりあえずアイデアの数だけ作る
![Page 27: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/27.jpg)
無駄が多く手戻りだらけ!
![Page 28: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/28.jpg)
でもプロトタイプから作る 何故か?
![Page 29: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/29.jpg)
広告を実現するまでの ステップ
![Page 30: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/30.jpg)
広告開発者 広告企画 アプリ
営業 代理店 レップ 広告主
広告は関係者が多い
![Page 31: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/31.jpg)
広告開発者 広告企画 アプリ
営業 代理店 レップ 広告主
![Page 32: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/32.jpg)
5ステップ
![Page 33: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/33.jpg)
どこかで 「これ面白いの?」
っていう疑問が生まれる
![Page 34: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/34.jpg)
企画書では ファーストインプレッション
が弱い
![Page 35: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/35.jpg)
プロトタイプでは伝わる
![Page 36: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/36.jpg)
アイデアの時点から 面白さがわかるプロトタイプを
持って話す
![Page 37: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/37.jpg)
アイデアプロトタイプ
![Page 38: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/38.jpg)
まとめ
![Page 39: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/39.jpg)
プロトタイプから作って アイデアを膨らます
![Page 40: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/40.jpg)
「!」な広告
![Page 41: スマデバリッチ広告をプロトタイプで作り上げる #yxdena](https://reader033.vdocuments.mx/reader033/viewer/2022050905/54b767fe4a79595d768b4628/html5/thumbnails/41.jpg)
ご清聴ありがとうございました