ガラスモーフィズム

Glassmorphism

時期: 近年の画面表現。下記の製品ごとに時期を分ける
地域: 複数の国・地域

ガラスモーフィズム

半透明の板の向こうに、背景の色がぼんやり見えます。すりガラスのような重なりを使う画面表現です。前にある操作部分と、後ろの内容の関係を見せられます。

実作品の画像は、まだ掲載していません。下の出典リンクから作品を確かめられます。参照図や説明図は、実作品の画像とは別に数えます。

表現が確かめられる作例・参考教材

歴史上の定評ある代表作と断定する選定ではありません。制作側の説明や教材から、表現が確かめられる例を区別して掲載しています。

ガラスモーフィズムの効果をつくるツール

参考ツール

透明度やぼかしを調整する実装例です。

作品・資料の出典を見る ↗

作品・資料の記録を読む

原題：Glassmorphism CSS Generator

ハイプフォー／スクエアプラネット / 継続公開／初公開年未確認 / CSS生成ツール

日本語の見出しは読みやすさのための呼び名・説明名です。原題は記録欄に示しています。

画像の転載条件は未確認。出典の公開は転載許諾ではありません。

アクリリック：アプリの後ろを透かす例

参考教材（同じ製品の背景を透かす例）

アプリの後ろにある画面をぼかして見せます。

作品・資料の出典を見る ↗

作品・資料の記録を読む

原題：Acrylic：Background acrylic

マイクロソフト / 継続更新の技術資料 / 画面素材・実装例

日本語の見出しは読みやすさのための呼び名・説明名です。原題は記録欄に示しています。

画像の転載条件は未確認。出典の公開は転載許諾ではありません。

アクリリック：アプリの中を透かす例

参考教材（同じ製品の内部を透かす例）

アプリの中の重なりを見せます。外側の背景を透かす例と区別します。

作品・資料の出典を見る ↗

作品・資料の記録を読む

原題：Acrylic：In-app acrylic

マイクロソフト / 継続更新の技術資料 / 画面素材・実装例

日本語の見出しは読みやすさのための呼び名・説明名です。原題は記録欄に示しています。

画像の転載条件は未確認。出典の公開は転載許諾ではありません。

もう少し知る：背景と、つながり

どんな背景で生まれた？

ガラスらしい画面は一つの運動ではありません。呼び名が広まったことと、各社の半透明表現が開発されたことは区別します。マイクロソフトのアクリリックも、会社独自の設計ルールを持っています。

よく見るための手がかり

色

背景色が透けるため、置く場所で文字の見え方が変わります。

文字

どの背景の上でも文字が読めるかを確かめます。

形・素材

背景のぼかし、面の透明度、縁の明るさを分けて見ます。

どこに、どう置く？

重ねすぎると、前後関係がかえって分かりにくくなります。

ほかの表現との、つながり

アクリリックは具体的な製品の素材表現です。一般的な見た目の呼び名と同一視しません。同じように透けて見えても、何を透かし、どう重ねるかは製品によって異なります。

いま、考えてみること

透ける表現を使わない設定や、処理が重い機器での代わりの表示も用意することが大切です。

調べた資料

一つのツールと、同じ素材の二つの実装方式です。独立した歴史作品三点としては数えません。

作品・制作の例3件を紹介しています。実作品画像0点、参照・関連画像0点。画像の収集は継続中です。