アプリUI勉強会 in ネットイヤーグループ

1. アプリUI デザイン勉強会in ネットイヤーグループ株式会社

2. メンバー紹介鈴木健一鈴木智大イマジカデジタルスケープ、IADI、FICC inc. にてデザイン／ディレクション業務に従事した後、2014 年にアプリやサービスのUI デザインを専門に行うSTANDARD inc. を設立。マーケティングエージェンシーで培ったノウハウを基に、ユーザーの課題解決とビジネスゴール達成を両立するUI デザインを提供する。元ケーキ職人。 CEO,Designer Designer DTP 制作会社、某新聞社を経て株式会社ナナメウエにてデザイナーとして数々のアプリUI デザインを手がける。2014 年2 月からSTANDARD へ参画。ユーザーの目的を最短で達成し、満足度を高めるためのユーザー体験やUI 設計、情報を正確に伝えるためのビジュアルデザインを提供する。元ブレイクダンサー。

3. メンバー紹介吉竹遼Designer 2011 年からフェンリル株式会社にてiOS / Android / Windows ストアアプリの企画・UI デザインに従事。2014 年10 月よりSTANDARD へ参画。多くのプロジェクトを手掛けた経験を活かし、ユーザーと情報が正しく繋がるインターフェイス、心地よさを感じられるデザインを提供する。高校は演劇専攻。

4. http://www.standardinc.jp/

5. 本日の流れ 1. 利用中の体験とUI の間を繋ぐブリッジビルダー　　鈴木智大 2. アプリのUI 設計をする上で理解しておきたいコンポーネントの種類と用法　　鈴木健一 3. 質疑応答、ディスカッション

6. ここで質問です

7. STANDARD での制作プロセスビジネスプランのヒアリングリサーチ・サービス設計UI 設計・プロトタイピングビジュアルデザイン・プロトペルソナ作成・リーンキャンバス作成・シナリオ作成・UI フロー作成・画面遷移図作成・ワイヤーフレーム作成・プロトタイピング・ユーザテスト・ビジュアルデザイン・レイアウト指示書作成・関連アセット作成

8. 本日の話はビジネスプランのヒアリングリサーチ・サービス設計UI 設計・プロトタイピングビジュアルデザイン・プロトペルソナ作成・リーンキャンバス作成・シナリオ作成・UI フロー作成・画面遷移図作成・ワイヤーフレーム作成・プロトタイピング・ユーザテスト・ビジュアルデザイン・レイアウト指示書作成・関連アセット作成

9. 宜しくお願いします

10. 利用中の体験とUI の間を繋ぐブリッジビルダー Tomohiro Suzuki

11. ビジネスプランのヒアリングリサーチ・サービス設計UI 設計・プロトタイピングビジュアルデザイン・プロトペルソナ作成・リーンキャンバス作成・シナリオ作成・画面遷移図作成・ワイヤーフレーム作成・プロトタイピング・ユーザテスト・ビジュアルデザイン・レイアウト指示書作成・関連アセット作成デザインプロセス STANDARD でのデザインプロセス

12. 問題提起シナリオ画面遷移ワイヤー

13. 問題提起シナリオ画面遷移ワイヤー

14. 問題提起成果物：画面遷移図制作の全体像と構造を把握してUI デザイン開発側との認識既にクライアント側で作成しており、提示されることも

15. 問題提起 Twitter の場合タイムラインユーザーページツイート詳細リプライRetweet ツイートフォローフォロワー設定ツイート詳細

16. 問題提起画面遷移での課題フィードバック、エラーの情報が不十分情報の関係性がわかりにくいシナリオで定義された流れが見えにくい

17. 解決方法 UI Flows

18. UI Flows概要 UI Flows とは？ 37signals が使用しているツール UI フロー図？シナリオを元にタスクを分解画面遷移の代替ツールとして期待できる

19. UI Flowsの表記1 ユーザーが見るもの

20. UI Flowsの表記1 ユーザーが見るものユーザーがすること

21. UI Flowsの表記1 ユーザーが見るものユーザーがすることユーザーが見るもの

22. UI Flowsの表記1 ユーザーが見るものユーザーがすることユーザーが見るものユーザーがすること

