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
Design Talk#5 Visual Design
Search
Yutaro Ikutani
April 11, 2018
Design
0
220
Design Talk#5 Visual Design
Design Talk#5 @AnyPay, Inc.
"Visual Design"
Yutaro Ikutani
April 11, 2018
Tweet
Share
More Decks by Yutaro Ikutani
See All by Yutaro Ikutani
勝ち抜くための生成AI戦略:チャットコマースにおけるテイラーメイド事例
ikutani41
0
12
生成AIが切り拓く 'New' DX
ikutani41
0
450
生成AIが切り拓く新時代のDXとデータ活用
ikutani41
0
4
AIプロダクトに関わるデザイナーの新たな役割 ~ Design of Intelligent Software.
ikutani41
1
360
What's MNTSQ? | CareersDeck
ikutani41
2
200k
Ethereum blockchain & Tokens
ikutani41
0
180
Think on User Accounts @ikutani41
ikutani41
4
280
Design Talk#3 Information Architecture 2/2
ikutani41
0
1k
Design Talk#2 Information Architecture 1/2
ikutani41
2
1.7k
Other Decks in Design
See All in Design
Masked shaman-Storyboard 2025
ashley0521
0
270
AIで加速するアクセシビリティのこれから
magi1125
1
150
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
350
Flow, Not Stock 知識触媒としてのIA
5kaichi
1
250
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
ikeyatsu
2
1.6k
Cards | Storyboards
giofortuna_story
0
210
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.4k
AIネイティブな時代におけるUXデザインの在り方とは
kuni29
0
1.4k
Echoes Boomerang
artcloudyu
PRO
0
170
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
190
「デザイン」を信じるには
iflection
0
210
Crisp Code inc. ブランドガイドライン
so_kotani
1
170
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Why You Should Never Use an ORM
jnunemaker
PRO
56
9.4k
The World Runs on Bad Software
bkeepers
PRO
68
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
GitHub's CSS Performance
jonrohan
1031
460k
Git: the NoSQL Database
bkeepers
PRO
430
65k
4 Signs Your Business is Dying
shpigford
183
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
47
2.7k
Transcript
VISUAL DESIGN @ikutani41 2018/4/11 Design Talk#5
Index ▸ σβΠϯఔͷ͓͞Β͍ ▸ ϏδϡΞϧσβΠϯͷ࢛େݪଇ ▸ ۙ Proximity ▸ ྻ
Alignment ▸ ڧऑ Contrast ▸ ෮ Repetition ▸ ࣮ྫ ▸ VDݪଇͱIAΫΠζ
σβΠϯఔͷ͓͞Β͍ ؾ࣋ͪྑ͍ΠϯλϥΫγϣϯ ϒϥϯσΟϯάɾΫϦΤΠςΟϒ ཧղΛଅਐ͢ΔΠϯλϥΫγϣϯ Visual/UI Design Layout, Components ૢ࡞ϑϩʔ IA
ίϯηϓτɾτϯϚφ
Visual Design ▸ Πϯϓοτɿใઃܭ ▸ ͔ͬͨ͠Β͓͚ࠩͯ͠͠ ▸ ΞτϓοτɿUI, Graphic ▸
Θ͔Γ͢͞ ▸ ͍͢͞ ▸ OSΒ͠͞ʢࣗવɺҧײͷͳ͞ʣ ▸ ϒϥϯσΟϯά ▸ ࣮ͷ͢͠͞ɺσβΠϯͷ࠶ݱՄೳΛ૬ஊ͔ͯ͠ΒFix ▸ ίϯηϓτ → ౷ҰͱΔ → ҹௐͱࡉ෦ͷͩ͜ΘΓ
σβΠϯͱ ࢥߟͷදݱํ๏Ͱ͋Δ
Index ▸ σβΠϯఔͷ͓͞Β͍ ▸ ϏδϡΞϧσβΠϯͷ࢛େݪଇ ▸ 1. ۙ Proximity ▸
2. ྻ Alignment ▸ 3. ڧऑ Contrast ▸ 4. ෮ Repetition ▸ ࣮ྫ ▸ VDݪଇͱIAΫΠζ
ۙ Proximity
Do & Don’t
ۙʢProximityʣ ʮۙ͞ɾ༨നʯͰใઃܭΛදݱ ▸ Ґஔతʹ͍ۙΦϒδΣΫτʹରͯ͠ɺਓ͕ؒײ͡Δ͜ͱ ▸ ؔ࿈ੑ͕͋Δͷ ▸ ಉ͡άϧʔϓʹଐ͢Δͷ ▸ ۙ͞Λදݱ͢Δͱɺࣗવͱʮ༨നʯ͕ੜ·ΕΔ
▸ άϧʔϐϯά֊ߏΛදݱ͢Δ ▸ ۙͷӨڹͰɺҙਤ͠ͳ͍άϧʔϐϯάදݱ͕ੜ·Ε͕ͪ
ྻ Alignment
Do & Don’t
ྻʢAlignmentʣ ʮʹݟ͑ͳ͍ઢʯΛҙࣝ͢Δ ▸ ΦϒδΣΫτྖҬͷڥքઢ ▸ ྻͷج४ͱͳΔʮઢʯ ▸ ʮΨΠυʯΛҾ͍ͯ࡞ۀ͢Δ ▸ ࣗવͱݟ͑Δ
▸ 1pxͰζϨͨΒμϝ ▸ ἧ͍ͬͯͳ͍ = ಛผͳҙຯɾҙਤΛ࣋ͭ
ΨΠυݟ͑·͔͢
ΨΠυݟ͑·͔͢
Further Study ϖΠϞ AndroidͰར༻͍ͯ͠ΔList Components
ڧऑ Contrast
Do & Don’t
ڧऑʢContrastʣ ҙຯͷҧ͍ྖҬͷҧ͍Λ໌֬Խ͢Δ ▸ ڵຯΛҾ͘ vs. ༰Λ͔ͬ͠Γ͑Δ ▸ ϏδϡΞϧ vs. ςΩετ
▸ ཁૉใϨϕϧͷҧ͍ΛࡍཱͨͤΔ ▸ ຊจͱݟग़͠ͷςΩεταΠζࠩΛେ͖͘͢Δ ▸ ຊจͱݟग़͠ͷςΩετελΠϧΧϥʔΛม͑Δ ▸ ࢹઢͷ༠ಋʢڧˠऑʣ
෮ Repetition
Do & Don’t
෮ʢRepetitionʣ ಉ͡ҙຯΛ࣋ͭͷಉ͡ϏδϡΞϧʹɻ ▸ ͋Δཁૉ͕܁Γฦ͞ΕΔ → Ұ؏ੑ౷ҰੑΛײ͡Δ ▸ ϓϩμΫτશମͰ౷ҰײΛ࣋ͨͤΔ & ཧղΛଅਐͤ͞Δ
▸ ʮϒϥϯυཁૉʯΛ෮͢Δ → ҹ͚ ▸ ܁Γฦ͠Ͱ౷ҰײΛ࡞Δ → ΞΫηϯτ͕ࡍཱͭ ▸ ౷Ұ͞Εͨମݧ = 1ͭͷαʔϏε ▸ ಥݱΕΔҟ࣭ͳମݧ → ʮʂεύϜ.. ͦͬด͡ɻʯ
Further Study ▸ “visual design principles” ͰάάΔͱ͍ΖΜͳهࣄ͕ग़·͢ ▸ ΄΅ݴͬͯΔ͜ͱҰॹɻཻ͕ҧ͏͚ͩɻ ▸
4ͭͩͬͨΓ10ͩͬͨΓ20ͩͬͨΓɻ ▸ Visual DesignͷϨϏϡʔΛ͢Δͱ͖ͷجຊ༻ޠʹͳΓ·͢ ▸ ͔ͬ͜Βઌ৭࠼ײ֮ͱϚφʔͱΞΠσΟΞͰ͢ʢ࣋ʣ
@ikutani41 2018/3/28 Thank you! VISUAL DESIGN
Twitter & note @ikutani41 ྑ͔ͬͨΒಡΜͰͶ