ブログ - 2021-10-21 10:56:00

【Webデザイン】シンプルおしゃれな”ニューモーフィズム”とは??

Posted by 江口 史和里
Shiori Eguchi

みなさん、こんにちは!

前回に引き続き、Webデザインについて調べていたところ

”ニューモーフィズム”という聞き慣れない言葉。

 

New(新しい)+Skeumorphism(スキューモーフィズム)

=Neumorphism(ニューモーフィズム)

 

....スキューモーフィズムとはなんでしょうか??

スキューモーフィズム(英: skeuomorphism)またはリッチデザイン(英: Rich Design)とは、他の物質に似せるために行うデザインや装飾を指す用語である。 たとえば、紙製のカレンダーのような外見に似せたカレンダーのソフトウェアのデザインなどがあてはまる。

(Wikipediaより)

 

 

なんとなくイメージしてみるとするならば、

iPhoneのアプリアイコンでしょうか。

昔のOSのアプリアイコンでは、リアルで立体的なデザイン(スキューモーフィズム)に対し

最近は、フラットデザインが使用されているものが多いです。

 

福岡|九州|映像制作|プロジェクションマッピング|ドローン|ホームページ|ライブ配信|特殊撮影|イベント|レーザー|特殊効果|CG制作|写真撮影|youtube|チャンネルプロデュース|モデル|音響|照明|レンタル|キャラクターデザイン|ロゴデザイン例)Instagram

スキューモーフィズム・フラットデザイン、と出てきて

そして二つを掛け合わせた”ニューモーフィズム”と移り変わってきているようですね。

画像右のinstagramアイコンも、フラットではあるけどちょっと立体的。

 

 

実際にニューモーフィズムでデザインをつくってみました。

めちゃめちゃ便利なニューモーフィズムサービス☞☞☞ https://neumorphism.io/

マテリアルデザインとは違い、

ひとつの紙(レイヤー)が膨らんでいたりへこんでいるように見えるのが特徴。

 

どのように表現しているかというと、2種類のドロップシャドウ(影)をつけているためです。

影をぼかさずにくっきりさせるとこう。

福岡|九州|映像制作|プロジェクションマッピング|ドローン|ホームページ|ライブ配信|特殊撮影|イベント|レーザー|特殊効果|CG制作|写真撮影|youtube|チャンネルプロデュース|モデル|音響|照明|レンタル|キャラクターデザイン|ロゴデザイン

意外と単純ですが・・・

影の色などを良い感じにするのが難しい・・。

シャドウの入れ方一つで、雰囲気ががらっと変わるのが不思議ですね。

 

以下おまけ。

ニューモーフィズム的・ボタン要素も作ってみました。※PC推奨

マウスポインタを上にのせたり、クリックしてみてくださいね!

 

Posted by Shiori Eguchi
<Remote>WEBコーダー/A.クリエイター 江口 史和里

江口 史和里が書いたその他記事

2022-01-23
今年の一文字
2019-12-22
かごしまの旅

ブログ TOP

ブログ 2021-12-24 11:42:00

皆さん     こんにちは!!       先日E.ZO福岡にある「チー ...


ブログ 2020-11-21 10:30:00

皆様、こんにちは。 朝から毛布が手放せない季節になってきましたが皆様いかがお過ごしでしょうか?(寒がり)   最近、寒くて中 ...


ブログ 2020-04-11 15:34:00

こんにちは! 最近なぜかフルネームで呼ばれることが増えてきました、新卒の山口ひなのです! 特技はカラスの泣き真似です!   ...


ブログ 2021-02-26 18:57:00

こんばんは、ほーりーです。   本日の鹿児島は結構な悪天候。 風が強すぎて運転していたボックスカーが始終ぐらぐらしていました ...


ブログ 2021-09-23 12:17:00

    こんにちは!たけばです^^ 今日は「フォント」についてのお話   フォントってデザインにとっ ...


ブログ 2021-02-15 13:22:00

こんにちは、ホーリーです。   結婚式エンドロールカメラマンとしてデビューし、早4ヶ月が経ちました。 約30組の新郎新婦を撮 ...


ブログ 2022-01-23 19:03:00

    新年明けましておめでとうございます!   ひきちです   突然ではありますが、新 ...


ブログ 2021-12-27 15:23:00

皆さん!   こんにちは!   かいとです!   まだまだ先の見えないコロナ禍の中、 このコロナ ...


ブログ 2020-06-29 16:27:00

iphoneとcinema4dで簡単につくれるモーショントラッキング! 今回はcinema4dでつくれるフェイストラッキング をご紹介しま ...


ブログ 2020-05-30 14:43:00

今日は、JR九州が新型コロナウイルス感染症が終息する日を願って制作した「その日まで、ともにがんばろう」プロジェクトの映像をご紹介させて頂きま ...