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
320
みんなTCAって知ってる?
tiking76
0
930
Swiftのちょっとうれしい構文
tiking76
0
83
p1assさんを作ろうと試みました
tiking76
0
140
PRのときに使われがちな略語のやつ
tiking76
0
100
swiftでもグラフ書いてみたくない??
tiking76
0
220
コードでUI構築してみた
tiking76
0
96
Other Decks in Design
See All in Design
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
200
プロダクトデザインの「守破離」の「破」について
hayashirine
0
320
なぜ今必要?Figma×SmartHR×DMM.com×一休 エンジニア視点で考えるデザインシステム
hilokifigma
0
630
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
280
Дизайн современной услуги с Картой процесса-опыта
ashapiro
0
120
1年目のクリエイターがつくりあげた!採用冊子CANVAS制作の裏側 / creator-canvas
cyberagentdevelopers
PRO
1
530
Tableau曲線表現講座(2024.11.21)
cielo1985
0
260
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
190
太田博三(@usagisan2020)
otanet
0
230
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
150
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
140
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
229
18k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
RailsConf 2023
tenderlove
29
1k
Git: the NoSQL Database
bkeepers
PRO
427
65k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Docker and Python
trallard
44
3.3k
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
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました