よくある原因
AIはbackdrop-filterの標準仕様を学習していますが、Safari固有の制約を常に考慮するわけではありません。「フロストガラス効果を追加して」という指示だけでは、Chromeで動作する最小限のCSSが出力され、-webkit-プレフィックスが省略されます。プロンプトに「Safari対応」を明記することが重要です。
AIが生成するレイアウトでは、backdrop-filterを適用する要素の親にoverflow: hiddenが設定されたコンテナが作られやすいです。カード型やモーダル型のデザインでは特にこのパターンが多く、Safariでのみぼかしが消える原因になります。プロンプトでoverflowの扱いを指定すると回避できます。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
自分側で確認すること
AIから受け取ったHTMLのCSSを確認して`backdrop-filter`を検索します。`-webkit-backdrop-filter`が直前行に同じ値で存在するかを確認し、なければ「backdrop-filterのすべての記述に-webkit-backdrop-filterを同じ値で追加して」と追加指示します。
生成後の確認はSafariで行います。MacのSafariにHTMLをドラッグして開くか、ギガサイト便で公開してiPhoneのSafariでURLを開きます。ぼかし効果が見えない場合はDevToolsのElements（Safariの開発者メニューから有効化）でoverflowプロパティを確認します。`overflow: hidden`が祖先要素にあれば`overflow: clip`に変更してAIに再出力を依頼します。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
相手側で確認すること
共有相手がiPhoneを使っている場合、iOSのバージョンが低いとbackdrop-filterが期待通りに動かないことがあります。「設定→一般→情報」でiOSバージョンを確認してもらい、iOS 15.4未満であれば-webkit-版のみで対応していることを伝え、それでも見えない場合はフォールバックのrgba背景を検討する旨を共有します。
相手がMacのSafariで確認している場合、「Develop→Show Web Inspector」を開いてConsoleにCSSの警告が出ていないか確認してもらうと原因を特定しやすくなります。ただし非技術者には難しい操作なので、その場合は「見え方のスクリーンショットを送ってほしい」という依頼にとどめるのが実用的です。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
再発防止の運用
backdrop-filterを含むHTMLを生成させるときの固定プロンプト文例：「backdrop-filterを使う場合は必ず`-webkit-backdrop-filter`を同じ値で先に記述すること。backdrop-filterを適用する要素の親コンテナにはoverflow: hiddenを使わずoverflow: clipまたはvisibleにすること。対象要素にはposition: relativeとz-index: 0を設定すること。」
この指示をプロンプトの冒頭に固定テキストとして配置し、その後にデザインの具体的な要件を書く形式にするとAIが安定して準拠したCSSを出力します。ギガサイト便へのアップロード前にSafariで確認するステップもルーティン化すれば、受信者からの報告がほぼゼロになります。
- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する
よくある質問
AIが-webkit-backdrop-filterを追加したのに値が異なります
AIが標準版と異なるblur値を設定している場合があります。「-webkit-backdrop-filterとbackdrop-filterの値を完全に一致させて」と指示するか、生成後に手動で値を揃えてください。値が違うとブラウザにより見え方が異なります。
overflow: clipはSafariで正しく動作しますか
overflow: clipはSafari 16以降でサポートされています。それ以前を考慮するなら親のoverflow: hiddenを削除し、border-radiusのクリッピングが必要な場合はclip-path: inset(0 round Xpx)で代替してください。
backdrop-filterのフォールバックをAIに生成させることはできますか
可能です。プロンプトに「backdrop-filterが未対応のブラウザ向けにbackground-color: rgba(255,255,255,0.8)のフォールバックを@supportsで分岐して追加すること」と指示すると、@supports (-webkit-backdrop-filter: blur(1px))と@supports (backdrop-filter: blur(1px))で分岐したCSSが生成されます。