23. UI Flowsの表記1 ユーザーが見るものユーザーがすることユーザーが見るものユーザーが見るものユーザーがすること

24. UI Flowsの表記1 メール一覧メールの場合

25. UI Flowsの表記1 メール一覧メールをタップメールの場合

26. メール一覧メールをタップ返信ボタン UI Flowsの表記1 メールの場合

27. メール一覧メールをタップ返信ボタンタップ UI Flowsの表記1 メールの場合

28. メール一覧メールをタップ返信ボタンテキストフィールドタップ UI Flowsの表記1 メールの場合

29. UI Flowsの表記2 ユーザーが見るものユーザーがすることユーザーが見るものユーザーがすること①

30. UI Flowsの表記2 ユーザーが見るものユーザーがすることユーザーが見るものユーザーがすること① ユーザーがすること②

31. UI Flowsの表記2 ユーザーが見るものユーザーがすることユーザーが見るものユーザーが見るものユーザーがすること① ユーザーがすること② ユーザーが見るもの

32. UI Flowsの表記2 メール一覧メールをタップメールの場合返信ボタン返信

33. UI Flowsの表記2 メール一覧メールをタップメールの場合返信ボタン返信転送

34. UI Flowsの表記2 メール一覧メールをタップ返信ボタン返信転送テキストフィールド転送先選択メールの場合

35. UI Flowsの実践 UI Flowsを実際に作成

36. UI Flowsの実践最近の悩み最近サバゲーにハマっているんですが、フィールドで孤立するとヤバい

37. UI Flowsの実践仮想のサービス制作アプリ味方レーダーターゲットサバゲー（サバイバルゲーム）をやっていて、味方の位置を把握したい人

38. UI Flowsの実践提供価値仲間の位置を表示することで、戦場で一人ではないという不安を無くし、仲間同士での高度な連携などを可能にし、戦局を有利に進める。味方同士の誤射を防止する。シナリオゲームがはじまる前に、味方同士の端末を登録。ゲームが開始すると、それぞれが別々に動いても今どこにいるかという位置をマップに一覧表示をしてくれる。もし敵に撃たれたりした場合には、自分のステータスを”死亡” などにすることで、残りの味方の数を把握することができる。

39. UI Flowsの実践テキストフィールド ID を入力ゲームがはじまる前に、味方同士の端末を登録

40. UI Flowsの実践テキストフィールド ID を入力ゲームがはじまる前に、味方同士の端末を登録テキストフィールド名前を入力

41. UI Flowsの実践テキストフィールド ID を入力テキストフィールド名前を入力ゲームが開始すると開始ボタンボタンをタップ

42. UI Flowsの実践それぞれが別々に動いても今どこにいるかという位置をマップに一覧表示テキストフィールド ID を入力テキストフィールド名前を入力開始ボタンボタンをタップマップ/ 友達の位置/ 自分、友達のステータス

43. UI Flowsの実践もし敵に撃たれたりした場合には、自分のステータスを”死亡” などにするテキストフィールド ID を入力テキストフィールド名前を入力開始ボタンボタンをタップステータス一覧ステータスを選択マップ/ 友達の位置/ 自分、友達のステータスステータスを変更

44. UI Flowsの実践テキストフィールド ID を入力テキストフィールド名前を入力ゲームを終了ソルジャーを追加開始ボタンボタンをタップステータス一覧ステータスを選択マップ/ 友達の位置/ 自分、友達のステータスステータスを変更そのほか

45. UI Flowsの実践ネクストステップ他の場合のシナリオを元にUI Flows を複数作成 → 例：離れている味方と簡易的なコミュニケーションをする → 例：ゲーム回数を元に死亡数の合計などをカウントする各画面間の関係を元に画面構造を検討しプロトタイピング

46. UI Flowsの実践ユーザー登録画面マップステータス変更テキストフィールド ID を入力テキストフィールド名前を入力ゲームを終了ソルジャーを追加開始ボタンボタンをタップステータス一覧ステータスを選択マップ/ 友達の位置/ 自分、友達のステータスステータスを変更

47. UI Flowsの実践

