Component Gallery

UI Style

リキッドグラス（Liquid Glass）

透明なガラス表現に、液体のようなハイライトや屈折感を加えたリッチなスタイルです。

光沢のある透明カードで、液体のような屈折感を表します。

30秒でわかる要点

透明なガラス表現に、液体のようなハイライトや屈折感を加えたリッチなスタイルです。

視覚的特徴

  • ・光沢のある透明面
  • ・液体的なハイライト
  • ・強い奥行きと反射

メリット

  • ・新しさと高級感を出しやすい
  • ・プロダクトの象徴的な見せ場になる
  • ・メディアUIと相性がよい

デメリット

  • ・実装コストが高い
  • ・読みやすさを損ねやすい
  • ・使いすぎると主張が重い

向いている用途

  • ・音楽プレイヤー
  • ・高級SaaSのLP
  • ・OS風ショートカットパネル

避けた方がよい用途

  • ・フォーム中心の画面
  • ・情報密度の高い管理画面

関連コンポーネント

カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
スライダー（Slider）スライダー（Slider）は、トラックとサムで数値や範囲をスライド操作で入力するコンポーネント。価格フィルターや音量調整などに使用される。
モーダル（Modal）モーダル（Modal）は、メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。

関連画面

商品詳細画面（Product Detail Screen）商品詳細画面は、商品の価値、仕様、価格、在庫、購入導線を判断しやすくまとめる画面です。
ダッシュボード画面（Dashboard Screen）ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。

関連デザインシステム

Apple Human Interface GuidelinesAppleプラットフォーム向けの体験設計、操作、アクセシビリティ、コンポーネント指針をまとめた公式ガイドライン。

AI実装プロンプト

React + Tailwind CSS

React + Tailwind CSSでリキッドグラス風の音楽プレイヤーカードを作成してください。半透明、光沢ハイライト、丸い反射、控えめな操作ボタンを含めてください。

運営・更新・参照元

最終更新日
2026-07-20
レビュー状態
未レビュー

参照元

FAQ

グラスモーフィズムとの違いは何ですか？

グラスモーフィズムはすりガラス的な透明感が中心で、リキッドグラスはより強い光沢、屈折、液体的な動きを感じる表現です。