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
490
Javascript in the past and now
kusamao
1
160
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
Liquid Iron
mcduckyart
1
110
harutaka Vision Deck
zenkigenforrecruit
0
130
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.5k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
460
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
260
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
370
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
270
Echoes Boomerang
artcloudyu
PRO
0
240
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.3k
Haley's adventure chase
ivettetwin
0
220
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
590
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How STYLIGHT went responsive
nonsquared
100
5.6k
Adopting Sorbet at Scale
ufuk
77
9.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Writing Fast Ruby
sferik
628
61k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing Experiences People Love
moore
142
24k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
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