IxD of AWA - インタラクションの考え方

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

Recomendados

ユーザーエクスペリエンスに基づいた指標設計と改善の考え方 von
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方ユーザーエクスペリエンスに基づいた指標設計と改善の考え方
ユーザーエクスペリエンスに基づいた指標設計と改善の考え方Taku ogawa
40.6K views29 Folien
20150806_UXnama_Goodpatch von
20150806_UXnama_Goodpatch20150806_UXnama_Goodpatch
20150806_UXnama_GoodpatchSatoru MURAKOSHI
16.2K views35 Folien
アメーバピグのユーザ体験を定量/定性で捉える方法 von
アメーバピグのユーザ体験を定量/定性で捉える方法アメーバピグのユーザ体験を定量/定性で捉える方法
アメーバピグのユーザ体験を定量/定性で捉える方法寛 水野
33K views40 Folien
対話からはじまるデザインプロセス:UX Japan Forum2015 von
対話からはじまるデザインプロセス:UX Japan Forum2015対話からはじまるデザインプロセス:UX Japan Forum2015
対話からはじまるデザインプロセス:UX Japan Forum2015Satoru MURAKOSHI
8.6K views88 Folien
グッドパッチのデザインカルチャーの作り方 von
グッドパッチのデザインカルチャーの作り方グッドパッチのデザインカルチャーの作り方
グッドパッチのデザインカルチャーの作り方Satoru MURAKOSHI
35.7K views53 Folien
誰のためのUI? - モノづくりのゴールを実現するフレームワーク - von
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -Mikihiro Fujii
13.2K views18 Folien

Más contenido relacionado

Was ist angesagt?

いいデザインのために組織の一人ひとりができること von
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができることMasahiko Yoshikawa
69.4K views41 Folien
GREE Creators Meetup_Closing von
GREE Creators Meetup_ClosingGREE Creators Meetup_Closing
GREE Creators Meetup_ClosingSatoru MURAKOSHI
3.8K views50 Folien
The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする von
The Way of the (Co-)Prototyping チームでUser InterfaceをプロトタイピングするThe Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
The Way of the (Co-)Prototyping チームでUser InterfaceをプロトタイピングするMikihiro Fujii
10.5K views40 Folien
デザイナーからみた仕事をしやすいディレクター von
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクターtake-it
73.9K views53 Folien
クックパッドデザイナーが実践するユーザーファースト von
クックパッドデザイナーが実践するユーザーファーストクックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファーストMiwa Kuramitsu
20.1K views38 Folien
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化- von
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-Satoru MURAKOSHI
17.1K views78 Folien

Was ist angesagt?(20)

