6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ニューモーフィズムっぽいデザインをGoogleスライドで作った

Last updated at Posted at 2020-09-01

**ニューモーフィズム(Neumorphism)**というデザイン手法が流行っていると聞いてただただやってみたくなり、方法を調べて社内用の資料でやってみました。
残念ながらその資料は作成しないことになったので、供養を兼ねてメモ。

ニューモーフィズムとは

ニューモーフィズム(Neumorphism)とは、ベース(背景)から要素が押し出されていたり、窪んでいたりするようなスタイルのデザイン手法です。

(参照 https://webdesign-trends.net/entry/11155#i-5

シンプルでスマートな印象のデザインで個人的に好きなタイプです。

Googleスライドでの作り方

作り方は、デザイナーのつだしんごさん のInstagramを参考にしました。
パワーポイントでニューモーフィズムを表現する方法を解説なさっていたのですが、社内で共有する資料はGoogleスライドで作成していたので私はこちらで作成。

特に違いもないのでさくさく作りましたが、私がやった手順としては

  1. スライドの背景をちょっとだけ色つける(白だとうまくいかないです)
  2. 同じ図形を2つ用意する
  3. 片方は左上に白い影、もう片方は右下にグレーっぽい影をつける。図形の色は背景と同じ色にする
  4. 2つの図形をぴったり重ね合わせる

です。
調べてみると色んな方法があるみたいですが、私はこれが簡単そうだったのでこれでやりました。

完成したスライド

slide1 slide2 slide3 slide4 slide5

作ってみた感想

資料にはあんまり向かないかもな

やはりWEBサイトやアプリなど、ボタンをクリックして画面遷移する(もしくは何らかのアクションが起きる)みたいなもののほうが、この浮き出た感じを活かせるのかなと思いました。
資料は見るだけなので、この浮き出たデザインによる「ちょっと押してみたくなる感じ」が無意味そう。
私のデザインセンス次第なところもありますが。

Googleスライド、インナーシャドウないんかい

せっかくニューモーフィズムをやってみる、というアレなので凹のほうのデザインもやってみたかったんですが、そうなると、図形の内側に影をつける=インナーシャドウが必要らしい。
私が見る限りGoogleスライドにはインナーシャドウ機能ないっぽいんですが、どうなんですか?気づいてないだけ?
インナーシャドウなくても凹デザインにする方法はあるのかな…

インナーシャドウはパワポだとできるようなので、機会があればやってみようと思います。

まとめ

普段デザイナーではないので特別デザインの流行りに気をつけているわけではないですが、資料作成が好きなので楽しかったです。
また違うのも時間があったらやってみようと思います。

参考

6
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?