SlideShare a Scribd company logo
1 of 45
Download to read offline
User Interface
「UI ラーニング・パターン」
あんざいゆき・秋葉ちひろ・小太刀 御禄
ABC2014s EffectiveAndroidコラボ開発 2014.03.21
あんざい ゆき
ブログ「Y.A.Mの雑記帳」で多数のAndroid技術情報を公
開。UIに特化した「Android Layout CookBook」や
「Android UI Cookbook for 4.0」を執筆。Android女子部
やGTUG Girlsなどのコミュニティ活動にも参加。
株式会社ウフィカ 代表取締役
小太刀 御禄
Webデザインからゲームイラスト、小説挿絵、装画など
担当。主な実績はカプコン、ソニーデジタルエンターテ
イメント、ビジュアルワークス、gihyo.jpなど。openCU
やschooでもデザインをテーマに講義を行う。
デザイナー・イラストレーター
秋葉 ちひろ
株式会社ツクロア デザイナー
スマートフォンアプリやWebサイトをメインとした、設
計・デザイン・動きの実装まで、デザインワークに関す
るすべての工程を統括し、制作からコンサルティングま
で幅広く請け負っている。
流行のアプリの
良い/悪いをコメントしていく
ぶった切り
ユーザーがなに求めてるの?
#N7でスクショとりました
初期起動画面
iOSのデザインそのまま
つかうなよ!
Webアプリ
(のハイブリッド)
のデザインどうなの
の三本線
余白狭い、字小さい
一貫性がない
ガイドラインぶっち
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s
User Interface 「UI ラーニング・パターン」 - ABC2014s

More Related Content

What's hot

SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケAsami Yamamoto
 
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例yosuke sato
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフローAsami Yamamoto
 
マンガボックスのアプリができるまで
マンガボックスのアプリができるまでマンガボックスのアプリができるまで
マンガボックスのアプリができるまでtomo tsubota
 
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editorデザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme EditorAsami Yamamoto
 
グラフィックレコーディングをやってみよう!ワークショップ資料 150301
グラフィックレコーディングをやってみよう!ワークショップ資料 150301グラフィックレコーディングをやってみよう!ワークショップ資料 150301
グラフィックレコーディングをやってみよう!ワークショップ資料 150301Azumi Wada
 
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design SprintABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design SprintNobuya Sato
 
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトこれまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトYuya Toida
 
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンドネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンドyosuke sato
 
200716 cybird breakoutsession_rie_motoki
200716 cybird breakoutsession_rie_motoki200716 cybird breakoutsession_rie_motoki
200716 cybird breakoutsession_rie_motokiRieMotoki
 
フラットデザインだけじゃない 今後を見据えたUIデザインとは?
フラットデザインだけじゃない 今後を見据えたUIデザインとは?フラットデザインだけじゃない 今後を見据えたUIデザインとは?
フラットデザインだけじゃない 今後を見据えたUIデザインとは?Yu Uno
 
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性yukahatakeyama
 
インターフェイスという名の付く会社が考えるUX
インターフェイスという名の付く会社が考えるUXインターフェイスという名の付く会社が考えるUX
インターフェイスという名の付く会社が考えるUXYasushi Senda
 
200521_rpa_community_for_girls_riemotoki_presentation_sheet
200521_rpa_community_for_girls_riemotoki_presentation_sheet200521_rpa_community_for_girls_riemotoki_presentation_sheet
200521_rpa_community_for_girls_riemotoki_presentation_sheetRieMotoki
 
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメUXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメHiroyuki Arai
 
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」Kazuki Yamashita
 
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-Satoru MURAKOSHI
 
モダンなAndroidアプリ開発勉強会
モダンなAndroidアプリ開発勉強会モダンなAndroidアプリ開発勉強会
モダンなAndroidアプリ開発勉強会Shoichi Kakizaki
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -Mikihiro Fujii
 
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?GREE/Art
 

What's hot (20)

SketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケSketchがAndroidのUIデザインに向いているワケ
SketchがAndroidのUIデザインに向いているワケ
 
スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例スマホサービスにおける、UIデザインのノウハウと実例
スマホサービスにおける、UIデザインのノウハウと実例
 
Sketchで変わるワークフロー
Sketchで変わるワークフローSketchで変わるワークフロー
Sketchで変わるワークフロー
 
マンガボックスのアプリができるまで
マンガボックスのアプリができるまでマンガボックスのアプリができるまで
マンガボックスのアプリができるまで
 
デザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editorデザインツール戦争とMaterial Theme Editor
デザインツール戦争とMaterial Theme Editor
 
グラフィックレコーディングをやってみよう!ワークショップ資料 150301
グラフィックレコーディングをやってみよう!ワークショップ資料 150301グラフィックレコーディングをやってみよう!ワークショップ資料 150301
グラフィックレコーディングをやってみよう!ワークショップ資料 150301
 
ABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design SprintABC2016 Spring: Mobile App UX & Design Sprint
ABC2016 Spring: Mobile App UX & Design Sprint
 
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイトこれまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
これまでのポートフォリオ履歴全部。 @2018/2/26 ポートフォリオナイト
 
ネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンドネイティブアプリにおける、UI/インタラクションのトレンド
ネイティブアプリにおける、UI/インタラクションのトレンド
 
200716 cybird breakoutsession_rie_motoki
200716 cybird breakoutsession_rie_motoki200716 cybird breakoutsession_rie_motoki
200716 cybird breakoutsession_rie_motoki
 
フラットデザインだけじゃない 今後を見据えたUIデザインとは?
フラットデザインだけじゃない 今後を見据えたUIデザインとは?フラットデザインだけじゃない 今後を見据えたUIデザインとは?
フラットデザインだけじゃない 今後を見据えたUIデザインとは?
 
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
[UXリサーチ共有会] エンジニアからUXデザイナーへキャリアチェンジして気づいたリサーチの重要性
 
インターフェイスという名の付く会社が考えるUX
インターフェイスという名の付く会社が考えるUXインターフェイスという名の付く会社が考えるUX
インターフェイスという名の付く会社が考えるUX
 
200521_rpa_community_for_girls_riemotoki_presentation_sheet
200521_rpa_community_for_girls_riemotoki_presentation_sheet200521_rpa_community_for_girls_riemotoki_presentation_sheet
200521_rpa_community_for_girls_riemotoki_presentation_sheet
 
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメUXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
UXD-based Biz Development / ユーザエクスペリエンスデザインをベースにした事業創造のススメ
 
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
UIデザインとUXの超基礎「UI Design & UX for ENGINEER」
 
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
未来のデザイナー論 -変化するデザイン環境と、デザイナーに求められる変化-
 
モダンなAndroidアプリ開発勉強会
モダンなAndroidアプリ開発勉強会モダンなAndroidアプリ開発勉強会
モダンなAndroidアプリ開発勉強会
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
 
Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?Gcm#3 uiデザインの品質を効率的に向上させるには?
Gcm#3 uiデザインの品質を効率的に向上させるには?
 

Viewers also liked

Sublime Text 2 で始める ReVIEW
Sublime Text 2 で始める ReVIEWSublime Text 2 で始める ReVIEW
Sublime Text 2 で始める ReVIEWYuki Anzai
 
アプリのUIを改善するための7ステップ ∼Bump Recorder の UI を設計してみたよ編∼
アプリのUIを改善するための7ステップ ∼Bump Recorder の UI を設計してみたよ編∼ アプリのUIを改善するための7ステップ ∼Bump Recorder の UI を設計してみたよ編∼
アプリのUIを改善するための7ステップ ∼Bump Recorder の UI を設計してみたよ編∼ Yuki Anzai
 
Android Pattern Cookbook で見るトレンドの変遷
Android Pattern Cookbook で見るトレンドの変遷Android Pattern Cookbook で見るトレンドの変遷
Android Pattern Cookbook で見るトレンドの変遷Yuki Anzai
 
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?Yuki Anzai
 
ABC2013 Autumn あんざいゆき x 小太刀御禄 対談
ABC2013 Autumn あんざいゆき x 小太刀御禄 対談ABC2013 Autumn あんざいゆき x 小太刀御禄 対談
ABC2013 Autumn あんざいゆき x 小太刀御禄 対談Yuki Anzai
 
Life with Android - Docomo SmartPhone Lounge Event -
Life with Android - Docomo SmartPhone Lounge Event -Life with Android - Docomo SmartPhone Lounge Event -
Life with Android - Docomo SmartPhone Lounge Event -Yuki Anzai
 
Fragment を使ってみよう
Fragment を使ってみようFragment を使ってみよう
Fragment を使ってみようYuki Anzai
 
Watch face アプリを公開してみた
Watch face アプリを公開してみたWatch face アプリを公開してみた
Watch face アプリを公開してみたYuki Anzai
 
Head First XML Layout on Android
Head First XML Layout on AndroidHead First XML Layout on Android
Head First XML Layout on AndroidYuki Anzai
 
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向Yuki Anzai
 
Android Layout 3分クッキング
Android Layout 3分クッキングAndroid Layout 3分クッキング
Android Layout 3分クッキングYuki Anzai
 
Adapter & ListView & ExpandalbeListView
Adapter & ListView & ExpandalbeListViewAdapter & ListView & ExpandalbeListView
Adapter & ListView & ExpandalbeListViewYuki Anzai
 
Android Layout Cookbook Seminor
Android Layout Cookbook SeminorAndroid Layout Cookbook Seminor
Android Layout Cookbook SeminorYuki Anzai
 

Viewers also liked (14)

Sublime Text 2 で始める ReVIEW
Sublime Text 2 で始める ReVIEWSublime Text 2 で始める ReVIEW
Sublime Text 2 で始める ReVIEW
 
アプリのUIを改善するための7ステップ ∼Bump Recorder の UI を設計してみたよ編∼
アプリのUIを改善するための7ステップ ∼Bump Recorder の UI を設計してみたよ編∼ アプリのUIを改善するための7ステップ ∼Bump Recorder の UI を設計してみたよ編∼
アプリのUIを改善するための7ステップ ∼Bump Recorder の UI を設計してみたよ編∼
 
Android Pattern Cookbook で見るトレンドの変遷
Android Pattern Cookbook で見るトレンドの変遷Android Pattern Cookbook で見るトレンドの変遷
Android Pattern Cookbook で見るトレンドの変遷
 
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
"あんざいゆき" x "秋葉ちひろ" はカンファレンスアプリをどう作るのか?
 
ABC2013 Autumn あんざいゆき x 小太刀御禄 対談
ABC2013 Autumn あんざいゆき x 小太刀御禄 対談ABC2013 Autumn あんざいゆき x 小太刀御禄 対談
ABC2013 Autumn あんざいゆき x 小太刀御禄 対談
 
Life with Android - Docomo SmartPhone Lounge Event -
Life with Android - Docomo SmartPhone Lounge Event -Life with Android - Docomo SmartPhone Lounge Event -
Life with Android - Docomo SmartPhone Lounge Event -
 
Fragment を使ってみよう
Fragment を使ってみようFragment を使ってみよう
Fragment を使ってみよう
 
Watch face アプリを公開してみた
Watch face アプリを公開してみたWatch face アプリを公開してみた
Watch face アプリを公開してみた
 
Head First XML Layout on Android
Head First XML Layout on AndroidHead First XML Layout on Android
Head First XML Layout on Android
 
マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向マルチスクリーン対応と最近のアプリの傾向
マルチスクリーン対応と最近のアプリの傾向
 
Android Layout 3分クッキング
Android Layout 3分クッキングAndroid Layout 3分クッキング
Android Layout 3分クッキング
 
Adapter & ListView & ExpandalbeListView
Adapter & ListView & ExpandalbeListViewAdapter & ListView & ExpandalbeListView
Adapter & ListView & ExpandalbeListView
 
Android Layout Cookbook Seminor
Android Layout Cookbook SeminorAndroid Layout Cookbook Seminor
Android Layout Cookbook Seminor
 
Fragment の利用パターン
Fragment の利用パターンFragment の利用パターン
Fragment の利用パターン
 

User Interface 「UI ラーニング・パターン」 - ABC2014s