スマデバリッチ広告をプロトタイプで作り上げる #yxdena

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

Upload: yahoo

Post on 15-Jan-2015

4.976 views

Category:

Internet


2 download

DESCRIPTION

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

TRANSCRIPT

Page 1: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

スマデバリッチ広告を プロトタイプで作り上げる

小林 大介

@bonegollira

Page 2: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

自己紹介

小林 大介

Yahoo! JAPAN

エンジニア

アルティメットフリスビー

Page 3: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

こんな話します

こんな広告をやりました

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

Page 4: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

こんな広告をやりました

Page 5: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

スマデバリッチ広告って?

Page 6: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

インラインバナー

AD

Page 7: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

フローティングバナー

AD AD

スクロールしても画面下部へついてくる

Page 8: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

タップしてエキスパンド

AD

AD

広告をタップすると画面全体へ広がる

Page 9: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

リッチ広告って?

Page 10: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

その1

https://www.youtube.com/watch?v=UuQIOYb5LC8

Page 11: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

その2

https://www.youtube.com/watch?v=U56PHAAcVnI

Page 12: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

こんな広告のことです

Page 13: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

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

Page 14: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

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

!アイデア

Page 15: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

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

Page 16: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

見ていて面白い ユーザの行動を邪魔しない

広告主の商品を存分にアピール

Page 17: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

見ていて面白い

タップ、スワイプ、ジャイロと連動

視差

色んな表現を広告に応用

Page 18: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

ユーザの行動を邪魔しない

コンテンツの閲覧を妨げない

ユーザの意図しない挙動

UXを下げない

Page 19: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

広告主を存分にアピール

スマートデバイスでは画面が小さい

広告の領域はさらに小さい

チャンスは一瞬

Page 20: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

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

!取り組み

Page 21: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

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

Page 22: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

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

Page 23: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

この2つの繰り返し

Page 24: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

!

!

もっと面白くするには? マッチするクライアントは? もっとUXを良くするには? もっと良いUIはないのか?

!

アイデアを思いつく アイデアをプロトタイプ化

個人

みんなで

Page 25: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

通常のプロトタイプ

デザイナーやエンジニアで認識を合わせたい

手戻りを少なくしたい

ユーザからの評価を得たい

Page 26: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

広告のプロトタイプ

動くものを見ないと良さがわからない

とりあえずアイデアの数だけ作る

Page 27: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

無駄が多く手戻りだらけ!

Page 28: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

でもプロトタイプから作る 何故か?

Page 29: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

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

Page 30: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

広告開発者 広告企画 アプリ

営業 代理店 レップ 広告主

広告は関係者が多い

Page 31: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

広告開発者 広告企画 アプリ

営業 代理店 レップ 広告主

Page 32: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

5ステップ

Page 33: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

どこかで 「これ面白いの?」

っていう疑問が生まれる

Page 34: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

企画書では ファーストインプレッション

が弱い

Page 35: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

プロトタイプでは伝わる

Page 36: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

アイデアの時点から 面白さがわかるプロトタイプを

持って話す

Page 37: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

アイデアプロトタイプ

Page 38: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

まとめ

Page 39: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

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

Page 40: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

「!」な広告

Page 41: スマデバリッチ広告をプロトタイプで作り上げる #yxdena

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