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
ニューモーフィズムってどうなの
Search
toridori
December 10, 2024
Technology
0
340
ニューモーフィズムってどうなの
凹凸なデザインが特徴的なニューモーフィズム。あまり流行ってないイメージだったけど、最近あるアプリがニューモーフィズムを採用して流行ってるらしい。自分も影響受けてさわってみました。
toridori
December 10, 2024
Tweet
Share
More Decks by toridori
See All by toridori
Locustでmacから開発環境に負荷試験をしてみた
toridori_dev
0
150
N + 1 問題の概要と Railsにおける解決方法
toridori_dev
0
140
Aurora Cloneで QA環境をつくってみた
toridori_dev
0
210
toridori base webをv0で爆速で作った話
toridori_dev
0
190
ハイパーパラメータチューニングって何をしているの
toridori_dev
0
350
KoT APIでプチ業務改善を試してみた
toridori_dev
0
350
MUI DataGridProコンポーネントの紹介
toridori_dev
0
580
あの日行ったマージの仕組みを僕達はまだ知らない。
toridori_dev
0
290
DBマイグレーションとORMについて
toridori_dev
0
220
Other Decks in Technology
See All in Technology
AIコードアシスタントとiOS開発
jollyjoester
1
200
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
4
220
Amazon SNSサブスクリプションの誤解除を防ぐ
y_sakata
3
190
ゼロから始めるSREの事業貢献 - 生成AI時代のSRE成長戦略と実践 / Starting SRE from Day One
shinyorke
PRO
0
180
AIでテストプロセス自動化に挑戦する
sakatakazunori
1
590
Introduction to Bill One Development Engineer
sansan33
PRO
0
270
名刺メーカーDevグループ 紹介資料
sansan33
PRO
0
820
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
39k
データ駆動経営の道しるべ:プロダクト開発指標の戦略的活用法
ham0215
2
190
LLM拡張解体新書/llm-extension-deep-dive
oracle4engineer
PRO
25
7.2k
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1.2k
本当にわかりやすいAIエージェント入門
segavvy
8
4.4k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
It's Worth the Effort
3n
185
28k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Producing Creativity
orderedlist
PRO
346
40k
Adopting Sorbet at Scale
ufuk
77
9.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Music & Morning Musume
bryan
46
6.7k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Transcript
ニューモーフィズム ってどうなの Ryota Horizumi 2024/11/29
ニューモーフィズムとは?
Fitness - neumorphism by Mariia Tokar
New + Skeuomorphism = Neumorphism (“New”morphismじゃないよ)
そもそもSkeuomorphismって? 現実にあるものに似せることで、直 感的に操作できるデザイン iOS 6まではスキューモーフィズムが 採用されていた (iOS 7からはフラッ トデザインに移行していった)
Neumorphismって? Fitness - neumorphism by Mariia Tokar リアルな質感や物理的な特性を反映する スキューモーフィズムに、フラットデザ インやマテリアルデザインのシンプルさ
を組み合わせたデザイン ハイライトやシャドウを使用して凹凸感 が強調されているのが特徴
だけどあんま流行ってない... 2020年頃から話題になりこれから流行ってくかと思いきや、国内のメ ジャーなアプリで採用されてるケースはほとんどない...
一筋の光が... そんな流行ってないデザインを採用して 流行ってるアプリがあるらしい
Pokémon Trading Card Game Pocket DeNAとクリーチャーズ開発のもと、2024/10/30にサービス開始
ニューモーフィズムがいっぱい
ニューモーフィズムやってみる
一番シンプルであろう実装 凹の指定 凸の指定 凹 凸
toridori baseにも適用してみた 適用後 適用前
• 背景に真っ白や真っ黒使うのは難しい ◦ 真っ白使うとハイライト、真っ黒はシャドウがみえなくなる • 余白は広めにないと厳しい ◦ シャドウやハイライトを表示するスペースがないと凹凸感がでない • 画像コンテンツとの相性はそんなによくなさそう
◦ 背景色とコンポーネントの色が一緒じゃないと凹凸感がでない • アクセントカラーに原色系を使うのは難しい ◦ 全体的に柔らかいイメージになるので、キリッとした色と相性が悪い • 角ばったデザインにするのは難しい ◦ 全体的に柔らかいイメージになるので、カチッとしたデザインと相性が悪い わりと制約が多いなという印象 マテリアルデザインのものに無理やりニューモーフィズムを適用した感想なので、 最初からニューモーフィズムならでてこない感想ではあるかも