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
240
最近きてるかもって思ってるデザイン
デザインなんもわからんけどはなしました😇
tiking
December 13, 2020
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
180
GraphQL 入門
tiking76
0
1.3k
みんなTCAって 知ってる?ver2.0
tiking76
1
310
みんなTCAって知ってる?
tiking76
0
920
Swiftのちょっとうれしい構文
tiking76
0
77
p1assさんを作ろうと試みました
tiking76
0
130
PRのときに使われがちな略語のやつ
tiking76
0
99
swiftでもグラフ書いてみたくない??
tiking76
0
210
コードでUI構築してみた
tiking76
0
92
Other Decks in Design
See All in Design
Карта реализации историй — убийца USM
ashapiro
0
300
Dinosaur Mayhem
storyartist
0
120
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
4
310
Tableau曲線表現講座(2024.11.21)
cielo1985
0
220
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
680
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
110
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
510
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
510
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
240
Design System for training program
mct
0
310
【Designship 2024|10.13】デザイン組織を進化させるための仕組み化の要諦
payatsusan213
1
750
GAtechnologies_Designer_Culture_Deck_会社紹介資料
gatechnologies
0
130
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
870
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
GitHub's CSS Performance
jonrohan
1030
460k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
3
180
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
570
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
240
Done Done
chrislema
182
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
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
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました