Glassmorphism が流行るかもという噂が流れてますね。Neumorphism も流行らなかったので、個人的には眉唾ものですが、デザイン自体は嫌いじゃないぜ、という事でこのサイトも Glassmorphism 的なデザインにしてみました。やってみないとわからない事の方が多いですからねUIは。
Glassmorphism とは
見ての通り「すりガラス」を模した半透明のデザインです。mac のメニューとかがそれですね。mac をお持ちの方はメニューを押せば半透明のメニューが開くと思います。
ちなみに Neumorphism とは
なんというか 白いシリコンを模したデザインって感じです。去年あたりに流行るかも…流行るかも…となって、カッコいいモックもちらほら見えましたが、WEB では流行りませんでした。こちらもやってみた事はあるのですが、ちょっと狭くて使いにくいという印象です。
Glassmorphism の実装の仕方
.glass {
background: rgba( 255, 255, 255, 0.25 );
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
backdrop-filter: blur( 4px );
-webkit-backdrop-filter: blur( 4px );
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18 );
filter: drop-shadow(0px 0px 5px #ccc);
}
基本はこんな感じです。これですりガラスが表現できますので、あとのすりガラスの重ねっぷりは腕の見せ所になります。
Glassmorphism を実装して見えたもの
レンダリングコストの高さ
まずはこれにつきます。半透明とボカシを重ねるので、コストは高いだろうなぁとは思っていましたが、実際高かったです。ちょっと古いスマホで見たらちょっとカクカクするレベル。PCに至っても、スクロールを早くするとレンダリングが間に合いません。
視認性確保の難しさ
ここは個人サイトですので「俺のデザインを見ろ！」でゴリ押せますが、商業サイトだとそうも言えません。透過デザインですので、重なり具合では文字が読みづらい事が多々発生します。ここは Neumorphism の方がマシでした。
drop-shadow で視認性向上
すりガラスの上にただただ文字を置くのではなく
filter: drop-shadow(0px 0px 5px #ccc);
のように、かるーく影をつけてあげると視認性が少しあがりました。
背景に悩む
すりガラスだからと言って、背景に何でもおける訳ではありませんでした。すりガラスの色、文字色に大きく左右されます。おすすめは透明感のある白ベースの背景か、ビビットでカラフルな背景です。くすんだりぼやけた色はおすすめできません。
background-size: cover; の挙動の差
背景いっぱいに何かを置くときには
background-size: cover;
を使用しますが、iOS での挙動が他の OS で見た時の挙動と違い悩みました。
こちらの Git に解決策が乗ってて助かりました。
In iOS a fixed cover background is handled using the whole document height instead of using only the viewport's height.
とのことです。実機確認しないと絶対に気が付かないよこんなの…
ピンポイントであえてすりガラスの外に置く
タイトルをすりガラス化していないのですが、これはあえてです。すべてをすりガラス化してしまうと、なんだかこう…解放感がないというか…狭いというか…ショーケースみたいになってしまうというか…余白を使えなくなると言うか…そういうのを感じたので、あえてタイトルは外に置いて、すりガラスの外も使っているんだよという解放感を出してみました。庭的な。
おわりに
レンダリングコストが超絶高いという予想通りの結果が出ましたが、実際に確認出来て良かったです。やっぱり作って見ないとね。
デザイン自体は好きなので、しばらくこれで行きます。カクカクしたらごめんなさい。