グラスモーフィズムは、すりガラス効果を用いたUIデザインスタイルです。半透明のレイヤー、背景のぼかし、繊細なボーダーで背景色が透けて光ります。AppleとMicrosoftが普及させ、今やモダンなインターフェースデザインの定番手法です。
ぼかし半径、白の透明度、ボーダー幅、角丸半径を調整してガラスカードを作りましょう。プレビューはカラフルな背景の上にリアルなフロストパネルを表示し、CSS出力にはSafari互換の -webkit- プレフィックスが自動で含まれます。
Frequently Asked Questions
Q: backdrop-filterとは？
backdrop-filterとは？要素の背後にあるすべてに視覚効果（ぼかしなど）を適用します。要素そのものに作用するfilterと異なり、backdrop-filterは背景だけをぼかし、ガラス層はシャープなまま保ちます。
Q: グラスモーフィズムはすべてのブラウザで動きますか？
グラスモーフィズムはすべてのブラウザで動きますか？すべてのモダンブラウザがbackdrop-filterをサポートしています。Safariには -webkit-backdrop-filter プレフィックスが必要ですが、生成されるCSSには自動で含まれます。
Q: 2026年もグラスモーフィズムは流行っていますか？
2026年もグラスモーフィズムは流行っていますか？はい。トレンドから成熟したデザイン言語へ進化し、Apple、Microsoft、RevolutやN26などの大手フィンテックアプリが採用しています。
Q: ガラスカードに最適な背景は？
ガラスカードに最適な背景は？紫、青、ピンク、ティールの鮮やかなグラデーションが最適です。すりガラスの層を通して見えるだけの色彩のある背景にしましょう。
Q: backdrop-filterはパフォーマンスに影響しますか？
backdrop-filterはパフォーマンスに影響しますか？ガラス要素が少数なら影響は無視できる程度です。数十個も重ねると低スペック端末ではスクロールが遅くなります——主要な面だけに使いましょう。
日本の伝統色・和色
和色は平安時代の襲（かさね）の色目に由来する日本の伝統色。桜や山吹、瑠璃など、植物や自然の名前を冠した優しい色合いが特徴で、JIS慣用色名としても制定されています。現代のUIデザインにも落ち着いた配色として人気です。
山吹色 #F8B500山吹の花に由来する黄金色。JIS慣用色名
撫子色 #EEA9A9ナデシコの花の淡いピンク。平安時代から愛される
茜色 #B7282E茜草の根から染めた深い赤。夕焼けの色
若草色 #C3D825春の新芽を思わせる明るい黄緑
瑠璃色 #1E50A2仏教の七宝「瑠璃」に由来する深い青
桜色 #FEF4F4桜の花びらのようなごく淡いピンク
常磐色 #007B43常緑樹の深い緑。永遠を象徴する
Q: 和色とは何ですか？
和色とは何ですか？和色は平安時代の襲の色目に由来する日本の伝統色で、桜・山吹・瑠璃など自然の名を冠した色が多く、JIS慣用色名として269色が制定されています。
Q: 山吹色はどんな色ですか？
山吹色はどんな色ですか？山吹の花に由来する黄金色で、色値は #F8B500。JIS慣用色名の一つで、太田道灌の逸話でも知られる日本の代表色です。