![](https://switch-box.net/wp-content/uploads/2020/03/a1d571ec9dea74d1b19afbb5b79eebde-720x536.png)
イベント系アプリのUIサンプルです。黒で統一された背景色とパープルのアクセントが映えます。iOSのダークモードも参考になりますね。こちらは動きも動画で見ることができるので操作感がイメージしやすいです。
Quick and fun experiment by Tanel Kaarel Sepp on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/07f13d8619cbd343dd832dd2ffdb5114-720x540.png)
ヘッドホンのオンラインストアをイメージしたニューモーフィズムデザインです。ボタンには柔らかい質感の影がつけられておりムニっと押したくなるようなデザインですね。
HyperX Online Store App by Beqa Giorgadze on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/f6d56147e8eae095804b365247710308-720x537.png)
スノーボード関連アプリのUIデザインです。ボタンだけじゃなくサイズを示す部分にも立体的な影がつけられてるのが特徴的。配色は徹底的にシンプルにまとめられてますね。
Best Powder Snowboard by Olya Safianova for EPAM Design Lviv on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/d0376ec0bc6ed21bcaeb609b8f33f87f-720x540.png)
オーディオ系のUIをイメージしたUIデザインです。厚みに強弱をつけたり、凹凸にバリエーションがあるので、ボタンの優先順位を表現したいときの参考にぴったりです。
Audiophilia / Neumorphism by David Tsaturyan on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/6485e720c2df1ca330da3cf7b4d3aad9-720x540.jpg)
ニューモーフィズムとグラデーションを組み合わせたUIデザインサンプルです。未来的でクールなイメージが強く出ますね。最新ガジェットのUIなんかにぴったりです。
Neumorph / Skeuomorph Anicorn Watches app v2 by Dawid Tomczyk on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/51112759db8509332c3bac5e490bb1a3-720x540.png)
こちらはミュージックプレイヤーアプリのUIサンプルです。かなり整理されたシンプルなデザインになっています。ニューモーフィズムは立体的な影をつけるために面積を使うので、ボタンがごちゃごちゃあるよりもシンプルなUIとの相性が良いですね。
Simple Music Player by Filip Legierski for Riotters on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/208da2aad6d9620bdcc4ea34c2e6aeac-720x540.png)
フィットネスデバイスのアプリをイメージしたUIサンプルです。影の付け方がかなり独特で、特に下部のメニューの形は特徴的ですね。オリジナリティのあるUIを作りたいときの参考に良さそうです。
Fitness Device App by Sèrgi Mi for Fireart Studio on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/df5700a2621fd987d304b1b989794ee8-720x540.png)
こちらはオーディオブックのアプリをイメージしたUIサンプルです。影の付け方がとても美しく、ボタンの配置もシンプルで直感的です。再生時間を示すスライダーも厚みの部分に指をかけて左右に引っ張るイメージで使えるので、ニューモーフィズムデザインと相性が良いのがわかりますね。
Audiobook App – Neumorphism style by Patryk Szymański for App’n’roll on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/6ef960dbb14093ca3dfba2d1e0e317af-720x540.png)
カレンダーや検索ボックスなどのUIパーツをニューモーフィズムで表現したサンプルです。カレンダーの期間を表す部分に凹みをつけたデザインは秀逸。スタートとゴールの日付を目立たせつつ、その間の幅も直感的にわかるデザインになっています。範囲内の文字色だけ白が濃くなっているのも細部まで考えられています。
Neumorphism UI Elements by Filip Legierski for Riotters on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/38ab22af00b72fbcf8e02c39f25ef28e-720x540.png)
シンプルなミュージックプレイヤーのアプリをイメージしたUIサンプルです。大きなタイル型の要素にニューモーフィズムで厚みを付けると、直感的に押したくなるデザインが作れますね。ポイントとなる赤いボタンも柔らかいグラデーションとエッジの立体感がマッチしています。
Playlists – Simple Music Player by Filip Legierski for Riotters on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/b454d297290a72b1664a352202969c5d-720x540.jpg)
ファイナンス系アプリのUIデザインモックアップです。他のサンプルに比べてニューモーフィズム的な立体感は控えめ。それでもボタンの凹凸が良いアクセントになって直感的な操作感を高めているのがわかります。ほんのり入ったグラデーションの使い方が高級感たっぷりです。
Financial App — Neumorphic Study by Sandro Tavartkiladze on Dribbble![](https://switch-box.net/wp-content/uploads/2020/03/019556b08a1def6ae39c97d2ec61bda6-720x540.png)
こちらはGoogleAnalyticsの計測画面をイメージしたUIモックアップサンプルです。ダークモード風の黒い背景色はカラフルなグラフなどが見やすいのも特徴。配色もとても参考になります。
Google Analytic | DARK UI Neumorphism by Rudityas W Anggoro for Suarasa on Dribbbleまとめ
というわけで、今回は「ニューモーフィズム」なUIサンプル集のご紹介でした。立体感でボタンを表現できるのはユーザーにとって使いやすいのがいいですよね。ただし、逆に言うと「立体的に見せる部分はタップできる」というルールを崩してしまうと、とたんのユーザーを混乱させるデザインにもなってしまいます。使いみちをよく考えて適材適所で使うのが大切ですね。