【ITニュース解説】How I Added Apple’s “Liquid Glass” Effect to My Portfolio (React + CSS Tricks)

システムエンジニアを目指す初心者がWebサイトのデザインを考える際、いかにモダンで魅力的な見た目にするかは重要な課題の一つである。このニュース記事では、自身のポートフォリオサイトをより洗練されたものにするために、Apple製品でよく見られる「液体ガラス」のようなUIエフェクトを取り入れた事例が紹介されている。この効果は「グラスモーフィズム」とも呼ばれ、Webデザインのトレンドの一つとして注目されている。

グラスモーフィズムとは、まるで磨りガラス越しに背景が見えているかのような、透明でぼかされた層を持つデザインスタイルのことを指す。具体的には、背景が少し透けて見えつつもぼかされている透明な要素と、その要素の境界線にわずかなハイライトがあり、さらに光が当たっているかのような奥行きを表現する影の効果が組み合わさることで、現代的で高級感のある、まるでガラスが浮いているかのような印象を与える。これはmacOSやiOSのインターフェースで目にするような、洗練されたデザインに通じるものだ。Webサイトにこの効果を取り入れることで、シンプルながらも未来的な雰囲気を演出できる。

記事の著者は、このグラスモーフィズムを自身のポートフォリオサイトに適用した。サイトはReactとViteという技術を使って構築されており、スタイリングにはプレーンなCSSが用いられている。デプロイ（Webサイトをインターネット上で公開する作業）はVercelというサービスを利用している。これらの技術は、現代のWeb開発において広く使われているもので、Reactはユーザーインターフェースを効率的に構築するためのJavaScriptライブラリであり、Viteは高速な開発環境を提供するビルドツール、Vercelは簡単にWebサイトを公開できるプラットフォームである。しかし、この「液体ガラス」効果を実現する核心は、CSSの特定のプロパティにある。

この効果をCSSで実現するための具体的なレシピが紹介されている。まず、要素の背景にはbackground: rgba(255, 255, 255, 0.1);が指定されている。rgbaは色と透明度を指定する方法で、255, 255, 255は白色を意味し、最後の0.1が透明度（アルファ値）で10%の不透明度（つまり90%透明）を表す。これにより、要素自体が薄く白い透明な層となる。次に最も重要なプロパティがbackdrop-filter: blur(10px);である。このbackdrop-filterは、その要素の「背後にあるもの」に対してフィルター効果を適用するCSSプロパティで、blur(10px)を指定することで、背後のコンテンツを10ピクセル分ぼかすことができる。これにより、まさに磨りガラスのような視覚効果が生まれるのだ。一部のブラウザ（特にSafari）での互換性を考慮し、-webkit-backdrop-filter: blur(10px);も追加されている。

さらに、border: 1px solid rgba(255, 255, 255, 0.2);というプロパティで、要素の境界線が1ピクセルの白い線で、透明度20%で描かれている。これにより、要素の輪郭がはっきりとしながらも、重たすぎない印象を与える。border-radius: 20px;は、要素の角を20ピクセル分丸めることで、柔らかく現代的な見た目にする効果がある。box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);は、要素に影を追加するプロパティだ。最初の二つの数値は影の水平方向と垂直方向のオフセット、三つ目の数値はぼかしの強さ、最後のrgbaは影の色と透明度を指定している。この影によって、要素が背景から少し浮き上がっているような奥行き感が演出される。最後にpadding: 20px;で要素の内側に20ピクセルの余白を設け、内容が見やすく配置されるようにし、color: #fff;で要素内のテキスト色を白に指定している。これは、透明な背景の上に置かれるテキストの可読性を確保するために重要な設定である。

著者はこれらのCSSスタイルを.glass-cardというクラス名で定義し、ナビゲーションバー、プロジェクトの紹介カード、自己紹介セクションなど、ポートフォリオサイトの様々な部分に適用した。この変更によって、以前は平坦で機能的だっただけのサイトが、エレガントでApple製品のような奥行きとぼかしを持ったパネルで構成される、統一感のあるデザインへと変貌した。まるでサイト内の情報が、透明なガラスの板の上に提示されているかのような印象を与える。

この実装を通じて、いくつかの重要な学びがあったと述べられている。まず、backdrop-filterによるぼかしの強さは、5ピクセルから15ピクセル程度が適切であるという点だ。あまりに強くぼかしすぎると、かえって背景が混乱して見づらくなってしまう。次に、グラスモーフィズムの要素上に表示するテキストは、白や黒など背景とのコントラストが高い色を選ぶことが重要である。透明な背景の上に文字を置くため、文字が背景に溶け込んで読みにくくなるのを防ぐためだ。また、カードが背景から「浮いている」ような印象を強めるためには、先述のbox-shadowのような光るような影（glow shadows）を追加することが効果的である。そして、このグラスモーフィズム効果は、暗い背景（ダークモード）の上で最も魅力的に映えることも発見された。暗い背景は、透明なガラスの効果とぼかしを際立たせるのに役立つためだ。

このニュース記事の最も重要なメッセージは、backdrop-filterという比較的シンプルなCSSのプロパティを理解し活用するだけで、Webサイト全体の印象を劇的に変えることができるという点にある。細部にまで気を配り、このような小さなデザインの工夫を加えることは、ポートフォリオサイトをより高級感があり、採用担当者の目を引くものにする。そして、その実装は意外なほど簡単であり、システムエンジニアを目指す初心者でも、少しのCSSの知識があればすぐにでも自分のプロジェクトに取り入れることができるだろう。