いいデザインのために組織の一人ひとりができること von Masahiko Yoshikawa
いいデザインのために組織の一人ひとりができることいいデザインのために組織の一人ひとりができること
いいデザインのために組織の一人ひとりができること
Masahiko Yoshikawa69.4K views
The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする von Mikihiro Fujii
The Way of the (Co-)Prototyping チームでUser InterfaceをプロトタイピングするThe Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
The Way of the (Co-)Prototyping チームでUser Interfaceをプロトタイピングする
Mikihiro Fujii10.5K views
デザイナーからみた仕事をしやすいディレクター von take-it
デザイナーからみた仕事をしやすいディレクターデザイナーからみた仕事をしやすいディレクター
デザイナーからみた仕事をしやすいディレクター
take-it73.9K views
クックパッドデザイナーが実践するユーザーファースト von Miwa Kuramitsu
クックパッドデザイナーが実践するユーザーファーストクックパッドデザイナーが実践するユーザーファースト
クックパッドデザイナーが実践するユーザーファースト
Miwa Kuramitsu20.1K views
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化- von Satoru MURAKOSHI
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
Satoru MURAKOSHI17.1K views
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み von Yuya Toida
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
息のながーいB2Bサービスで、デザイナーが価値を発揮するための取り組み
Yuya Toida3.9K views
風呂場で考えるUIデザイナーの未来 von Masayuki Uetani
風呂場で考えるUIデザイナーの未来風呂場で考えるUIデザイナーの未来
風呂場で考えるUIデザイナーの未来
Masayuki Uetani15.2K views
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司 von schoowebcampus
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
快適にWebデザインするためのフリーランスの仕事の流れ【プロジェクトマネジメント編】夏本 健司
schoowebcampus20.6K views
ディレクターとして取り組むHCD業務の実際 von 寛 水野
ディレクターとして取り組むHCD業務の実際ディレクターとして取り組むHCD業務の実際
ディレクターとして取り組むHCD業務の実際
寛 水野4.2K views
重要なのはリサーチ・プランニング・プロトタイプの三本柱 von Yuya Toida
重要なのはリサーチ・プランニング・プロトタイプの三本柱重要なのはリサーチ・プランニング・プロトタイプの三本柱
重要なのはリサーチ・プランニング・プロトタイプの三本柱
Yuya Toida8.5K views
Framework for Designing the Goals 「モノづくりのゴールを実現するフレームワーク」 von Mikihiro Fujii
Framework for Designing the Goals 「モノづくりのゴールを実現するフレームワーク」Framework for Designing the Goals 「モノづくりのゴールを実現するフレームワーク」
Framework for Designing the Goals 「モノづくりのゴールを実現するフレームワーク」
Mikihiro Fujii2.6K views
デザインのためのデザイン von Masayuki Uetani
デザインのためのデザインデザインのためのデザイン
デザインのためのデザイン
Masayuki Uetani156.5K views
UX思考の組織づくりと、その課題 von Fumiya Yamamoto
UX思考の組織づくりと、その課題UX思考の組織づくりと、その課題
UX思考の組織づくりと、その課題
Fumiya Yamamoto7K views
趣味と仕事(ビジュアルシンキングとNewsPicks) von 潤 櫻田
趣味と仕事(ビジュアルシンキングとNewsPicks)趣味と仕事(ビジュアルシンキングとNewsPicks)
趣味と仕事(ビジュアルシンキングとNewsPicks)
潤 櫻田4K views
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション von Mikihiro Fujii
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
"チーム"と"プロトタイプ"でつくる Goodpatchのコラボレーション
Mikihiro Fujii2.8K views
SketchがAndroidのUIデザインに向いているワケ von Asami Yamamoto
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
Asami Yamamoto24.8K views
プロトタイピングの目的・範囲・ツール von theguild
プロトタイピングの目的・範囲・ツールプロトタイピングの目的・範囲・ツール
プロトタイピングの目的・範囲・ツール
theguild3.4K views

Destacado

インタラクションデザインの前のはなし UX生トークvol.2 von
インタラクションデザインの前のはなし UX生トークvol.2インタラクションデザインの前のはなし UX生トークvol.2
インタラクションデザインの前のはなし UX生トークvol.2井上 誠
15K views18 Folien
フロント作業の効率化 von
フロント作業の効率化フロント作業の効率化
フロント作業の効率化Yuto Yoshinari
30K views85 Folien
UXデザイナーの生存確認と最新事情 | UXなまトーク von
UXデザイナーの生存確認と最新事情 | UXなまトークUXデザイナーの生存確認と最新事情 | UXなまトーク
UXデザイナーの生存確認と最新事情 | UXなまトークToshiaki Otsuka
22.7K views36 Folien
UXデザインの居場所:UXなまトーク資料 von
UXデザインの居場所:UXなまトーク資料UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料Satoru MURAKOSHI
24.1K views37 Folien
なぜUXをデザインしているのか von
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのかMikihiro Fujii
86.6K views27 Folien
UXはじめの一歩 von
UXはじめの一歩UXはじめの一歩
UXはじめの一歩井上 誠
115.4K views59 Folien

Destacado(20)

