Posted by | 江口 史和里 Shiori Eguchi |
みなさん、こんにちは!
前回に引き続き、Webデザインについて調べていたところ
”ニューモーフィズム”という聞き慣れない言葉。
New(新しい)+Skeumorphism(スキューモーフィズム)
=Neumorphism(ニューモーフィズム)
....スキューモーフィズムとはなんでしょうか??
スキューモーフィズム(英: skeuomorphism)またはリッチデザイン(英: Rich Design)とは、他の物質に似せるために行うデザインや装飾を指す用語である。 たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあてはまる。
(Wikipediaより)
なんとなくイメージしてみるとするならば、
iPhoneのアプリアイコンでしょうか。
昔のOSのアプリアイコンでは、リアルで立体的なデザイン(スキューモーフィズム)に対し
最近は、フラットデザインが使用されているものが多いです。
例)Instagram
スキューモーフィズム・フラットデザイン、と出てきて
そして二つを掛け合わせた”ニューモーフィズム”と移り変わってきているようですね。
画像右のinstagramアイコンも、フラットではあるけどちょっと立体的。
実際にニューモーフィズムでデザインをつくってみました。
めちゃめちゃ便利なニューモーフィズムサービス☞☞☞ https://neumorphism.io/
マテリアルデザインとは違い、
ひとつの紙(レイヤー)が膨らんでいたりへこんでいるように見えるのが特徴。
どのように表現しているかというと、2種類のドロップシャドウ(影)をつけているためです。
影をぼかさずにくっきりさせるとこう。
意外と単純ですが・・・
影の色などを良い感じにするのが難しい・・。
シャドウの入れ方一つで、雰囲気ががらっと変わるのが不思議ですね。
以下おまけ。
ニューモーフィズム的・ボタン要素も作ってみました。※PC推奨
マウスポインタを上にのせたり、クリックしてみてくださいね!
Posted by Shiori Eguchi
<Remote>WEBコーダー/クリエイター 江口 史和里
|
ブログ 2021-02-04 20:21:00
こんばんわ、横山です。 さて今日も今日とて好きなものについ ...
ブログ 2022-02-07 12:00:00
こんにちは。 横山です。 最近は色々なサブスクが流行って ...
ブログ 2020-12-28 17:11:00
こんにちは!! かいとです!! 皆さんクリスマスはいかがお過ごしでしたでしょうか? 皆 ...
ブログ 2021-02-11 21:02:00
最近コーディングの勉強をしておりまして このサイトどうなってるのかな〜と ...
ブログ 2020-03-26 17:35:00
こんにちは!ひらのです^^* まだまだコロナに警戒が必要ですが元気にお過ごしでしょうか…。 福岡は桜が咲き ...
ブログ 2022-02-14 12:58:00
こんにちは、桑原です。 曲に合わせてアニメーションを作るとき、 波形を見ながらキーフレームを打っていくのは 正直面倒くさいですよね(笑 ...
ブログ 2023-05-19 22:56:00
こんにちは!宮崎です! 今年の春からピークマインド2年目に突入しました!!!   ...
ブログ 2022-05-26 17:26:00
こんにちは、こんばんは エハラです。 先週、とある撮影で 福岡県福津市へと行ってきました!! &nb ...
ブログ 2021-01-22 20:51:00
こんにちは、桑原です。 今回は簡単にVRを制作する方法を書こうと思います! 用意するのはこんな感じの360度画像。 ネットでHDR ...
ブログ 2021-02-18 18:28:00
こんにちは! かいとです まだまだ寒暖の差が激しく、雪が降るほど寒い日もありますが、 ...