48. 画面遷移よりも情報の関係性、詳細が確認しやすい簡単な仕様ができあがるので開発会社への発注がしやすくなるユーザーが利用する情報があるため、ワイヤーフレームを作成しやすい簡単に作れるため、デザイナー以外のチームメンバーも参加できるまとめ UI Flowsのメリット

49. ありがとうございました

50. アプリのUI 設計をする上で理解しておきたいコンポーネントの種類と用法鈴木健一

51. はじめにはじめに質問 PC とスマホ、前提の違いってなんでしょう？

52. PCとスマホの前提の違いとは？・利用シーン・利用方法（タッチスクリーンであること）・ジェスチャ・回線、オフライン時の使用・画面サイズ・ピクセル密度・利用するユーザー層の幅広さ（リテラシーとか）

53. PCとスマホの前提の違いとは？特に画面サイズ

54. PCとスマホの前提の違いとは？・比率：PC のディスプレイは横長、スマホは縦長・グローバルナビゲーションのようなモジュールが使えない・使える面積が少ない・画面＝資源になる

55. PCとスマホの前提の違いとは？・比率：PC のディスプレイは横長、スマホは縦長・グローバルナビゲーションのようなモジュールが使えない・使える面積が少ない・画面＝資源になる少ない資源で効率良く機能するUI を設計する必要がある

56. どうやって設計する？ Q. どう設計するの？

57. どうやって設計する？アプリ設計の指針となるガイドラインがあります・iOS : iOS Human Interface Guidelines ・Android : Android Design

58. どうやって設計する？大切なところだけまとめました・アプリUI の主要な画面パターン・操作の起点となるナビゲーションのメリット・デメリット・その他によく使われるコンポーネントの紹介

59. アプリUIの主要な画面パターンアプリUI の主要な画面パターン

60. アプリUIの主要な画面パターン 1. 導入画面 2. トップ画面 3. 一覧画面 4. 詳細画面 5. 入力・操作画面

61. アプリUIの主要な画面パターン 1. 導入画面アプリを起動した直後に表示される画面。アプリの機能の説明などの目的に用いられ、目的によっていくつかの種類が存在する。導入画面の例スプラッシュウォークスルーコーチマークエンプティステート

62. アプリUIの主要な画面パターン 1. 導入画面スプラッシュ・アプリの起動中に表示する画面・アプリが起動動作をしている最中に表示し、待ち時間のストレスを軽減するもの・ロゴマークなどを表示し、特定のイメージを伝えるもの・起動中に表示される画面となるため、過度な演出や大量のメッセージを表示させることは避ける

63. アプリUIの主要な画面パターン 1. 導入画面ウォークスルー・ユーザーが初めてアプリを起動した場合に、そのアプリがどんなものかを説明するための画面・アプリで出来ることが多岐に渡る場合に、その機能をビジュアルとテキストで端的に伝える役割を果たす。複数画面にまたがって構成されることも多く、その場合はページインジケーターが下部に表示されている・使い方が想像出来ているユーザーやまずは使ってみたいと思うユーザーには障害に感じられることもあり、複数画面に渡るウォークスルーを設置する場合にはスキップできる選択肢も検討する必要がある

64. アプリUIの主要な画面パターン 1. 導入画面ウォークスルー・ユーザーが初めてアプリを起動した場合に、そのアプリがどんなものかを説明するための画面・アプリで出来ることが多岐に渡る場合に、その機能をビジュアルとテキストで端的に伝える役割を果たす。複数画面にまたがって構成されることも多く、その場合はページインジケーターが下部に表示されている・使い方が想像出来ているユーザーやまずは使ってみたいと思うユーザーには障害に感じられることもあり、複数画面に渡るウォークスルーを設置する場合にはスキップできる選択肢も検討する必要がある

65. アプリUIの主要な画面パターン 1. 導入画面コーチマーク・画面上のUI がどんな意味や機能を持っているかをオーバーレイ表示で説明するもの・主要となる機能や初めにするアクション等を提示し、インストールしたばかりのユーザーに行動を促す

