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
エンジニアにありがちな自己満足UI(笑) / How to make iikanji UI d...
Search
hsm_hx
May 01, 2019
Design
0
400
エンジニアにありがちな自己満足UI(笑) / How to make iikanji UI design?
2019/05/01 高専カンファレンスin讃岐登壇スライドです
hsm_hx
May 01, 2019
Tweet
Share
More Decks by hsm_hx
See All by hsm_hx
はじめまして,Webセキュリティ! / Welcome to the Web security world!
hsm_hx
1
160
エンジニアの必需品 Gitを学ぼう! / Lets use Git for engineering!
hsm_hx
0
180
2019年度部活動説明会 / CombIntro2019
hsm_hx
0
140
進捗を支える文房具 / stationary which support progress
hsm_hx
3
410
世界征服が夢の高専生が部活を征服する話 / I wanna dominate this world
hsm_hx
1
1.4k
技術同人誌を書いてみた話 / Let's write your tech-book
hsm_hx
0
750
1on1自己紹介/1on1-self-introduction
hsm_hx
0
2.3k
2018-09-22 逆求人フェスティバル / Reversed job-offer-festival
hsm_hx
0
4.1k
めかぶと納豆でしゅうまいを作った話 / Make Shumai from MeCab and Natto
hsm_hx
0
630
Other Decks in Design
See All in Design
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
220
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
940
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
560
Cards | Storyboards
giofortuna_story
0
130
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
1
190
#yumemi_grow 読書シェア会 vol.1 - スコット・バークン著『デザインはどのように世界をつくるのか』
kaitou
1
130
How to go from research data to insights?
mastervicedesign
0
250
デザイナーのマネジメント職、 身構えずにやっていこう
fumink7
0
840
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
390
ito aya Portfolio
itoaya116
0
130
実践ゼロから作らないデザインシステム SaaS × デザインシステム × プロダクトデザイン / Efficient Design System for SaaS—no need to start from scratch.
kaminashi
2
1.1k
Tableau曲線表現講座(2024.11.21)
cielo1985
0
310
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
298
20k
KATA
mclloyd
29
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
490
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.2k
Building Your Own Lightsaber
phodgson
104
6.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Adopting Sorbet at Scale
ufuk
75
9.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
16
1.1k
Building Adaptive Systems
keathley
41
2.5k
Transcript
KOSENCONF130SANUKI How to make iikanji UI design? エンジニアにありがちな 自己満足UI(笑) うべこうせん
はすみ(@hsm_hx)
今日お話すること テキストプレースホルダ ① ぼくたちはデザインができない ② 私のデザインがイケてないのは どう考えてもお前らが悪い
ぼくたちはデザインができない WE ARE NOT GOOD AT DESIGN
センスをマッマの胎内に置いてきてしまったオタクのポーズ デザインとは? ものをかっこよく見せるやつ センスが無いとどうにもならない 最悪適当でもなんとかなる
センスをマッマの胎内に置いてきてしまったオタクのポーズ デザインとは? ものをかっこよく見せるやつ センスが無いとどうにもならない 最悪適当でもなんとかなる
センスをマッマの胎内に置いてきてしまったオタクのポーズ デザインとは? ものを使いやすく見せるやつ 知識が無いとどうにもならない 最悪適当でもなんとかならない
デザインとは? どちらが見やすいですか?
デザインとは? どちらが使いやすいですか?
デザインとは? 使おうと思いますか?
デザインとは? 違いは何だと思いますか?
① 基準線(左,中央,右)を意識する ② パーツの性質(色・サイズ・フォント)を揃える
None
基準線を意識する ・左揃え 普通はこれを使う。 最もストレスなく情報を読み取れる ・中央揃え 短いフレーズやキーワードにだけ使う。 アイコンと一緒に使われがち ・右揃え 後述。同じ操作群の中でも性質の違うものなど
None
パーツの性質を揃える ・フォント UIに使う場合は普通のものを選ぶ。 M+や源ノ角ゴシック,メイリオなど ・色 基本は全体で色味を統一する。 グレースケール→+1色→… 原色は使いづらいかも ・サイズ タイトル,サブタイトル,本文の3種類
イケてるデザインって何なんだ それでもやっぱりデザインがわからないオタクのポーズ 基準線を合わせるとイケてる? 色は多いほうが強い
イケてるデザインって何なんだ それでもやっぱりデザインがわからないオタクのポーズ 動線が短いこと 1秒で概要が把握できること
None
None
この画面で伝えたいこと 施設名 使える状態か?(提供時間) 何が使える場所なのか? 施設名を大きく一番上に 提供時間を色で表現 大きいアイコンと透明度 関連するパーツを近づける
私のデザインがイケてないのは どう考えてもお前らが悪い WHY IS MY DESIGN CHEEP ?
UIデザインの原則 ユーザーの想像通りの動きをすること 想定する利用場面に適していること ユーザーの気持ちを推し量れないオタクのポーズ
UIデザインの原則 ユーザーの気持ちを推し量れないオタクのポーズ
UIデザインの原則 ユーザーの気持ちを推し量れないオタクのポーズ
デザインを添削する 違いは何だと思いますか?
デザインを添削する
デザインを添削する
最低限のデザインをするために 原則を守りましょう 使う側の気持ちになってみましょう ノンデザイナーズ・デザインブック やってはいけないデザイン を読みましょう ① ② ③
『使ってもらえるもの』づくり