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
320
ニューモーフィズムってどうなの
凹凸なデザインが特徴的なニューモーフィズム。あまり流行ってないイメージだったけど、最近あるアプリがニューモーフィズムを採用して流行ってるらしい。自分も影響受けてさわってみました。
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
130
Aurora Cloneで QA環境をつくってみた
toridori_dev
0
200
toridori base webをv0で爆速で作った話
toridori_dev
0
180
ハイパーパラメータチューニングって何をしているの
toridori_dev
0
340
KoT APIでプチ業務改善を試してみた
toridori_dev
0
330
MUI DataGridProコンポーネントの紹介
toridori_dev
0
550
あの日行ったマージの仕組みを僕達はまだ知らない。
toridori_dev
0
270
DBマイグレーションとORMについて
toridori_dev
0
220
Other Decks in Technology
See All in Technology
Observability в PHP без боли. Олег Мифле, тимлид Altenar
lamodatech
0
340
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
160
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
iotcomjpadmin
0
150
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
210
Clineを含めたAIエージェントを 大規模組織に導入し、投資対効果を考える / Introducing AI agents into your organization
i35_267
4
1.6k
【TiDB GAME DAY 2025】Shadowverse: Worlds Beyond にみる TiDB 活用術
cygames
0
1.1k
AWS CDK 実践的アプローチ N選 / aws-cdk-practical-approaches
gotok365
6
720
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
420
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
How Community Opened Global Doors
hiroramos4
PRO
1
110
ローカルLLMでファインチューニング
knishioka
0
150
Featured
See All Featured
Done Done
chrislema
184
16k
Bash Introduction
62gerente
614
210k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Making the Leap to Tech Lead
cromwellryan
134
9.3k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Mobile First: as difficult as doing things right
swwweet
223
9.7k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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にも適用してみた 適用後 適用前
• 背景に真っ白や真っ黒使うのは難しい ◦ 真っ白使うとハイライト、真っ黒はシャドウがみえなくなる • 余白は広めにないと厳しい ◦ シャドウやハイライトを表示するスペースがないと凹凸感がでない • 画像コンテンツとの相性はそんなによくなさそう
◦ 背景色とコンポーネントの色が一緒じゃないと凹凸感がでない • アクセントカラーに原色系を使うのは難しい ◦ 全体的に柔らかいイメージになるので、キリッとした色と相性が悪い • 角ばったデザインにするのは難しい ◦ 全体的に柔らかいイメージになるので、カチッとしたデザインと相性が悪い わりと制約が多いなという印象 マテリアルデザインのものに無理やりニューモーフィズムを適用した感想なので、 最初からニューモーフィズムならでてこない感想ではあるかも