本文へ移動
つまずき地図Vibe Dev Navigator
メニュー

AIでサービスをつくる、非エンジニアのための実践ガイド

Web全体デザイン

ソフトグラスモーフィズム

Soft glassmorphism

背景をやわらかく透かし、カードが薄いガラスのように浮かぶデザインです。

危険度: 通常透明感

今すぐ使う

見た目と印象をつかむ

見本の空気感が近いかを確かめてから、そのままAIへの依頼文へつなげられます。

10秒で分かる説明

淡い背景色の上へ、半透明の面、細い白い輪郭、控えめなぼかしを重ねます。

受ける印象

  • やわらかい
  • 先進的
  • 軽やか

AIへの依頼文

ソフトグラスモーフィズムを加える依頼

危険度:通常

内容と対象をひと目確認してから使うと安心です。

分かる範囲で2か所だけ

自分の状況を入れる

空欄のままでもコピーできます。秘密情報は書かずにお試しください。

コピーされる依頼文を確認
目的:
可読性を守りながら、限定した領域へ軽い透明感と奥行きを加える。

現在の状態:
【ここに、何をしたらどうなったかを書く】

今回依頼すること:
指定した主要カードだけに、ソフトなグラスモーフィズムを加えてください。半透明の面、細い明るい輪郭、控えめな背景ぼかしを使い、文字の背後には十分に安定した色を置いてください。対応していない環境向けに不透明な背景も用意してください。

変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】

変更しない範囲:
本文全体の透明化、強いぼかし、読みにくい低コントラスト、常時動く重い背景エフェクトは追加しない。

完了条件:
- 透明効果がなくても内容を読める
- 文字と背景のコントラストを保てる
- 効果を使う領域が主要カードへ限定される

実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する

実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点

使う前に確認
使った後に確認

確かめる

向いている場面を見分ける

好みだけで決めず、このサイトの目的と情報量に合うかを確認します。

向いている場面

  • 主要な検索枠やカードだけを強調する
  • 背後に穏やかな色や形がある

向いていない場面

  • 本文全体や多数のカードへ使う
  • 低コントラストで文字が背景に溶ける場合

理解する

特徴と作り方を知る

AIへ伝える名前と、見た目を崩さず実装するための確認点です。

見た目の特徴

  • 半透明の明るい面を使う
  • 背景ぼかしと細い輪郭を組み合わせる
  • 影は広く薄くして奥行きを作る

実装時の確認

  • ぼかし非対応時の不透明な背景を用意する
  • 常時動く背景は避け、使う場合も小さく低速にする