iOS 26 から、ホーム画面のアプリアイコンや Widget を Liquid Glass の見た目にする表示モードとして「クリア」が追加されました（設定方法はこちら）。このモードにすると iOS アプリのホーム画面の Widget の表示が崩れることがあります。例えば 以前の記事 で紹介した、自分が勝手に開発している散歩記録アプリ Sanpi の Widget は、「クリア」モードでは以下のように大変悲しい表示になっていて、なにもわかりません。
| 「ダーク」モード | 「クリア」モード |
|---|---|
 |
 |
iPhone に入っている他のアプリの Widget を見てみても同様の問題が発生しているものが散見されたので、この記事で表示がおかしくなる原因と対処方法をまとめておきます。
ちなみに、iOS 18 から追加された「色合い調整」表示モードでも同様の事象が発生するのですが、このモードを使っている人がいなさすぎるせいか自分は問題を認識できていませんでした。「クリア」モードはそれよりは使われそうな雰囲気があるので、この機会にまとめて対応しましょう。
参考リンク
- WidgetRenderingMode | Apple Developer Documentation
- Preparing widgets for additional platforms, contexts, and appearances | Apple Developer Documentation
- Optimizing your widget for accented rendering mode and Liquid Glass | Apple Developer Documentation
- What’s new in widgets - WWDC25 - Videos - Apple Developer
Widget Rendering Mode
ホーム画面のモード「クリア」「色合い調整」で Widget の表示がおかしくなることがある原因は、これらのモードで Widget の描画方法が変わることです。
iOS は Widget が置かれる場所やユーザ設定によって描画のモードを変えています。これは Widget 側からは @Environment(\.widgetRenderingMode) で取得できる WidgetRenderingMode という値で判別できます。 rendering mode の値は以下の３種類です。
fullColor: 指定した通りの色で描画されるvibrant: View の色を明度にマップしてモノクロで描画するaccented: View を primary / accented の２つの group に分けて、それぞれに色を割り当てて描画する
以下の rendering mode の値を表示するだけの Widget を各所に配置して、どの Widget がどのモードで描画されるか確認してみましょう。それぞれのモードで色がどのように表示されるかの様子も確認したいので、色付きの絵文字である 😇 が rendering mode を教えてくれるようにしています。
struct RenderingModeWidgetView : View { @Environment(\.widgetRenderingMode) private var renderingMode var body: some View { Text("😇 < \(renderingMode.description)") } }
| ホーム「ダーク」 | ホーム「クリア」 | ホーム「色合い調整」 |
|---|---|---|
 |
 |
 |
| ロック画面 | スタンバイ | スタンバイ（夜間） |
|---|---|---|
 |
 |
 |