66. アプリUIの主要な画面パターン 1. 導入画面エンプティステート・表示するコンテンツが何もない場合に表示される画面・なにも表示するものがないということを伝えると同時に、何をすればこの画面上にコンテンツが表示されるようになるかを提示し、アクションを促す役割も兼ねるもの・類似した画面として、読み込みに失敗した場合の画面等も存在する

67. アプリUIの主要な画面パターン 2. トップ画面アプリ起動画面直後に表示される、最もユーザーが接触することが多い画面。ナビゲーションや主要機能などが設置され、他の画面と繋がるハブとなる役割を担います。トップ画面の例ポータル型タイムライン型ストア型

68. アプリUIの主要な画面パターン 2. トップ画面ポータル型・コミュニティサイトのような多くの情報を1 画面で表示することが求められる場合に用いられる画面・様々なUI コンポーネントを使い、主要な情報の提供と下階層の画面への誘導の役割を担う

69. アプリUIの主要な画面パターン 2. トップ画面タイムライン型・ユーザーによる投稿やニュースのような時間軸を持った情報を順序立てて表示する画面・垂直方向に情報が積み重なって表示されることが多いため、何の軸で表示されているのかが伝わりやすく、スクロールしながら情報が得やすい構成が求められる・表示された時点での最新の情報を取得するため、一覧をリフレッシュするためのボタンや過去の一覧を取得するための機能が付与されることが多い

70. アプリUIの主要な画面パターン 2. トップ画面ストア型・ユーザーが商品を購入できるアプリに使われる画面です。・ポータル型とは違い、商品が購入できることにフォーカスされたアプリのため、ユーザーが探している商品を簡単に探せる機能や、販売促進のためのキャンペーン情報、また、購入したユーザーの評価や感想などの情報が存在するため、何をトップ画面で表示するのかを意識した設計が重要になります

71. アプリUIの主要な画面パターン 3. 一覧画面コンテンツの一部を１つのコンポーネントとしてまとめて、一覧で表示する画面。ユーザーのアクションに対する結果を表示する際に用いられることが多く、主にリスト型コンポーネントで構成される。一覧画面の例検索結果ギャラリーお知らせ

72. アプリUIの主要な画面パターン 3. 一覧画面検索結果・ユーザーの検索により表示される画面・垂直型のリストを用いて検索結果を表示する・検索結果の制御（ソート、絞り込み等）をする為に、セグメンテッドコントロールというUI がよく利用される・検索結果が複数画面にわたる場合はページャーやインフィニットリストページャーが使われる

73. アプリUIの主要な画面パターン 3. 一覧画面ギャラリー・写真や動画などのサムネイルを一覧表示する画面・一覧性を高めるために、画面の全面にわたってグリッドリストにして表現される・コンテンツによっては補足説明をするためのキャプションと一緒に配置される

74. アプリUIの主要な画面パターン 3. 一覧画面お知らせ・SNS などで、いいねやコメント等のフレンドからの反応を表示する画面・誰がどんな事をしたのか、何があったのか、を端的に表現したテキストで一覧表示される・アクションが多い場合がほとんどのため、垂直型のリストで表現される

75. アプリUIの主要な画面パターン 4. 詳細画面アプリ内の深い階層にある画面で、コンテンツ単体を表示する画面。多くのアプリにとって、この画面が利用する目的となることが多いため、使い心地について最も注意を払って設計する画面となる。詳細画面の例ビューア記事マッププロダクト

76. アプリUIの主要な画面パターン 4. 詳細画面ビューア・写真や動画を表示するための画面・画面の移動のためにスワイプを用いたり、動画の進行状態の表示の為にスライダーを用いる・この画面の主役はコンテンツそのものであるため、UI 要素がコンテンツ自体の閲覧を妨げないようにすることが重要・コントローラー等もユーザーが利用しない際は非表示にするなど、コンテンツに没頭できるような配慮もすべき

77. アプリUIの主要な画面パターン 4. 詳細画面記事・ニュース、ブログ記事等の文章を表示する画面・テキストと画像のシンプルな構成ですが、スマートフォンでの閲覧を考慮した文字サイズや行間、文字色等の配慮が必要・記事の長さが長くスクロール量が多くなる傾向にあるため、ページトップへの移動を補助するような機能も検討する

