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
tiking
December 13, 2020
Design
300
0
Share
最近きてるかもって思ってるデザイン
デザインなんもわからんけどはなしました😇
tiking
December 13, 2020
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
270
GraphQL 入門
tiking76
0
1.5k
みんなTCAって 知ってる?ver2.0
tiking76
1
380
みんなTCAって知ってる?
tiking76
0
1.1k
Swiftのちょっとうれしい構文
tiking76
0
140
p1assさんを作ろうと試みました
tiking76
0
180
PRのときに使われがちな略語のやつ
tiking76
0
150
swiftでもグラフ書いてみたくない??
tiking76
0
280
コードでUI構築してみた
tiking76
0
150
Other Decks in Design
See All in Design
OJTで学んだ 「心を動かす」ファシリテーション
saki822
1
300
AI時代、デザイナーの価値はどこに?
tararira
2
1.1k
社長の宿題への回答 「新卒×AI」が生み出す価値
saki822
2
140
「使いやすさ」だけでは、「勝てる」サービスにはならない。〜KPIとUXの分断を埋める、サービス戦略という「指針」〜
nbkouhou
2
330
デザインを信じていますか
sekiguchiy
1
1.2k
【pmconf2025】PdMの頭の中を見える化する体験構造図
kamechi7222222
1
2.3k
Drawing_for_Anim_Final_PDF.pdf
lynteo
2
150
ClaudeCodeでマーケターの課題を解決する
kenichiota0711
11
13k
Connpass-Xperia_Camera_App_by_HCD.pdf
sony
1
610
Figma MCPを活用するためのデザインハンドブック
vivion
7
17k
I.A. como meio, não como fim. Dados + IA e até onde vai a promessa?
videlvequio
0
300
20251128_武蔵野美術大学InnovationDay_参加型の未来
a2k
1
120
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.9k
Reflections from 52 weeks, 52 projects
jeffersonlam
356
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
A brief & incomplete history of UX Design for the World Wide Web: 1989–2019
jct
1
370
Navigating Team Friction
lara
192
16k
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
How to Think Like a Performance Engineer
csswizardry
28
2.6k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
300
Principles of Awesome APIs and How to Build Them.
keavy
128
17k
jQuery: Nuts, Bolts and Bling
dougneiner
66
8.4k
Chasing Engaging Ingredients in Design
codingconduct
0
190
Taking LLMs out of the black box: A practical guide to human-in-the-loop distillation
inesmontani
PRO
3
2.2k
Transcript
最近きてるかもって思っ てるデザイン tiking stdout2020 2020/12/13
Readme name : 舘佳紀 colleage : 会津大学学部3年 さーくる : Zli所属です
Handlename : チキング 好きな言語 swift twitter @tikin0716 gitHub tiking76
きっかけ
ん???なんか無かったか?
え…shadow!?
これって最近だとなんか影を入れるのが流 行りなんかな?
教えてGoogle 先生
とりあえず出てきたから流行りぽいな…
もう少し頑張ってみた
よさそう…
スキューモーフィズムって? スキューモーフィズム(英: skeuomorphism)またはリッチデザイン(英: Rich Design)とは、他の 物質に似せるために行うデザインや装飾を指す用語である。 たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあて はまる wikiより参照 ・昔はAppleも採用していたみたい
・マテリアルデザインはこれと、フラットデザインのいいとこ取りしたやつみたい
Neumorphism(ニューモフィズム) ・新しいスキューモーフィズムのことみたい ・ボタンやカードなどの要素が凹凸で表現されていて、明るい影(光)が落とされているのが特徴
実装には2つの方法があるみたい
同じ色合いの3つの色を用意する ・比較的やりやすいかな
色を生成して実装する ・色の調和と同調がとれる
実際にやってみた
明るい色と暗い色を用意する
色をブレンドして中間調を作る
ポップにする ・中間色を背景色にする ・左端に明るい色のドロップシャドウをかける ・右端に暗い色のドロップシャドウをかける ・それぞれに50%のブラーをかける
やってみた
所感 ・デザインについてなにもよく知らなかったけど、 なんとなくわかるようになった。 ・やっぱデザイナーさんはすごいやってことを再確認できた。 ・やっぱ、新しいこと勉強するのは楽しい!
参考にさせていただきました "Neumorphism" なるUIデザインのトレンド Neumorphism (Soft UI) in UI design -
Tutorial Neumorphism: 令和時代のスキューモーフィズム スキューモーフィズムwiki What's New in macOS - macOS - Human Interface Guidelines
追加で読んでおいてほしい資料 UIKitでNeumorphismのデザインを構築するライブラリ iOS vs. Android App UI Designを解説する(更新中)|せいぞう|note
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました