Component Gallery

UI Style

グラスモーフィズム（Glassmorphism）

半透明の面、ぼかし、薄い境界線で、すりガラスのような奥行きを作るスタイルです。

グラデーション背景上のblurパネルで、透明感と奥行きを表します。

30秒でわかる要点

半透明の面、ぼかし、薄い境界線で、すりガラスのような奥行きを作るスタイルです。

視覚的特徴

  • ・半透明パネル
  • ・backdrop blur
  • ・薄い境界線とハイライト

メリット

  • ・透明感とレイヤー感を出しやすい
  • ・モダンな印象になる
  • ・背景と組み合わせて世界観を作れる

デメリット

  • ・背景次第で読みにくい
  • ・描画負荷に注意が必要
  • ・過剰に使うと重く見える

向いている用途

  • ・ダッシュボードのカード
  • ・天気アプリ
  • ・OS風コントロールパネル

避けた方がよい用途

  • ・長文中心のページ
  • ・低スペック端末を強く考慮する画面

関連コンポーネント

カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
モーダル（Modal）モーダル（Modal）は、メインコンテンツの上に重なって表示される、フォーカスを要求するダイアログ。確認・入力・情報提示に使用される。
ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
サイドバー（Sidebar）サイドバー（Sidebar）は、画面左右に配置する縦型のナビゲーションメニュー。多階層メニューの展開や折りたたみに対応し、管理画面・ダッシュボードで多用される。
トースト（Toast）トースト（Toast）は、画面の端に短時間表示されるフィードバックメッセージ。操作の成功・失敗・情報を短く伝える。一定時間後に自動的に消える。

関連画面

ダッシュボード画面（Dashboard Screen）ダッシュボード画面は、重要指標や状態を一覧し、次に取るべき行動へ進むための業務画面です。
通知画面（Notification Screen）通知画面は、ユーザーに必要な更新、警告、アクション要求を時系列または重要度順に整理する画面です。
設定画面（Settings Screen）設定画面は、ユーザーが通知、アカウント、表示、権限などの振る舞いを確認・変更する画面です。

関連デザインシステム

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

AI実装プロンプト

React + Tailwind CSS

React + Tailwind CSSでグラスモーフィズムのカードUIを作成してください。半透明背景、backdrop-blur、薄い白境界線、十分な文字コントラストを含めてください。

運営・更新・参照元

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

参照元

FAQ

グラスモーフィズムはどこに使うと効果的ですか？

短い情報カードやコントロールパネルに向いています。本文量が多い画面では、背景と文字のコントラストを優先してください。