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
How to get a Tiger to Tulsa
mcduckyart
0
110
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.3k
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
410
Saudade typeface
tiagoporto
0
320
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
kitami
1
160
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
問いの変遷
iflection
0
140
私とデザインの10年
iflection
0
130
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
390
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
400
Liquid Iron
mcduckyart
1
110
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
kkaru
0
430
Featured
See All Featured
Balancing Empowerment & Direction
lara
1
370
GraphQLとの向き合い方2022年版
quramy
48
14k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
930
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.5k
GitHub's CSS Performance
jonrohan
1031
460k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.3k
How to train your dragon (web standard)
notwaldorf
93
6.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Faster Mobile Websites
deanohume
307
31k
Scaling GitHub
holman
459
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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