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
0
270
最近きてるかもって思ってるデザイン
デザインなんもわからんけどはなしました😇
tiking
December 13, 2020
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
200
GraphQL 入門
tiking76
0
1.4k
みんなTCAって 知ってる?ver2.0
tiking76
1
340
みんなTCAって知ってる?
tiking76
0
990
Swiftのちょっとうれしい構文
tiking76
0
110
p1assさんを作ろうと試みました
tiking76
0
150
PRのときに使われがちな略語のやつ
tiking76
0
120
swiftでもグラフ書いてみたくない??
tiking76
0
240
コードでUI構築してみた
tiking76
0
120
Other Decks in Design
See All in Design
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.3k
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
870
UXデザインはなぜ定着しないのか?
designstudiopartners
0
950
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
3.3k
8_8_リサーチカンファレンスプレイベント.pdf
muture
PRO
2
330
ビジネス成果を最大限に発揮するPORTFOLIO
ataxi1003
0
510
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
540
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
110
7 Core Values of Round-L
wired888
0
1.7k
Designing User Experience through Interaction Design
lycorptech_jp
PRO
0
370
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
131
19k
Building Applications with DynamoDB
mza
96
6.6k
The Art of Programming - Codeland 2020
erikaheidi
55
13k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Statistics for Hackers
jakevdp
799
220k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Context Engineering - Making Every Token Count
addyosmani
1
18
Docker and Python
trallard
45
3.6k
Visualization
eitanlees
148
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
520
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
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました