Blog ブログ

こんにちは！

Creative.LABのM.Kです

Canvaで画像や資料など作っている時、最近よく見るデザインっぽくおしゃれに作ってみたいなぁと思うことありませんか？

今回サムネイル画像で作成したニューモーフィズムっぽいデザインの作り方をご紹介します

1. ニューモーフィズムとは

ものすごくざっくりいうと、『フラットデザインをちょっと立体的にさせたデザイン』です

2000年代初期〜後半位によく登場していた立体感のある「スキューモーフィズム」と、立体感や奥行き・質感等がない「フラットデザイン」を掛け合わせたデザインになります

スキューモーフィズム：Windows 7やVista、フラットデザインはWindows 8や10、ニューモーフィズムはWindows 11のデザインに近い、というと分かりやすいでしょうか

WindowsやAppleが取り入れたデザインが、WEBデザインの流行の大元となることが多いです

2. Canvaでニューモーフィズムっぽく作る

それでは実際にサムネイルで作ったニューモーフィズムっぽい画像の作り方をご紹介いたします

【 1 】デザインの背景色を白よりちょっと暗くする

今回は「#F9FDFF」を使いました。カラーピッカーで左上から1mmくらい動かしてみましょう

ここで色を変えないと、光っている部分が表現できません

【 2 】影の素材を2個配置する

素材で「影 フレーム 円」と検索して薄めの影だけの素材を2個配置します

【 3 】影の素材の1つを垂直・水平に反転する

配置した影の素材1つを反転させます

回転させてもいいですが、位置がずれて欲しくないので反転を使用しています

【 4 】配置を中央揃えにする

素材2つを選択した状態で配置を横縦どちらも中央揃えにします

【 5 】正円になるように位置を調整する

影の素材1つを選択した状態で正円になるように位置を調整します

位置を移動する時はShift(mac：⇧)を押しながらだと10pxくらいまとめて動かせます

今回は上20px、左20pxくらい動かしたら正円っぽくなりました

【 6 】素材をグループ化して中央に寄せる

位置調整した素材をグループ化して中央揃えにします

グループ化しないまま揃えると調整した位置がずれますので注意

複数素材を選択する： 素材を1つ選んだ状態でShiftキーを押しながらもう1つの素材を選んでください

グループ化する：2つの素材を選んだ状態で右上の「…」を選び、グループ化を選択します

揃え終わったらグループを解除します

これはこの後の工程で作業しやすくする為です

グループ解除：グループの右上の「…」を選び、「グループ解除」を選択します

【 7 】画像調整をする

回転させた影の素材を選んだ状態で、「編集」→「調整」へ移動します

【 8 】画像調整を駆使して影を光らせる

回転させた影の素材を調整で無理やり光らせます

設定は上の画像の通りです

明るさの「ブラック」を-100にすると白くなります

今回光の方にも若干影の表現を残したかったので「ホワイト」は0にしていますが、

更に明るくしたい場合は「ホワイト」を100に近づけてください

素材の色が濃いなぁ…と思う方は上部メニュー「反転」の右側にあるアイコンを押して透明度を下げましょう

【 9 】完成

できました！

あとはお好きな文字や画像などをお入れください

3. まとめ

この方法は影の素材があれば応用できるやり方です

ただ四方に影がついている素材だと影と光が重なりうまく表現ができないのでご注意ください

Canvaプロに入っている方であれば恐らく「背景リムーバ」でどうにかできるのではないかと思います

また黒い素材を白くするにもこの方法は活用できると思います

画像調整のバーを色々動かしてみましょう

もしこういう画像だけを作りたいのであれば、個人的にはfigmaをお勧めします

上の画像は、図形作る→右側メニューのデザインタブ→エフェクトで「ドロップシャドウ」を選ぶ→エクスポート(PNG)書き出しで作った画像です

無料かつブラウザ上で利用できますので、使ったことがない方はサブツールとして試しに触ってみてはいかがでしょうか?

Creative.LABのブログではこういったWEBノウハウに関する記事を始め、SEOやデザイン・WEBに関する記事を多数掲載しております

興味を持たれた方は是非他の記事もチェックしてみてください！