新デザイントレンド「ニューモーフィズム」をAfterEffectsで再現する

こんにちは、サメDです。

みなさんは「ニューモーフィズム」というデザインを知っていますか？

Neumorphic UI Kit by Voicu Apostol on DribbbleTwitter iconFacebook iconPinterest iconPinterest iconTwitter icon

Discover the World’s Top Designers & Creative Professionals who specialize in Graphic Design, UX Design, UI Design, Product Design, Application Design, Illustration and more.

dribbble.com

「ニューモーフィズム」というデザインは、エンボス加工されたボタンのようなデザインです。「フラットデザイン」・「マテリアルデザイン」は今お使いのほとんどのデバイスで採用されているスタイルですが、そのデザインに変わって現在注目されています。

私はこの言葉をつい最近聞くようになったのですが、どうやらすでに昨年から「このデザインが流行するのではないか」との噂が流れているようです。

実は少し前までトレンドだったデザイン

似たデザインで「スキューモーフィズム」という物ををご存知の方は多いでしょう。このデザインスタイルは昔のiPhoneで採用されていたデザインスタイルですね。

By Self-taken screenshot from an iPhone 5., Link

現実の物体のようなリアルな質感を再現するスタイルです。

ということで、「ニューモーフィズム」これは「新しい（New）」と「スキューモフィズム（Skeumorphism）」を合わせた造語とされています。

そんな新トレンドのニューモーフィズムですが、早速AfterEffectsで再現してみました。

ニューモーフィズム in AfterEffects

今回は、よく利用される４つのパターンをAfterEffectsで再現してみました。
参考にしたサイトはこちら：

Neumorphism/Soft UI CSS shadow generator

CSS code generator that will help with colors, gradients and shadows to adapt this new design trend or discover its posibilities.

neumorphism.io

左から順にエンボス　通常・凹み・膨らみ / エンボス凹みです。

我ながらいい感じにできたのではないかと思います。
パロメーターを貼っておきますので参考にどうぞ。

まとめ

ニューモーフィズムの再現はちょっと面倒かと思ったのですが意外と簡単にできました。
サメD的にはこのデザインが流行るのかはまだまだわからないところですが、かつてのフラットデザインの例もあるので、まだまだ注目していきたいですね。

あなたの制作の参考になれば幸いです！

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

サメD

主にデジタルでのモノづくり全般が好物なサメ。 AEとはもう８年近くの付き合いだが、「エフェクト」をほぼ使わずに作業するため、スキルが一向に上達する気配がないのが最近の悩み。 本サイトではWebサイトの管理、イラストを担当中。

最新記事 by サメD (全て見る)

• 【顧客が本当に必要だったもの】AfterEffectsにネイティブH.264書き出しが正式実装間近！？期待のβ版を試してみた - 2022年9月27日
• RAMプレビューでもマルチフレームレンダリングは有効なのか検証してみる - 2021年11月26日
• 今年もやってきた、FlashbackJapanで秋の大感謝祭2021年が開催されるぞ! - 2021年11月16日