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
200
最近きてるかもって思ってるデザイン
デザインなんもわからんけどはなしました😇
tiking
December 13, 2020
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
160
GraphQL 入門
tiking76
0
1.1k
みんなTCAって 知ってる?ver2.0
tiking76
1
300
みんなTCAって知ってる?
tiking76
0
840
Swiftのちょっとうれしい構文
tiking76
0
56
p1assさんを作ろうと試みました
tiking76
0
100
PRのときに使われがちな略語のやつ
tiking76
0
88
swiftでもグラフ書いてみたくない??
tiking76
0
170
コードでUI構築してみた
tiking76
0
83
Other Decks in Design
See All in Design
SUKEDACHI DESIGN NIGHT発表スライド
sugiyama_sukedachi
0
230
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
230
共創のための地域基盤としての非公式組織の形成 / Informal community as an infrastructure for co-creation
fumiyaakasaka
2
220
noteのアクセシビリティ これまでのプロダクト・組織へのアプローチとこれからのこと
tatsuyasawanobori
1
1k
素晴らしき余白の世界
kasumidyaya
1
110
デザイナー向け会社紹介資料/company-profile-designer
nextbeat
1
860
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
190
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
110
Design Leadership in Challenging Times
morganepeng
3
300
あらゆる場面でデザインを駆使するための技術 / Techniques for Applying Design in Any Situation
akiramotomura
4
2.2k
TrollsTopia: Funtography- Part 1
kenijam
1
210
新しい資産運用サービスALTERNA(オルタナ)の伝え方の工夫
layerx
PRO
0
940
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Clear Off the Table
cherdarchuk
84
310k
We Have a Design System, Now What?
morganepeng
43
6.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Testing 201, or: Great Expectations
jmmastey
28
6.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Fireside Chat
paigeccino
21
2.6k
Why Our Code Smells
bkeepers
PRO
331
56k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
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
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました