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
290
最近きてるかもって思ってるデザイン
デザインなんもわからんけどはなしました😇
tiking
December 13, 2020
Tweet
Share
More Decks by tiking
See All by tiking
デザインシステムっていいな
tiking76
0
240
GraphQL 入門
tiking76
0
1.5k
みんなTCAって 知ってる?ver2.0
tiking76
1
360
みんなTCAって知ってる?
tiking76
0
1k
Swiftのちょっとうれしい構文
tiking76
0
130
p1assさんを作ろうと試みました
tiking76
0
170
PRのときに使われがちな略語のやつ
tiking76
0
140
swiftでもグラフ書いてみたくない??
tiking76
0
270
コードでUI構築してみた
tiking76
0
140
Other Decks in Design
See All in Design
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
shikichee
2
3.7k
2026年、デザイナーはなにに賭ける?
0b1tk
0
510
Spacemarket Brand Guide
spacemarket
2
230
公開スライド)熊本市様-電子申請中級編
garyuten
0
1k
デザインを信じていますか
sekiguchiy
1
1k
Vibe Coding デザインシステム
poteboy
3
1.7k
root COMPANY DECK / We are hiring!
root_recruit
2
27k
AI時代に必要な アイデアの形
uxman
0
130
モビリティプラットフォームの未来を築くクラウド基盤
kossykinto
0
230
Figmaレクチャー会Part2 もっと使いこなす編@千株式会社 社内勉強会
designer_no_pon
1
280
Diverse Design Team Deck
diverse
0
900
TWCP#21 UXデザインと哲学のはなし
shinn
0
310
Featured
See All Featured
Faster Mobile Websites
deanohume
310
31k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
tomoyanonymous
2
510
The Impact of AI in SEO - AI Overviews June 2024 Edition
aleyda
5
760
The Power of CSS Pseudo Elements
geoffreycrofte
82
6.2k
Raft: Consensus for Rubyists
vanstee
141
7.3k
Test your architecture with Archunit
thirion
1
2.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
9
1.2k
Getting science done with accelerated Python computing platforms
jacobtomlinson
2
140
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
konakalab
0
370
Optimizing for Happiness
mojombo
378
71k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.4k
sira's awesome portfolio website redesign presentation
elsirapls
0
180
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
おまけ
追加資料のライブラリー実装してみた ・サンプルだけですが…
ここまでありがとうございました