リキッドメタルボタンの作り方｜WebGLの質感を無料生成

Q: リキッドメタルボタンはCSSだけで作れますか？

反射が連続的に流れる本格的な質感は、CSS単体では実用的に再現できません。linear-gradientとアニメーションで近似はできますが、ピクセル単位で反射を計算するWebGLには質感で及びません。手軽に作りたい場合は、WebGLで描くジェネレーターでコードを生成するのが現実的です。

リキッドメタルボタンとは、WebGLのフラグメントシェーダーで金属の反射をピクセル単位に計算し、液状の金属のように光沢が流れて見える質感を持たせたボタンUIです。CSSのグラデーションでは止まった金属しか作れませんが、シェーダーを使うと反射そのものが動く「生きた金属面」を表現できます。

メタリックなボタンを作ろうとすると、多くの人はlinear-gradientやbox-shadowを重ねます。しかし、それでは「金属っぽい色」は出せても、見る角度で反射が流れる異方性のある質感までは再現できません。本物の金属面は光源と視線の関係でハイライトが連続的に変化するため、ピクセル単位の計算が必要だからです。

この記事では、リキッドメタルボタンがなぜWebGLでしか出せない質感なのかを整理したうえで、うねり・光の角度・色といった質感の決まり方、実際の使いどころと注意点までをまとめます。GLSLやライブラリの知識がなくても、コードを書かずにブラウザ上で作れる無料ジェネレーターも紹介するので、まず仕上がりを試してから読み進められます。

リキッドメタルボタンをすぐ作る（無料ジェネレーター）

仕組みを理解する前に、まず動く実物を触るのがいちばんの近道です。リキッドメタルボタンジェネレーターは、9種のテンプレートから選び、うねり・光の角度・速さ・色・リム・形をスライダーで調整して、その場で質感を確かめられる無料ツールです。

生成されるのは外部ライブラリ不要のHTML/CSS/JS（MITライセンス）で、WebGLの描画エンジンまで含む自己完結コードをそのままコピーして貼り付けられます。GLSLを書く必要も、npmで何かを導入する必要もありません。商用サイトでもそのまま使えます。

リキッドメタルボタンを無料ツールで作る →

以降では、このツールで触れる各パラメータが質感のどこに効くのか、そしてリキッドメタルボタンをどこに置くと効果的かを解説します。先に値の意味を知っておくと、狙った金属に最短でたどり着けます。

なぜCSSではなくWebGLなのか

結論から言うと、流動する金属の反射はCSS単体では実用的に再現できません。CSSのグラデーションは「色の帯」を静的に並べるだけで、ピクセルごとに反射方向を計算する仕組みを持たないからです。一方WebGLシェーダーは、画面の各ピクセルで色を計算できるため、反射が連続的に流れる質感を表現できます。

表現したいこと	CSSグラデーション	WebGLシェーダー
金属っぽい色	得意	得意
連続的に流れる反射	困難（帯が固定される）	得意（ピクセル単位で計算）
うねり・歪みのある反射	ほぼ不可	パラメータで調整可能
視線・角度による変化	不可	得意
導入の手軽さ	非常に手軽	ツールで手軽

かつてはこの質感を出すためにGLSL（シェーダー言語）を自分で書く必要があり、学習コストが障壁でした。現在は、金属反射のシェーダーがあらかじめ組み込まれたジェネレーターを使えば、値を動かすだけで同じ質感を得られます。表の右下「ツールで手軽」は、まさにこの状態を指しています。

質感を決める3要素：うねり・光の角度・速さ

リキッドメタルの印象は、突き詰めると次の3つでほぼ決まります。どれも数値を上下させるだけで、ヘアライン仕上げから水銀のような粗い反射まで連続的に変化します。

うねり（rep）： 反射の縞の細かさ。上げるほど縞が細かく硬質な金属に、0にするとうねりの無いなめらかな鏡面メタルになる。質感をいちばん大きく左右する要素
光の角度（angle）： 反射が流れる向き。傾けるほど斜めに光が走り、動きの方向が変わる。横流れは落ち着いた印象、斜めは躍動感が出る
速さ（speed）： 反射が流れるアニメーションの速度。0にすると静止した金属になる。常時動かすか、止めて静かな金属にするかをここで決める

狙いどころの目安はシンプルです。落ち着いた上品な金属なら、うねりをやや細かめ＋速さを遅めに。インパクト重視なら、うねりを粗く＋速さを上げて反射を大きく流します。まずはテンプレートを起点に、この3つだけ動かして反応を確かめるのが理解の近道です。

色・形・リムでブランドに合わせる

質感の方向性が決まったら、色と形でブランドのトーンに寄せます。シルバー一辺倒ではなく、ゴールドやカラーメタルまで振れるのがWebGLメタルの強みです。

色（hue／tint）： tintを0にすると無色＝白銀のクロームに。tintを上げてhueを回すと、金・銅・青・緑などのカラーメタルになる。ブランドカラーの金属を作れる
リム（rim）： 金属が見える縁（ベゼル）の太さ。中央は暗い面で覆い、縁のリムだけ金属を見せることで「金属の板」ではなく立体的なボタンに見える
形・テーマ： 長方形と丸（円）を切り替え可能。ダーク（暗い面＋淡色文字）／ライト（明るい面＋濃色文字）でサイトの配色に合わせられる

仕組みとしては、シェーダーが描く金属面の上に、CSSで暗い中央面とリムを重ねた二層構造です。ジェネレーターはこの構造を含む完成コードを出力するため、色・形・リムを変えるたびに、貼り付けるだけで動くコードが手に入ります。色の名前や配色の選び方に迷ったら、色の辞書も合わせて使うとブランドカラーを決めやすくなります。

テンプレート9種（FLAT・A〜H）の選び方

ジェネレーターには、うねり・角度・速さの組み合わせを変えた9種のテンプレート（FLAT・A〜H）が用意されています。ゼロから値を探さなくても、作りたい雰囲気に近いものをクリックして微調整するのが最短です。各テンプレートの設定と向いている用途は次のとおりです。

テンプレート	うねり	角度	速さ	向いている用途
FLAT	0	0	0.6	うねりの無いなめらかな鏡面メタル。静かで上品な主CTA
A	0.4	0	1.0	横方向に反射が流れる標準的なメタル。汎用的で扱いやすい
B	0.8	0	1.4	縞が細かくヘアライン仕上げ風。やや速めで上質な印象
C	0.4	45	1.0	斜めに反射が流れ、動きを感じる質感。バランス型
D	0.8	45	0.7	斜め＋細かい縞をゆっくり。研磨された金属に近い
E	1.5	90	1.2	縦方向の非常に細かい縞。光沢が強くシャープで派手
F	0.2	0	0.5	縞が最も粗く水銀のようにゆったり流れる。存在感重視
G	1.2	45	1.8	斜めの細かい縞を速く流す。最もダイナミックで目を引く
H	0.6	90	1.0	縦流れの中庸な質感。縦長レイアウトに馴染む

迷ったら、落ち着かせたいならFLATまたはD、標準的に使うならA・C、見せ場で目立たせるならE・Gが起点として扱いやすいです。テンプレート適用後に、うねりと速さだけ微調整すれば狙いに寄せられます。

ネオンボタン・リキッドガラスとの使い分け

装飾性の高いボタン表現はリキッドメタルだけではありません。狙う印象によって、光るネオン・透ける屈折ガラスと使い分けると効果的です。それぞれの質感・技術・向く場面を整理します。

表現	印象	主な技術	向く場面
リキッドメタル	高級・重厚・流動する金属	WebGLシェーダー	ブランド主CTA・プレミアム訴求
ネオンボタン	発光・サイバー・ポップ	SVGフィルタ／CSS	ダークUI・ゲーム・イベント
リキッドガラス	透明感・繊細・iOS風	backdrop-filter／WebGL	背景を活かす重ね面・モーダル

発光させたいならネオンボタンジェネレーター、背景を透かして屈折させたいなら透過リキッドガラスCSSジェネレーターが同じくコピペで使えます。いずれも「主役のCTAに絞って使う」点は共通で、重ねすぎると効果が薄れます。

使いどころと注意点

リキッドメタルボタンはGPUで描画されるためCPU負荷は小さい一方、各ボタンが常時アニメーションするcanvasになります。乱用するとモバイル端末でのGPU負荷とバッテリー消費が増えるため、使う場所を絞るのが鉄則です。

主役のCTAに1〜数個まで： 全ボタンを金属化すると視覚的に騒がしく、負荷も上がる。ヒーローの主CTAなど見せ場に絞る
動きを止める選択肢も持つ： 速さ（speed）を0にすれば静止した金属になる。常時動かす必要がない場面では静止メタルにすると上品で負荷も下がる
prefers-reduced-motionを尊重する： 動きを抑える設定のユーザーには静止状態へ切り替える（次章のFAQ参照）
ラベルは通常のDOMで重ねる： 文字はcanvas内ではなく通常のテキスト要素で置き、十分なコントラストを確保する。読み上げ・選択・SEOの面でも有利

同じWebGLでも、背景全体に屈折ガラスを敷くiOS風Liquid Glassの再現や、マウス追従のWebGL流体エフェクトとは負荷特性が異なります。表現ごとに「どこに何個置くか」を設計することが、UIモーションを破綻させないコツです。スクロール連動など他の動きと組み合わせる発想は、Webアニメーション完全ガイドも参考になります。

よくある失敗とコツ

貼り付けたコードがイメージどおりに見えないときは、ほとんどが次のいずれかです。見た目が崩れる原因と対処を押さえておくと、調整がスムーズになります。

角が四角いまま： ボタンの親要素に角丸クリップが効いていない。金属面のcanvasは矩形なので、角丸にするには親側で切り抜く必要がある。出力コードをそのまま使えば設定済み
ラベルが見えない・読み上げられない： 文字を金属面の下に置いてしまっている。ラベルは金属面より前面の通常テキストとして重ねる。読み上げ・選択・SEOの面でもこれが正解
文字が背景に埋もれる： 金属面とラベルのコントラスト不足。ダーク/ライトのテーマを切り替えるか、リムや中央面の明るさに対して文字色を調整する
画面が騒がしい・重い： ボタンを片っ端から金属化している。常時動くcanvasが増えるほど負荷も視覚ノイズも増す。主役のCTAだけに絞る
モバイルでカクつく： 速さ（speed）が高すぎる、または同時表示が多すぎる。静止させたい箇所は速さを0にし、数を減らすと安定する

いずれも、ジェネレーターが出力する完成コードを起点にすれば自然と回避できる項目です。まず動く状態をコピーし、そこから色・速さ・数を引き算していくと破綻しません。