Information
リキッドメタル（Liquid Metal）とは？
リキッドメタル（Liquid Metal）は、金属のような強い反射感と、液体のような有機的なうねりを同時に感じさせるビジュアル表現です。ボタンやラベル、KVのアクセントなどに使うと、UIに「質感」と「奥行き」を加えられます。
このリキッドメタル生成ジェネレーターでできること
このツールは、リキッドメタル表現をリアルタイムで生成しながら、見た目を調整してそのまま実装できるコードを出力できるジェネレータです。以下の項目を操作して、理想のLiquid Metal表現を作れます。
- 色（Liquid Metalの質感カラー）：CHROME / GOLD / BRONZE / RED / BLUE / EMERALD
- ボタン背景（WHITE / BLACK）：文字の見え方や雰囲気を切替
- 形状（RECTANGLE / CIRCLE / SQUARE）：UI用途に合わせて最適化
- パラメーター調整：模様の細かさ、なめらかさ、スピード、歪み、スケール、角度などを直感的に調整
生成したコードの使い方
「コードを表示」から、生成結果を HTML / CSS / JS として確認できます。必要な部分をコピペして配置するだけで、Liquid Metalのアニメーション表現をすぐに導入できます。プロトタイピングやデザイン検証にも便利です。
使いどころのヒント
- CTAボタンやタグUIに使うと、クリックしたくなる“質感”が出ます
- KVや見出しのアクセントに使うと、印象が強くなります
- 動きが強い場合は、スピードや歪みを控えめにして可読性を優先すると安定します
注意点
- 表現の都合上、環境によって見え方が微妙に変わる場合があります
- 動きの強さは、ユーザーの可読性・酔いの感じ方に配慮して調整してください