アプリui勉強会 in ネットイヤーグループ
DESCRIPTION
2014/10/21にネットイヤーグループ株式会社にて行われたアプリUIデザイン勉強会のスライドです。TRANSCRIPT
![Page 1: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/1.jpg)
アプリ UI デザイン勉強会 in ネットイヤーグループ株式会社
![Page 2: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/2.jpg)
メンバー紹介
鈴木 健一 鈴木 智大イマジカデジタルスケープ、IADI、FICC inc. にてデザイン/ディレクション業務に従事した後、2014 年にアプリやサービスの UI デザインを専門に行う STANDARD inc. を設立。マーケティングエージェンシーで培ったノウハウを基に、ユーザーの課題解決とビジネスゴール達成を両立する UI デザインを提供する。元ケーキ職人。
DTP 制作会社、某新聞社を経て株式会社ナナメウエにてデザイナーとして数々のアプリ UI デザインを手がける。2014 年 2 月から STANDARD へ参画。ユーザーの目的を最短で達成し、満足度を高めるためのユーザー体験や UI 設計、情報を正確に伝えるためのビジュアルデザインを提供する。元ブレイクダンサー。
CEO,Designer Designer
![Page 3: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/3.jpg)
メンバー紹介
吉竹 遼 Designer
2011 年からフェンリル株式会社にて iOS / Android / Windows ストアアプリの企画・UI デザインに従事。2014 年 10 月より STANDARD へ参画。多くのプロジェクトを手掛けた経験を活かし、ユーザーと情報が正しく繋がるインターフェイス、心地よさを感じられるデザインを提供する。高校は演劇専攻。
![Page 4: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/4.jpg)
http://www.standardinc.jp/
![Page 5: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/5.jpg)
本日の流れ
1. 利用中の体験と UI の間を繋ぐブリッジビルダー 鈴木 智大
2. アプリの UI 設計をする上で理解しておきたいコンポーネントの種類と用法 鈴木 健一
3. 質疑応答、ディスカッション
![Page 6: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/6.jpg)
ここで質問です
![Page 7: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/7.jpg)
STANDARD での制作プロセス
ビジネスプランのヒアリング リサーチ・サービス設計 UI 設計・プロトタイピング ビジュアルデザイン
・プロトペルソナ作成
・リーンキャンバス作成
・シナリオ作成
・UI フロー作成
・画面遷移図作成
・ワイヤーフレーム作成
・プロトタイピング
・ユーザテスト
・ビジュアルデザイン
・レイアウト指示書作成
・関連アセット作成
![Page 8: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/8.jpg)
本日の話は
ビジネスプランのヒアリング リサーチ・サービス設計 UI 設計・プロトタイピング ビジュアルデザイン
・プロトペルソナ作成
・リーンキャンバス作成
・シナリオ作成
・UI フロー作成
・画面遷移図作成
・ワイヤーフレーム作成
・プロトタイピング
・ユーザテスト
・ビジュアルデザイン
・レイアウト指示書作成
・関連アセット作成
![Page 9: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/9.jpg)
宜しくお願いします
![Page 10: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/10.jpg)
利用中の体験と UI の間を繋ぐブリッジビルダー
Tomohiro Suzuki
![Page 11: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/11.jpg)
ビジネスプランのヒアリング リサーチ・サービス設計 UI 設計・プロトタイピング ビジュアルデザイン・プロトペルソナ作成
・リーンキャンバス作成
・シナリオ作成
・画面遷移図作成
・ワイヤーフレーム作成
・プロトタイピング
・ユーザテスト
・ビジュアルデザイン
・レイアウト指示書作成
・関連アセット作成
デザインプロセス
STANDARD でのデザインプロセス
![Page 12: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/12.jpg)
問題提起
シナリオ 画面遷移 ワイヤー
![Page 13: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/13.jpg)
問題提起
シナリオ 画面遷移 ワイヤー
![Page 14: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/14.jpg)
問題提起
制作の全体像と構造を把握してUIデザイン
開発側との認識
既にクライアント側で作成しており、提示されることも
成果物:画面遷移図
![Page 15: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/15.jpg)
問題提起
タイムライン
ツイート フォロー フォロワー 設定 ツイート詳細
ユーザーページ ツイート詳細 リプライ Retweet
Twitter の場合
![Page 16: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/16.jpg)
問題提起
フィードバック、エラーの情報が不十分
情報の関係性がわかりにくい
シナリオで定義された流れが見えにくい
画面遷移での課題
![Page 17: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/17.jpg)
解決方法
UI Flows
![Page 18: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/18.jpg)
UI Flows概要
UI Flows とは?
37signals が使用しているツール
UIフロー図?
シナリオを元にタスクを分解
画面遷移の代替ツールとして期待できる
![Page 19: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/19.jpg)
UI Flowsの表記1
ユーザーが見るもの
![Page 20: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/20.jpg)
UI Flowsの表記1
ユーザーが見るもの
ユーザーがすること
![Page 21: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/21.jpg)
UI Flowsの表記1
ユーザーが見るもの
ユーザーがすること
ユーザーが見るもの
![Page 22: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/22.jpg)
UI Flowsの表記1
ユーザーが見るもの
ユーザーがすること
ユーザーが見るもの
ユーザーがすること
![Page 23: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/23.jpg)
UI Flowsの表記1
ユーザーが見るもの
ユーザーがすること
ユーザーが見るものユーザーが見るもの
ユーザーがすること
![Page 24: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/24.jpg)
メール一覧
UI Flowsの表記1
メールの場合
![Page 25: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/25.jpg)
メール一覧
メールをタップ
UI Flowsの表記1
メールの場合
![Page 26: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/26.jpg)
メール一覧
メールをタップ
返信ボタン
UI Flowsの表記1
メールの場合
![Page 27: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/27.jpg)
メール一覧
メールをタップ
返信ボタン
タップ
UI Flowsの表記1
メールの場合
![Page 28: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/28.jpg)
メール一覧
メールをタップ
テキストフィールド返信ボタン
タップ
UI Flowsの表記1
メールの場合
![Page 29: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/29.jpg)
UI Flowsの表記2
ユーザーが見るもの
ユーザーがすること
ユーザーが見るもの
ユーザーがすること①
![Page 30: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/30.jpg)
UI Flowsの表記2
ユーザーが見るもの
ユーザーがすること
ユーザーが見るもの
ユーザーがすること①
ユーザーがすること②
![Page 31: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/31.jpg)
UI Flowsの表記2
ユーザーが見るもの
ユーザーがすること
ユーザーが見るものユーザーが見るもの
ユーザーがすること①
ユーザーがすること②ユーザーが見るもの
![Page 32: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/32.jpg)
UI Flowsの表記2
メール一覧
メールをタップ
返信ボタン
返信
メールの場合
![Page 33: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/33.jpg)
UI Flowsの表記2
メール一覧
メールをタップ
返信ボタン
返信
メールの場合
転送
![Page 34: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/34.jpg)
UI Flowsの表記2
メール一覧
メールをタップ
返信ボタン
返信
転送
テキストフィールド
転送先選択
メールの場合
![Page 35: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/35.jpg)
UI Flowsの実践
UI F lowsを実際に作成
![Page 36: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/36.jpg)
UI Flowsの実践
最近サバゲーにハマっているんですが、フィールドで孤立するとヤバい
最近の悩み
![Page 37: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/37.jpg)
UI Flowsの実践
味方レーダー
制作アプリ
サバゲー(サバイバルゲーム)をやっていて、味方の位置を把握したい人
ターゲット
仮想のサービス
![Page 38: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/38.jpg)
UI Flowsの実践
仲間の位置を表示することで、戦場で一人ではないという不安を無くし、仲間同士での高度な連携などを可能にし、戦局を有利に進める。味方同士の誤射を防止する。
提供価値
ゲームがはじまる前に、味方同士の端末を登録。ゲームが開始すると、それぞれが別々に動いても今どこにいるかという位置をマップに一覧表示をしてくれる。もし敵に撃たれたりした場合には、自分のステータスを”死亡”などにすることで、残りの味方の数を把握することができる。
シナリオ
![Page 39: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/39.jpg)
UI Flowsの実践
テキストフィールド
ID を入力
ゲームがはじまる前に、味方同士の端末を登録
![Page 40: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/40.jpg)
UI Flowsの実践
テキストフィールド
ID を入力
テキストフィールド
名前を入力
ゲームがはじまる前に、味方同士の端末を登録
![Page 41: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/41.jpg)
UI Flowsの実践
テキストフィールド
ID を入力
テキストフィールド
名前を入力
開始ボタン
ボタンをタップ
ゲームが開始すると
![Page 42: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/42.jpg)
UI Flowsの実践
テキストフィールド
ID を入力
テキストフィールド
名前を入力
開始ボタン
ボタンをタップ
マップ / 友達の位置 /自分、友達のステータス
それぞれが別々に動いても今どこにいるかという位置をマップに一覧表示
![Page 43: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/43.jpg)
UI Flowsの実践
テキストフィールド
ID を入力
テキストフィールド
名前を入力
開始ボタン
ボタンをタップ
ステータス一覧
ステータスを選択
マップ / 友達の位置 /自分、友達のステータス
ステータスを変更
もし敵に撃たれたりした場合には、自分のステータスを”死亡”などにする
![Page 44: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/44.jpg)
UI Flowsの実践
テキストフィールド
ID を入力
テキストフィールド
名前を入力
ゲームを終了
ソルジャーを追加
開始ボタン
ボタンをタップ
ステータス一覧
ステータスを選択
マップ / 友達の位置 /自分、友達のステータス
ステータスを変更
そのほか
![Page 45: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/45.jpg)
UI Flowsの実践
他の場合のシナリオを元に UI Flows を複数作成→ 例:離れている味方と簡易的なコミュニケーションをする→ 例:ゲーム回数を元に死亡数の合計などをカウントする
各画面間の関係を元に画面構造を検討しプロトタイピング
ネクストステップ
![Page 46: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/46.jpg)
UI Flowsの実践
ユーザー登録画面 マップ ステータス変更
テキストフィールド
ID を入力
テキストフィールド
名前を入力
ゲームを終了
ソルジャーを追加
開始ボタン
ボタンをタップ
ステータス一覧
ステータスを選択
マップ / 友達の位置 /自分、友達のステータス
ステータスを変更
![Page 47: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/47.jpg)
UI Flowsの実践
![Page 48: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/48.jpg)
画面遷移よりも情報の関係性、詳細が確認しやすい
簡単な仕様ができあがるので開発会社への発注がしやすくなる
ユーザーが利用する情報があるため、ワイヤーフレームを作成しやすい
簡単に作れるため、デザイナー以外のチームメンバーも参加できる
まとめ
UI Flowsのメリット
![Page 49: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/49.jpg)
ありがとうございました
![Page 50: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/50.jpg)
アプリの UI 設計をする上で理解しておきたいコンポーネントの種類と用法
鈴木 健一
![Page 51: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/51.jpg)
PC とスマホ、前提の違いってなんでしょう?はじめに質問
は じ め に
![Page 52: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/52.jpg)
P C と ス マ ホ の 前 提 の 違 い と は ?
・利用シーン・利用方法(タッチスクリーンであること)・ジェスチャ・回線、オフライン時の使用・画面サイズ・ピクセル密度・利用するユーザー層の幅広さ(リテラシーとか)
![Page 53: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/53.jpg)
P C と ス マ ホ の 前 提 の 違 い と は ?
特に画面サイズ
![Page 54: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/54.jpg)
P C と ス マ ホ の 前 提 の 違 い と は ?
・比率:PC のディスプレイは横長、スマホは縦長・グローバルナビゲーションのようなモジュールが使えない・使える面積が少ない・画面=資源になる
![Page 55: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/55.jpg)
P C と ス マ ホ の 前 提 の 違 い と は ?
・比率:PC のディスプレイは横長、スマホは縦長・グローバルナビゲーションのようなモジュールが使えない・使える面積が少ない・画面=資源になる
少ない資源で効率良く機能する UI を設計する必要がある
![Page 56: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/56.jpg)
ど う や っ て 設 計 す る ?
Q. どう設計するの?
![Page 57: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/57.jpg)
ど う や っ て 設 計 す る ?
アプリ設計の指針となるガイドラインがあります
・iOS : iOS Human Interface Guidelines・Android : Android Design
![Page 58: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/58.jpg)
ど う や っ て 設 計 す る ?
大切なところだけまとめました・アプリ UI の主要な画面パターン・操作の起点となるナビゲーションのメリット・デメリット・その他によく使われるコンポーネントの紹介
![Page 59: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/59.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
アプリ UI の主要な画面パターン
![Page 60: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/60.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
1. 導入画面2. トップ画面3. 一覧画面4. 詳細画面5. 入力・操作画面
![Page 61: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/61.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
1. 導入画面
導入画面の例
アプリを起動した直後に表示される画面。アプリの機能の説明などの目的に用いられ、目的によっていくつかの種類が存在する。
スプラッシュ ウォークスルー コーチマーク エンプティステート
![Page 62: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/62.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
スプラッシュ1. 導入画面
・アプリの起動中に表示する画面・アプリが起動動作をしている最中に表示し、待ち時間のストレスを軽減するもの
・ロゴマークなどを表示し、特定のイメージを伝えるもの
・起動中に表示される画面となるため、過度な演出や大量のメッセージを表示させることは避ける
![Page 63: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/63.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
ウォークスルー1. 導入画面
・ユーザーが初めてアプリを起動した場合に、そのアプリがどんなものかを説明するための画面
・アプリで出来ることが多岐に渡る場合に、その機能をビジュアルとテキストで端的に伝える役割を果たす。複数画面にまたがって構成されることも多く、その場合はページインジケーターが下部に表示されている
・使い方が想像出来ているユーザーやまずは使ってみたいと思うユーザーには障害に感じられることもあり、複数画面に渡るウォークスルーを設置する場合にはスキップできる選択肢も検討する必要がある
![Page 64: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/64.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
ウォークスルー1. 導入画面
・ユーザーが初めてアプリを起動した場合に、そのアプリがどんなものかを説明するための画面
・アプリで出来ることが多岐に渡る場合に、その機能をビジュアルとテキストで端的に伝える役割を果たす。複数画面にまたがって構成されることも多く、その場合はページインジケーターが下部に表示されている
・使い方が想像出来ているユーザーやまずは使ってみたいと思うユーザーには障害に感じられることもあり、複数画面に渡るウォークスルーを設置する場合にはスキップできる選択肢も検討する必要がある
![Page 65: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/65.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
コーチマーク1. 導入画面
・画面上の UI がどんな意味や機能を持っているかをオーバーレイ表示で説明するもの
・主要となる機能や初めにするアクション等を提示し、インストールしたばかりのユーザーに行動を促す
![Page 66: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/66.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
エンプティステート1. 導入画面
・表示するコンテンツが何もない場合に表示される画面・なにも表示するものがないということを伝えると同時に、何をすればこの画面上にコンテンツが表示されるようになるかを提示し、アクションを促す役割も兼ねるもの
・類似した画面として、読み込みに失敗した場合の画面等も存在する
![Page 67: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/67.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
2. トップ画面
トップ画面の例
アプリ起動画面直後に表示される、最もユーザーが接触することが多い画面。ナビゲーションや主要機能などが設置され、他の画面と繋がるハブとなる役割を担います。
ポータル型 タイムライン型 ストア型
![Page 68: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/68.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
ポータル型2. トップ画面
・コミュニティサイトのような多くの情報を 1 画面で表示することが求められる場合に用いられる画面
・様々な UI コンポーネントを使い、主要な情報の提供と下階層の画面への誘導の役割を担う
![Page 69: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/69.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
タイムライン型2. トップ画面
・ユーザーによる投稿やニュースのような時間軸を持った情報を順序立てて表示する画面
・垂直方向に情報が積み重なって表示されることが多いため、何の軸で表示されているのかが伝わりやすく、スクロールしながら情報が得やすい構成が求められる
・表示された時点での最新の情報を取得するため、一覧をリフレッシュするためのボタンや過去の一覧を取得するための機能が付与されることが多い
![Page 70: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/70.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
ストア型2. トップ画面
・ユーザーが商品を購入できるアプリに使われる画面です。・ポータル型とは違い、商品が購入できることにフォーカスされたアプリのため、ユーザーが探している商品を簡単に探せる機能や、販売促進のためのキャンペーン情報、また、購入したユーザーの評価や感想などの情報が存在するため、何をトップ画面で表示するのかを意識した設計が重要になります
![Page 71: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/71.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
3. 一覧画面
一覧画面の例
コンテンツの一部を1つのコンポーネントとしてまとめて、一覧で表示する画面。ユーザーのアクションに対する結果を表示する際に用いられることが多く、主にリスト型コンポーネントで構成される。
検索結果 ギャラリー お知らせ
![Page 72: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/72.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
検索結果3. 一覧画面
・ユーザーの検索により表示される画面・垂直型のリストを用いて検索結果を表示する・検索結果の制御(ソート、絞り込み等)をする為に、セグメンテッドコントロールという UI がよく利用される
・検索結果が複数画面にわたる場合はページャーやインフィニットリストページャーが使われる
![Page 73: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/73.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
ギャラリー3. 一覧画面
・写真や動画などのサムネイルを一覧表示する画面・一覧性を高めるために、画面の全面にわたってグリッドリストにして表現される
・コンテンツによっては補足説明をするためのキャプションと一緒に配置される
![Page 74: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/74.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
お知らせ3. 一覧画面
・SNS などで、いいねやコメント等のフレンドからの反応を表示する画面
・誰がどんな事をしたのか、何があったのか、を端的に表現したテキストで一覧表示される
・アクションが多い場合がほとんどのため、垂直型のリストで表現される
![Page 75: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/75.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
4. 詳細画面
詳細画面の例
アプリ内の深い階層にある画面で、コンテンツ単体を表示する画面。多くのアプリにとって、この画面が利用する目的となることが多いため、使い心地について最も注意を払って設計する画面となる。
ビューア 記事 マップ プロダクト
![Page 76: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/76.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
ビューア4. 詳細画面
・写真や動画を表示するための画面・画面の移動のためにスワイプを用いたり、動画の進行状態の表示の為にスライダーを用いる
・この画面の主役はコンテンツそのものであるため、UI 要素がコンテンツ自体の閲覧を妨げないようにすることが重要
・コントローラー等もユーザーが利用しない際は非表示にするなど、コンテンツに没頭できるような配慮もすべき
![Page 77: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/77.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
記事4. 詳細画面
・ニュース、ブログ記事等の文章を表示する画面・テキストと画像のシンプルな構成ですが、スマートフォンでの閲覧を考慮した文字サイズや行間、文字色等の配慮が必要
・記事の長さが長くスクロール量が多くなる傾向にあるため、ページトップへの移動を補助するような機能も検討する
![Page 78: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/78.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
マップ4. 詳細画面
・現在地や目的地の地図を表示する画面・ビューアと同様、コンテンツである地図を画面内に大きく表示させる必要があるため、ナビゲーションやボタンの大きさや配置に配慮することが重要
・複数の地点を表示するようなケースでは、詳細画面に加え一覧画面に求められる機能も考慮した設計が必要
![Page 79: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/79.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
プロダクト4. 詳細画面
・商品情報を表示する画面・この場合のユーザーの目的は商品の購入のため、購入検討に必要な商品写真や価格、概要、購入者からの評判等の必要な情報を掲載する
・商品の説明や仕様などの掲載する情報が多くなるケースでは、垂直型リストを多く用いる画面になる
![Page 80: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/80.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
5. 入力・操作画面
入力・操作画面の例
ユーザーが何らかの動作をするための画面。小さい画面上で文字の入力などの複雑な動きをすることが多くなるため、動作がしやすいか、誤動作を防げるかを考慮した UI を設計することが重要。
サインアップ 投稿 カメラ撮影 設定
![Page 81: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/81.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
サインアップ5. 入力・操作画面
・アプリの利用にユーザー登録が必要な場合に用いられる画面・テキストフィールドを使って文字の入力を促す・登録時の成功・失敗などのエラー表示や、確実な情報を促すための補足情報などを考慮し、掲載する情報を検討する
![Page 82: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/82.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
投稿5. 入力・操作画面
・ユーザーが何らかの情報を投稿する際に用いられる画面・投稿する対象となるテキストや写真、動画、位置情報などにより表示方法は様々
・投稿するという行動はユーザーがアプリの利用に関わる際のキーとなる行動のため、誤動作を防ぐような配慮が必要
![Page 83: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/83.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
カメラ撮影5. 入力・操作画面
・写真や動画を撮影するためにアプリを起動した際の画面・ツールバーにシャッターを切るボタンを配置するものが主流・撮影対象となる被写体が主なコンテンツとなるため、撮影対象を妨げず、操作しやすい大きさや配置を心がける必要がある
![Page 84: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/84.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
設定5. 入力・操作画面
・アプリの設定を変更するための画面・垂直型リストとスイッチを組み合わせて構成されることが多い・設定項目が多岐にわたる場合には、ドリルダウンを使って階層式にする場合も
![Page 85: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/85.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
Twitter身近なアプリを分類してみた例
導入画面 トップ画面 一覧画面
入力・操作画面
詳細画面
スプラッシュ タイムライン ツイート一覧ユーザ一覧
検索結果
設定画面
ツイート詳細ユーザ詳細
![Page 86: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/86.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
Mail身近なアプリを分類してみた例
一覧画面
入力・操作画面
一覧画面
トップ画面を兼ねる
アカウント一覧
新規メール作成
受信メール一覧
詳細画面
メール詳細
![Page 87: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/87.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
UI フローと一緒に考えると上手くまとまる
UI フローは画面内の要素がどんなものかを明らかにするもの複数のアクションをさせる場合はひとつのフロー図に納まらない場合も
複数のフローをまとめて 1 つの画面とすることで画面遷移にできる
ユーザー登録画面 マップ ステータス変更
テキストフィールド
ID を入力
テキストフィールド
名前を入力
ゲームを終了
ソルジャーを追加
開始ボタン
ボタンをタップ
ステータス一覧
ステータスを選択
マップ / 友達の位置 /自分、友達のステータス
ステータスを変更
![Page 88: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/88.jpg)
ア プ リ U I の 主 要 な 画 面 パ タ ー ン
まとめ
5 種類の画面パターンを意識してアプリを利用・分析しておくことで、UI フローの作成時の画面の集約がしやすくなり、アプリ全体の遷移や主要なシナリオに必要な UI 要素と出来るアクション出しがスムーズになる。
続いて、各画面内の詳細な UI 設計へ
![Page 89: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/89.jpg)
ナ ビ ゲ ー シ ョ ン の メ リ ッ ト ・ デ メ リ ッ ト
操作の起点となるナビゲーションのメリット・デメリット
![Page 90: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/90.jpg)
ナ ビ ゲ ー シ ョ ン の メ リ ッ ト ・ デ メ リ ッ ト
アプリでも、ナビゲーション重要。複数の画面間を遷移しながらユーザーがやりたいことを実現するアプリでは、画面を遷移させる機能を担うナビゲーションが重要な存在となります。ここでは PC サイトとは違う特徴的なナビゲーションを取り上げながら、それぞれを採用するメリットやデメリットを紹介していきます。
ドリルダウン型 タブ型 スプリングボード型 ドロワー型
![Page 91: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/91.jpg)
ナ ビ ゲ ー シ ョ ン の メ リ ッ ト ・ デ メ リ ッ ト
ドリルダウン型
メリット
ドリルダウン型が向いているケース
デメリット
階層構造になっているものから 1 つを選択してもらうために用いられるコンポーネント
・ツリー構造を作れるため階層化しやすい・垂直方向に増やせるため拡張しやすい・階層構造をまっすぐ掘り進めるため迷いにくい
・カテゴリの絞り込み等、階層構造が明確なナビゲーションの場合・並列となるナビゲーション項目が存在せずシンプルな構造の場合
・1 階層ずつしか上に戻れない・見る対象が大きく変わる際に階層の深さが問題となる
![Page 92: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/92.jpg)
ナ ビ ゲ ー シ ョ ン の メ リ ッ ト ・ デ メ リ ッ ト
タブ型
タブ型が向いているケース
主要機能が並列する際に、どの画面からでもいつでも別画面に遷移するためのナビゲーションとして用いられるコンポーネント
メリット・複数の機能間を平行に移動できる・iPhone のタブ型の場合指が届きやすい位置に置くことができる
・領域を広く取れるため素早くタップしやすい
・ユーザーが複数の機能間を遷移しながら利用することが想定される場合・主要機能と補完となる機能が明確に分類できる場合
デメリット・追加できる項目数に限界がある(2 項目~ 5 項目程度)・機能を端的に表現するラベリングが必要
![Page 93: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/93.jpg)
ナ ビ ゲ ー シ ョ ン の メ リ ッ ト ・ デ メ リ ッ ト
スプリングボード型
スプリングボード型が向いているケース
利用頻度が平均化されている項目や、ユーザーの目的が異なる項目を並列に表示し、グリッド上にアイコンとラベルを並べる UI コンポーネント
メリット・アプリで出来ることを最初に掴んでもらいやすい・タブ型より多くの項目を設置できる・画面が広く使えるため、タップしやすいサイズで設置できる
・グラフィック要素を大きく配置できるため印象付けに活用できる
・どんな事ができるアプリか全体像をユーザーに提示したい場合・提供する機能や情報がタブ型より多岐に渡る場合
デメリット・画面全体がナビゲーションとなるため、それ以外の情報を得ることが出来ない
・目的意識が明確で 1 つの機能のみを使っているユーザーにとっては不要な画面となってしまう
![Page 94: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/94.jpg)
ナ ビ ゲ ー シ ョ ン の メ リ ッ ト ・ デ メ リ ッ ト
ドロワー型
メリット
ドロワー型が向いているケース
デメリット
サイドからスライドして項目を表示する UI コンポーネント。項目リストは本体の画面から独立して縦方向のスクロールが可能で、ユーザーの目的が 1 つではなく複数あるようなアプリでの利用に多く用いられる。
・メイン画面でのナビゲーション項目を減らすことができユーザーがコンテンツに集中できる
・縦方向のスクロールが可能なため項目数に制限がなくいくつでも拡張可能
・コンテンツに集中してもらうことが最優先の場合・タブやスプリングボードでは収まりきらない場合・同粒度のカテゴリで分類できる構造の場合・主な主要機能が限られており、優先度が低い機能をまとめられる場合
・ドロワーを開く際に必ず 1 アクションが必要・ナビゲーションが展開するまで何が出来るのかがわかりにくい・画面の上部に配置される事が多く、ユーザーによっては指が届きにくい状態になってしまう
・格納できる項目数に上限が無いため機能が複雑になりがち
![Page 95: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/95.jpg)
よ く 使 わ れ る コ ン ポ ー ネ ン ト の 紹 介
その他によく使われるコンポーネントの紹介
![Page 96: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/96.jpg)
よ く 使 わ れ る コ ン ポ ー ネ ン ト の 紹 介
セグメンテッドコントロール・複数の項目を 1 つのグループのようにまとめたコンポーネント・検索結果のソートや表示されている内容を別の軸から再表示するような時に、画面の状態をコントロールするために用いられる・タブ型のナビゲーションと機能は似ているが、想定している用途が違うため、グローバルなナビゲーションがある際の位置関係に注意
![Page 97: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/97.jpg)
よ く 使 わ れ る コ ン ポ ー ネ ン ト の 紹 介
リフレッシュコントロール・タイムラインなどの、垂直に表示されているリストの情報を最新の状態にする際に用いられるコンポーネント
・リストを画面下部に引っ張ることで実行される・下に引っ張った分、上に新しい情報が読み込まれる直感的な部分があるが、画面を表示した時点では気付かれないため、引っ張れることを気付かせるようなデザインが必要
![Page 98: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/98.jpg)
よ く 使 わ れ る コ ン ポ ー ネ ン ト の 紹 介
カルーセルパネル・コンテンツを上下ではなく左右にスワイプして切り替えられるコンポーネント・高さを一定にできるため、縦方向に複数並べて利用したり他のコンポーネントと併用することができる
・画面外の左右に情報を隠すことができるため画面を有効利用できるが、画面内で見える要素が 1 つだけとなるため、カルーセルパネルであることがわかりやすいデザインにする必要がある
・カルーセル後半の情報はユーザーがスワイプまたは時間経過等で表示されるため、確実に閲覧をさせたいのであれば別の方法も検討してみることが重要
![Page 99: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/99.jpg)
よ く 使 わ れ る コ ン ポ ー ネ ン ト の 紹 介
モーダルメッセージ・画面中央にオーバーレイする形でメッセージを表示するコンポーネント・ユーザーに注意を促す場面や必ず読んで欲しいものがある場合などに利用される・一番確実にメッセージを伝えられるコンポーネントだが、ユーザーの行動を強制的に止めるものであるため、多用するとユーザーに負担がかかってしまったり、見慣れてしまうことでユーザーが内容を見なくなってしまう恐れがあるため、利用箇所は慎重に検討する
![Page 100: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/100.jpg)
よ く 使 わ れ る コ ン ポ ー ネ ン ト の 紹 介
まとめ各ナビゲーションの種類や特徴を理解することで、画面間を繋ぐナビゲーションに何を採用するかを素早く判断することができる。
各コンポーネントの種類や特徴を理解することで、UI フローが作成しやすくなり、画面毎に必須となる要素と機能が分かる。
![Page 101: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/101.jpg)
ネ ク ス ト ス テ ッ プ
この後はどうする?
![Page 102: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/102.jpg)
ネ ク ス ト ス テ ッ プ
パーツを活用しながら画面毎に詳細な UI 設計をする
・ステンシルや UI コンポーネントを予め持っておくと作りやすい・ビジュアルデザインのような作り込みは省略し、試作と改善のスピードを上げることのほうが重要
考慮しておくべきこと・UI 設計がビジュアルデザインの原型になるため、アニメーションで差別化するような UI を作るのであれば設計の時点から考慮しておく必要がある・WF からビジュアルデザインへの飛躍は必要だけど飛躍し過ぎると設計時の意図通りにならないこともあるので注意
![Page 103: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/103.jpg)
ネ ク ス ト ス テ ッ プ
プロトタイピングへ・Flinto や、inVision、Prott などを使って実践する・シナリオごとに遷移を繋ぎナビゲーションの整合性や抜け漏れを無くす・実際の端末での操作感を確認し、配置や遷移のアニメーション等を検討する
プロトタイピングツールの使い分けについての記事を近日公開予定http://www.standardinc.jp/reflection/
![Page 104: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/104.jpg)
ネ ク ス ト ス テ ッ プ
ビジュアルデザインへ・設計意図を踏まえつつ、競合と差別化でき、触ってみたいと感じさせるビジュアルデザインを作る・サービスやアプリにおける UI は本来透明化すべきもののため、突飛なビジュアルデザインが主役になるようなアプリは 長く利用されることは稀(ゲームとかは別)
利用者の興味を喚起でき、最初の利用を促し、継続的な利用の妨げにならないようなビジュアルデザインが理想
![Page 105: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/105.jpg)
あ り が と う ご ざ い ま し た
コンポーネントの種類と用法を理解して素早く正しく設計しましょう!
![Page 106: アプリUI勉強会 in ネットイヤーグループ](https://reader035.vdocuments.net/reader035/viewer/2022081801/54855e8f5806b5b8588b4792/html5/thumbnails/106.jpg)
も っ と 学 び た い 方 へ
参考資料A shorthand for designing UI flows by Ryan of Basecamphttps://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows
UI のフローをデザインするための簡易記法http://d.hatena.ne.jp/sirocco634/20090921
iOS Human Interface Guidelinehttps://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/
Android Designhttps://developer.android.com/design/index.html
使ってもらえるアプリの考え方http://www.slideshare.net/takayukifukatsu/2012-15750990
スマートフォンのための UI デザインhttp://www.amazon.co.jp/dp/4797372303
inVisionhttp://www.invisionapp.com/
Flintohttps://www.flinto.com/
Protthttps://prottapp.com/