iOSアプリ「NoteCube」( https://itunes.apple.com/jp/app/notecube-shinpurude-shiiyasuimemoapuri/id657311491?mt=8 ) を制作するにあたって、どのようにUIデザインを考えて設計したのかを発表。 2014/5/10　iPhone Dev Sap勉強会 May, 2014にて。

1. iPhoneアプリのUIデザイン
NoteCubeの場合
iPhone Dev Sap勉強会 May, 2014

2. 若林大悟 @frnk
iOSアプリデベロッパー。
仕事効率化からゲームまで様々なジャンルの
アプリを制作しApp Storeで公開。
企画・プログラム・デザイン・宣伝などアプ
リ作りに関わる全てをほぼ１人でおこなう。

3. NoteCube

4. シンプルで
使いやすい
メモアプリ

5. 一覧性に優れた
「グリッド」表示

6. SNSでなじみの深い
「タイムライン」表示

7. ２つの表示の切り替えは
なぜUITabBarではなく
UISegmentedControlなのか

8. UITabBar
アプリケーションの異なるサブタスク間、
ビュー間、またはモード間を切り替える機
能をユーザに提供します。
（iOSヒューマンインターフェイスガイドライン）

9. UITabBar
全く異なる内容・機能のView同士を切り替
えるのに適している。

10. UISegmentedControl
密接に関連しているが、相互に排他的な選
択肢を提供するために使用します。
（iOSヒューマンインターフェイスガイドライン）

11. UISegmentedControl
同じ内容を異なる形で表示するView同士、
近い関係性のView同士を切り替えるのに
適している。

13. 新規ノート作成ボタン
分かりやすく大きなボタン。
はじめにユーザーが何をすればいいか分かる。
下に配置することでアクセスしやすく、
大きくても邪魔にならない

15. 編集画面
ノート閲覧画面と共通。
!
Toolbarにはノート自体に関係
するアクションを配置。
・ノートの共有
・ノート色変更
・ノートの削除

16. 編集画面
ソフトウェアキーボード上の
inputAccesoryViewはキーボー
ドの機能の延長という考え方。
!
ノートの内容に変更を加えるア
クション（画像挿入）とキーボー
ドを閉じるボタンを配置。

17. ボタンは、その機能ごとに整理して
配置されているべき。
!
inputAccesoryViewがアクセスしや
すいからといって、何でもかんでも
ぶち込むのは間違い。

18. カスタムトランジション

20. カスタムトランジションであっても
「どこから来てどこに戻るのか」
というナビゲーションには忠実であ
るべき。

21. アニメーション

23. 邪魔にならないタイミングで
遊びごころを入れる

25. どこから出てきているかを表現。
バウンスさせると可愛くなる。

26. 画面の変化を分かりやすく補助したり、
ちょっとした遊び心を入れたりする。
ユーザーの操作の邪魔になったり、ユー
ザーを混乱させたりしてはいけない。
カスタムトランジション
&アニメーション

27. カスタムトランジション
&アニメーション
「たのしい😊」
と感じてもらうためのアクセント

28. 初回起動時の操作説明は
ユーザーにスキップされます
僕はよほど面白くなければスキップします…

29. 操作説明を見ていても
アプリを久々に使うとき
には忘れてます

30. 初見でもわかりやすく
操作していて楽しい
!
そんなUIを設計しましょう