The Essence of UI Design

Transcript

1. UIデザインのエッセンス 2019/05/31 tambourine meetup at tambourine commune
2. 安部 草⿇⽣ Kusamao Abe 株式会社タンバリン ‧テクニカルディレクター ‧Webエンジニア
3. エンジニアが
 デザインの話を……？？？
4. と思うじゃないですか
5. デザインはデザイナーだけが
 するものではありません
6. ‒ IDEO ティム‧ブラウン⽒ TEDの講演にて
 http://www.ted.com/talks/tim_brown_urges_designers_to_think_big.html “デザインはデザイナーだけに任せるには重要過ぎる”
7. デザインは
 みんなで考えていい
8. 01 デザインとは？
9. “作ろうとするものの形態について，機能や⽣ 産⼯程などを考えて構想すること。意匠。設 計。図案。「⾃分で―した服」”
10. 設計
11. 別にグラフィック作るのだけが
 デザインじゃないんですよ
12. デザイナーはいろいろいる ϑΝογϣϯ
 σβΠφʔ 8FCσβΠφʔ ΠϯςϦΞ
 σβΠφʔ ήʔϜσβΠφʔ
13. 何を設計するか • グラフィック‧ビジュアルを設計する • ⼯業製品の⾒た⽬や使いやすさを設計する • 服の素材や縫製を設計する • 情報設計する etc
14. Web‧アプリではどんな
 デザインがある？
15. • グラフィックデザイン • UIデザイン • インタラクションデザイン • エクスペリエンスデザイン • インフォメーションアーキテクチャ etc • もちろん、システムやアーキテクチャもデザインする
16. ひとりで作るときは？
17. .どんなデザイン（設計）があるかを知る .重要な要素をおさえる（基本原則） .既にあるものを活⽤‧模倣する
18. 今⽇はUIデザインの話
19. 02 UI: User Interface
20. Interface • Inter- 「間の」 • face 「⾯」
 
 →（⼆者間の）境界⾯‧接点
21. 異なる界をつなぐ接点
22. Userとなにかをつなぐ
 インターフェースがUI
23. 何をつなぐ？
24. • （※以下Web/モバイルの⽂脈として）
 ストレートに⾔うなら「デジタルデバイス」との境界 • デジタルデバイスで操作するもの（オブジェクト）と の接点でもある
25. CUIとGUI • CUI: Command-line User Interface • GUI: Graphical User Interface
 
 
 デジタルデバイスを操作するのがコマ ンドではなく視覚的な表現を⽤いるよ うになり、いわゆる「UIデザイン」が 活発化された
26. (G) UIデザインの対象 • 対象者は「ユーザ」 • 対象物は操作するもの
 
 
 概念や操作したいものをモデリングして、 それを扱いやすくするための画⾯やインタ ラクションの設計を⾏う
27. モデリング……
28. エンジニアリングでもやるよね
29. たとえばDDDだったり
 オブジェクト指向だったり
30. 03 OOUI: 
 Object Oriented User Interface
31. ソシオメディア | OOUI の⽬当て
 https://www.sociomedia.co.jp/
32. 操作するオブジェクトの⼀覧
 →オブジェクト詳細
 →アクション選択
 の流れを徹底する Τοηϯε01
33. タスクベースとオブジェクトベース • タスクベースUI • 最初に「動作」を指定する • ex. ) $ cat hello.txt • オブジェクトUI • 最初に「オブジェクト」を選ぶ • ex. ) hello.txtファイルを選択し、開く
34. ‒WEB+DB PRESS Vol. ページ 使いにくさはどこから⽣まれるか？ より “タスクベースの操作⼿順はモーダル（モードがある状 態）であり、これをGUIに持ち込むと使いにくくなりま す。（……中略……）モードレスなUIは、ユーザーがい つでも⾃分の好きな順序で操作でき、その結果を画⾯の 変化によってリアルタイムにフィードバックするので す。”
35. ‒WEB+DB PRESS Vol. ページ 使いにくさはどこから⽣まれるか？ より
36. めちゃくちゃモーダル！
37. ピザを最初に選ばせてくれ .ピザをコレクションビューから選んでシングルビューを確認する • ピザの具を⾒たり⼤きさを確認したり • トッピングを追加したり（アクション） .コレクション/シングルビューからカートに⼊れる（アクション） .カートから⾜したり減らしたり（コレクションビュー + アクション） .配送先や配送⽇を選んで注⽂
38. 「ピザを注⽂」に
 とらわれてはいけない
39. 注⽂せずにピザを
 ⾒たいかもしれん
40. エッセンス01: コレクションとシングル • 操作したいオブジェクトの⼀覧を作ろう • 決して、「操作」の⼀覧を作らない • ペルソナ分析とかするとやりがち • 「何ができるか」にひっぱられがち • オブジェクトを選択して、何をするか選べるようにしよう
41. デザインの原則を知る Τοηϯε02
42. • 同じ性質のものは同じ⾒た⽬にする（反復‧⼀貫性） • 逆に、違う性質のものは違う⾒た⽬にする（対⽐） • 近い性質のものや関係するものは距離を近づける（近接‧隣接） • 情報の重みに応じてビジュアル表現に重み付けする（強弱）
43. • サムネイルとタイトルは情報が近いので距離が近い • 記事は繰り返し同じような装飾で並んでいて、等間 隔 • タイトルはその記事のサムネイルの⽅に近く、違う 記事のサムネイルはより遠い • インフィード広告は「同じ⾒た⽬」で広告をねじこ むことであたかも関連記事に⾒えるようにするレイ アウトの原則を逆⼿にとっている
 →広告は性質が違うので違う⾒た⽬にするのが原則
44. ※ほかにもいっぱい原則がある
45. でもデザインはセンスとか才能とか
 だけの話じゃないってのがわかればOK
46. コンポーネントや
 モジュールを
 利⽤する Τοηϯε03
47. UIキットやUIフレームワーク • Apple Human Interface Guideline • Google Material Design • Bootstrap • ElementUI
48. • 原則やOOUIをうっすらわかった上で、コンポーネントを使ってみよう • コンポーネントは単語のようなもの、原則は⽂法のようなもの • 単語だけでも⽂法だけで意思を伝えるのはなかなか難しいし、
 この2つがあっても円滑なコミュニケーションができるわけではない
 （が、伝わりやすくはなるよな）
49. まとめ • デザインはデザイナーだけのもの‧関⼼ではない • デザインは設計 • デザインはいろんな種類がある • UIデザインの⽂法と語彙を学んでみると
 とっかかりがあって⾃分でも作りやすいかも
50. Thank you for your listening!
51. 参考⽂献 • 誰のためのデザイン？増補‧改訂版 D.A.ノーマン著 • みんなではじめるデザイン批評 アーロン‧イリザリー/アダム‧コナー著 • はじめてのUIデザイン 吉⽵遼‧坪⽥勝‧池⽥拓司‧上ノ郷⾕太⼀‧元⼭和之‧宇野雄著 • WEB+DB PRESS Vol. 実践CircleCI/iOS 最新活⽤/速攻改善UIデザイン • https://www.sociomedia.co.jp/ • https://speakerdeck.com/kinakobooster/koredakeshou-rebajian-yasukunarudezainfalseji-chu • https://dely.design/n/n a c c