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では使いにくい