Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Essence of UI Design
Search
Kusamao Abe
May 31, 2019
Design
1
1.9k
The Essence of UI Design
Kusamao Abe
May 31, 2019
Tweet
Share
More Decks by Kusamao Abe
See All by Kusamao Abe
Vue builds
kusamao
1
470
Javascript in the past and now
kusamao
1
160
Make good (better) form
kusamao
0
240
Making mock-up in web application
kusamao
0
83
Keep a distance from jQuery
kusamao
0
120
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Design
See All in Design
政策広報実践講座_講演資料ダイジェスト2
capitolthink
0
120
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
太田博三(@usagisan2020)
otanet
0
220
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
320
Rayout Pattern 01
one0
0
1.5k
私たちは、世界とデザインの〝次の一歩〟を、どこへ向けるか。
tkhr_kws
2
280
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
ZKK_001.pdf
nicholaspegu
0
1.5k
コンセプトで経営・事業・組織を動かす、 Ameba20周年ブランディング / ameba-20th-branding
cyberagentdevelopers
PRO
1
550
ENEOS社事例|アプリ事業を加速させるデザイナーの取り組み / dx-eneos-design
cyberagentdevelopers
PRO
1
820
20241019-CUD友の会「困った!を解決するデザイン改訂版」交流会
majimasachi
0
320
横断組織デザイナーの働き方
mixi_design
PRO
0
330
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
What's in a price? How to price your products and services
michaelherold
244
12k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Code Review Best Practice
trishagee
66
17k
Unsuck your backbone
ammeep
669
57k
Side Projects
sachag
452
42k
Automating Front-end Workflow
addyosmani
1367
200k
Practical Orchestrator
shlominoach
186
10k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Transcript
UIデザインのエッセンス 2019/05/31 tambourine meetup at tambourine commune
安部 草⿇⽣ Kusamao Abe 株式会社タンバリン ‧テクニカルディレクター ‧Webエンジニア
エンジニアが デザインの話を……???
と思うじゃないですか
デザインはデザイナーだけが するものではありません
‒ IDEO ティム‧ブラウン⽒ TEDの講演にて http://www.ted.com/talks/tim_brown_urges_designers_to_think_big.html “デザインはデザイナーだけに任せるには重要過ぎる”
デザインは みんなで考えていい
01 デザインとは?
“作ろうとするものの形態について,機能や⽣ 産⼯程などを考えて構想すること。意匠。設 計。図案。「⾃分で―した服」”
設計
別にグラフィック作るのだけが デザインじゃないんですよ
デザイナーはいろいろいる ϑΝογϣϯ σβΠφʔ 8FCσβΠφʔ ΠϯςϦΞ σβΠφʔ ήʔϜσβΠφʔ
何を設計するか • グラフィック‧ビジュアルを設計する • ⼯業製品の⾒た⽬や使いやすさを設計する • 服の素材や縫製を設計する • 情報設計する etc
Web‧アプリではどんな デザインがある?
• グラフィックデザイン • UIデザイン • インタラクションデザイン • エクスペリエンスデザイン • インフォメーションアーキテクチャ
etc • もちろん、システムやアーキテクチャもデザインする
ひとりで作るときは?
.どんなデザイン(設計)があるかを知る .重要な要素をおさえる(基本原則) .既にあるものを活⽤‧模倣する
今⽇はUIデザインの話
02 UI: User Interface
Interface • Inter- 「間の」 • face 「⾯」 →(⼆者間の)境界⾯‧接点
異なる界をつなぐ接点
Userとなにかをつなぐ インターフェースがUI
何をつなぐ?
• (※以下Web/モバイルの⽂脈として) ストレートに⾔うなら「デジタルデバイス」との境界 • デジタルデバイスで操作するもの(オブジェクト)と の接点でもある
CUIとGUI • CUI: Command-line User Interface • GUI: Graphical User
Interface デジタルデバイスを操作するのがコマ ンドではなく視覚的な表現を⽤いるよ うになり、いわゆる「UIデザイン」が 活発化された
(G) UIデザインの対象 • 対象者は「ユーザ」 • 対象物は操作するもの 概念や操作したいものをモデリングして、 それを扱いやすくするための画⾯やインタ
ラクションの設計を⾏う
モデリング……
エンジニアリングでもやるよね
たとえばDDDだったり オブジェクト指向だったり
03 OOUI: Object Oriented User Interface
ソシオメディア | OOUI の⽬当て https://www.sociomedia.co.jp/
操作するオブジェクトの⼀覧 →オブジェクト詳細 →アクション選択 の流れを徹底する Τοηϯε01
タスクベースとオブジェクトベース • タスクベースUI • 最初に「動作」を指定する • ex. ) $ cat
hello.txt • オブジェクトUI • 最初に「オブジェクト」を選ぶ • ex. ) hello.txtファイルを選択し、開く
‒WEB+DB PRESS Vol. ページ 使いにくさはどこから⽣まれるか? より “タスクベースの操作⼿順はモーダル(モードがある状 態)であり、これをGUIに持ち込むと使いにくくなりま す。(……中略……)モードレスなUIは、ユーザーがい つでも⾃分の好きな順序で操作でき、その結果を画⾯の
変化によってリアルタイムにフィードバックするので す。”
‒WEB+DB PRESS Vol. ページ 使いにくさはどこから⽣まれるか? より
めちゃくちゃモーダル!
ピザを最初に選ばせてくれ .ピザをコレクションビューから選んでシングルビューを確認する • ピザの具を⾒たり⼤きさを確認したり • トッピングを追加したり(アクション) .コレクション/シングルビューからカートに⼊れる(アクション) .カートから⾜したり減らしたり(コレクションビュー + アクション)
.配送先や配送⽇を選んで注⽂
「ピザを注⽂」に とらわれてはいけない
注⽂せずにピザを ⾒たいかもしれん
エッセンス01: コレクションとシングル • 操作したいオブジェクトの⼀覧を作ろう • 決して、「操作」の⼀覧を作らない • ペルソナ分析とかするとやりがち • 「何ができるか」にひっぱられがち
• オブジェクトを選択して、何をするか選べるようにしよう
デザインの原則を知る Τοηϯε02
• 同じ性質のものは同じ⾒た⽬にする(反復‧⼀貫性) • 逆に、違う性質のものは違う⾒た⽬にする(対⽐) • 近い性質のものや関係するものは距離を近づける(近接‧隣接) • 情報の重みに応じてビジュアル表現に重み付けする(強弱)
• サムネイルとタイトルは情報が近いので距離が近い • 記事は繰り返し同じような装飾で並んでいて、等間 隔 • タイトルはその記事のサムネイルの⽅に近く、違う 記事のサムネイルはより遠い • インフィード広告は「同じ⾒た⽬」で広告をねじこ
むことであたかも関連記事に⾒えるようにするレイ アウトの原則を逆⼿にとっている →広告は性質が違うので違う⾒た⽬にするのが原則
※ほかにもいっぱい原則がある
でもデザインはセンスとか才能とか だけの話じゃないってのがわかればOK
コンポーネントや モジュールを 利⽤する Τοηϯε03
UIキットやUIフレームワーク • Apple Human Interface Guideline • Google Material Design
• Bootstrap • ElementUI
• 原則やOOUIをうっすらわかった上で、コンポーネントを使ってみよう • コンポーネントは単語のようなもの、原則は⽂法のようなもの • 単語だけでも⽂法だけで意思を伝えるのはなかなか難しいし、 この2つがあっても円滑なコミュニケーションができるわけではない (が、伝わりやすくはなるよな)
まとめ • デザインはデザイナーだけのもの‧関⼼ではない • デザインは設計 • デザインはいろんな種類がある • UIデザインの⽂法と語彙を学んでみると とっかかりがあって⾃分でも作りやすいかも
Thank you for your listening!
参考⽂献 • 誰のためのデザイン?増補‧改訂版 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