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
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
97
swiftでもグラフ書いてみたくない??
tiking76
0
200
コードでUI構築してみた
tiking76
0
89
Other Decks in Design
See All in Design
知を活かせるチームづくりとは?-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
760
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.2k
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1k
Haruki_Konaka_Portforio.pdf
haruki556
0
780
実利の世界で、表現者である
kiyou77
3
120
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
400
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
330
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
4
2.5k
デザインできるもの、できないもの | Designship 2024 | Yasuhiro Yokota
yasuhiroyokota
2
940
デザイナー視点の体験設計とデザインレビューを事業部全員で体験するワークショップをしたお話
masayofff
3
220
Arborea Art Book
thebogheart
1
310
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
600
Featured
See All Featured
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
0
97
The Cult of Friendly URLs
andyhume
78
6.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
Building Your Own Lightsaber
phodgson
103
6.1k
Practical Orchestrator
shlominoach
186
10k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
28
900
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
32
2.7k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Gamification - CAS2011
davidbonilla
80
5.1k
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
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました