やってみようボタンを押すと、へこんだ見た目に変わります
デザインスタイルマイナー（知る人ぞ知る）
ニューモーフィズム
Neumorphism / Soft UI
背景と同じ色のボタンが、光と影だけでふっくら浮き出ていて、押すとへこむ。
別名ソフトUIニューモーフィック浮き出しデザイン押し込みデザイン
どこで使われている？
- よく見かける場所
- スマート家電のアプリ、電卓・タイマーなどのデザイン作品
- 使うとよい場面
- やわらかく、触りたくなる印象を出したいとき
- 避けたい場面
- 文字が多い画面や、押せる場所をはっきりさせたい画面
補足文字や枠が見えにくくなりやすいので、大事なボタンには色を付けて使うのが安全です。
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です（右上の「何を作る？」で変えられます）。
HTML / CSS / JavaScript で「ニューモーフィズム（Neumorphism / Soft UI）」を実装してください。 動き：背景とボタンを同じ色にし、左上に明るい影、右下に暗い影の2つを付けて浮き出て見せる。押されたときは影を内側に付け替えて、へこんで見えるようにする。 使う部品：box-shadow を明るい影と暗い影の2つ重ねる
もっと詳しく：プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | box-shadow を明るい影と暗い影の2つ重ねる |
|---|---|
| iPhoneアプリなら | .shadow を2つ重ねて自作 |
| Androidアプリなら | 自作（影を2つ描く） |
| Flutterなら | flutter_neumorphic_plus パッケージ |
| React Nativeなら | 自作（react-native-neomorph-shadows） |