表示箇所や状況によってモードが変わっています。また、 fullColor では 😇 が元々の色で表示されるのに対して、 vibrant では色が透明度にマップされていて顔の様子はなんとかわかり、 accented では完全に白一色で描画されていて様子がわからなくなってしまっています。
この記事で注目するのは、同じホーム画面の Widget であっても表示モードのユーザ設定によって rendering mode が fullColor から accented に変わることです。「クリア」「色合い調整」でも Widget を正しく表示するためには accented モードで表示が崩れないように対応しておくことが重要です。上記の例では 😇 が塗りつぶされてしまって表情が読み取れないので、このような問題を解決していく必要があるということです。
ちなみに、この記事ではこれ以上触れませんが、スタンバイの Widget が夜間モードで vibrant になることも注意が必要です。
accented モード
「クリア」「色合い調整」で利用される accented モードでは
- Widget のコンテンツが primary group と accented group の2つに分けられ、それぞれに異なる色が割り当てられる。 iPhone のホーム画面ではそれぞれ明るさが異なる白色になる
- Image も全体が白単色で描画される
- ただし設定された透明度は維持される
ということが起こります。つまり、 group が同じならば色々なものがとにかく同じ白色で描画されてしまうことになります。これにより、例えば背景色とその上に乗っているテキストが同じ色になってしまい視認できなくなってしまうことがあります。また、画像の内容は無視されて単に白塗りされてしまうので、内容がわからなくなります。
冒頭で紹介した Sanpi の Widget の表示が「クリア」でおかしくなった問題も、 accented モードが使われることにより画像やボタンがすべて白色で描画されるようになったことが原因です。
primary group と accented group
対応策を見ていく前に、 accented モードにおける２つの group である primary と accented が具体的にどのような色で描画されるかを確認してみましょう。特定の View を accented group に入れたい場合は widgetAccentable(_:) modifier をつけます。これを使って、色々な View を primary group と accented group に分けて表示してみます。
struct RenderingModeComparisonView : View { var body: some View { VStack { row(mode: "Primary ") row(mode: "Accented").widgetAccentable(true) } } private func row(mode: String) -> some View { HStack { Text(mode) .monospaced() Text("😇") Circle() .frame(width: 24, height: 24) Color.red .frame(width: 24, height: 24) Button {} label: { Text("Button") } .buttonStyle(.borderedProminent) } } }
結果は以下のようになります。どの View についても、 accented では primary に比べてわずかに明るい白色で描画されました。色が同じすぎてスクショだとあまりに差がわかりづらかったので画面をカメラで撮影したものを載せています。
目立たせたい要素を accented group に入れること自体は悪くないと思いますが、 primary と accented は少し明るさが違うだけでいずれも白色なので、個人的にはこれらの色を使い分けても視認性の確保にはあまり役立たないと感じました。 accented モードでも透明度は維持されるので、背景色の透明度を上げるなどして明確に区別できるようにする方が効果的でしょう。
ただ、これはあくまで iOS の話であって、 watchOS では以下のように accented には tint color が割り当てられ明確に primary と区別されることが期待できます。
対応
accented モードについて理解ができてきたところで、 Sanpi の Widget で発生していた、すべてが白色で描画されて表示内容がなにもわからなくなっていた問題に対処していきます。
対応１：背景色の透明度を上げる、もしくは背景を削除する
まずは、ボタンの内容が見えなくなっていた問題です。原因はボタンの背景色とその上のアイコンが同じ primary group に属していることで色味が無視されて同じ白色で描画されていることです。アイコンだけ accented にする方針もなくはないと思いますが、先程検証したように primary と accented でそこまで色に差が出るわけではないので、もっと明確に背景をいじった方がよさそうです。
具体的な方針は色々ありえますが、今回は以下のように背景の透明度を上げる対応にしました。 fullColor / vibrant での表示には問題がないので、 accented モードでのみ透明度をいじっています。
struct SanpiRecentPostsWidgetEntryView: View { @Environment(\.widgetRenderingMode) private var widgetRenderingMode var body: some View { // ... // ボタンの背景 .background(.gray.opacity(widgetRenderingMode == .accented ? 0.2 : 1)) // ... } }
他にも、以下のように完全に背景を除去してボタンの境界を枠線で示すような対応もとれそうです。 Widget のデザインに合わせてよさそうな方法を考えていきましょう。
対応２：画像に widgetAccentedRenderingMode を指定する
続いて、写真画像が白塗りになってしまう問題をなんとかしていきます。対処には、 widgetAccentedRenderingMode(_:) modifier を使います。この modifier は accented モードの Widget の中での画像の描画方法を指定するものです。以下の４つの値があります。
accented: デフォルト。画像全体が白色で描画されてしまうdesaturated: 画像の色の明度を透明度にマップして描画accentedDesaturated: desaturated と accented を合わせたモードで、iPhone ではdesaturatedを少し明るくした表示になるfullColor: 元の色をそのまま表示
これらの値を以下のように指定できます。
Image(...)
.widgetAccentedRenderingMode(.desaturated)
accented で画像が白塗りになってしまうことはわかっているので、それ以外の３つの描画結果を示します。
desaturated |
accentedDesaturated |
fullColor |
|---|---|---|
 |
 |
 |
desaturated と accentedDesaturated では画像の内容が透明度に反映されることで内容が判別できるようになっていますね。どちらも同じような表示ですが、実機で見ると accentedDesaturated の方がやや明るく見えます。
fullColor にして本来の色を表示することも一応できますが、それはわざわざホーム画面を「クリア」「色合い調整」にしているユーザの意図からは外れる可能性が高いでしょう。基本的には desaturated か accentedDesaturated を使うのがよい気がします。 Sanpi では desaturated を使うことにしました。
まとめ
この記事では、iOS 26 で追加されたホーム画面の「クリア」表示モード（および iOS 18 の「色合い調整」モード）で Widget の表示が崩れることがある問題と、その対処方法をまとめました。
問題の原因は、これらの表示モードでは Widget の rendering mode が fullColor から accented に変わることでした。 accented モードでは Widget の内容が primary / accented の２つの group に分けられ、それぞれに明度が異なる白色が割り当てられてしまいます。これにより、背景とテキストが同じ色になって見えなくなったり、画像が白塗りになってしまう問題が発生します。
対処方法としては、
accentedモードでは一部の背景の透明度を上げたり、背景を削除する- 画像には
widgetAccentedRenderingMode(_:)modifier で.desaturatedか.accentedDesaturatedを指定する
といった方法が有効です。この記事で例にとった Sanpi の Widget の「クリア」モードでの表示は以下のよう改善できました。
| before | after |
|---|---|
| |
|
