モバイル安全領域のCSS変数が新登場

8月 17, 2026

MOBILE DEV

モバイル安全領域の新CSS変数
`--shopify-safe-area-inset-bottom`

Shopify Mobileのフローティングバーと固定UIが重なる問題を、App Bridgeが自動解決

Shopify Mobileで動作する埋め込みアプリ向けに、新CSS変数 --shopify-safe-area-inset-bottom が2026年4月15日より自動適用されます。フローティングボトムナビゲーションバーとコンテンツの重なりを防ぐため、App Bridgeが値を自動セット。カスタムの固定UI要素を持つ開発者は自身のCSSへの組み込みが推奨されます。

1変更内容：Before / After 図解

2この変数の仕組み

フローティングボトムバーが非表示のとき、変数は 0px にデフォルト設定されます。

モバイルのフローティングボトムバーが表示中は、そのCSSピクセル高さに自動調整されます。

3業務に活かせるユースケース

課題: スティッキーフッターが Shopify Mobile のフローティングバーに隠れてしまい、ユーザーがボタンをタップできない
打ち手: .sticky-footer { bottom: var(--shopify-safe-area-inset-bottom, 0px); } を追加するだけで、バーの高さ分だけフッターを上にずらせる
効果: モバイルユーザーの操作ミスや離脱を防ぎ、コンバージョン率の改善が期待できる
技術メモ: App Bridge が自動で値をセットするため、JavaScript 側での高さ取得は不要。フォールバック値 0px を必ず指定すること

課題: フローティングアクションボタン（FAB）を画面右下に固定しているが、モバイルでバーと重なってタップ不能になる
打ち手: .fab { bottom: calc(16px + var(--shopify-safe-area-inset-bottom, 0px)); } で余白を動的に確保する（元記事のサンプルコードそのまま活用可）
効果: 既存デザインのスペーシングを壊さず、安全領域を考慮した配置が1行のCSSで実現できる
技術メモ: calc() と組み合わせることで、デザイン側の余白（16pxなど）とシステム側の高さを独立して管理できる

課題: 大半のアプリは対応不要と言われているが、自社アプリが該当するか判断できない
打ち手: アプリ内に position: fixed または position: sticky で bottom 方向に固定した要素があるかをコード検索し、存在すれば CSS 変数を組み込む
効果: 対応の優先度を素早く判断でき、不要な工数を削減しながらリリース前の品質確認が完了する
技術メモ: body への padding-bottom 自動付与は App Bridge が担うため、通常のスクロールコンテンツは変更不要。影響範囲は fixed/sticky な bottom 要素のみ

4技術者向けポイント

項目	詳細
変数名	`--shopify-safe-area-inset-bottom`
設定主体	App Bridge が自動でセット。手動設定は不要
デフォルト値	`0px`（フローティングバーが非表示のとき）
適用対象	Shopify Mobile 上で動作する埋め込みアプリすべて
自動適用範囲	`<body>` への bottom padding は自動付与。大半のアプリは対応不要
追加対応が必要なケース	`position: fixed / sticky` で bottom 方向に固定したカスタム UI 要素を持つアプリ
推奨記述	`var(--shopify-safe-area-inset-bottom, 0px)`（フォールバック付き）
適用開始日	2026年4月15日
参照 API ドキュメント	shopify.dev/docs/api/app-home/apis/authentication-and-data/environment-api