78. アプリUIの主要な画面パターン 4. 詳細画面マップ・現在地や目的地の地図を表示する画面・ビューアと同様、コンテンツである地図を画面内に大きく表示させる必要があるため、ナビゲーションやボタンの大きさや配置に配慮することが重要・複数の地点を表示するようなケースでは、詳細画面に加え一覧画面に求められる機能も考慮した設計が必要

79. アプリUIの主要な画面パターン 4. 詳細画面プロダクト・商品情報を表示する画面・この場合のユーザーの目的は商品の購入のため、購入検討に必要な商品写真や価格、概要、購入者からの評判等の必要な情報を掲載する・商品の説明や仕様などの掲載する情報が多くなるケースでは、垂直型リストを多く用いる画面になる

80. アプリUIの主要な画面パターン 5. 入力・操作画面ユーザーが何らかの動作をするための画面。小さい画面上で文字の入力などの複雑な動きをすることが多くなるため、動作がしやすいか、誤動作を防げるかを考慮したUI を設計することが重要。入力・操作画面の例サインアップ投稿カメラ撮影設定

81. アプリUIの主要な画面パターン 5. 入力・操作画面サインアップ・アプリの利用にユーザー登録が必要な場合に用いられる画面・テキストフィールドを使って文字の入力を促す・登録時の成功・失敗などのエラー表示や、確実な情報を促すための補足情報などを考慮し、掲載する情報を検討する

82. アプリUIの主要な画面パターン 5. 入力・操作画面投稿・ユーザーが何らかの情報を投稿する際に用いられる画面・投稿する対象となるテキストや写真、動画、位置情報などにより表示方法は様々・投稿するという行動はユーザーがアプリの利用に関わる際のキーとなる行動のため、誤動作を防ぐような配慮が必要

83. アプリUIの主要な画面パターン 5. 入力・操作画面カメラ撮影・写真や動画を撮影するためにアプリを起動した際の画面・ツールバーにシャッターを切るボタンを配置するものが主流・撮影対象となる被写体が主なコンテンツとなるため、撮影対象を妨げず、操作しやすい大きさや配置を心がける必要がある

84. アプリUIの主要な画面パターン 5. 入力・操作画面設定・アプリの設定を変更するための画面・垂直型リストとスイッチを組み合わせて構成されることが多い・設定項目が多岐にわたる場合には、ドリルダウンを使って階層式にする場合も

85. アプリUIの主要な画面パターン身近なアプリを分類してみた例 Twitter 導入画面トップ画面一覧画面入力・操作画面詳細画面スプラッシュタイムラインツイート一覧ユーザ一覧検索結果設定画面ツイート詳細ユーザ詳細

86. アプリUIの主要な画面パターン身近なアプリを分類してみた例 Mail 一覧画面入力・操作画面トップ画面を兼ねる一覧画面アカウント一覧新規メール作成受信メール一覧詳細画面メール詳細

87. アプリUIの主要な画面パターン UI フローと一緒に考えると上手くまとまるユーザー登録画面マップステータス変更 UI フローは画面内の要素がどんなものかを明らかにするもの複数のアクションをさせる場合はひとつのフロー図に納まらない場合も複数のフローをまとめて1 つの画面とすることで画面遷移にできるテキストフィールド ID を入力テキストフィールド名前を入力ゲームを終了ソルジャーを追加開始ボタンボタンをタップステータス一覧ステータスを選択マップ/ 友達の位置/ 自分、友達のステータスステータスを変更

88. アプリUIの主要な画面パターンまとめ 5 種類の画面パターンを意識してアプリを利用・分析しておくことで、 UI フローの作成時の画面の集約がしやすくなり、アプリ全体の遷移や主要なシナリオに必要なUI 要素と出来るアクション出しがスムーズになる。続いて、各画面内の詳細なUI 設計へ

89. ナビゲーションのメリット・デメリット操作の起点となるナビゲーションのメリット・デメリット

