Dots

ブログとか

Liquid Glass ぽいやつ


Appleの新デザイン「Liquid Glass」

最近、AppleがLiquid Glassというデザインを発表した。

ガラスのような透明感と光沢を持つデザインで、見た目は美しいがコストがかかりそうな印象。

ただし、CSSだけでLiquid Glassっぽいスタイルを実現できるという話を聞いたので、Claude Codeに頼んでみた。

CSSで表現できる範囲というのと、無駄に、既存のテーマと切り替えができるようにしてもらった。

GlassっぽいけどLiquid感少なめのやつ

右上のボタンで、既存のデザインと切り替えできる。

正直、Appleのクオリティとは全然違う仕上がりになった。

確かに、ガラス越しっぽいけどLiquid感をあまり感じられない感じのやつができた。

おそらく、ネット上にLiquid Glass Designに関する知識がまだ少ないからだろう。

まあ、何をしたいかは一応伝わった感じはするという出来であった。

ついでにおこなったUX改善

ついでに、テーマ追加のタイミングで、モバイルメニューを右下に移動するなどのUX改善も行った。

色々とUI部品を重ねて表示してみたかったので、サイトのタイトルを左上にフローティングさせてみた。

思ったより綺麗にならなかったけど、まあ、良い。