| 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-05-25 22:55:00
みなさんこんにちは!井手口です★ 先日ザ・ベイスイート桜島テラスでは初の「ランタンバルーン演出」がありまし ...
ブログ 2021-01-29 20:14:00
こんにちは、桑原です。 今回は映画風AR第2段です! 第1段はこちら↓ https://www.peacsmind.com/ ...
ブログ 2021-02-21 21:40:00
現代の照明演出において、欠かせない存在のムービングライト いいライブだったな〜いい舞台だっ ...
ブログ 2024-01-28 12:24:00
こんにちは!たけばです! 前のブログに引き続き、、、 東京研修パート2について書いていきます! &nb ...
ブログ 2025-04-25 20:30:00
こんにちは! この度 株式会社ピークスマインドに入社いたしました 福岡万季です!! 25年新卒は4名入社いたしました ...
ブログ 2021-01-16 11:56:00
こんにちは、桑原です。 ARでキャラクターを制作して遊んでいる桑原ですが、 今回は背景もということで、中世の街並みを再現してみました! ...
ブログ 2024-02-28 15:00:00
こんにちは、瀬元です! 今回は、オススメの本についてのお話です。 僕自身、本を読むことは好きで 自分自 ...
ブログ 2022-03-31 23:44:00
こんばんは!ひきちです! 先日、研修で東京 豊洲にある teamLab☆ ...
ブログ 2020-11-20 16:23:00
こんにちは!深田雄太です! いま集客に力を入れたい企業様、お店様からの問い合わせが多くなってきております。 webの集客でSNS、インタ ...
ブログ 2021-02-13 18:01:00
みなさまこんにちは。 早春暖かな今日の日、平和な気持ちの上甲です。 前回までは、固定ドと移調ドについて少し踏み入って語っ ...