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
510
Javascript in the past and now
kusamao
1
170
Make good (better) form
kusamao
0
250
Making mock-up in web application
kusamao
0
94
Keep a distance from jQuery
kusamao
0
130
Using Heroku on entrusted development
kusamao
0
1.1k
Other Decks in Design
See All in Design
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
spring_aki
1
120
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
1
460
portfolio.pdf
onof003
0
200
株式会社バクタム 会社説明資料
bactum
0
360
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
4k
デザイナー向けフライル説明資料
toshiblues
0
170
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
560
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
AI時代に問われる、リサーチの感受性──地域⇄大企業の現場から見えた「違和感」との向き合い方
muture
PRO
0
100
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
AI業務アプリケーションの体験デザイン
kazuhirokimura
0
200
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
hiromitsuuuuu
1
760
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Scaling GitHub
holman
463
140k
It's Worth the Effort
3n
187
28k
Bash Introduction
62gerente
615
210k
Why Our Code Smells
bkeepers
PRO
340
57k
Statistics for Hackers
jakevdp
799
220k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Optimizing for Happiness
mojombo
379
70k
Six Lessons from altMBA
skipperchong
29
4k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.2k
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