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
250
最近きてるかもって思ってるデザイン
デザインなんもわからんけどはなしました😇
tiking
December 13, 2020
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
190
GraphQL 入門
tiking76
0
1.3k
みんなTCAって 知ってる?ver2.0
tiking76
1
320
みんなTCAって知ってる?
tiking76
0
950
Swiftのちょっとうれしい構文
tiking76
0
91
p1assさんを作ろうと試みました
tiking76
0
140
PRのときに使われがちな略語のやつ
tiking76
0
110
swiftでもグラフ書いてみたくない??
tiking76
0
230
コードでUI構築してみた
tiking76
0
100
Other Decks in Design
See All in Design
Les petites aventures de CSS, saison 2025
goetter
3
4k
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
240
Generating Momentum | Yasuhiro Yokota
yasuhiroyokota
1
300
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
210
横断組織デザイナーの働き方
mixi_design
PRO
0
440
藤本佳子・ポートフォリオ・2025/01
yoshi_designer
1
4.7k
苦労が多かった多言語対応をFigmaで楽にした話
pioneer_devrel
PRO
0
150
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
230
“使いやすい”が生産性を変える!業務を効率化するためのUX/UI設計ポイント
ncdc
2
250
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
470
界隈からの逃走–デザイン初め新年会2025
sekiguchiy
3
1.1k
aya_murakami_portfolio
ayakaimi1101
0
1.5k
Featured
See All Featured
Embracing the Ebb and Flow
colly
85
4.6k
Designing Experiences People Love
moore
141
24k
Building a Modern Day E-commerce SEO Strategy
aleyda
40
7.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
Music & Morning Musume
bryan
47
6.5k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
Become a Pro
speakerdeck
PRO
27
5.3k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
Mobile First: as difficult as doing things right
swwweet
223
9.6k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Visualization
eitanlees
146
16k
Java REST API Framework Comparison - PWX 2021
mraible
30
8.5k
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
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました