SlideShare a Scribd company logo
TECHNIQUES and
EXAMPLES for
UI DESIGN of
MOBILE APP
UX Design Thinking
@sugaar 2015/07/14
佐藤 洋介
(さとうようすけ)
Ameba事業本部 クリエイティブ統括室 室長
チーフ・クリエイティブディレクター
@sugaar
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
1. Design rules
Type of Device
iOS
UI kit framework
iOS
iOSアプリケーションの多くは、UIKitフレームワークで定義
された何らかのUI要素を使っています。
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
UIKitに付属するUI要素は、大きく4つに分類できます。
❶ バー
バーには、アプリケーション全体における現在の画面の
位置づけを表すコンテキスト情報と、別の画面に遷移し、
あるいはアクションを起動するためのコントロール部品
があります。
❷ コンテンツビュー
コンテンツビューにはアプリケーションの処理対象であ
るコンテンツが収容されており、
スクロールや、項目の挿入、削除、再配置などといった
操作ができます。
❶
❶
❷
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
UIKitに付属するUI要素は、大きく4つに分類できます。
❸ コントロール部品
コントロール部品には、アクションを起動し、あるいは
情報を表示する役割があります。
❹ 一時ビュー
一時ビューは必要に応じて短時間だけ現れ、重要な情報
を表示したり、追加の選択肢や機能を提供したりします。
❸
❸
❹
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/DesigningForiOS7/DesigningForiOS7.html
Android
■ デザインガイドライン解説動画
http://www.youtube.com/watch?v=x_gxZd9kLv4
4系で2系のダイアログデザインが表示される
(cancel/OKのボタン位置で左がOK)のは避ける
http://www.youtube.com/watch?v=x_gxZd9kLv4
12
左上の戻るボタン(iOSのデザインパターンの流用)は避ける。
アクションバーの採用で解決するはず。
http://developer.android.com/design/patterns/navigation.html
13
Flat Design
視覚 触覚ではなく
紙のような触感 弧を描くインタラクション
https://www.google.com/design/spec/animation/meaningful-transitions.html#meaningful-transitions-hierarchical-timing
17
Type of Device
装飾で
ごまかせなくなった
18
Type of Device
陳腐化
がすぐバレる市場に
1. Design rules
Type of User
シニア世代の
スマートフォン所有率
約3割
MMD研究所:https://mmdlabo.jp/investigation/detail_1452.html 調査期間:2015年6月12日∼13日 有効回答:60歳以上の男女4,406人
「スマホ依存」の自覚率
8割
MMD研究所:https://mmdlabo.jp/investigation/detail_1433.html 調査期間:2015年5月8日∼5月9日 スマートフォン所有の15歳∼59歳男女562人
20代の4割が「かなり依存している」と回答
High Literacy
Users
操作の多様性
https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/InteractivityInput/InteractivityInput.html#//apple_ref/doc/uid/TP40006556-CH55-SW2
タップ、ダブルタップ ドラッグ フリック
スワイプ ピンチ タッチ&ホールド
Mislead
!!
25
Type of User
できるかもUI
の積み重ねが離脱を生む
26
Type of User
「慣れ」と「忘れ」の
反復
1. Design rules
Design Tools
http://www.dyson.co.jp/community/about-dyson.aspx
モック
ツールの
多様化
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
世の中に溢れる
様々なアプリ
目的別に見る
トレンドUI
Type of UI and Tips
1
浮遊感
• パララックスとスケールをコントロー
ルし、ページを繰りたくなるような
仕掛け
• 詳細画面からの遷移もシームレスで、
フィードの上に乗っている表現
• 投稿画面も浮遊感を踏襲し、サービ
ス全体が、統一感のある印象に
Storehouce
• 背景にメインイメージを配置し、 
ページの持つ世界観を訴求
• その上にコンテンツを浮遊させるこ
とで、ページ全体の印象を統一
• 閲覧を邪魔しない控えめなスケール
• 横フリックで背景をパララックスさ
せることで、横のつながりを示唆
AWA
Type of UI and Tips
2
示唆するUI
• ファーストランディング時に、左メ
ニューの存在を画面のバウンスを用
いて示唆している
• 下部のマガジンが横に流れることで
注目を集める工夫をしている
Moldiv
• コンテンツの読み込み時に、最上部
に光が流れるようなローディングが
走り、横フリックを示唆
• 詳細画面の横フリックの示唆にもつ
ながっている
pixotale
Type of UI and Tips
3
ドロワー
• 王道のリスト型の上バージョン
• 文字が大きく、メニューの上下にゆ
とりがあるため押下しやすい
• 端末が大きくなるにつれ、左上に置
かれたメニューは片手での操作が困
難になってきた
Medium
• いわゆるリスト型ではなく、独自の
レイアウトで遷移の項目を表現
• 縦と横のフリックが必要
• 主要なメニューはナビゲーションに
収めていて、ドロワーとナビゲー
ションを用いたハイブリッドな作り
Fleck
• 下にフリックすると、上からドロワー
が出現する
• アイコンなど、手がかりがいないた
め、高いリテラシーを求められる
• しかし、「閲覧」という観点では、
ドロワーの中身はさほど重要な項目
ではない
Facebook Paper
However
!!
ドロワーをやめた例1
Facebook
ドロワーをやめた例2
Path
Type of UI and Tips
4
遷移
• 王道の、タップした写真がそのまま
詳細画面にFixする演出
• こうすることで、遷移をシームレス
に表現でき、より商品探しに没頭で
きるつくりになっている
Fancy
• 遷移時に、元の画面がスケールダウ
ンし、奥に引っ込んだ表現を用いる
ことで、ドリルダウンしたことを表
現
• コンテンツ詳細までのタップ数が多
いのが懸念だが、この表現を用いる
ことで、心的負荷を軽減
Issuu
• フィード画面から、写真詳細時に、
画像以外の情報が画面外へ消えるイ
ンタラクションを用いることで遷移
をシームレスに見せている
• Back時に元の位置にFixする動きも
統一感がある
Ultravisual
Type of UI and Tips
5
カメラ
• 撮影時に、被写体をぐるっと回りな
がら撮ることができるアプリ
• 閲覧時に、スマホ画面の傾きに応じ
て反応するため、閲覧していて楽し
くなる仕掛けがある
• 横だけでなく、縦にパノラマのよう
に撮ることもできる
FYUSE
• 自分を中心に、360度のパノラマ写
真を撮影でき、3D空間としてマッピ
グしてくれるアプリ
• 撮影時のガイドもわかりやすく、次
にどこを取れば良いのかがスムーズ
に伝わる
Photosynth
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
Tips of Design 1
「いかに詰め込むか」ではなく
「本当に必要か」
Tips of Design 2
自己満ユーザー目線の
落とし穴
Tips of Design 3
トレンドを
鵜呑みにしない
Thank you
UX Design Thinking
@sugaar 2015/07/14
https://www.cyberagent.co.jp/recruit/special/techcareer/
サイバーエージェントでは、

世界基準のサービスを一緒につくる仲間を募集しています。
Recruit

More Related Content

What's hot

勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザインNobuya Sato
 
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
 
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術Kouichi Kuriyama
 
テックヒルズ
テックヒルズテックヒルズ
テックヒルズtomo tsubota
 
UIは「習うより慣れろ」
UIは「習うより慣れろ」UIは「習うより慣れろ」
UIは「習うより慣れろ」tomo tsubota
 
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発Kenta Ohsugi
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! Akiko Ohtsuka
 
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech DayUIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech DayTetsuya Takeda
 
InVision勉強会資料
InVision勉強会資料InVision勉強会資料
InVision勉強会資料TakuyaTakemoto
 
マンガボックスのアプリができるまで
マンガボックスのアプリができるまでマンガボックスのアプリができるまで
マンガボックスのアプリができるまでtomo tsubota
 
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアルUIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアルTaiki Kawakami
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -Mikihiro Fujii
 
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方neokigao
 
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -Shoko Tanaka
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのかMikihiro Fujii
 
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すためにモバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すためにKeisuke Tada
 
UXの考え方とアプローチ
UXの考え方とアプローチUXの考え方とアプローチ
UXの考え方とアプローチMasaya Ando
 
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化Hiroki Takaba
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会INI株式会社
 

What's hot (20)

勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン勘違いだらけのAndroid UIデザイン
勘違いだらけのAndroid UIデザイン
 
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
 
スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術スマートフォンサイトデザインに求められるUI/UX設計術
スマートフォンサイトデザインに求められるUI/UX設計術
 
テックヒルズ
テックヒルズテックヒルズ
テックヒルズ
 
UIは「習うより慣れろ」
UIは「習うより慣れろ」UIは「習うより慣れろ」
UIは「習うより慣れろ」
 
デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発デザイナーとエンジニアが話す、iOSアプリケーション開発
デザイナーとエンジニアが話す、iOSアプリケーション開発
 
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX! UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
UI&UX / 重要なのは、毎日さわって嬉しい UI UX!
 
UIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech DayUIも大事だよ。という話。@Opt Group Tech Day
UIも大事だよ。という話。@Opt Group Tech Day
 
InVision勉強会資料
InVision勉強会資料InVision勉強会資料
InVision勉強会資料
 
マンガボックスのアプリができるまで
マンガボックスのアプリができるまでマンガボックスのアプリができるまで
マンガボックスのアプリができるまで
 
UIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアルUIデザイナー最終防衛マニュアル
UIデザイナー最終防衛マニュアル
 
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -誰のためのUI?  - モノづくりのゴールを実現するフレームワーク -
誰のためのUI? - モノづくりのゴールを実現するフレームワーク -
 
開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方開発に知っておいて欲しいUX/UIデザインの考え方
開発に知っておいて欲しいUX/UIデザインの考え方
 
女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -女子の心をつかむUIデザインポイント - MERY編 -
女子の心をつかむUIデザインポイント - MERY編 -
 
なぜUXをデザインしているのか
なぜUXをデザインしているのかなぜUXをデザインしているのか
なぜUXをデザインしているのか
 
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すためにモバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
モバイルアプリのインタラクションプロトタイピング - 高速に仮説・実行・検証サイクルを回すために
 
UX / UIデザインって何?
UX / UIデザインって何?UX / UIデザインって何?
UX / UIデザインって何?
 
UXの考え方とアプローチ
UXの考え方とアプローチUXの考え方とアプローチ
UXの考え方とアプローチ
 
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
AppStoreとGooglePlayの両プラットフォームに選ばれるUI/UX最適化
 
UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会UI設計の土台になる考え方-インテリジェントネット社内勉強会
UI設計の土台になる考え方-インテリジェントネット社内勉強会
 

Viewers also liked

アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループアプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループKenichi Suzuki
 
UIデザインの基本
UIデザインの基本UIデザインの基本
UIデザインの基本Roy Kim
 
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン企画が考えるスマホUIデザイン
企画が考えるスマホUIデザインKatsumi Mizushima
 
UXのためのUIデザイン
UXのためのUIデザインUXのためのUIデザイン
UXのためのUIデザインHironobu Aoki
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -wariemon
 
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザインKonomi Kawaharada
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩井上 誠
 
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and AnalyticsShibuyaUX - UX and Analytics
ShibuyaUX - UX and AnalyticsMakoto Shimizu
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!c-mitsuba
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話Kazuki Yamashita
 
UIの話は会議室でするな
UIの話は会議室でするなUIの話は会議室でするな
UIの話は会議室でするなShingo Katsushima
 
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」WebSig24/7
 
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美schoowebcampus
 
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」Katsuhito Okada
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1Yu Morita
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_uxSaori Matsui
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意Yasuhisa Hasegawa
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインRoy Kim
 
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?Masaya Ando
 

Viewers also liked (20)

アプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループアプリUI勉強会 in ネットイヤーグループ
アプリUI勉強会 in ネットイヤーグループ
 
UIデザインの基本
UIデザインの基本UIデザインの基本
UIデザインの基本
 
企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン企画が考えるスマホUIデザイン
企画が考えるスマホUIデザイン
 
UXのためのUIデザイン
UXのためのUIデザインUXのためのUIデザイン
UXのためのUIデザイン
 
心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -心地よいUIの温度 - 言葉と気遣いで高めるUI -
心地よいUIの温度 - 言葉と気遣いで高めるUI -
 
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
当たり前を当たり前だと思ってはいけない!スマートフォンUIデザイン
 
UXはじめの一歩
UXはじめの一歩UXはじめの一歩
UXはじめの一歩
 
ShibuyaUX - UX and Analytics
ShibuyaUX - UX and AnalyticsShibuyaUX - UX and Analytics
ShibuyaUX - UX and Analytics
 
[UX]は投げ捨てろ!
[UX]は投げ捨てろ![UX]は投げ捨てろ!
[UX]は投げ捨てろ!
 
はじめてのUXとUIの話
はじめてのUXとUIの話はじめてのUXとUIの話
はじめてのUXとUIの話
 
UXとブランド
UXとブランドUXとブランド
UXとブランド
 
UIの話は会議室でするな
UIの話は会議室でするなUIの話は会議室でするな
UIの話は会議室でするな
 
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
WebSig会議 vol.33:2ndセッション「ハートに響くUIを生み出すためのデザインプロセス」
 
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
UXデザイン実践のために押さえておきたい大事なこと 先生:瀧 知恵美
 
図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」図解で学ぶ「Lean UX」
図解で学ぶ「Lean UX」
 
おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1おかんでもわかるUXデザイン Ver.0.1
おかんでもわかるUXデザイン Ver.0.1
 
0528 kanntigai ui_ux
0528 kanntigai ui_ux0528 kanntigai ui_ux
0528 kanntigai ui_ux
 
コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意コンテンツで改善する UI デザインの極意
コンテンツで改善する UI デザインの極意
 
ITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザインITエンジニアに易しいUI/UXデザイン
ITエンジニアに易しいUI/UXデザイン
 
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?UXとUXD~長期的ユーザビリティをどう作りどう測るか?
UXとUXD~長期的ユーザビリティをどう作りどう測るか?
 

Similar to スマホサービスにおける、UIデザインのノウハウと実例

モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発Satoru Yamaguchi
 
ソフトウェアUI妥当性確認の形式化に向けて
ソフトウェアUI妥当性確認の形式化に向けてソフトウェアUI妥当性確認の形式化に向けて
ソフトウェアUI妥当性確認の形式化に向けてShuji Kinoshita
 
Potatotips3 hoshi gaki_akira_iwaya
Potatotips3 hoshi gaki_akira_iwayaPotatotips3 hoshi gaki_akira_iwaya
Potatotips3 hoshi gaki_akira_iwayaAkira Iwaya
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)Yoshiki Ushida
 
禍つヴァールハイトを支えるレイアウト業務
禍つヴァールハイトを支えるレイアウト業務禍つヴァールハイトを支えるレイアウト業務
禍つヴァールハイトを支えるレイアウト業務KLab Inc. / Tech
 
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~インフラジスティックス・ジャパン株式会社
 
変化の時代における開発者のスキル資産形成について
変化の時代における開発者のスキル資産形成について変化の時代における開発者のスキル資産形成について
変化の時代における開発者のスキル資産形成についてKen Azuma
 
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装Fumiya Sakai
 
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介Fumiya Sakai
 
Approach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOSApproach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOSFumiya Sakai
 
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発Satoru Yamaguchi
 
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒントiOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒントFumiya Sakai
 
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介Fumiya Sakai
 
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例Kenichi Kambara
 

Similar to スマホサービスにおける、UIデザインのノウハウと実例 (20)

モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
モバイル対応Ui部品を利用したレスポンシブwebアプリ開発
 
Indigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプIndigo Studio で作るプロトタイプ
Indigo Studio で作るプロトタイプ
 
ソフトウェアUI妥当性確認の形式化に向けて
ソフトウェアUI妥当性確認の形式化に向けてソフトウェアUI妥当性確認の形式化に向けて
ソフトウェアUI妥当性確認の形式化に向けて
 
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が 失敗するのか?
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか?DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が失敗するのか?
DevSumi 関西 2013 #kansumiC4 なぜデバイス向けアプリ開発が 失敗するのか?
 
DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析DevOps を前提としたユーザー インターフェイスの構造解析
DevOps を前提としたユーザー インターフェイスの構造解析
 
Potatotips3 hoshi gaki_akira_iwaya
Potatotips3 hoshi gaki_akira_iwayaPotatotips3 hoshi gaki_akira_iwaya
Potatotips3 hoshi gaki_akira_iwaya
 
Css nite(2010.09.23)
Css nite(2010.09.23)Css nite(2010.09.23)
Css nite(2010.09.23)
 
禍つヴァールハイトを支えるレイアウト業務
禍つヴァールハイトを支えるレイアウト業務禍つヴァールハイトを支えるレイアウト業務
禍つヴァールハイトを支えるレイアウト業務
 
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
Enterprise mobility のご紹介 ~Infragisticsが提供する SharePoint モバイルプラットフォーム~
 
デバイス時代の Web UI コンポーネント活用
デバイス時代の Web UI コンポーネント活用デバイス時代の Web UI コンポーネント活用
デバイス時代の Web UI コンポーネント活用
 
20130528 pasonatech
20130528 pasonatech20130528 pasonatech
20130528 pasonatech
 
変化の時代における開発者のスキル資産形成について
変化の時代における開発者のスキル資産形成について変化の時代における開発者のスキル資産形成について
変化の時代における開発者のスキル資産形成について
 
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
部品に切り分けて考えるView構造とライブラリを上手に活用したUI実装
 
ライブラリやView構造を有効活用して iOSアプリのUIをオシャレにするワザ紹介
ライブラリやView構造を有効活用して iOSアプリの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 iOSApproach of Prototyping for making Application User Interface about iOS
Approach of Prototyping for making Application User Interface about iOS
 
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
インフラジスティックス Wpf コントロールを用いたリッチ アプリケーション開発
 
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
インフラジスティックス WPF コントロールを用いたリッチ アプリケーション開発
 
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒントiOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
iOS側のUIの特徴と見比べるAndroid側でのUI実装のヒント
 
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
UI表現ライブラリを有効活用して iOSアプリのUIをオシャレにするワザ紹介
 
AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例AndroidアプリのUI/UX改善例
AndroidアプリのUI/UX改善例
 

スマホサービスにおける、UIデザインのノウハウと実例