90. ナビゲーションのメリット・デメリットアプリでも、ナビゲーション重要。複数の画面間を遷移しながらユーザーがやりたいことを実現するアプリでは、画面を遷移させる機能を担うナビゲーションが重要な存在となります。ここではPC サイトとは違う特徴的なナビゲーションを取り上げながら、それぞれを採用するメリットやデメリットを紹介していきます。ドリルダウン型タブ型スプリングボード型ドロワー型

91. ナビゲーションのメリット・デメリットドリルダウン型階層構造になっているものから1 つを選択してもらうために用いられるコンポーネントメリットドリルダウン型が向いているケースデメリット・ツリー構造を作れるため階層化しやすい・垂直方向に増やせるため拡張しやすい・階層構造をまっすぐ掘り進めるため迷いにくい・1 階層ずつしか上に戻れない・見る対象が大きく変わる際に階層の深さが問題となる・カテゴリの絞り込み等、階層構造が明確なナビゲーションの場合・並列となるナビゲーション項目が存在せずシンプルな構造の場合

92. ナビゲーションのメリット・デメリットタブ型主要機能が並列する際に、どの画面からでもいつでも別画面に遷移するためのナビゲーションとして用いられるコンポーネントメリット・複数の機能間を平行に移動できる・iPhone のタブ型の場合指が届きやすい位置に置くことができる・領域を広く取れるため素早くタップしやすいタブ型が向いているケースデメリット・追加できる項目数に限界がある（2 項目～ 5 項目程度）・機能を端的に表現するラベリングが必要・ユーザーが複数の機能間を遷移しながら利用することが想定される場合・主要機能と補完となる機能が明確に分類できる場合

93. ナビゲーションのメリット・デメリットスプリングボード型利用頻度が平均化されている項目や、ユーザーの目的が異なる項目を並列に表示し、グリッド上にアイコンとラベルを並べるUI コンポーネントメリット・アプリで出来ることを最初に掴んでもらいやすい・タブ型より多くの項目を設置できる・画面が広く使えるため、タップしやすいサイズで設置できる・グラフィック要素を大きく配置できるため印象付けに活用できるデメリット・画面全体がナビゲーションとなるため、それ以外の情報を得ることが出来ない・目的意識が明確で1 つの機能のみを使っているユーザーにとっては不要な画面となってしまうスプリングボード型が向いているケース・どんな事ができるアプリか全体像をユーザーに提示したい場合・提供する機能や情報がタブ型より多岐に渡る場合

94. ナビゲーションのメリット・デメリットドロワー型サイドからスライドして項目を表示するUI コンポーネント。項目リストは本体の画面から独立して縦方向のスクロールが可能で、ユーザーの目的が1 つではなく複数あるようなアプリでの利用に多く用いられる。メリットドロワー型が向いているケースデメリット・メイン画面でのナビゲーション項目を減らすことができユーザーがコンテンツに集中できる・縦方向のスクロールが可能なため項目数に制限がなくいくつでも拡張可能・ドロワーを開く際に必ず1 アクションが必要・ナビゲーションが展開するまで何が出来るのかがわかりにくい・画面の上部に配置される事が多く、ユーザーによっては指が届きにくい状態になってしまう・格納できる項目数に上限が無いため機能が複雑になりがち・コンテンツに集中してもらうことが最優先の場合・タブやスプリングボードでは収まりきらない場合・同粒度のカテゴリで分類できる構造の場合・主な主要機能が限られており、優先度が低い機能をまとめられる場合

95. よく使われるコンポーネントの紹介その他によく使われるコンポーネントの紹介

96. よく使われるコンポーネントの紹介セグメンテッドコントロール・複数の項目を1 つのグループのようにまとめたコンポーネント・検索結果のソートや表示されている内容を別の軸から再表示するような時に、画面の状態をコントロールするために用いられる・タブ型のナビゲーションと機能は似ているが、想定している用途が違うため、グローバルなナビゲーションがある際の位置関係に注意

97. よく使われるコンポーネントの紹介リフレッシュコントロール・タイムラインなどの、垂直に表示されているリストの情報を最新の状態にする際に用いられるコンポーネント・リストを画面下部に引っ張ることで実行される・下に引っ張った分、上に新しい情報が読み込まれる直感的な部分があるが、画面を表示した時点では気付かれないため、引っ張れることを気付かせるようなデザインが必要

