最近きてるかもって思ってるデザイン

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

ここまでありがとうございました