**ニューモーフィズム(Neumorphism)**というデザイン手法が流行っていると聞いてただただやってみたくなり、方法を調べて社内用の資料でやってみました。
残念ながらその資料は作成しないことになったので、供養を兼ねてメモ。
ニューモーフィズムとは
ニューモーフィズム(Neumorphism)とは、ベース(背景)から要素が押し出されていたり、窪んでいたりするようなスタイルのデザイン手法です。
(参照 https://webdesign-trends.net/entry/11155#i-5 )
シンプルでスマートな印象のデザインで個人的に好きなタイプです。
Googleスライドでの作り方
作り方は、デザイナーのつだしんごさん のInstagramを参考にしました。
パワーポイントでニューモーフィズムを表現する方法を解説なさっていたのですが、社内で共有する資料はGoogleスライドで作成していたので私はこちらで作成。
特に違いもないのでさくさく作りましたが、私がやった手順としては
- スライドの背景をちょっとだけ色つける(白だとうまくいかないです)
- 同じ図形を2つ用意する
- 片方は左上に白い影、もう片方は右下にグレーっぽい影をつける。図形の色は背景と同じ色にする
- 2つの図形をぴったり重ね合わせる
です。
調べてみると色んな方法があるみたいですが、私はこれが簡単そうだったのでこれでやりました。
完成したスライド
![slide1](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F471129%2F261a99f8-e47a-e48d-0047-0bd05079542e.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=e12e91441d1a1852599bab3c999df9d5)
![slide2](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F471129%2F904de62a-1d64-b08b-d886-b04596453907.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=a63c6d0aa8f4ec4ec2d24aa7577c9add)
![slide3](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F471129%2Fb9d1136d-e6dd-20f9-6603-66637e4415bc.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=684b5e8e1e5d6e94cbdf8848ee316184)
![slide4](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F471129%2Fd3d7f906-f7ec-8ab3-011c-757bde4e5b50.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ec7954a74e8a469ec76e64b1ff97a963)
![slide5](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F471129%2F6f9f3276-e100-62cb-4810-f60be2e35f6a.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=ea5c636132fc3aab147c86490c39b94d)
作ってみた感想
資料にはあんまり向かないかもな
やはりWEBサイトやアプリなど、ボタンをクリックして画面遷移する(もしくは何らかのアクションが起きる)みたいなもののほうが、この浮き出た感じを活かせるのかなと思いました。
資料は見るだけなので、この浮き出たデザインによる「ちょっと押してみたくなる感じ」が無意味そう。
私のデザインセンス次第なところもありますが。
Googleスライド、インナーシャドウないんかい
せっかくニューモーフィズムをやってみる、というアレなので凹のほうのデザインもやってみたかったんですが、そうなると、図形の内側に影をつける=インナーシャドウが必要らしい。
私が見る限りGoogleスライドにはインナーシャドウ機能ないっぽいんですが、どうなんですか?気づいてないだけ?
インナーシャドウなくても凹デザインにする方法はあるのかな…
インナーシャドウはパワポだとできるようなので、機会があればやってみようと思います。
まとめ
普段デザイナーではないので特別デザインの流行りに気をつけているわけではないですが、資料作成が好きなので楽しかったです。
また違うのも時間があったらやってみようと思います。