98. よく使われるコンポーネントの紹介カルーセルパネル・コンテンツを上下ではなく左右にスワイプして切り替えられるコンポーネント・高さを一定にできるため、縦方向に複数並べて利用したり他のコンポーネントと併用することができる・画面外の左右に情報を隠すことができるため画面を有効利用できるが、画面内で見える要素が1 つだけとなるため、カルーセルパネルであることがわかりやすいデザインにする必要がある・カルーセル後半の情報はユーザーがスワイプまたは時間経過等で表示されるため、確実に閲覧をさせたいのであれば別の方法も検討してみることが重要

99. よく使われるコンポーネントの紹介モーダルメッセージ・画面中央にオーバーレイする形でメッセージを表示するコンポーネント・ユーザーに注意を促す場面や必ず読んで欲しいものがある場合などに利用される・一番確実にメッセージを伝えられるコンポーネントだが、ユーザーの行動を強制的に止めるものであるため、多用するとユーザーに負担がかかってしまったり、見慣れてしまうことでユーザーが内容を見なくなってしまう恐れがあるため、利用箇所は慎重に検討する

100. よく使われるコンポーネントの紹介まとめ各ナビゲーションの種類や特徴を理解することで、画面間を繋ぐナビゲーションに何を採用するかを素早く判断することができる。各コンポーネントの種類や特徴を理解することで、 UI フローが作成しやすくなり、画面毎に必須となる要素と機能が分かる。

101. ネクストステップこの後はどうする？

102. ネクストステップパーツを活用しながら画面毎に詳細なUI 設計をする・ステンシルやUI コンポーネントを予め持っておくと作りやすい・ビジュアルデザインのような作り込みは省略し、試作と改善のスピードを上げることのほうが重要考慮しておくべきこと・UI 設計がビジュアルデザインの原型になるため、アニメーションで差別化するようなUI を作るのであれば設計の時点から考慮しておく必要がある・WF からビジュアルデザインへの飛躍は必要だけど飛躍し過ぎると設計時の意図通りにならないこともあるので注意

103. ネクストステッププロトタイピングへ・Flinto や、inVision、Prott などを使って実践する・シナリオごとに遷移を繋ぎナビゲーションの整合性や抜け漏れを無くす・実際の端末での操作感を確認し、配置や遷移のアニメーション等を検討するプロトタイピングツールの使い分けについての記事を近日公開予定 http://www.standardinc.jp/reflection/

104. ネクストステップビジュアルデザインへ・設計意図を踏まえつつ、競合と差別化でき、触ってみたいと感じさせるビジュアルデザインを作る・サービスやアプリにおけるUI は本来透明化すべきもののため、突飛なビジュアルデザインが主役になるようなアプリは　長く利用されることは稀（ゲームとかは別）利用者の興味を喚起でき、最初の利用を促し、継続的な利用の妨げにならないようなビジュアルデザインが理想

105. ありがとうございましたコンポーネントの種類と用法を理解して素早く正しく設計しましょう！

106. もっと学びたい方へ参考資料 A shorthand for designing UI flows by Ryan of Basecamp https://signalvnoise.com/posts/1926-a-shorthand-for-designing-ui-flows UI のフローをデザインするための簡易記法 http://d.hatena.ne.jp/sirocco634/20090921 iOS Human Interface Guideline https://developer.apple.com/library/ios/documentation/userexperience/conceptual/mobilehig/ Android Design https://developer.android.com/design/index.html 使ってもらえるアプリの考え方 http://www.slideshare.net/takayukifukatsu/2012-15750990 スマートフォンのためのUI デザイン http://www.amazon.co.jp/dp/4797372303 inVision http://www.invisionapp.com/ Flinto https://www.flinto.com/ Prott https://prottapp.com/

SlideShare for iOS

アプリUI勉強会 in ネットイヤーグループ

by Kenichi Suzuki , CEO,Designer at Standard Inc.

on Oct 22, 2014

Statistics

Views

Actions

1 Embed 3

Accessibility

Categories

Upload Details

Usage Rights

Report content

アプリUI勉強会 in ネットイヤーグループ Presentation Transcript