インタラクションデザインの前のはなし UX生トークvol.2 von 井上 誠
インタラクションデザインの前のはなし UX生トークvol.2インタラクションデザインの前のはなし UX生トークvol.2
インタラクションデザインの前のはなし UX生トークvol.2
井上 誠15K views
フロント作業の効率化 von Yuto Yoshinari
フロント作業の効率化フロント作業の効率化
フロント作業の効率化
Yuto Yoshinari30K views
UXデザイナーの生存確認と最新事情 | UXなまトーク von Toshiaki Otsuka
UXデザイナーの生存確認と最新事情 | UXなまトークUXデザイナーの生存確認と最新事情 | UXなまトーク
UXデザイナーの生存確認と最新事情 | UXなまトーク
Toshiaki Otsuka22.7K views
UXデザインの居場所:UXなまトーク資料 von Satoru MURAKOSHI
UXデザインの居場所:UXなまトーク資料UXデザインの居場所:UXなまトーク資料
UXデザインの居場所:UXなまトーク資料
Satoru MURAKOSHI24.1K views
なぜUXをデザインしているのか von Mikihiro Fujii
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのか
Mikihiro Fujii86.6K views
UXはじめの一歩 von 井上 誠
UXはじめの一歩UXはじめの一歩
UXはじめの一歩
井上 誠115.4K views
UI/UXじゃないUXの話 〜ボトムアップで始めるUX導入のススメ〜 von 井上 誠
UI/UXじゃないUXの話 〜ボトムアップで始めるUX導入のススメ〜UI/UXじゃないUXの話 〜ボトムアップで始めるUX導入のススメ〜
UI/UXじゃないUXの話 〜ボトムアップで始めるUX導入のススメ〜
井上 誠3.9K views
サービスデザイン方法論実践編 第4回ペーパープロトタイピング-Prottのご紹介 von Tetsuya Takeda
サービスデザイン方法論実践編 第4回ペーパープロトタイピング-Prottのご紹介サービスデザイン方法論実践編 第4回ペーパープロトタイピング-Prottのご紹介
サービスデザイン方法論実践編 第4回ペーパープロトタイピング-Prottのご紹介
Tetsuya Takeda2K views
UX JAM #2キックオフ von UX MILK
UX JAM #2キックオフUX JAM #2キックオフ
UX JAM #2キックオフ
UX MILK536 views
プロトタイピングで変わる開発プロセス 一休.comレストランの事例 von Tetsuya Takeda
プロトタイピングで変わる開発プロセス 一休.comレストランの事例プロトタイピングで変わる開発プロセス 一休.comレストランの事例
プロトタイピングで変わる開発プロセス 一休.comレストランの事例
Tetsuya Takeda4.4K views
Beyond Mobile IA Thinking at Goodpatch LT von Takashi Sakamoto
Beyond Mobile IA Thinking at Goodpatch LTBeyond Mobile IA Thinking at Goodpatch LT
Beyond Mobile IA Thinking at Goodpatch LT
Takashi Sakamoto1.9K views
UX Design x Marketing Workshop - worksheet templates von Tetsuya Takeda
UX Design x Marketing Workshop - worksheet templatesUX Design x Marketing Workshop - worksheet templates
UX Design x Marketing Workshop - worksheet templates
Tetsuya Takeda4.5K views
AWS クックパッドの運用事例 von Satoshi Takada
AWS クックパッドの運用事例AWS クックパッドの運用事例
AWS クックパッドの運用事例
Satoshi Takada12.2K views
Think user first #2 フリルの機能改善における仮説と検証 von YUKI YAMAGUCHI
Think user first #2 フリルの機能改善における仮説と検証 Think user first #2 フリルの機能改善における仮説と検証
Think user first #2 フリルの機能改善における仮説と検証
YUKI YAMAGUCHI4.8K views
ライターさんと良い関係を築くには von Kensuke Suzuki
ライターさんと良い関係を築くにはライターさんと良い関係を築くには
ライターさんと良い関係を築くには
Kensuke Suzuki8.2K views
そもそもディレクターにとって失敗とは何か von Satoru MURAKOSHI
そもそもディレクターにとって失敗とは何かそもそもディレクターにとって失敗とは何か
そもそもディレクターにとって失敗とは何か
Satoru MURAKOSHI6.8K views
AbemaTV Developer Conference 2016 von 康洋 板敷
AbemaTV Developer Conference 2016AbemaTV Developer Conference 2016
AbemaTV Developer Conference 2016
康洋 板敷6.2K views
ネイティブアプリにおける、UI/インタラクションのトレンド von yosuke sato
ネイティブアプリにおける、UI/インタラクションのトレンドネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato180.4K views

Similar a IxD of AWA - インタラクションの考え方

はじめてのLeanUXから学んだ実体験 von
はじめてのLeanUXから学んだ実体験はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験Daichi Aoki
2.6K views39 Folien
デザイン屋なりにいろんな人を応援してみた結果 von
デザイン屋なりにいろんな人を応援してみた結果デザイン屋なりにいろんな人を応援してみた結果
デザイン屋なりにいろんな人を応援してみた結果Kazunori Tateyama
677 views20 Folien
デザイナーが複業でデザイナーしてる話 von
デザイナーが複業でデザイナーしてる話デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話Yuya Toida
2.8K views19 Folien
エンジニアの移住交流会 自己紹介 von
エンジニアの移住交流会 自己紹介エンジニアの移住交流会 自己紹介
エンジニアの移住交流会 自己紹介Rie Tokumi
518 views18 Folien
ブランディングを意識したサービス開発の一歩 von
ブランディングを意識したサービス開発の一歩ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩Haiji Haiiro
4.5K views50 Folien
UXデザインをゆるく学ぶ意味 von
UXデザインをゆるく学ぶ意味UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味Tatsuya_Yokoyama
6.8K views29 Folien

Similar a IxD of AWA - インタラクションの考え方(20)

はじめてのLeanUXから学んだ実体験 von Daichi Aoki
はじめてのLeanUXから学んだ実体験はじめてのLeanUXから学んだ実体験
はじめてのLeanUXから学んだ実体験
Daichi Aoki2.6K views
デザイン屋なりにいろんな人を応援してみた結果 von Kazunori Tateyama
デザイン屋なりにいろんな人を応援してみた結果デザイン屋なりにいろんな人を応援してみた結果
デザイン屋なりにいろんな人を応援してみた結果
Kazunori Tateyama677 views
デザイナーが複業でデザイナーしてる話 von Yuya Toida
デザイナーが複業でデザイナーしてる話デザイナーが複業でデザイナーしてる話
デザイナーが複業でデザイナーしてる話
Yuya Toida2.8K views
エンジニアの移住交流会 自己紹介 von Rie Tokumi
エンジニアの移住交流会 自己紹介エンジニアの移住交流会 自己紹介
エンジニアの移住交流会 自己紹介
Rie Tokumi518 views
ブランディングを意識したサービス開発の一歩 von Haiji Haiiro
ブランディングを意識したサービス開発の一歩ブランディングを意識したサービス開発の一歩
ブランディングを意識したサービス開発の一歩
Haiji Haiiro4.5K views
UXデザインをゆるく学ぶ意味 von Tatsuya_Yokoyama
UXデザインをゆるく学ぶ意味UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama6.8K views
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト von Yuya Toida
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトこれまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
Yuya Toida2.2K views
PMと並走してプロダクトにつなげるUXリサーチ von JunNomura1
PMと並走してプロダクトにつなげるUXリサーチPMと並走してプロダクトにつなげるUXリサーチ
PMと並走してプロダクトにつなげるUXリサーチ
JunNomura126 views
PMと並走してプロダクトにつなげるUXリサーチ von JunNomura1
PMと並走してプロダクトにつなげるUXリサーチPMと並走してプロダクトにつなげるUXリサーチ
PMと並走してプロダクトにつなげるUXリサーチ
JunNomura1216 views
意味をデザインするを考える von Aya Tokuda
意味をデザインするを考える意味をデザインするを考える
意味をデザインするを考える
Aya Tokuda60 views
0からのウェブディレクション講座:設計編 v5.3 von Yasuji Takase
0からのウェブディレクション講座:設計編 v5.30からのウェブディレクション講座:設計編 v5.3
0からのウェブディレクション講座:設計編 v5.3
Yasuji Takase165.7K views
禍つヴァールハイトを支えるレイアウト業務 von KLab Inc. / Tech
禍つヴァールハイトを支えるレイアウト業務禍つヴァールハイトを支えるレイアウト業務
禍つヴァールハイトを支えるレイアウト業務
KLab Inc. / Tech801 views
グラフィックレコーディングをやってみよう!ワークショップ資料 150301 von Azumi Wada
グラフィックレコーディングをやってみよう!ワークショップ資料 150301グラフィックレコーディングをやってみよう!ワークショップ資料 150301
グラフィックレコーディングをやってみよう!ワークショップ資料 150301
Azumi Wada32K views
定性調査のポイント von Fumito Sato
定性調査のポイント定性調査のポイント
定性調査のポイント
Fumito Sato2.7K views
ポートフォリオ.pdf von yuit3
ポートフォリオ.pdfポートフォリオ.pdf
ポートフォリオ.pdf
yuit359 views
もしも素人営業ウーマンが UI/UXデザイナーになったら von Chloe Takahashi
もしも素人営業ウーマンが UI/UXデザイナーになったらもしも素人営業ウーマンが UI/UXデザイナーになったら
もしも素人営業ウーマンが UI/UXデザイナーになったら
Chloe Takahashi1.7K views
【オープンセミナー岡山2014】 明日からできるデザイン脳 von Chihiro Tomita
【オープンセミナー岡山2014】 明日からできるデザイン脳【オープンセミナー岡山2014】 明日からできるデザイン脳
【オープンセミナー岡山2014】 明日からできるデザイン脳
Chihiro Tomita5.8K views
凡人のための論理設計アプローチ von Yasuji Takase
凡人のための論理設計アプローチ凡人のための論理設計アプローチ
凡人のための論理設計アプローチ
Yasuji Takase3.9K views
ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830 von Toshiki Kunimitsu
ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830
ReDesigner Online Talk_デザイナーの副業・フリーランスの真実_國光登壇内容20210830
Toshiki Kunimitsu238 views

IxD of AWA - インタラクションの考え方