この記事は「【マイスター・ギルド】本物のAdvent Calendar 2022」16日目の記事です。
ここはとあるWeb開発会社
僕「今週末リリースのやつってデザインもう出来てます？」
デザイナー「あっ、ついさっき終わりました〜！デザインデータ送りますね」
僕「ありがとうございます〜！確認しますね」
僕「・・・ここって画像ですか？」
デザイナー「これは…ニューモーフィズムですね」
僕「なんすかそれ」
ニューモーフィズム
デザイナー「ニューモーフィズムはNewとスキューモーフィズムを合わせた造語で2019年末から2020年くらいに流行ったデザインですよ」
See the Pen Untitled by MG_AmatatsuKazuki (@kaz1231) on CodePen.
デザイナー「ポイントは背景色を統一して左上方向に明るい影、右下方向に暗い影を付けてあげることです」
body {
background: #e0e0e0; /* 背景色を統一 */
}
.neumorphism {
border-radius: 50px;
background: #e0e0e0; /* 背景色を統一 */
box-shadow: 20px 20px 60px #bebebe, /* 右下方向の暗い影 */
-20px -20px 60px #ffffff; /* 左上方向の明るい影 */
}
デザイナー「これくらいはCSSでやってもらわないと困りますよ」
僕「そうっすよね…」
デザイナー「ジェネレーターもあるから簡単でしょ！」
僕「（でもジェネレーターで実装したデザイン見せたらなんか違うから修正してって言ってくるじゃん・・・）」
僕「あっ！次のページのここは流石に画像ですよね？」
デザイナー「んー…グラスモーフィズムですね」
僕「なんそれ」
グラスモーフィズム
デザイナー「グラスモーフィズムはすりガラスのような半透明のスタイルで2020年末から2021年くらいに流行ったデザインですよ」
See the Pen Untitled by MG_AmatatsuKazuki (@kaz1231) on CodePen.
デザイナー「ポイントはbackdrop-filterで背面に青色のぼかしを入れることです」
.glassmorphism {
background: rgba(255, 255, 255, 0.3); /* 透明度が高い背景色 */
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(5px); /* 背面に青色のぼかしを入れることでガラス感を出す */
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18); /* 枠線に少し明るい色があるだけでよりガラス感が出る */
}
デザイナー「これくらいはCSSでやってもらわないと困りますよ」
僕「やっぱそうっすよね…」
デザイナー「ジェネレーターもあるから簡単でしょ！」
僕「（いやジェネレーターで実装したデザイン見せたらなんとなく透け感が弱いから修正してって言ってくるじゃん・・・）」
僕「あっ！最後のページのここはもう流石に画像ですよね？」
デザイナー「あーはいはい、クレイモーフィズムですね」
僕「なんやねんそれ」
クレイモーフィズム
デザイナー「クレイモーフィズムはクレイ（粘土）のようなマットな質感に膨らんだ丸みのある3Dのスタイルで2021年から2022年に流行ったデザインですよ」
See the Pen クレイモーフィズム by kaz1231 (@kaz1231) on CodePen.
デザイナー「ポイントは角の丸くするのとインナーシャドウとアウターシャドウの両方を当ててあげることです」
.claymorphism {
background: #fff;
box-shadow: 15px 15px 40px rgba(18, 34, 88, 0.4),
inset 12px 12px 24px #e8f2fb,
inset -24px -24px 48px #a7c8ec;
border-radius: 8rem;
}
僕「あの…今回もジェネレーターあるんですよね？」
デザイナー「いやクレイモーフィズムはまだ出てきたばかりでジェネレーターはないですね」
デザイナー「これくらいはCSSでやってもらわないと困りますよ」
僕「いやほんとそうっすよね・・・」
まとめ
今回はエンジニア向けに近年のデザイン界隈で流行っていた〇〇モーフィズムを3種類紹介しました。
複雑そうなデザインを見るとすぐに画像で対応しようとしちゃいますが
案外サクッと作れたりするので皆さんも参考にしてみてください。