Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
最近きてるかもって思っ てるデザイン tiking stdout2020 2020/12/13
Slide 2
Slide 2 text
Readme name : 舘佳紀 colleage : 会津大学学部3年 さーくる : Zli所属です Handlename : チキング 好きな言語 swift twitter @tikin0716 gitHub tiking76
Slide 3
Slide 3 text
きっかけ
Slide 4
Slide 4 text
ん???なんか無かったか?
Slide 5
Slide 5 text
え…shadow!?
Slide 6
Slide 6 text
これって最近だとなんか影を入れるのが流 行りなんかな?
Slide 7
Slide 7 text
教えてGoogle 先生
Slide 8
Slide 8 text
とりあえず出てきたから流行りぽいな…
Slide 9
Slide 9 text
もう少し頑張ってみた
Slide 10
Slide 10 text
よさそう…
Slide 11
Slide 11 text
スキューモーフィズムって? スキューモーフィズム(英: skeuomorphism)またはリッチデザイン(英: Rich Design)とは、他の 物質に似せるために行うデザインや装飾を指す用語である。 たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあて はまる wikiより参照 ・昔はAppleも採用していたみたい ・マテリアルデザインはこれと、フラットデザインのいいとこ取りしたやつみたい
Slide 12
Slide 12 text
Neumorphism(ニューモフィズム) ・新しいスキューモーフィズムのことみたい ・ボタンやカードなどの要素が凹凸で表現されていて、明るい影(光)が落とされているのが特徴
Slide 13
Slide 13 text
実装には2つの方法があるみたい
Slide 14
Slide 14 text
同じ色合いの3つの色を用意する ・比較的やりやすいかな
Slide 15
Slide 15 text
色を生成して実装する ・色の調和と同調がとれる
Slide 16
Slide 16 text
実際にやってみた
Slide 17
Slide 17 text
明るい色と暗い色を用意する
Slide 18
Slide 18 text
色をブレンドして中間調を作る
Slide 19
Slide 19 text
ポップにする ・中間色を背景色にする ・左端に明るい色のドロップシャドウをかける ・右端に暗い色のドロップシャドウをかける ・それぞれに50%のブラーをかける
Slide 20
Slide 20 text
やってみた
Slide 21
Slide 21 text
所感 ・デザインについてなにもよく知らなかったけど、 なんとなくわかるようになった。 ・やっぱデザイナーさんはすごいやってことを再確認できた。 ・やっぱ、新しいこと勉強するのは楽しい!
Slide 22
Slide 22 text
参考にさせていただきました "Neumorphism" なるUIデザインのトレンド Neumorphism (Soft UI) in UI design - Tutorial Neumorphism: 令和時代のスキューモーフィズム スキューモーフィズムwiki What's New in macOS - macOS - Human Interface Guidelines
Slide 23
Slide 23 text
追加で読んでおいてほしい資料 UIKitでNeumorphismのデザインを構築するライブラリ iOS vs. Android App UI Designを解説する(更新中)|せいぞう|note
Slide 24
Slide 24 text
おまけ
Slide 25
Slide 25 text
追加資料のライブラリー実装してみた ・サンプルだけですが…
Slide 26
Slide 26 text
ここまでありがとうございました