Submit Search
Upload
スマホサービスにおける、UIデザインのノウハウと実例
•
217 likes
•
177,189 views
yosuke sato
Follow
Techniques and examples for UI Design of mobile app.
Read less
Read more
Report
Share
Report
Share
1 of 62
Download now
Download to read offline
Recommended
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
UX Milk/UX girls ユーザーの心を震わせる体験をするためにはどういった方法をとればいいか。ユーザーが感動したらどのような行動をとるか。実践的なUXについて記述している。
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
Prott 1st year Anniversary
Prott's design
Prott's design
Yukihiro Kobayashi
TREND OF UI DESIGN AND INTERACTION IN NATIVE APPS.
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
8/5 UX JAM #1
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama
3/26/2014 @LightningSpot Shibuya - Powered by PROsheet - Designed by IMPATH
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
非エンジニアリング脳なデザイナーが新規アプリ開発の現場でXcodeを使用することがどのような影響を与えたか。について、自身の経験を元にまとめました。
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
ニコニコ超デザイン-Metro死闘編- http://www.slideshare.net/VoQn/metro-12761898 の続きです, 元々は社内勉強会の資料として作成しました 死闘編は経緯だったりネタ的な要素に走りすぎたのでデザインに関するナレッジはここにまとめてあります より実践的かつ具体的なノウハウ等は正規リリース後あたりで公開したいと思っています
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
Recommended
日経電子版のリニューアルで、コンセプトモデル設計とプロダクト監修をさせていただいた。 超大型アプリを完全リニューアルするとき、KPIを落とす事なく、どのように整合性やユーザー利便性を担保していくか。 「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」より http://connpass.com/event/16187/
確実に良くするUI/UX設計
確実に良くするUI/UX設計
Takayuki Fukatsu
UX Milk/UX girls ユーザーの心を震わせる体験をするためにはどういった方法をとればいいか。ユーザーが感動したらどのような行動をとるか。実践的なUXについて記述している。
ユーザーの心に刺ささるためには - UX実践編 -
ユーザーの心に刺ささるためには - UX実践編 -
Midori Hirose
Prott 1st year Anniversary
Prott's design
Prott's design
Yukihiro Kobayashi
TREND OF UI DESIGN AND INTERACTION IN NATIVE APPS.
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
yosuke sato
8/5 UX JAM #1
UXデザインをゆるく学ぶ意味
UXデザインをゆるく学ぶ意味
Tatsuya_Yokoyama
3/26/2014 @LightningSpot Shibuya - Powered by PROsheet - Designed by IMPATH
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
Kazuki Yamashita
非エンジニアリング脳なデザイナーが新規アプリ開発の現場でXcodeを使用することがどのような影響を与えたか。について、自身の経験を元にまとめました。
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
デザイナーがXcodeを使って 開発効率をUPさせた 5つのエピソード + 現場エンジニアのコメント付き
Mayumi Narisawa
ニコニコ超デザイン-Metro死闘編- http://www.slideshare.net/VoQn/metro-12761898 の続きです, 元々は社内勉強会の資料として作成しました 死闘編は経緯だったりネタ的な要素に走りすぎたのでデザインに関するナレッジはここにまとめてあります より実践的かつ具体的なノウハウ等は正規リリース後あたりで公開したいと思っています
ニコニコ超デザイン-Metro考察編-
ニコニコ超デザイン-Metro考察編-
Mizushima Kazuhiro
【増員!→370名】 開発者、デザイナー必見! アプリ制作勉強会 / 勘違いだらけのAndroid UIデザイン 発表資料(2012年8月21日) http://atnd.org/events/31039 The presentation doc for Smartphone application design seminar on 2012/08/21 by WAVE Multimedia School.
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
Android Bazaar and Conference 2016 Spring: デザイン・デバイストラック「モバイルアプリのUXとデザインスプリント」発表資料 公開用抜粋版(2016年3月12日、青山学院大学 青山キャンパス 17号館) http://abc.android-group.jp/2016s/timetables/
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
Nobuya Sato
PCサイトとは異なるスマートフォンのサイト制作にあたり、その独自性をまとめました。PC用サイトをレスポンシブ化すればスマホ対策OKという考え方に警鐘を鳴らしたいと思います。
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
Kouichi Kuriyama
テックヒルズ
テックヒルズ
tomo tsubota
UI思考は「習うより慣れろ」
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
Sumally デザイナー 大杉 健太 / エンジニア 中元寺 武尊 2015/04/14 Apple Store 銀座
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
Kenta Ohsugi
第1回スマホデザイン会議 #sdkaigi AQUA SOCIAL DRIVE - http://aquadrive.jp/ Newers - http://www.newers.net/ Pelo - http://www.pelo.jp/ Cotto - http://cotto.jp/ Pelo's Puzzle - http://www.bascule.co.jp/pelopuzzle/ Bascule Inc. - http://www.bascule.co.jp/ Bascule GO! - http://www.facebook.com/BasculeGo
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
Opt Group Tech Dayというオプトグループ内のエンジニアが集まった会で、エンジニアの前で社内限定のLTをした時の資料です。
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
Tetsuya Takeda
i3DesignのデザインプロセスにInVisionを導入した際の、社内周知用スライド。
InVision勉強会資料
InVision勉強会資料
TakuyaTakemoto
マンガボックスアプリ開発の反省から学んだコトを話します
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
UI Crunch #2 で使用したスライドです。 UIデザインへの理解がまだまだ浅い2014年の日本において、どのように行動すべきかをまとめました。
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
第1回のUI Crunchで話した内容です。 http://ui-crunch.com/ 僕の考えたフレームワークを10分以内で話すということで、かなり絞った内容になってます。 これを元にしたワークショップもやれるので、興味がある方はグッドパッチに遊びに来てください!
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
社内勉強会の時に使った資料です。
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
2015.10.07 (水) @DeNA 渋谷ヒカリエ UI Crunch - Girls’ Night / 女子の心をつかむUIデザインのコツ http://ui-crunch.connpass.com/event/20562/ にて登壇した内容。 1年間iOSとAndroidのアプリの設計デザイン・運用・改善フェーズに関わったMERYアプリを元に「女子の心をつかむUIデザインポイント」をお話ししました。 MERYは、トレンドに敏感な女の子のためのサービスです。ファッション、メイク、ヘアスタイルなど女の子のためになる記事が毎日読めて、記事で紹介されたファッションアイテムなど買うことができます。 iOS https://itunes.apple.com/jp/app/mery-meri-nuno-zinotameno/id884484921?l=en&mt=8 Android https://play.google.com/store/apps/details?id=jp.peroli.mery&hl=ja
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
個人的になぜUXをデザインするに至ったかと、UIデザインの会社であるGoodpatchでのUXについて考えていることをまとめました。
なぜUXをデザインしているのか
なぜUXをデザインしているのか
Mikihiro Fujii
2016.01.23 Cookpad TechConf 2016 http://techconf.cookpad.com/
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
Keisuke Tada
ソフトウェアのUX / UIデザイン。 それぞれの役割について触れた資料です。
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
2013年1月18日 NPO法人トップエスイー教育センター, 第6回SE勉強会 ―アジャイルで実現するUX―
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
AppStoreとGooglePlayの両プラットフォームに選ばれたBrainWarsが実践するプラットフォームに合わせたUI/UX最適化のノウハウを紹介します。
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
社内勉強会で使用したセミナーのスライドです。 UI設計そのものというより、その前の土台となる考え方について講義しました。基礎の基礎のものです。
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
2014/10/21にネットイヤーグループ株式会社にて行われたアプリUIデザイン勉強会のスライドです。
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
このデザインのどこが悪いか?をより具体的に伝えることができるようになるため、これだけはしっておきたいUIデザインの基本の「き」
UIデザインの基本
UIデザインの基本
Roy Kim
More Related Content
What's hot
【増員!→370名】 開発者、デザイナー必見! アプリ制作勉強会 / 勘違いだらけのAndroid UIデザイン 発表資料(2012年8月21日) http://atnd.org/events/31039 The presentation doc for Smartphone application design seminar on 2012/08/21 by WAVE Multimedia School.
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
Nobuya Sato
Android Bazaar and Conference 2016 Spring: デザイン・デバイストラック「モバイルアプリのUXとデザインスプリント」発表資料 公開用抜粋版(2016年3月12日、青山学院大学 青山キャンパス 17号館) http://abc.android-group.jp/2016s/timetables/
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
Nobuya Sato
PCサイトとは異なるスマートフォンのサイト制作にあたり、その独自性をまとめました。PC用サイトをレスポンシブ化すればスマホ対策OKという考え方に警鐘を鳴らしたいと思います。
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
Kouichi Kuriyama
テックヒルズ
テックヒルズ
tomo tsubota
UI思考は「習うより慣れろ」
UIは「習うより慣れろ」
UIは「習うより慣れろ」
tomo tsubota
Sumally デザイナー 大杉 健太 / エンジニア 中元寺 武尊 2015/04/14 Apple Store 銀座
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
Kenta Ohsugi
第1回スマホデザイン会議 #sdkaigi AQUA SOCIAL DRIVE - http://aquadrive.jp/ Newers - http://www.newers.net/ Pelo - http://www.pelo.jp/ Cotto - http://cotto.jp/ Pelo's Puzzle - http://www.bascule.co.jp/pelopuzzle/ Bascule Inc. - http://www.bascule.co.jp/ Bascule GO! - http://www.facebook.com/BasculeGo
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
Akiko Ohtsuka
Opt Group Tech Dayというオプトグループ内のエンジニアが集まった会で、エンジニアの前で社内限定のLTをした時の資料です。
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
Tetsuya Takeda
i3DesignのデザインプロセスにInVisionを導入した際の、社内周知用スライド。
InVision勉強会資料
InVision勉強会資料
TakuyaTakemoto
マンガボックスアプリ開発の反省から学んだコトを話します
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
tomo tsubota
UI Crunch #2 で使用したスライドです。 UIデザインへの理解がまだまだ浅い2014年の日本において、どのように行動すべきかをまとめました。
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
Taiki Kawakami
第1回のUI Crunchで話した内容です。 http://ui-crunch.com/ 僕の考えたフレームワークを10分以内で話すということで、かなり絞った内容になってます。 これを元にしたワークショップもやれるので、興味がある方はグッドパッチに遊びに来てください!
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
Mikihiro Fujii
社内勉強会の時に使った資料です。
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
neokigao
2015.10.07 (水) @DeNA 渋谷ヒカリエ UI Crunch - Girls’ Night / 女子の心をつかむUIデザインのコツ http://ui-crunch.connpass.com/event/20562/ にて登壇した内容。 1年間iOSとAndroidのアプリの設計デザイン・運用・改善フェーズに関わったMERYアプリを元に「女子の心をつかむUIデザインポイント」をお話ししました。 MERYは、トレンドに敏感な女の子のためのサービスです。ファッション、メイク、ヘアスタイルなど女の子のためになる記事が毎日読めて、記事で紹介されたファッションアイテムなど買うことができます。 iOS https://itunes.apple.com/jp/app/mery-meri-nuno-zinotameno/id884484921?l=en&mt=8 Android https://play.google.com/store/apps/details?id=jp.peroli.mery&hl=ja
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
Shoko Tanaka
個人的になぜUXをデザインするに至ったかと、UIデザインの会社であるGoodpatchでのUXについて考えていることをまとめました。
なぜUXをデザインしているのか
なぜUXをデザインしているのか
Mikihiro Fujii
2016.01.23 Cookpad TechConf 2016 http://techconf.cookpad.com/
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
Keisuke Tada
ソフトウェアのUX / UIデザイン。 それぞれの役割について触れた資料です。
UX / UIデザインって何?
UX / UIデザインって何?
JustSystems Corporation
2013年1月18日 NPO法人トップエスイー教育センター, 第6回SE勉強会 ―アジャイルで実現するUX―
UXの考え方とアプローチ
UXの考え方とアプローチ
Masaya Ando
AppStoreとGooglePlayの両プラットフォームに選ばれたBrainWarsが実践するプラットフォームに合わせたUI/UX最適化のノウハウを紹介します。
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
Hiroki Takaba
社内勉強会で使用したセミナーのスライドです。 UI設計そのものというより、その前の土台となる考え方について講義しました。基礎の基礎のものです。
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
INI株式会社
What's hot
(20)
勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
テックヒルズ
テックヒルズ
UIは「習うより慣れろ」
UIは「習うより慣れろ」
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
InVision勉強会資料
InVision勉強会資料
マンガボックスのアプリができるまで
マンガボックスのアプリができるまで
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
なぜUXをデザインしているのか
なぜUXをデザインしているのか
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
UX / UIデザインって何?
UX / UIデザインって何?
UXの考え方とアプローチ
UXの考え方とアプローチ
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
Viewers also liked
2014/10/21にネットイヤーグループ株式会社にて行われたアプリUIデザイン勉強会のスライドです。
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
Kenichi Suzuki
このデザインのどこが悪いか?をより具体的に伝えることができるようになるため、これだけはしっておきたいUIデザインの基本の「き」
UIデザインの基本
UIデザインの基本
Roy Kim
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
Katsumi Mizushima
どんなにすばらしいUXをユーザーに提供しようとしても、UIがUXのためのデザインになっていないとユーザーは体験することが出来ません。それはいろんな意味で残念。。UXを正しく考慮したUIをデザインするためには、どうすればいいのでしょうか?
UXのためのUIデザイン
UXのためのUIデザイン
Hironobu Aoki
Event : UI温泉 in 綱島温泉 2015.02.07 Speaker : 割石裕太 / wariemon - UI Designer @KAYAC inc. / OH UI温泉 - UIと湯を愛するイベント - 4番目のスピーカーとして登壇させていただきました。 UI と 温泉 の共通点として「心地よい温度」を見出し、 そこに至るまでのフローを考えた内容となっております。
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
wariemon
スマフォアプリ・サイトを制作する際に、 当たり前を当たり前だと思ってはいけない UIの基礎をスライドにしました。
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
Konomi Kawaharada
UX、HCDプロセスの社内導入を進めるにあたってビジネス要件で悩んでいる人は多いかと思います。 ビジネス要件はユーザー体験に敵なのか? 導入にあたってのノウハウを実体験に基いて紹介します。 あくまでDMMの事例にはなりますが、参考になれば幸いです。
UXはじめの一歩
UXはじめの一歩
井上 誠
2012-05-30 ShibuyaUXのセミナー資料。 当日のTweetはこちら http://togetter.com/li/312567
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
Makoto Shimizu
[UX]はやめようというお話をしました。
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
c-mitsuba
俺聞け4(2013/2/16)にて発表、これからの取り組み前に一度整理しておきたかったUXとUIの話。
はじめてのUXとUIの話
はじめてのUXとUIの話
Kazuki Yamashita
勉強会で使用したスライドです。
UXとブランド
UXとブランド
Takehisa Gokaichi
UIデザインの決定プロセスをより高速化するために、会議するのをやめました。会議をやめたことでより多くのフィードバックを得ることができ、デザインの修正コストを下げる事ができました。
UIの話は会議室でするな
UIの話は会議室でするな
Shingo Katsushima
WebSig会議 vol.33: http://websig247.jp/meeting/33/ 2ndセッション ハートに響くUIを生み出すためのデザインプロセス /土屋尚史(株式会社グッドパッチ 代表取締役)
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig24/7
ーーーーーーーーーーーーーーーーーーーーーーー schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。 WEB生放送の授業を無料で配信しています。 ▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。 https://schoo.jp/class/656/room ーーーーーーーーーーーーーーーーーーーーーーー
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
schoowebcampus
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
Katsuhito Okada
UXデザインの専門家でない人向けに、何をどうするとUXデザインになるのか、なんのためにやるのかを、ちょー乱暴に解説したスライドです。まだこれ自体が模索中であり、本当におかんが見たら意味がわからないこと請け合い。今後のバージョンアップが期待されます。なお、スライド中の解説について、深く知りたい場合はそれぞれ別個にぐぐるなり何なりして頑張ってください。
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
Yu Morita
UI/UXデザインをおぼろげに思っているけど実際どうなのよ、というのを自分もあやふやだったのでざっくりと説明。
0528 kanntigai ui_ux
0528 kanntigai ui_ux
Saori Matsui
デザインは小さなテキストから始まります。コンテンツを膨大に抱える大規模なサイトでも、ユーザーにコンテンツ作成を委ねる小さなアプリケーションでも小さなテキストが行動の変化に繋がる場合があります。 コンテンツがある状態でデザインするのと、何もないままスタートするのでは大きな差が生まれます。 UI デザインの話になると、ビジュアルやインタラクションが話題の中心になりがちですが、コンテンツも UI です。なぜコンテンツが UI デザインにおいて重要なのかを解説すると共に、今セッションでは小さなテキストの工夫からはじまるデザインについて、幾つかのケーススタディーをみながら傾向と対策を紹介します。
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
Yasuhisa Hasegawa
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
Roy Kim
2011年9月21日 JBMIAヒューマンセンタードデザイン小委員会にて。
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
Masaya Ando
Viewers also liked
(20)
アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
UIデザインの基本
UIデザインの基本
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
UXのためのUIデザイン
UXのためのUIデザイン
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
UXはじめの一歩
UXはじめの一歩
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
[UX]は投げ捨てろ!
[UX]は投げ捨てろ!
はじめてのUXとUIの話
はじめてのUXとUIの話
UXとブランド
UXとブランド
UIの話は会議室でするな
UIの話は会議室でするな
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
0528 kanntigai ui_ux
0528 kanntigai ui_ux
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
Similar to スマホサービスにおける、UIデザインのノウハウと実例
at Infragistics Webinar
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Satoru Yamaguchi
だれでも簡単に使える無償のプロトタイプツール、Indigo Studio をご紹介します。
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
インフラジスティックス・ジャパン株式会社
PPL2015 ポスター発表の内容です。かなり適当なスライドなのでここで補足します。 【概要】 残念なぐらい使いにくい画面のソフトウェア(あるいはサービス)というのがたくさんあります。で、その原因のひとつには「ただHTMLをゴリゴリ書くだけでは、人間がどう考えてどう操作するかはどこにも書かれていない」ということにあると考えました。だから、依存型付き関数型言語であるAgdaを使ってその部分を形式的に記述すれば、残念な画面が減ってもっとみんな幸せになるだろう、と考えています。Agdaを使うとうまくいけそうだ、という予想の根拠はいくつかあるのですが、まだ実装はできていません。Position Paperというのが世の中にはありますが、さらにそれの前段階のPosition Presentationです。 やっぱりここは狭いので続きはブログにて。 http://d.hatena.ne.jp/kiiiino3+lab/
ソフトウェアUI妥当性確認の形式化に向けて
ソフトウェアUI妥当性確認の形式化に向けて
Shuji Kinoshita
2013 年 09 月 20 日に弊社の東(@kenazuma) がお話させていただいた内容です。
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか?
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか?
インフラジスティックス・ジャパン株式会社
Distinct 2019(https://jp.infragistics.com/events/distinct2019)セッション資料 すでに DevOps を中心とした反復開発が当たり前になりつつある状況の中で、どのような構造を意識すれば、ユーザー インターフェイス部分についても無理なく継続的な改善を続けていくことができるかについて、デスクトップ/ウェブ/モバイルといった代表的なテクノロジー プラットフォームでの考慮点を踏まえてお話しいたします。
DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析
インフラジスティックス・ジャパン株式会社
#potatotips presentation by @hoshi_gaki (Akira Iwaya)
Potatotips3 hoshi gaki_akira_iwaya
Potatotips3 hoshi gaki_akira_iwaya
Akira Iwaya
Css nite(2010.09.23)
Css nite(2010.09.23)
Yoshiki Ushida
KLab福岡Meetup 「禍つヴァールハイトを支えるレイアウト業務」 デザイナーが行うUNITYレイアウト実装のメリットについて
禍つヴァールハイトを支えるレイアウト業務
禍つヴァールハイトを支えるレイアウト業務
KLab Inc. / Tech
2014 年 09 月 06 日に弊社サポート エンジニアである、山口 (@g_dayori) が Japan SharePoint Group (http://jpsps.com/) に登壇した際のセッション内容です。
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
インフラジスティックス・ジャパン株式会社
2013 年 09 月 21 日に名古屋MS系秋祭りで弊社の池原 (@Neri78) がお話させていただいたスライドです。
デバイス時代の Web UI コンポーネント活用
デバイス時代の Web UI コンポーネント活用
インフラジスティックス・ジャパン株式会社
開発者にとって新しいテクノロジーを追いかけることはとても楽しいことですし、必要なことです。 ただしそのうえで世の中の流れによって自分という「器」から実質的になくなってしまったり、場合によっては負債になってしまうこともあります。 将来の自分を描きながら、その時の礎となってくれる「資産」をどのように作っていくのか、自身の体験も踏まえ、皆さんにも一緒に考えていただきながら、具体的に開発者としての将来を考えるためのヒントをお話ししたいと思います。
20130528 pasonatech
20130528 pasonatech
インフラジスティックス・ジャパン株式会社
開発者にとって新しいテクノロジーを追いかけることはとても楽しいことですし、必要なことです。 ただしそのうえで世の中の流れによって自分という「器」から実質的になくなってしまったり、場合によっては負債になってしまうこともあります。 将来の自分を描きながら、その時の礎となってくれる「資産」をどのように作っていくのか、自身の体験も踏まえ、皆さんにも一緒に考えていただきながら、具体的に開発者としての将来を考えるためのヒントをお話ししたいと思います。
変化の時代における開発者のスキル資産形成について
変化の時代における開発者のスキル資産形成について
Ken Azuma
Swift愛好会 #40の登壇資料になります。 アプリ開発時におけるUI実装を検討していく中で、UIライブラリの活用や整理も含め、コード内部のアーキテクチャ等にも配慮した形にする際のヒント等についても幅広い?感じでご紹介できればと思います。
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
Fumiya Sakai
5/28に開催された「nori-na Tech Night #3」での登壇資料になります。これまでに他の場所でもLTさせて頂きました内容も含んでいますが、今回はUI実装におけるサードパーティ製のライブラリ活用方法やView構造整理についての手法や活用ポイントについてお話しさせて頂きました。 ⭐️イベントページ https://zerotoone.connpass.com/event/129591/ ⭐️掲載しているサンプルコード https://github.com/fumiyasac/2nd_ios_ui_recipe_showcase
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai
2/21でドリコム株式会社様で開催された「エンジニア総選挙」でのLT登壇資料になります。 「社会で働くエンジニアが大集合!エンジニア総選挙を開催します!」 https://www.wantedly.com/projects/273166 iOSアプリにおける新機能開発やUI実装を実現するための前段として実践する「UI実装の試し打ち」におけるプロセスと機能実現のために方針立てをする過程を自分なりにまとめました。 特に今回はUIとの繋ぎになる処理部分の実現過程における考察を中心として展開しています。
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
Fumiya Sakai
at Infragistics seminar
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
Satoru Yamaguchi
”今からはじめる XAML プログラミング セミナー" においてソリューション コンサルタントの山口 (@g_dayori) が講演させていただいた際の資料です。
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
インフラジスティックス・ジャパン株式会社
Android個人開発LTでの登壇資料になります。 ※過去にAndroid関連の登壇内容の中でUI実装関連部分を集めたものになります!
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
Fumiya Sakai
Swift愛好会 #39の登壇資料になります。 アプリ開発時におけるUI実装を検討していく中で、自前でDIYするか?ライブラリを利用するか?の判断を求められる場合があるかと思います。 このような問いに対しての絶対的な「万能薬」はないですが、今回は自作だと難しそうな部分をUIライブラリを活用して、効率化を模索するアプローチをしてみる事例と活用したライブラリをご紹介しています。
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
Fumiya Sakai
potatotips (iOS/Android開発Tips共有会) 第26回(2016/02/17)の発表資料です。
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例
Kenichi Kambara
Similar to スマホサービスにおける、UIデザインのノウハウと実例
(20)
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
ソフトウェアUI妥当性確認の形式化に向けて
ソフトウェアUI妥当性確認の形式化に向けて
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか?
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか?
DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析
Potatotips3 hoshi gaki_akira_iwaya
Potatotips3 hoshi gaki_akira_iwaya
Css nite(2010.09.23)
Css nite(2010.09.23)
禍つヴァールハイトを支えるレイアウト業務
禍つヴァールハイトを支えるレイアウト業務
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
デバイス時代の Web UI コンポーネント活用
デバイス時代の Web UI コンポーネント活用
20130528 pasonatech
20130528 pasonatech
変化の時代における開発者のスキル資産形成について
変化の時代における開発者のスキル資産形成について
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例
スマホサービスにおける、UIデザインのノウハウと実例
1.
TECHNIQUES and EXAMPLES for UI
DESIGN of MOBILE APP UX Design Thinking @sugaar 2015/07/14
2.
佐藤 洋介 (さとうようすけ) Ameba事業本部 クリエイティブ統括室 室長 チーフ・クリエイティブディレクター @sugaar
3.
INDEX 1. Design rules Type
of Device Type of User Design Tools 2. Design trends Type of UI and Tips 3. Finally Tips of Design
4.
1. Design rules Type
of Device
5.
iOS UI kit framework
6.
iOS iOSアプリケーションの多くは、UIKitフレームワークで定義 された何らかのUI要素を使っています。 https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
7.
UIKitに付属するUI要素は、大きく4つに分類できます。 ❶ バー バーには、アプリケーション全体における現在の画面の 位置づけを表すコンテキスト情報と、別の画面に遷移し、 あるいはアクションを起動するためのコントロール部品 があります。 ❷ コンテンツビュー コンテンツビューにはアプリケーションの処理対象であ るコンテンツが収容されており、 スクロールや、項目の挿入、削除、再配置などといった 操作ができます。 ❶ ❶ ❷ https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
8.
UIKitに付属するUI要素は、大きく4つに分類できます。 ❸ コントロール部品 コントロール部品には、アクションを起動し、あるいは 情報を表示する役割があります。 ❹ 一時ビュー 一時ビューは必要に応じて短時間だけ現れ、重要な情報 を表示したり、追加の選択肢や機能を提供したりします。 ❸ ❸ ❹ https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
9.
Android
10.
■ デザインガイドライン解説動画 http://www.youtube.com/watch?v=x_gxZd9kLv4
11.
4系で2系のダイアログデザインが表示される (cancel/OKのボタン位置で左がOK)のは避ける http://www.youtube.com/watch?v=x_gxZd9kLv4
12.
12 左上の戻るボタン(iOSのデザインパターンの流用)は避ける。 アクションバーの採用で解決するはず。 http://developer.android.com/design/patterns/navigation.html
13.
13 Flat Design
14.
15.
視覚 触覚ではなく
16.
紙のような触感 弧を描くインタラクション https://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing
17.
17 Type of Device 装飾で ごまかせなくなった
18.
18 Type of Device 陳腐化 がすぐバレる市場に
19.
1. Design rules Type
of User
20.
シニア世代の スマートフォン所有率 約3割 MMD研究所:https://mmdlabo.jp/investigation/detail_1452.html 調査期間:2015年6月12日∼13日 有効回答:60歳以上の男女4,406人
21.
「スマホ依存」の自覚率 8割 MMD研究所:https://mmdlabo.jp/investigation/detail_1433.html 調査期間:2015年5月8日∼5月9日 スマートフォン所有の15歳∼59歳男女562人 20代の4割が「かなり依存している」と回答
22.
High Literacy Users
23.
操作の多様性 https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/InteractivityInput/InteractivityInput.html#//apple_ref/doc/uid/TP40006556-CH55-SW2 タップ、ダブルタップ ドラッグ フリック スワイプ
ピンチ タッチ&ホールド
24.
Mislead !!
25.
25 Type of User できるかもUI の積み重ねが離脱を生む
26.
26 Type of User 「慣れ」と「忘れ」の 反復
27.
1. Design rules Design
Tools
28.
29.
30.
http://www.dyson.co.jp/community/about-dyson.aspx モック ツールの 多様化
31.
32.
33.
34.
INDEX 1. Design rules Type
of Device Type of User Design Tools 2. Design trends Type of UI and Tips 3. Finally Tips of Design
35.
世の中に溢れる 様々なアプリ
36.
目的別に見る トレンドUI
37.
Type of UI
and Tips 1 浮遊感
38.
• パララックスとスケールをコントロー ルし、ページを繰りたくなるような 仕掛け • 詳細画面からの遷移もシームレスで、 フィードの上に乗っている表現 •
投稿画面も浮遊感を踏襲し、サービ ス全体が、統一感のある印象に Storehouce
39.
• 背景にメインイメージを配置し、 ページの持つ世界観を訴求 • その上にコンテンツを浮遊させるこ とで、ページ全体の印象を統一 •
閲覧を邪魔しない控えめなスケール • 横フリックで背景をパララックスさ せることで、横のつながりを示唆 AWA
40.
Type of UI
and Tips 2 示唆するUI
41.
• ファーストランディング時に、左メ ニューの存在を画面のバウンスを用 いて示唆している • 下部のマガジンが横に流れることで 注目を集める工夫をしている Moldiv
42.
• コンテンツの読み込み時に、最上部 に光が流れるようなローディングが 走り、横フリックを示唆 • 詳細画面の横フリックの示唆にもつ ながっている pixotale
43.
Type of UI
and Tips 3 ドロワー
44.
• 王道のリスト型の上バージョン • 文字が大きく、メニューの上下にゆ とりがあるため押下しやすい •
端末が大きくなるにつれ、左上に置 かれたメニューは片手での操作が困 難になってきた Medium
45.
• いわゆるリスト型ではなく、独自の レイアウトで遷移の項目を表現 • 縦と横のフリックが必要 •
主要なメニューはナビゲーションに 収めていて、ドロワーとナビゲー ションを用いたハイブリッドな作り Fleck
46.
• 下にフリックすると、上からドロワー が出現する • アイコンなど、手がかりがいないた め、高いリテラシーを求められる •
しかし、「閲覧」という観点では、 ドロワーの中身はさほど重要な項目 ではない Facebook Paper
47.
However !!
48.
ドロワーをやめた例1 Facebook
49.
ドロワーをやめた例2 Path
50.
Type of UI
and Tips 4 遷移
51.
• 王道の、タップした写真がそのまま 詳細画面にFixする演出 • こうすることで、遷移をシームレス に表現でき、より商品探しに没頭で きるつくりになっている Fancy
52.
• 遷移時に、元の画面がスケールダウ ンし、奥に引っ込んだ表現を用いる ことで、ドリルダウンしたことを表 現 • コンテンツ詳細までのタップ数が多 いのが懸念だが、この表現を用いる ことで、心的負荷を軽減 Issuu
53.
• フィード画面から、写真詳細時に、 画像以外の情報が画面外へ消えるイ ンタラクションを用いることで遷移 をシームレスに見せている • Back時に元の位置にFixする動きも 統一感がある Ultravisual
54.
Type of UI
and Tips 5 カメラ
55.
• 撮影時に、被写体をぐるっと回りな がら撮ることができるアプリ • 閲覧時に、スマホ画面の傾きに応じ て反応するため、閲覧していて楽し くなる仕掛けがある •
横だけでなく、縦にパノラマのよう に撮ることもできる FYUSE
56.
• 自分を中心に、360度のパノラマ写 真を撮影でき、3D空間としてマッピ グしてくれるアプリ • 撮影時のガイドもわかりやすく、次 にどこを取れば良いのかがスムーズ に伝わる Photosynth
57.
INDEX 1. Design rules Type
of Device Type of User Design Tools 2. Design trends Type of UI and Tips 3. Finally Tips of Design
58.
Tips of Design
1 「いかに詰め込むか」ではなく 「本当に必要か」
59.
Tips of Design
2 自己満ユーザー目線の 落とし穴
60.
Tips of Design
3 トレンドを 鵜呑みにしない
61.
Thank you UX Design
Thinking @sugaar 2015/07/14
62.
https://www.cyberagent.co.jp/recruit/special/techcareer/ サイバーエージェントでは、 世界基準のサービスを一緒につくる仲間を募集しています。 Recruit
Download now