【コピペでOK】Apple Vision Pro風デザインをあなたのサイトに！簡単JSライブラリ「Liquid Glass UI」の使い方
こんにちは！Webサイト制作を楽しんでいる皆さん！
「Apple Vision Proみたいな、ガラスの向こうが透けて見える、あのカッコいいデザインを自分のサイトにも入れてみたい！」
そう思ったことはありませんか？
でも、なんだか難しそう… JavaScriptとかよく分からないし…と諦めていませんか？
大丈夫です！
そんなあなたのために、HTMLにコピペするだけで、あの未来的なデザインを再現できるライブラリ「Liquid Glass UI」を作りました！プログラミングが苦手な方でも、この記事の通りに真似するだけで、あなたのサイトが一気におしゃれになります。
まずは完成形を見てみてください！
ライブデモページはこちら
https://windowtranslator.github.io/liquid-glass-ui/
どうです？ワクワクしませんか？
それでは、さっそく使い方を見ていきましょう！
🚀【ステップ1】たった一行の「魔法の呪文」を追加しよう
準備は本当にこれだけです。
あなたが作ったHTMLファイルの、一番下のあたりにある </body> という文字を探してください。
その直前に、以下の「魔法の呪文」（scriptタグ）を一行コピペします。
<!DOCTYPE html>
<html>
<head>
<title>私の素敵なサイト</title>
</head>
<body>
<!-- ここにあなたのサイトのコンテンツがあります -->
<h1>こんにちは！</h1>
<p>私のサイトへようこそ。</p>
<!-- ↓↓↓ この一行を追加するだけ！ ↓↓↓ -->
<script src="https://cdn.jsdelivr.net/gh/Windowtranslator/liquid-glass-ui@latest/liquid-glass.js"></script>
</body>
</html>
(補足: @latest をつけると常に最新版が読み込まれます。特定のバージョンで固定したい場合は @v1.3.0 のように指定してください)
これだけで、あなたのサイトで「Liquid Glass UI」の魔法が使えるようになりました！
CSSファイルなどを準備する必要は一切ありません。
🎨【ステップ2】「すりガラス」パネルを作ってみよう
それでは、実際にすりガラス風のパネルを作ってみましょう。
HTMLで「ここにすりガラスのパネルを置きたいな」という場所に、以下のコードをコピペしてください。
<div class="lg-glass">
<h2>はじめまして！</h2>
<p>これが「Liquid Glass」です。</p>
</div>
class="lg-glass" というのが、**「この箱をすりガラスに変身させて！」**というお願いの目印です。
これをブラウザで表示すると…
背景が透ける美しいパネルが表示されたはずです！
🪄【ステップ3】エフェクト（効果）を追加して遊んでみよう
このライブラリの楽しいところは、クラスを追加していくだけで、色々なエフェクトを重ねがけできる点です。
① マウスで立体的に動かす
パネルがマウスの動きに合わせて、フワフワと立体的に動きます。
先ほどの lg-glass の後ろに、スペースを空けて lg-parallax と書き足すだけです。
<div class="lg-glass lg-parallax">
<h3>動くよ！</h3>
</div>
② マウスを乗せると光らせる
パネルにマウスを乗せると、オーラのようにポワッと光ります。
今度は lg-glow を追加してみましょう。
<div class="lg-glass lg-glow">
<h3>光るよ！</h3>
</div>
もちろん、全部一緒に追加することもできます！
<!-- 動いて、光って、さらにフワフワ浮遊する！ -->
<div class="lg-glass lg-parallax lg-glow lg-float">
<h3>すごい！</h3>
</div>
クラスを追加するだけで、どんどんリッチになっていくのが楽しいですよね！
🧩【ステップ4】便利な「部品」を使ってみよう
「Liquid Glass UI」には、ウェブサイトでよく使う便利な部品（コンポーネント）も用意されています。
モーダルウィンドウ（ポップアップ）
ボタンをクリックすると、フワッと表示されるウィンドウです。これもコピペだけで実装できます。
1. まず、ボタンを好きな場所に置きます。
id="open-modal-btn" という名前が目印です。
<button class="lg-button" id="open-modal-btn">ポップアップを開く</button>
2. 次に、ポップアップ本体のコードを、HTMLの一番下 (</body>の直前) にコピペします。
<div class="lg-modal-overlay" id="my-modal">
<div class="lg-glass lg-modal-content">
<button class="lg-modal-close-btn">×</button>
<h3>お知らせ</h3>
<p>ここに内容を書きます。</p>
</div>
</div>
たったこれだけで、ボタンを押すとガラスのポップアップが表示されるようになります。
3Dカルーセル（カードがくるくる回るやつ）
カードが立体的にくるくる回る、あのカッコいいやつも作れます。
以下のHTMLをコピペするだけです。
<!-- カルーセルのHTML -->
<div id="glass-carousel" class="wrapper">
<div class="carousel">
<div class="cell lg-glass"><h3>カード 1</h3></div>
<div class="cell lg-glass"><h3>カード 2</h3></div>
<div class="cell lg-glass"><h3>カード 3</h3></div>
</div>
</div>
<!-- 操作ボタン -->
<div class="button-group">
<button class="lg-button" data-carousel-prev>前へ</button>
<button class="lg-button" data-carousel-next>次へ</button>
</div>
id="glass-carousel" を目印に、ライブラリが自動で動かしてくれます。
まとめ
どうでしたか？思ったよりずっと簡単に、未来的なデザインが作れたのではないでしょうか。
Liquid Glass UI は、あなたの創造性を刺激し、サイト制作をもっと楽しくするためのツールです。
ぜひ、あなたのポートフォリオやブログ、作品紹介サイトなどで自由に使ってみてください！
もしこのライブラリを気に入っていただけたら、**GitHubリポジトリにスター（⭐）**を付けていただけると、泣いて喜びます！それが、今後の開発の大きなモチベーションになります。
- ライブデモで色々試す！: https://windowtranslator.github.io/liquid-glass-ui/
- GitHubで応援する！: https://github.com/Windowtranslator/liquid-glass-ui
最後まで読んでいただき、ありがとうございました！