Neumorphismを試してみた話

Transcript

1. Neumorphismを試してみた話 mashida (@pntgn09)

2. mashida (@pntgn09) UI/UX デザイナー (5年⽬) リアルタイムのオンラインLTは初 くま＆わらびもちが好き

3. Neumorphism Ҿ༻ : https://medium.com/@jason_kelley/neuomorphism-2c4cbe84caae

4. Neumorphism ը૾ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c Ҿ༻ : https://medium.com/@jason_kelley/neuomorphism-2c4cbe84caae

5. New + Skeumorphism Ҿ༻ɾը૾ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c

6. Skeumorphism ը૾ : https://www.interaction-design.org/literature/topics/skeuomorphism

7. Skeumorphism • 実世界にあるモノにリアルに似せて作るデザイン • ex: iOS 7までのapple純正アプリ • 質感やモノのそれっぽさを再現させる  →

   直感的にユーザに機能を伝えられるメリット Ҿ༻ : https://www.interaction-design.org/literature/topics/skeuomorphism

8. Neumorphism Ҿ༻ɾը૾ : https://uxdesign.cc/whats-the-next-ui-design-trend-75c8b61f5c7c

9. 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/

10. Portfolioに反映

11. Neumorphism.ioを使う Ҿ༻ : https://neumorphism.io

12. Portfolioに反映 ࢀর : https://asdmay.github.io/

13. 試してみて気づいた3つのこと

14. 試してみて気づいた3つのこと • 階層構造が深い・要素が詰まったUIには向いていなさそう • 凹凸表現のシャドウのエリアが広くなる • 向いているUI: IoT系のリモコンアプリ, ⾳楽プレーヤー etc

15. 試してみて気づいた3つのこと • ⽩(#ffffff)・黒(#000000)背景には採⽤しづらい • 光源の⽅向の明るい⾯を背景⾊より明るくする必要あり • 同様に暗い⾯も背景⾊より暗くする必要あり

16. 試してみて気づいた3つのこと • ⼿軽にリッチな表現ができる • Material Designのシャドウ表現を変えるだけ • 階層が浅いページならすぐに試せる

17. まとめ

18. まとめ • Neumorphism (New ＋ Skeumorphism) • 2020年 ~ 2021年のトレンド

    • 凹凸の質感を光の当たり具合・側⾯の影で再現するデザイン • ⼿軽にリッチな表現ができる • 複雑な階層構造や要素の詰まったUIでは使いにくい