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

最近きてるかもって思ってるデザイン 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

おまけ

追加資料のライブラリー実装してみた・サンプルだけですが…

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

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

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

tiking

More Decks by tiking

Other Decks in Design

Featured

Transcript