みなさん「ニューモフィズム(Neumorphism)」という言葉をご存知ですか？
2020年の初めから、新しいデザインのトレンドとして注目を集めています。
デザインの仕事をされていない方には聞き馴染みがない言葉だと思いますが、
会社の資料やブログの画像に取り入れただけで「その資料おしゃれだね」「その画像可愛いね」と言われること間違いなしです。
姫私は上司に褒められちゃいました（笑）
デザイン自体はシンプルですが、非常にデザイン性に長けており、使える場面も非常に多いです。
この記事では、ニューモフィズムとはどのような物なのかを説明した後に、実際にIllustratorでどのようにニューモフィズムを作るのかを紹介していきます。
- ニューモフィズムについて
- ニューモフィズムの基本
- ニューモフィズムの作り方
ニューモフィズム
ってどんなデザイン？
まず初めにニューモフィズムとはどのようなデザインなのかを説明します。
ニューモフィズムは、背景となる画像から物体が膨らみ押し出されている、もしくは窪んでいるように描くデザイン手法の一つです。
凹凸をベースとして描かれる手法なので、デザインがナチュラルなデザインになり、従来のフラットデザインよりも自然な出来になります。
上記の画像はニューモフィズムに利用して、デザインした画像です。
ご覧いただくとわかる通り、図形自体は背景と同じ色ですが、境界線に明るい影と暗い影をつけることで押し出されているデザインになります。
ニューモフィズムのイメージ
ニューモフィズムの考え方としては、下記の画像をご覧ください。
従来のフラットデザイン・マテリアルデザインは背景にして沿うように、または浮かせるようにデザインさせていました。
これらのデザインは「わかりやすさ」「見やすさ」に優れているため、説明を行う資料やプレゼンテーションに優れています。
この「伝わる」ことを目的としたデザインとしては、フラットデザイン・マテリアルデザインの方がニューモフィズムよりも優れています。
ですがデザインにメリハリがありすぎて、メッセージ性・デザイン性が乏しくなってしまうのデメリットもあります。
ニューモフィズムは「伝わる」という点ではあまり優れたデザインではありませんが、「伝える」という点では優れています。
全体的に柔らかな印象を与えるニューモフィズムは、デザインのメリハリが薄く、画像全体に意味を持たせることができます。
そう言った意味でもメッセージ性を持たせるという点において、ニューモフィズムは優れているのです。
イラレでニューモフィズムを作ってみよう！
それでは実際にイラストレーターでニューモフィズムを作ってみましょう。
ニューモフィズムを作成するには大きく分けて4つのステップがあります。
ニューモフィズム作成の手順
STEP①
図形を作成する
まずは背景を作成し、それと同じ色の図形を作成します。
※背景が白だとグラデーションがかかりづらいのでおすすめしません。
STEP②
塗りでグラデーションを選択する
アピアランスで塗りを追加して、塗の内容をグラデーションに設定する。
アピアランス内の赤く囲ってあるボタンで新しい塗を追加することができます。
今回は背景を暗い青に設定したので、グラデーションの終わりを「黒」に設定していますが、背景を明るくした方は「薄めのグレー」にすると綺麗にデザインできます。
この時グラデーションの角度は45度付近にしておくと、自然の陰影をつけることができます。
STEP③
グラデーションをぼかして、塗りの場所を入れ替える
グラデーションを選択し、新規効果で「ぼかし(ガウス)」を選び反映します。
その後好みの状態になるまでぼかしを描けます。
ぼかしを終えたら、グラデーションの塗りと初期の塗の場所を入れ替えます。
そうすると少し違和感のあるニューモフィズムが完成します。
より自然なデザインにするために、一番上の塗りにぼかしを若干かけることでよりナチュラルになります。
実際に浮き出ているように見えない場合は、グラデーションの中間色に背景の色を入れるときれいに仕上げることができます。
