0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ニューモーフィズムとグラスモーフィズムについて

Posted at

株式会社ロジカルスタジオのブログを読んでいると、このようなデザインの記事を見つけました。
https://logical-studio.com/develop/design/20220513-illustrator_appearance/
様々なデザイン手法がありますが、昨今はやりのニューモーフィズムとグラスモーフィズムについてここでは紹介していきます。

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

概要

ニューモーフィズム(Neumorphism)は、UIデザインのトレンドで、フラットデザインとスキューモーフィズムの要素を組み合わせたものです。オブジェクトが背景から浮き上がるような立体感を持たせることで、柔らかく自然な影とハイライトを使用します。

特徴

  • ソフトシャドウ:エレメントにソフトな影をつけることで、浮き上がって見える効果を持たせます。
  • ハイライト:影と対になる部分にハイライトを追加することで、エレメントが背景から浮き上がるように見せます。
  • モノクロームカラー:淡い色合いを使用し、全体的に控えめなデザインにすることが一般的です。

利点

  • 視覚的に魅力的で、モダンなデザイン。
  • 簡単なインタラクションが直感的に理解できる。

欠点

  • アクセシビリティの問題:コントラストが低いため、視覚的に識別しにくい場合があります。
  • ユーザビリティ:過度に装飾されたデザインは、機能性を損なう可能性があります。

グラスモーフィズム (Glassmorphism)

概要

グラスモーフィズム(Glassmorphism)は、透明感のあるデザインスタイルで、ガラスのような見た目を再現します。背景のぼかしや透明度を駆使して、エレメントがガラスのように見える効果を持たせます。

特徴

  • 透明感:エレメントが半透明で、背景が透けて見える効果。
  • 背景ぼかし:透明なエレメントの背景をぼかすことで、立体感を持たせます。
  • 多層性:複数のレイヤーが重なり合うことで、深みのあるデザインを作り出します。

利点

  • モダンで洗練された見た目。
  • 視覚的に魅力的で、注目を引きやすい。

欠点

  • アクセシビリティの問題:透明度が高いと、視認性が低くなる場合があります。
  • 複雑なデザイン:適切に使用しないと、デザインが煩雑に見えることがあります。

参考リンク

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?