ニューモーフィズムってどうなの

凹凸なデザインが特徴的なニューモーフィズム。あまり流行ってないイメージだったけど、最近あるアプリがニューモーフィズムを採用して流行ってるらしい。自分も影響受けてさわってみました。

Transcript

1. ニューモーフィズム ってどうなの Ryota Horizumi 2024/11/29
2. ニューモーフィズムとは？
3. Fitness - neumorphism by Mariia Tokar
4. New + Skeuomorphism = Neumorphism (“New”morphismじゃないよ)
5. そもそもSkeuomorphismって？ 現実にあるものに似せることで、直 感的に操作できるデザイン iOS 6まではスキューモーフィズムが 採用されていた (iOS 7からはフラッ トデザインに移行していった)
6. Neumorphismって？ Fitness - neumorphism by Mariia Tokar リアルな質感や物理的な特性を反映する スキューモーフィズムに、フラットデザ インやマテリアルデザインのシンプルさ を組み合わせたデザイン ハイライトやシャドウを使用して凹凸感 が強調されているのが特徴
7. だけどあんま流行ってない... 2020年頃から話題になりこれから流行ってくかと思いきや、国内のメ ジャーなアプリで採用されてるケースはほとんどない...
8. 一筋の光が... そんな流行ってないデザインを採用して 流行ってるアプリがあるらしい
9. Pokémon Trading Card Game Pocket DeNAとクリーチャーズ開発のもと、2024/10/30にサービス開始
10. ニューモーフィズムがいっぱい
11. ニューモーフィズムやってみる
12. 一番シンプルであろう実装 凹の指定 凸の指定 凹 凸
13. toridori baseにも適用してみた 適用後 適用前
14. • 背景に真っ白や真っ黒使うのは難しい ◦ 真っ白使うとハイライト、真っ黒はシャドウがみえなくなる • 余白は広めにないと厳しい ◦ シャドウやハイライトを表示するスペースがないと凹凸感がでない • 画像コンテンツとの相性はそんなによくなさそう ◦ 背景色とコンポーネントの色が一緒じゃないと凹凸感がでない • アクセントカラーに原色系を使うのは難しい ◦ 全体的に柔らかいイメージになるので、キリッとした色と相性が悪い • 角ばったデザインにするのは難しい ◦ 全体的に柔らかいイメージになるので、カチッとしたデザインと相性が悪い わりと制約が多いなという印象 マテリアルデザインのものに無理やりニューモーフィズムを適用した感想なので、 最初からニューモーフィズムならでてこない感想ではあるかも