ニューモーフィズム

Neumorphism / late 2010s– / スタイル / UI表現

背景と部品を同じ素材にし、柔らかな陰影だけで凹凸を示す。

Neumorphism — AI生成の解釈イメージ 1
AI生成の解釈イメージ(参考作品ではありません)
Neumorphism — Vectorium《ニューモーフィズムのUI要素集》2020 — Wikimedia Commons / CC BY-SA 4.0
Vectorium《ニューモーフィズムのUI要素集》2020 — Wikimedia Commons / CC BY-SA 4.0 · CC BY-SA 4.0
Neumorphism — Joefou《明色と暗色の背景に置いたニューモーフィズムのボタン》2020 — Wikimedia Commons / CC BY-SA 4.0
Joefou《明色と暗色の背景に置いたニューモーフィズムのボタン》2020 — Wikimedia Commons / CC BY-SA 4.0 · CC BY-SA 4.0

ひと目で判断

見た目の特徴

  • 同色面
  • 二方向の影
  • 丸い部品
  • 低コントラスト

向いている用途

  • 操作の少ないコンセプト画面
  • 柔らかく静かなプロダクト印象

このスタイルを使う

短い指針を制作へ持ち込むか、構造化された仕様をAIへ渡せます。

詳しい作り方と出典制作ルール、実在作例、比較、研究、引用形式

辞書情報

文字
簡潔なサンセリフ
構成
大きな余白、少数の操作部
素材
淡い背景、明暗2つの影、丸い角
注意
コントラスト不足が起きやすい。重要操作と状態は色や輪郭でも示す。
関連研究
Alexander Plyuto / Michał Malewicz

関連項目

取り違えられやすい

UI表現をさらに見る

同じ「UI表現」から、共通する印象が多い順に次の項目を選んだ。

UI表現の全項目を見る

この項目を引用する

辞典はリンクされるためにある。書いている場所に合う形をそのまま持っていってよい。

Link
https://indexstyle.org/ja/styles/neumorphism
Markdown
[ニューモーフィズム(Neumorphism) — デザインスタイル辞典](https://indexstyle.org/ja/styles/neumorphism)
HTML
<a href="https://indexstyle.org/ja/styles/neumorphism">ニューモーフィズム(Neumorphism) — デザインスタイル辞典</a>

一覧内の位置へ戻る