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コーダー/クリエイター 江口 史和里
|
ブログ 2023-08-31 17:49:00
ヒット曲のサビ前はブレイクっていう手法がよく使われていますよね 今から盛り上げるぞっ!!! という意識の中で、瞬間音が途 ...
ブログ 2020-03-04 16:34:00
みなさんこんにちわ、横山です(・・) 普段、能天気にマイペースに日々を過ご ...
ブログ 2021-02-20 20:35:00
こんにちは、セキです! ネットでフリー写真を探していて この写真つかえそうだな!と思って保存したけど 「なんか色を変え ...
ブログ 2021-01-20 21:39:00
世の中は、コロナの影響もあり、ヴァーチャルオフィスだの、オンラインがメインになっていくだの、エンタメの主流はリアルからヴァーチャルへだの、、 ...
ブログ 2021-01-21 23:27:00
こんにちは★山内です。 今回は前回に引き続きフルサイズLumix S5の撮影レビューを書いていきたいと思います。 今回はS5 120フレ ...
ブログ 2022-04-15 19:19:00
こんにちは、こんばんは 江原です。 先日(結構前ですけど)、 劇団四季のミュージカル『CATS』を観て ...
ブログ 2021-02-14 19:56:00
こんにちは!! かいとです!! この度、ついに・・・・ インスタのフォ ...
ブログ 2023-05-06 20:24:00
天王洲 寺田倉庫G1ビルで開催されている 「ウェス・アンダーソンすぎる風景展」へ 行って参りました! ...
ブログ 2023-11-30 20:42:00
こんにちは!しばたです。 東京で面白い企画を体験してきたので、ご紹介します!   ...
ブログ 2024-01-12 14:19:00
こんにちは、こんばんは エハラです。 昨年に引き続き 今年もエンタメに埋もれようと こそこそ準備をし ...