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
17
生成AIが切り拓く 'New' DX
ikutani41
0
460
生成AIが切り拓く新時代のDXとデータ活用
ikutani41
0
5
AIプロダクトに関わるデザイナーの新たな役割 ~ Design of Intelligent Software.
ikutani41
1
370
What's MNTSQ? | CareersDeck
ikutani41
2
200k
Ethereum blockchain & Tokens
ikutani41
0
190
Think on User Accounts @ikutani41
ikutani41
4
290
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
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
170
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
Cyber Heart Online Book
hjnasby
0
130
【Adobe MAX Japan 2025】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
7
5.7k
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
200
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない?というお話
iflection
4
1.2k
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
690
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
harutaka Vision Deck
zenkigenforrecruit
0
150
同人音声のための、 最高の視聴体験を求めて【サブカル×デザインMeetUP!】
vivion
0
760
株式会社デイトラ様│コーポレートサイト│コンセプトシート
haruka_capeo
0
2.2k
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.9k
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
We Have a Design System, Now What?
morganepeng
53
7.7k
Side Projects
sachag
455
42k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
Speed Design
sergeychernyshev
32
1k
Making Projects Easy
brettharned
116
6.3k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Automating Front-end Workflow
addyosmani
1370
200k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
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 ྑ͔ͬͨΒಡΜͰͶ