アプリケーションデザインの原則 / Principle of Application Design

note: https://note.com/featherplain/n/n4f1141e9c93e

キッチハイクの社内勉強会の資料です。
ソフトウェアや OOUI ( オブジェクト指向 UI ) に触れながら、アプリケーションのデザインで意識したい内容をスライド化しました。

Transcript

1. 2020.2.5(水) キッチハイク社内デザイン勉強会
   アプリケーションデザインの原則
   

   View Slide

2. Figmaの使い方とデザインデータ
   4.
   スタイルとFigma
   3.
   コンポーネントとFigma
   2.
   アプリケーションとしてのデザイン原則
   1.
   話すこと
   

   View Slide

3. Figmaの使い方とデザインデータ
   4.
   スタイルとFigma
   3.
   コンポーネントとFigma
   2.
   アプリケーションとしてのデザイン原則
   1.
   話すこと
   

   View Slide

4. ライブデモあり
   Figmaの使い方とデザインデータ
   4.
   スタイルとFigma
   3.
   コンポーネントとFigma
   2.
   アプリケーションとしてのデザイン原則
   1.
   話すこと
   

   View Slide

5. 今日のゴールを確認しよう
   本題に入る前に...
   

   View Slide

6. みんなどうしてる？
   Figmaの使い方・UIの作り方
   

   View Slide

7. チームで知識とルールの足並みを揃えよう
   みんなどうしてる？
   Figmaの使い方・UIの作り方
   

   View Slide

8. 足並みを揃える
   

   View Slide

9. キッチハイクのデザイン戦略部
   特徴がわかるひと？
   

   View Slide

10. キッチハイクのデザイン戦略部
    専門や得意分野が違うメンバーたち
    特徴がわかるひと？
    

    View Slide

11. 写真撮影
    サーバーサイド実装
    アプリ実装
    データ分析
    マーケティング
    クリエイティブ制作
    ブランディング
    UIデザイン
    UXデザイン
    PM
    PM / デザイナ デザイナ PM / エンジニア
    グロース デザイナ
    みんなの
    
    コアスキル
    

    View Slide

12. 「それ、
    ググればわかるよ」
    「いや、
    それ当たり前じゃん」
    

    View Slide

13. 「それ、
    ググればわかるよ」
    専門外にとっては当たり前じゃない
    「いや、
    それ当たり前じゃん」
    

    View Slide

14. 知識がないと検索ワード自体が
    
    分からないこともある
    「それ、
    ググればわかるよ」
    専門外にとっては当たり前じゃない
    「いや、
    それ当たり前じゃん」
    

    View Slide

15. 今日のゴール
    

    View Slide

16. チームの当たり前にする
    デザインの当たり前を
    
    

    View Slide

17. ググれるようになる
    わからないことは
    
    

    View Slide

18. アプリケーションとしての
    
    デザイン原則
    1
    

    View Slide

19. 情報構造のあり方を設計する
    構造的情報デザイン
    レイアウト・ナビゲーションデザイン
    ブランドを表現して伝える
    視覚的情報デザイン
    https://note.com/usagimaruma/n/nee69529402f6
    @usagimaru
    OOUI・オブジェクトベースなUIデザインに取り組むための心構え
    戦略
    要件
    構造
    骨格
    表層
    

    View Slide

20. 戦略
    要件
    構造
    骨格
    表層
    https://note.com/usagimaruma/n/nee69529402f6
    @usagimaru
    OOUI・オブジェクトベースなUIデザインに取り組むための心構え
    情報構造のあり方を設計する
    構造的情報デザイン
    ブランドを表現して伝える
    視覚的情報デザイン
    

    View Slide

21. 戦略
    要件
    構造
    骨格
    表層
    https://note.com/usagimaruma/n/nee69529402f6
    @usagimaru
    OOUI・オブジェクトベースなUIデザインに取り組むための心構え
    何に基づいて設計する？
    情報構造のあり方を設計する
    構造的情報デザイン
    ブランドを表現して伝える
    視覚的情報デザイン
    

    View Slide

