スタイル

Liquid Glass

同じプロジェクト作業室でスタイルを比較.

同じプロジェクト作業室でスタイルを比較
プロジェクト / 今日 · 01

余白をつくる

次のアイデアのための小さな余白。

資料を集め、方向を描き、言葉を整えます。3つの小さな作業で、考えの伝わる作業室をつくります。

タスク

始める準備ができました。

本文内の架空のデモです。リセット・再読み込みで初期状態に戻ります。

概念

Liquid Glassはコンテンツの上に動的で透明な操作層を置きます。このウェブ例は視覚的特徴の再現で、Appleのネイティブ描画とは異なります。

実例

11種類で概要・タスク3件・進捗・資料メモ2件を共有します。メニューで移動し、完了チェック、状態の絞り込み、メモの展開を試します。1件完了すると1 / 3と33%を表示し、該当がなければ案内が出ます。リセット・再読み込みで、すべて表示・全件未完了・0%・閉じたメモに戻ります。 ツールを表示すると浮遊カプセルが広がります。不透明パネルで透明感をなくせます。

選ぶ条件

豊かなコンテンツ上の小さな操作層に向きます。 透明な面にはコントラスト確認と不透明な代替が必要です。

Apple WWDC25

比較のまとめ
同じ分類の比較
概念特徴利点制約適する状況組み合わせ条件
Liquid Glass浮遊カプセル・反射する縁・広がるツールで操作層をコンテンツと分けます。軽い操作層で背景の文脈を保ちます。透明な面にはコントラスト確認と不透明な代替が必要です。豊かなコンテンツ上の小さな操作層に向きます。タスクの面は不透明にし、ガラス層を重ねません。
続けて読む原稿・修正提案 ↗

この選択を話し合う

コメントは全言語で共有。投稿にはGitHubログインが必要です。