STYLE PROFILE
ニューモーフィズム
Neumorphism
背景と近い色の要素へ淡い影と光を付け、低い浮き彫りのように見せる表現。
ニューモーフィズムの代表配色例
| 色 | 役割 | 比 | 文字に使う目安 |
|---|---|---|---|
#293442 | 文字と構造 | 9.96:1 | 本文の文字にも使える |
#B6C0CC | 主色 | 1.45:1 | 文字には向かない |
#F8FBFF | 強調色 | 1.21:1 | 文字には向かない |
比はWCAG 2.2の計算式で求めた値です。4.5:1以上は本文の文字、3:1以上は大きな文字や図形に使える目安です（達成基準1.4.3・1.4.11）。
ニューモーフィズムのプロンプト例
ニューモーフィズムでデザインしてください。背景に近い色でまとめた面、明るい縁と暗い影の組み合わせ、押し出しやくぼみを思わせる低い起伏を取り入れてください。
ニューモーフィズムの主な視覚的特徴
- 背景に近い色でまとめた面
部品を背景と同じ色で塗り、色の違いではなく陰影で形を見せます。香港の比較試験でも、この様式に合わせて単色の配色が採られました。
- 明るい縁と暗い影の組み合わせ
明るい影と暗い影を組み合わせて部品の縁に付け、背景から部品を際立たせます。そのぶん色のコントラストが不足しやすく、アクセシビリティの弱さにつながると指摘されています。
- 押し出しやくぼみを思わせる低い起伏
浅い陰影で、部品が背景からわずかに浮かび上がったような立体感をつくります。スキューモーフィズムの写実的な立体感を、控えめな形で取り入れたものです。
ニューモーフィズムが向いている成果物
背景と近い面の低い起伏で説明ブロックを揃え、柔らかな製品の外観を画面へ展開できる。操作部は淡い影だけに頼らず区別する。
ニューモーフィズムとは
ニューモーフィズムは、2019年の終わりごろに現れたUIデザインの様式で、ソフトUIとも呼ばれます。アレクサンダー・プリュート（Alexander Plyuto）が紹介したものとされ、研究論文はその出典として、彼がDribbbleで公開した作品「Skeuomorph Mobile Banking」を挙げています。
スキューモーフィズムを簡素にした表現で、部品と背景を同じ色にし、明るい影と暗い影で部品を背景から際立たせます。フラットデザインのすっきりした簡潔さと、スキューモーフィズムの写実的な立体感を組み合わせたものとみることができます。
背景には、写実的な質感や影をすべて取り除いた極端に平らな画面で、操作の手がかりが弱くなったことがあります。その限界から、スキューモーフィズムの要素を控えめな形で取り戻す表現として生まれました。
香港で2021年に行われた比較試験では、ボタンと枠をこの様式にし、単色の配色にしたWebアプリが、ゲームの要素を取り入れた画面よりも高い使いやすさの評価を得ました。
一方で、ニールセン・ノーマン・グループ（NN/g）は、ニューモーフィズムは主流にはなりきらなかったと評価しています。コントラストが低いため視覚的な重みが足りず、アクセシビリティに欠けること、押せる部品とそうでない部品に一貫せず使われ、押せるかどうかが判断しにくいことが指摘されています。
見分けるときは、次の点を確かめてみてください。
- 部品が背景とほぼ同じ色でまとめられている
- 部品の縁に明るい光と暗い影が付いている
- 部品が背景から浅く浮き出て見える
これらが揃っていると、ニューモーフィズムの特徴を持っていると言えるでしょう。
実例を見る
Google画像検索で「ニューモーフィズム」を見る（新しいタブで開きます）検索結果の画像はこの図鑑には保存しません。出典
- Skeuomorphism（新しいタブで開きます）Nielsen Norman Group
- User Experience and Usability of Neumorphism and Gamification User Interface Designs in an HIV Self-Test Referral Program for Men Who Have Sex With Men: Prospective Open-Label Parallel-Group Randomized Controlled Trial（新しいタブで開きます）JMIR Serious Games（2022）
名称・説明・主な視覚的特徴と「ニューモーフィズムとは」の事実は、上の出典に基づきます。特徴の説明と見分け方は、出典の内容をこの図鑑がまとめたものです。代表配色例・向いている成果物・プロンプト例は、この図鑑の編集上の提案です。制作・編集：小林 秀樹（セカヤサAIブログ）
