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
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
530
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
450
最速[要出典]アクセシビリティチェック
magi1125
2
160
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.3k
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
240
生成AIを受け入れ共創できるデザイナーマインドへープロセス改革を想定したデザイナーの準備ー
takumasaito
1
1.5k
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
920
Night Shift (beginning sequence)
cpineda57
0
950
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
61k
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
250
(第1回) アーキテクト・テックリード育成講座
masakaya
0
130
GAtechnologies_Designer_Culture_Deck_会社紹介資料
gatechnologies
0
130
Featured
See All Featured
Building Your Own Lightsaber
phodgson
104
6.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
The Power of CSS Pseudo Elements
geoffreycrofte
74
5.4k
What's in a price? How to price your products and services
michaelherold
244
12k
How to train your dragon (web standard)
notwaldorf
89
5.8k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
8
1.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
Visualization
eitanlees
146
15k
Adopting Sorbet at Scale
ufuk
74
9.2k
KATA
mclloyd
29
14k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
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
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました