Techniques and examples for UI Design of mobile app.

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系で２系のダイアログデザインが表示される
（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

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

30. http://www.dyson.co.jp/community/about-dyson.aspx
モック
ツールの
多様化

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. ドロワーをやめた例１
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