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
300
0
Share
Embed
Copy iframe code
Copy JS code
Copy link
Start on current slide
最近きてるかもって思ってるデザイン
デザインなんもわからんけどはなしました😇
tiking
December 13, 2020
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
290
GraphQL 入門
tiking76
0
1.5k
みんなTCAって 知ってる?ver2.0
tiking76
1
380
みんなTCAって知ってる?
tiking76
0
1.1k
Swiftのちょっとうれしい構文
tiking76
0
150
p1assさんを作ろうと試みました
tiking76
0
180
PRのときに使われがちな略語のやつ
tiking76
0
150
swiftでもグラフ書いてみたくない??
tiking76
0
280
コードでUI構築してみた
tiking76
0
160
Other Decks in Design
See All in Design
つくり方を変えていく | change-how-we-build
mottox2
2
1.4k
タイル紹介サイト「タイルだもんで」
calpin
0
160
空間アプリ開発のフィードバックをCodexにするための抽象的なデザインツールの模索
karad
0
160
Техники структурирования беседы с собой, заказчиком и командо
ashapiro
0
200
もう迷わない!“なんとなく”を卒業するフォントの選び方【村田俊英】
toshihidemurata
0
750
セブンデックス プロジェクト事例 / innovation Scenes
sevendex
1
1.3k
30分でわかるインサイトマネジメント(2025年12月バージョン)
centou
1
700
ClaudeCodeでマーケターの課題を解決する
kenichiota0711
11
14k
Mandalyn_DT5001_FinalAssignment.pdf
lynteo
0
240
Decksh keywords
ajstarks
0
110
「親切なオンボーディング」 が招く罠 ー AI時代のUXデザイン
godlingkogami
1
140
体験負債を資産に変える組織的アプローチ
hikarutakase
0
1.6k
Featured
See All Featured
Navigating Team Friction
lara
192
16k
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
reverentgeek
1
500
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
370
Building Adaptive Systems
keathley
44
3.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
10
1.3k
30 Presentation Tips
portentint
PRO
1
350
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
10k
Typedesign – Prime Four
hannesfritz
42
3.1k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
49
10k
Exploring the relationship between traditional SERPs and Gen AI search
raygrieselhuber
PRO
2
4.1k
Designing Powerful Visuals for Engaging Learning
tmiket
1
450
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.8k
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
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました