$30 off During Our Annual Pro Sale. View Details »

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

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

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

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

はのめぐみ / Megumi Hano

February 05, 2020
Tweet

More Decks by はのめぐみ / Megumi Hano

Other Decks in Design

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