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
410
ニューモーフィズムってどうなの
凹凸なデザインが特徴的なニューモーフィズム。あまり流行ってないイメージだったけど、最近あるアプリがニューモーフィズムを採用して流行ってるらしい。自分も影響受けてさわってみました。
toridori
December 10, 2024
Tweet
Share
More Decks by toridori
See All by toridori
Locustでmacから開発環境に負荷試験をしてみた
toridori_dev
0
200
N + 1 問題の概要と Railsにおける解決方法
toridori_dev
0
170
Aurora Cloneで QA環境をつくってみた
toridori_dev
0
260
toridori base webをv0で爆速で作った話
toridori_dev
0
210
ハイパーパラメータチューニングって何をしているの
toridori_dev
0
400
KoT APIでプチ業務改善を試してみた
toridori_dev
0
430
MUI DataGridProコンポーネントの紹介
toridori_dev
0
670
あの日行ったマージの仕組みを僕達はまだ知らない。
toridori_dev
0
320
DBマイグレーションとORMについて
toridori_dev
0
240
Other Decks in Technology
See All in Technology
ストレージエンジニアの仕事と、近年の計算機について / 第58回 情報科学若手の会
pfn
PRO
3
830
ゼロコード計装導入後のカスタム計装でさらに可観測性を高めよう
sansantech
PRO
1
400
ローカルLLMとLINE Botの組み合わせ その2(EVO-X2でgpt-oss-120bを利用) / LINE DC Generative AI Meetup #7
you
PRO
1
160
生成AI時代のPythonセキュリティとガバナンス
abenben
0
140
ViteとTypeScriptのProject Referencesで 大規模モノレポのUIカタログのリリースサイクルを高速化する
shuta13
3
200
Behind Postgres 18: The People, the Code, & the Invisible Work | Claire Giordano | PGConfEU 2025
clairegiordano
0
130
OpenTelemetry が拡げる Gemini CLI の可観測性
phaya72
2
2.3k
個人でデジタル庁の デザインシステムをVue.jsで 作っている話
nishiharatsubasa
3
5.1k
あなたの知らない Linuxカーネル脆弱性の世界
recruitengineers
PRO
3
150
AI AgentをLangflowでサクッと作って、1日働かせてみた!
yano13
1
160
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
120
HonoとJSXを使って管理画面をサクッと型安全に作ろう
diggymo
0
180
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Six Lessons from altMBA
skipperchong
29
4k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
658
61k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Designing Experiences People Love
moore
142
24k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Stop Working from a Prison Cell
hatefulcrawdad
272
21k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
The Cost Of JavaScript in 2023
addyosmani
55
9.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Typedesign – Prime Four
hannesfritz
42
2.8k
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にも適用してみた 適用後 適用前
• 背景に真っ白や真っ黒使うのは難しい ◦ 真っ白使うとハイライト、真っ黒はシャドウがみえなくなる • 余白は広めにないと厳しい ◦ シャドウやハイライトを表示するスペースがないと凹凸感がでない • 画像コンテンツとの相性はそんなによくなさそう
◦ 背景色とコンポーネントの色が一緒じゃないと凹凸感がでない • アクセントカラーに原色系を使うのは難しい ◦ 全体的に柔らかいイメージになるので、キリッとした色と相性が悪い • 角ばったデザインにするのは難しい ◦ 全体的に柔らかいイメージになるので、カチッとしたデザインと相性が悪い わりと制約が多いなという印象 マテリアルデザインのものに無理やりニューモーフィズムを適用した感想なので、 最初からニューモーフィズムならでてこない感想ではあるかも