1 of 17

速習！iOS 17 Widgets 対応！

Mika Ito

potatotips #84　2023/09/26

2 of 17

iOS 17 からの Widgets のアップデート

  • Widgets の置ける場所が増えた！
    • Mac のデスクトップ (macOS app を持ってなくても使用できる)
    • iPad のロック画面
    • iPhone の StandBy モード
    • Apple Watch の Smart Stack
  • インタラクティブ Widgets

2

3 of 17

iOS 17 からの Widgets のアップデート

  • Widgets の置ける場所が増えた！ ← 今回はこちらの話！💁
    • Mac のデスクトップ (macOS app を持ってなくても使用できる)
    • iPad のロック画面
    • iPhone の StandBy モード
    • Apple Watch の Smart Stack
  • インタラクティブ Widgets

3

4 of 17

iOS 17 の新機能枠でフィーチャー 🎉

​

日経電子版が App Store でフィーチャーされました！

  • StandBy 対応
  • watchOS 10 対応
  • (既存 Widgets の改善)

​

4

5 of 17

新しい場所への展開方法

  • 必須の対応

1. content margins への移行

2. removable background の適用

  • より最適化するには

1. レイアウトを動的に適応させる

2. vibrant rendering への準備

​

​

5

6 of 17

必須の対応 ① ~ content margins への移行~

  • 自動で余白が付くようになった
  • 今までは手動で padding をつける必要があったが、これが不要になった

​

6

https://developer.apple.com/videos/play/wwdc2023/10027/

7 of 17

必須の対応 ① ~ content margins への移行~

​

​

7

Xcode 14

Xcode 15

日経電子版の場合だと...

8 of 17

必須の対応 ① ~ content margins への移行~

​

​

8

Xcode 14

Xcode 15

.containerBackground() を追加する！

9 of 17

必須の対応 ② ~ removable background の考慮 ~

.containerBackground() は .background() とは違うの？

  • 置く場所によって背景を消してくれたり表示してくれたりする
  • 背景なしの例：StandBy, iPad のロック画面, watch の complication

9

背景あり

背景なし

10 of 17

より最適化するには ① ~レイアウトを動的に適応させる~

StandBy 対応 ( & iPad のロック画面)

StandBy とは？

  • iPhone を充電した状態で横にすると出現する
  • キッチンやベッドルーム、デスクに置く想定
  • 遠くから見た時にも読みやすいデザイン
  • 黒い背景にシームレスにブレンドされるように

背景色を使わない。

→ StandBy の時はレイアウトを変えたい！

10

https://developer.apple.com/jp/design/human-interface-guidelines/widgets

11 of 17

より最適化するには ① ~レイアウトを動的に適応させる~

​

StandBy 対応 ( & iPad のロック画面)

​

11

showWidgetBackgorund == true

showWidgetBackgorund == false

12 of 17

より最適化するには ② ~ vibrant rendering への準備~

​

​

  • Widgets の外観は、表示されるコンテキストに応じて変わる
    • どのような外観でも、特徴的で映えるデザインにするべき
    • 特に注意しなければいけないのは、バイブラントな外観

12

https://developer.apple.com/jp/design/human-interface-guidelines/widgets

フルカラー

バイブラント

13 of 17

より最適化するには ② ~ vibrant rendering への準備~

​

​

バイブラントレンダリングモード時は

  • 画像、数字、テキストなどのコンテンツは不透明度100％にする
    • でないと、背景に溶け込みすぎてしまう
  • 目立たせるコンテンツに白または明るいグレイを、副次的な要素には暗いグレイスケール値を使用する

13

14 of 17

より最適化するには ② ~ vibrant rendering への準備~

​

​

バイブラントレンダリングモードの時にはデザインを変えてしまいたい！

​

​

14

renderingMode == .fullColor

renderingMode == .vibrant

15 of 17

より最適化するには ~日経電子版 の StandBy 対応

　　　　　　　　　　　　　　　　　　　　　　( & iPad のロック画面) ~

  • 文字を大きく
  • 背景画像は使用しない (Night mode の時に赤くなるので不適切と判断)
  • 目立たせたいアプリ名と見出しは白文字

15

既存 small widget

StandBy (通常時)

StandBy (Night mode)

iPad ロック画面

バイブラント

16 of 17

まとめ

  • content margins, removable background への対応は必須！！
  • よりこだわりたい人は...
    • StandBy 用、watch の Smart Stack 用にデザインを用意したり
    • vibrant rendering のときもコンテンツが鮮明に見えるようにデザインを考慮したり
  • Apple は Widgets を推している！？

iOS 17 の Widgets の Update に対応していきましょう！💪

16

17 of 17

Thank you for your attention!

企業 Widgets も使ってください！😉

17

https://www.nikkei.com/article/DGXZQOFM253FD0V20C23A8000000/