Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
最近きてるかもって思ってるデザイン
Search
tiking
December 13, 2020
Design
0
230
最近きてるかもって思ってるデザイン
デザインなんもわからんけどはなしました😇
tiking
December 13, 2020
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
170
GraphQL 入門
tiking76
0
1.3k
みんなTCAって 知ってる?ver2.0
tiking76
1
310
みんなTCAって知ってる?
tiking76
0
910
Swiftのちょっとうれしい構文
tiking76
0
73
p1assさんを作ろうと試みました
tiking76
0
130
PRのときに使われがちな略語のやつ
tiking76
0
96
swiftでもグラフ書いてみたくない??
tiking76
0
200
コードでUI構築してみた
tiking76
0
88
Other Decks in Design
See All in Design
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.2k
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.4k
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
450
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
230
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
470
トップデザインチームが描く、 2030年に活躍するデザイナー
hiranotomoki
2
2.5k
Design System for training program
mct
0
290
Haruki_Konaka_Portforio.pdf
haruki556
0
760
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
590
Arborea Art Book
thebogheart
1
300
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
220
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
880
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Building an army of robots
kneath
302
43k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.9k
Facilitating Awesome Meetings
lara
50
6.1k
Designing for Performance
lara
604
68k
Unsuck your backbone
ammeep
669
57k
How GitHub (no longer) Works
holman
310
140k
Become a Pro
speakerdeck
PRO
25
5k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
The Cost Of JavaScript in 2023
addyosmani
45
6.9k
YesSQL, Process and Tooling at Scale
rocio
169
14k
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
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました