ニューモーフィズムとは

ニューモーフィズムは簡単に言うと背景色とボタンの色が同じで背景から少し盛り上がっているようなボタンや表現のことです。

ボタンの制作方法

ボタンっぽさがなく、スタイリッシュで今っぽい印象のボタンを作成したい時に参考にしてください。

注意点:獲得系ではこのボタンはあまり効果を発揮できない可能性があります。(どこかでテストできるといいです)

あまり押させたくないボタンをニューモフィズムボタンにしてしまい、申込ボタンはテイストを合わせて目立つ色に

変更するなど、工夫をして活かせると思います。

試作として、ボタンを作成しました。

ボタンではなく、CSSを使い画像やデザインの一部として使用する方法

参考サイト:https://neumorphism.io/#55b9f3

上記参考サイトでコピペ可能なコードを作成できます。

htmlとCSSの両方でコードを見たい場合

codepenにもニューモフィズムのコードがいくつかあります。

参考にしてください。

  • BGMを動画の長さに編集する方法【Premiere Pro×Audition】
  • ページ制作で使えそうなカウントダウンタイマーのテンプレート
  • Chart.jsで簡単にレーダーチャートを作る方法
  • adobe charactor animatorで簡単にアニメーション動画を作る
  • Illustratorで簡単に表を作る方法
  • aftereffect トランジション&エフェクト素材
おすすめの記事
動画
動画編集というとAfter EffectsやPremiere Proを使用することが多いですが、PhotoshopCCでも簡単な動画編集がで...