22. 考えてみよう
    UIデザインとは〇〇である
    

    View Slide

23. 考えてみよう
    UIデザインとは〇〇である
    UIデザイン = ソフトウェアデザイン
    

    View Slide

24. 考えてみよう
    UIは何を指している？
    

    View Slide

25. 考えてみよう
    UIは何を指している？
    デジタルプロダクトのGUI
    

    View Slide

26. スマートフォン
    OS
    構造
    骨格
    表層
    ハードウェア
    ソフトウェア
    アプリケーション・ソフトウェア
    

    View Slide

27. スマートフォン
    OS
    構造
    骨格
    表層
    デジタルプロダクトと呼ぶ領域
    ハードウェア
    ソフトウェア
    アプリケーション・ソフトウェア
    

    View Slide

28. スマートフォン
    OS
    構造
    骨格
    表層
    ユーザーがコンピュータ上でやりたいことを
    
    直接的に実現するソフトウェア
    アプリケーション・ソフトウェア
    

    View Slide

29. スマートフォン
    OS
    構造
    骨格
    表層
    アプリケーションソフトに動作環境を提供する
    ソフトウェア
    ユーザーがコンピュータ上でやりたいことを
    
    直接的に実現するソフトウェア
    アプリケーション・ソフトウェア
    

    View Slide

30. スマートフォン
    OS
    構造
    骨格
    表層
    ソフトウェアが動作する機器
    ハードウェア
    アプリケーションソフトに動作環境を提供する
    ソフトウェア
    ユーザーがコンピュータ上でやりたいことを
    
    直接的に実現するソフトウェア
    アプリケーション・ソフトウェア
    

    View Slide

31. UIの設計方針
    アプリケーションの振る舞い
    意識しよう
    

    View Slide

32. プラットフォームが定義する仕様で決まる
    UIの設計方針
    アプリケーションの振る舞い
    意識しよう
    

    View Slide

33. uman nterface uidelines
    H I G
    

    View Slide

34. aterial esign
    M D
    

    View Slide

35. デザインされた UI をどう使うか
    4.
    各UIが何のためにデザインされたのか
    3.
    デザインの原則
    2.
    プラットフォームの特徴
    1.
    UIデザインするうえでの基本指針
    

    View Slide

36. 陥りがちな罠
    

    View Slide

37. 見た目が何となくそれっぽい
    陥りがちな罠
    

    View Slide

38. 他のアプリもそうしてるから
    見た目が何となくそれっぽい
    陥りがちな罠
    

    View Slide

39. 他のアプリもそうしてるから
    見た目が何となくそれっぽい
    陥りがちな罠
    

    View Slide

40. スマートフォン
    OS
    構造
    骨格
    表層
    意識しよう
    適切で意味のある
    
    構造と配置
    

    View Slide

41. キッチハイクアプリのデザイン原則
    クロスプラットフォーム
    

    View Slide

42. 構造と配置はHIG・表層はMD
    クロスプラットフォーム
    キッチハイクアプリのデザイン原則
    

    View Slide

43. iOSユーザーが大多数
    React Native
    

    View Slide

44. iOSユーザーが大多数
    ワンソース×クロスプラットフォーム
    React Native
    

    View Slide

45. 日常的にiOSの世界観に触れている
    iOSユーザーが大多数
    ワンソース×クロスプラットフォーム
    React Native
    

    View Slide

46. 定期的に読む習慣をつけよう
    HIGとMDは
    
    本当はデザイン原則だけでも解説、
    
    読み合わせしたかったもぐ〜。
    

    View Slide

47. 一体なんでしょう？
    HIGやMDの前提になっているもの
    

    View Slide

48. bject- riented ser nterface
    O O U I
    HIGやMDの前提になっているもの
    一体なんでしょう
    ？
    

    View Slide

