Mucahit Kokdemir

フロントエンド・モバイルデベロッパー

Clear, Tinted and Dark App Icons in iOS 27 (and the Glass Slider)

iOS 27のクリア・着色・ダークなアプリアイコン(とガラスのスライダ)

手短に言うと: ホーム画面の何もない場所を長押しし、「編集」、続いて**「カスタマイズ」をタップして、アイコンに「ライト」「ダーク」「クリア」「着色」のいずれかを選びます。インターフェイスのほかの部分は、「設定」「外観」「Liquid Glass」**を開いてスライダをドラッグします。別々の2つの設定で、役割も別々。それなのに、いつも混同されています。


2つの設定を切り分ける

アイコンの外観は設定ではなくホーム画面にあります。アプリアイコンの描かれ方を変えます。通常のライトなアイコン、ダーク版、ガラスのような「クリア」、あるいは色を選んですべてのアイコンがその色になる「着色」です。

Liquid Glassのスライダは「設定」「外観」「Liquid Glass」にあり、iOS 27で新しく加わりました。アイコンには影響しません。メニュー、ツールバー、シート、コントロールセンターといったシステムインターフェイスの透明度を調整します。「クリア」側に寄せると全体が軽く、より透けて見えます。「着色」側に寄せると同じ面に不透明な下地が付き、にぎやかな壁紙の上でも読みやすくなります。

Liquid Glassをオフにするスイッチはありません。Appleが用意したのはこのスライダだけで、「着色」まで寄せるのが最も近い手段です。

アイコンの外観を変更する手順

  1. ホーム画面の何もない場所をアイコンが波打つまで長押しします。
  2. 「編集」、続いて**「カスタマイズ」**をタップします。
  3. 「ライト」、「ダーク」、「クリア」、**「着色」**のいずれかを選びます。「着色」ではカラーピッカーが表示されます。
  4. どこかをタップして完了します。

注目を集めているのは「クリア」です。アイコンがガラスのようになり、壁紙から色を取り込みます。ある程度コントラストのある壁紙の上では最もよく見え、にぎやかな写真の上では最悪で、いくつかのアイコンは見分けがつかなくなります。

誰も触れない点: ウィジェットは追従しない

アイコンの外観は、システムがアプリアイコンに適用するものです。ウィジェットは自分で内容を描画するため、「クリア」も「着色」も引き継ぎません。ホーム画面を「ダーク」にすると、明るいアプリアイコンで埋まったウィジェットは、突然ページに空いた穴のように見えます。

WidgetLoftはこれを意図して扱っています。

  • 本物のダークアイコン。 Appleのシステムアイコンの本物のダーク版がアプリに同梱され、よく使われるサードパーティアイコンのダーク版も事前に用意されているので、ダークなホーム画面はウィジェットの中でもダークなままです。
  • 外観ごとのカスタムアイコン。 アプリごとに、ライトモード用の画像とダークモード用の画像を別々に設定できます。
  • 透明なウィジェットの背景(iOS 26以降)。ウィジェットがグレーのカードではなく壁紙の上に置かれます。

ダークモードのアプリアイコンと透明なウィジェットについては、それぞれ別の解説があります。

実際に見栄えのよい組み合わせ

  • クリアなアイコン、シンプルな壁紙、透明なウィジェット。 iOS 27が作り出せる最もすっきりした見た目で、ガラス効果が想定していた使い方です。
  • ダークなアイコン、ダークな壁紙、ダークなウィジェットのタイル。 最も読みやすく、壁紙に左右されにくい組み合わせです。
  • 1色に着色したアイコンと、それに合わせたカスタムのウィジェットタイル。 最も個性的で、最も手間のかかる組み合わせです。

写真の壁紙と「着色」の組み合わせは避けましょう。すべてが同じ色のぼんやりした塊になり、位置でアプリを探すことになります。

よくある質問

iOS 27でLiquid Glassをオフにできますか? できません。「設定」「外観」「Liquid Glass」のスライダが唯一の設定で、より透明とより着色の間を動くだけです。

「クリア」はすべてのアプリに適用されますか? ホーム画面全体に適用されます。適切なアイコンレイヤーを持つアプリは正しく見え、それ以外は近似されます。

ウィジェット内のアプリのタイルはアイコンの外観に追従しますか? しません。ウィジェットは自分自身を描画します。だからWidgetLoftは本物のダークアイコンと外観ごとの差し替えを備えています。


ランチャーウィジェットを、クリアやダークのホーム画面とぶつけるのではなく合わせたいですか?App StoreでWidgetLoftをダウンロード。