Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Neumorphismを試してみた話
mashida
February 09, 2021
Design
1
620
Neumorphismを試してみた話
Neumorphismを自分のポートフォリオで試して得た学びをまとめました
mashida
February 09, 2021
Tweet
Share
Other Decks in Design
See All in Design
Driveline: Arizona (Storyboards)
8sided
PRO
0
170
Let's have a Threesome!
laineyru
1
230
Bertha
yvonnehsuanho
PRO
1
310
Nobel Finds a Staryu
innsamity
0
140
Cat Beast
hbosnian
1
400
プロダクト開発に活きるUXリサーチ - 基礎編 -
shippio
3
2.2k
Детский парк Фили
zapoimu
0
540
エアデザイン(AIR Design)サービス資料
air_design
0
130k
「UXの神」との対話
hiranotomoki
0
480
Talent Show-Down (2022)
gyroidz
1
190
開発現場でのサービスデザインとモデリング
tyshgc
PRO
6
1.7k
Introduce Celebration Grid
nakahara
0
300
Featured
See All Featured
A Philosophy of Restraint
colly
192
15k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
236
1M
How to train your dragon (web standard)
notwaldorf
58
3.8k
Learning to Love Humans: Emotional Interface Design
aarron
261
37k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
62k
Code Reviewing Like a Champion
maltzj
506
37k
Facilitating Awesome Meetings
lara
29
4k
Gamification - CAS2011
davidbonilla
75
3.9k
4 Signs Your Business is Dying
shpigford
169
20k
Rails Girls Zürich Keynote
gr2m
86
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
337
17k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Transcript
Neumorphismを試してみた話 mashida (@pntgn09)
mashida (@pntgn09) UI/UX デザイナー (5年⽬) リアルタイムのオンラインLTは初 くま&わらびもちが好き
Neumorphism Ҿ༻ : https://medium.com/@jason_kelley/neuomorphism-2c4cbe84caae
Neumorphism ը૾ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c Ҿ༻ : https://medium.com/@jason_kelley/neuomorphism-2c4cbe84caae
New + Skeumorphism Ҿ༻ɾը૾ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c
Skeumorphism ը૾ : https://www.interaction-design.org/literature/topics/skeuomorphism
Skeumorphism • 実世界にあるモノにリアルに似せて作るデザイン • ex: iOS 7までのapple純正アプリ • 質感やモノのそれっぽさを再現させる →
直感的にユーザに機能を伝えられるメリット Ҿ༻ : https://www.interaction-design.org/literature/topics/skeuomorphism
Neumorphism Ҿ༻ɾը૾ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c
Neumorphism (New + Skeumorphism) • Skeumorphismよりもリアルさがミニマム・シンプルなデザイン • ex: 「A・NA・TA for
DREAM」(2020) • 凹凸の質感を光の当たり具合・側⾯の影で再現 → 凹凸で階層を表現している • 2020年 ~ 2021年のトレンド • Michal Malewicz⽒の記事で紹介 Jason Kelly⽒が命名 Ҿ༻ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c ࢀর : https://en.99designs.jp/blog/trends/web-design-trends/
Portfolioに反映
Neumorphism.ioを使う Ҿ༻ : https://neumorphism.io
Portfolioに反映 ࢀর : https://asdmay.github.io/
試してみて気づいた3つのこと
試してみて気づいた3つのこと • 階層構造が深い・要素が詰まったUIには向いていなさそう • 凹凸表現のシャドウのエリアが広くなる • 向いているUI: IoT系のリモコンアプリ, ⾳楽プレーヤー etc
試してみて気づいた3つのこと • ⽩(#ffffff)・黒(#000000)背景には採⽤しづらい • 光源の⽅向の明るい⾯を背景⾊より明るくする必要あり • 同様に暗い⾯も背景⾊より暗くする必要あり
試してみて気づいた3つのこと • ⼿軽にリッチな表現ができる • Material Designのシャドウ表現を変えるだけ • 階層が浅いページならすぐに試せる
まとめ
まとめ • Neumorphism (New + Skeumorphism) • 2020年 ~ 2021年のトレンド
• 凹凸の質感を光の当たり具合・側⾯の影で再現するデザイン • ⼿軽にリッチな表現ができる • 複雑な階層構造や要素の詰まったUIでは使いにくい