Download - IxD of AWA - インタラクションの考え方
![Page 1: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/1.jpg)
IxD OF AWAインタラクションデザインの考え方
![Page 2: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/2.jpg)
冨樫 晃己[ Koki Togashi ]
2012年からオークションサービス「パシャオク」に 在学中から参加し、2013年サイバーエージェントに入社。
Amebaコミュニティサービスに サーバーエンジニアとして複数のプロジェクトに携わる。
AWAではプロダクトマネージャーと兼任して インタラクション開発を担当している。
PRODUCT MANAGER / INTERACTIVE ANIMATOR
室橋 秀俊[ Hidetoshi Murohashi ]
デザイナーとしてWEB制作会社、総合広告代理店を経て、 2012年サイバーエージェントに入社。
複数のAmebaコミュニティサービスを担当したのち、 現在ではAWAのデザイン、アートディレクションのほか
サービス全体のブランディングを担当。
DESIGNER / ART DIRECTOR
![Page 3: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/3.jpg)
AGENDA
インタラクションで こだわった箇所をご紹介
インタラクションデザイン の考え方
![Page 4: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/4.jpg)
![Page 5: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/5.jpg)
AWA is “Subscription music streaming
application”.邦楽も洋楽も好きなだけ聴ける「定額制音楽配信アプリ」
![Page 6: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/6.jpg)
FEATURESプレイリストを軸に
音楽との 「出会い」と「再会」
を演出
聴いた曲や お気に入りした曲など
を分析して あなた好みの楽曲を リコメンド
ジャンルや気分で プレイリストを 選ぶこともできる
好きな曲や アーティストと 雰囲気が近い曲を ノンストップで流す ラジオ機能
こだわりの選曲で プレイリストを 作成したり
アプリ上での公開や シェアができる
オフライン再生や ローカル音源の再生も
現在開発中 ※2015.8月現在
![Page 7: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/7.jpg)
Interaction Design
本日の本題
![Page 8: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/8.jpg)
当たり前に使える インタラクションにする
AWAの方針
![Page 9: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/9.jpg)
当たり前に使える インタラクションにする
AWAの方針
それぞれのOSの標準動作を 基本アクションとした上で
動きを考え抜く
![Page 10: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/10.jpg)
当たり前に使える インタラクションにする
AWAの方針
動き方に構造上の 矛盾を作らない
![Page 11: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/11.jpg)
当たり前に使える インタラクションにする
AWAの方針
動きの「驚き」ではなく 「直感的である」ことの演出
• • • • • • • • • • •
![Page 12: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/12.jpg)
Case 1
Main Page
位置関係Parallax
![Page 13: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/13.jpg)
Case 2
Playlist Page
トランジション
![Page 14: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/14.jpg)
Case 3
Player / Playlist Page
ジェスチャーVelocity
![Page 15: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/15.jpg)
Case 4
Login / Select Page
ディレイ
![Page 16: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/16.jpg)
Case 5
Genre/Mood Page
スティッキーe.g. Tumblr
![Page 17: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/17.jpg)
Case 6
Low Spec
iOS7 と iOS8Blur / Scaling
![Page 18: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/18.jpg)
Case 7
Main Page
ストレスレスTutorial / Shimmer
![Page 19: IxD of AWA - インタラクションの考え方](https://reader034.vdocuments.site/reader034/viewer/2022052215/55d311ddbb61ebbc308b47ea/html5/thumbnails/19.jpg)
THANK YOU!