49. と一体で発想され実践されている
    GUI
    直接インタラクトできる
    対象物
    ユーザーの関心の を画面上に表示
    OOUIとは
    

    View Slide

50. 視覚情報を用いて操作する
    コマンドによって操作する
    haracter-based ser nterface
    C U I haracter-based ser nterface
    C U I
    GUI
    CUI
    いわゆる
    「黒い画面」
    

    View Slide

51. 音声によってインタラクトする
    -based ser nterface
    Voice U I
    VUI
    

    View Slide

52. 黒い画面とGoogle Home
    共通点がわかるひと？
    

    View Slide

53. 黒い画面とGoogle Home
    共通点がわかるひと？
    タスクベースでありモーダル
    

    View Slide

54. play
    ok google, music.
    push
    git origin master
    ちなみに構文も一緒
    どちらも
    「やること」
    が先に決まっている
    

    View Slide

55. 動詞
    play
    ok google, music.
    動詞
    push
    git origin master
    ちなみに構文も一緒
    どちらも
    「やること」
    が先に決まっている
    

    View Slide

56. 名詞
    動詞
    play
    ok google, music.
    名詞
    動詞
    push
    git origin master
    ちなみに構文も一緒
    どちらも
    「やること」
    が先に決まっている
    

    View Slide

57. EPARK
    Amazon.co.jp
    保有Tポイントのお知らせ
    ヤマト運輸
    EPARK
    Uber Eats
    三井住友カード
    受信したメール
    モノ コト
    すべてを選択する
    (ひとつ選択する)
    チェックを入れる
    キャンセルする
    どうする？
    名詞 動詞
    

    View Slide

58. EPARK
    Amazon.co.jp
    保有Tポイントのお知らせ
    ヤマト運輸
    EPARK
    Uber Eats
    三井住友カード
    受信したメール
    モノ コト
    すべてを選択する
    (ひとつ選択する)
    チェックを入れる
    キャンセルする
    どうする？
    名詞 動詞
    GUIの本質はオブジェクト指向
    「視覚的」
    であることではない
    

    View Slide

59. モードレス
    

    View Slide

60. モードレス → モーダル
    選択モード 選択モード 作成モード
    

    View Slide

61. キッチハイクアプリを
    
    見てみよう
    

    View Slide

62. モードレス
    オブジェクト
    オブジェクト
    アクション
    

    View Slide

63. モードレス → モーダル
    

    View Slide

64. モードレス → モーダル
    投稿の表示から作成・編集
    
    という異なるアクションへの切替です。
    
    
    「戻る」という指向性・概念は持ちません。
    
    
    アクションを
    「キャンセル」
    する
    
    が正しいです ‍
    ＞＜
    本当は Push 遷移ではなく
    
    モーダル遷移があるべき姿
    

    View Slide

65. 図で構造化してみる
    PhotoPost
    投稿
    名詞
    オブジェクト -
    

    View Slide

66. 図で構造化してみる
    Pop-Up情報
    ユーザー情報
    投稿日時
    画像
    テキスト
    PhotoPost
    投稿
    名詞
    オブジェクト -
    

    View Slide

67. 図で構造化してみる
    削除する - Delete
    編集する - Edit
    作成する - New
    表示する - Show
    Pop-Up情報
    ユーザー情報
    投稿日時
    画像
    テキスト
    PhotoPost
    投稿
    動詞
    アクション -
    ※実際は削除できません
    名詞
    オブジェクト -
    

    View Slide

68. ユーザー体験に沿った情報構造を考える
    3.
    プラットフォームの特徴を把握する
    2.
    GUI のデザイン原則を把握する
    1.
    UIデザインするうえでの基本指針
    サービスのシステムとしてあるべき設計をする
    AppleやGooleのデザインガイドラインを読む
    オブジェクトベース/タスクベース・モードレス/モーダルの概念を理解する
    

    View Slide