はじめに

こちらの記事ではWWDC2023、2024に発表されたTipKitについて、非iOSエンジニア向けにまとめたものとなります。

アプリ内の新機能をユーザーに認知してもらいたい
そもそもTipKitを知らない
TipKitというものを聞いたことはあるがどのように活用すればよいか分からない

これらに当てはまるデザイナーやPMの方に伝わりやすい内容となることを目指しています。
非エンジニア向けの記事になるので技術的な詳細は省いていきます。

TipKitとは

TipKitはアプリにヒントを簡単に表示できるフレームワークです。主にユーザーのUI学習体験を向上させることができると個人的には思っています。

アプリの新しい機能について教える
隠れた機能の発見を手伝う
ユーザーの目的をより早く達成するやり方を教える

などの使い道があります。

必要な環境

iOS17以上
- iOS18以上でしか使えない機能も追加で登場していますが、iOS17以上であれば後述する基本的なヒント表示できます
SwiftUIで構築されたView
- UIKitでも表示することは可能なようですが、SwiftUIのViewに表示する方が自然な実装になると思います

どんなヒントが表示できるのか

大きく分けてこの2種類の表示方法があります

インライン形式

UIの要素として自然に表示される
閉じると良い感じにトツルメしてくれる
他のUIが見えなくなるというリスクがない
配置によってはどのUIに対するヒントなのか分かりにくい可能性がある

ポップオーバー形式

吹き出しのように対象となるUIを指し示すことができる
他のUIに重ねることで強調しやすい
配置によっては他のUIをブロックしてしまうため、ヒントを消してからではないと操作できない可能性がある

デザインの柔軟性

タイトルのみ

最低限タイトルが必要で、メッセージのみは不可

タイトルとメッセージ

タイトルと画像

画像の大きさは変更可能
あまり利用ケースはなさそう

タイトル、メッセージ、画像

タイトル、メッセージ、画像、アクションボタン

ボタンを押すことで追加リソースにアクセスすることができる

タイトル、メッセージ、画像、複数のアクションボタン

アクションボタンを複数設定することも可能
一番上のアクションボタンが自動でプライマリボタンになる
5個までボタンを設置できることを確認したが、ボタンを増やしすぎてもヒントとしての複雑性が増すだけなので2つまでを限度として方が良さそう

吹き出しの位置は変更できる

Top	Bottom	Leading	Trailing

ポップオーバーの場合は対応するUIに向かって自動で吹き出しが表示される

その他

背景色や角丸の角度を指定できる

タイトル、メッセージなどの構成要素は変えられないが多少は独自のカスタムができたりする
- タイトル、メッセージ、画像の構成順
- バツボタンの位置
- フォントサイズ
- フォントの装飾

機能の柔軟性

最大表示回数を指定できる
ヒントが無効になるまでの時間を制御できる（Beta iOS18以上が必要）
複数のTipを用意している場合、1度に全てを表示するとユーザーにとって効果的な体験ではなくなる可能性があるため表示頻度を設定できる
- 24時間ごとに1つ表示
- 1時間ごとに1つ表示
- 1週間ごとに1つ表示
- 1ヶ月ごとに1つ表示
- すぐに全て表示
- 特定のTipのみ上記の条件を無視するというオプションもある
デフォルトで一度表示したら二度と表示されないようになっている
表示するためのルールを設定できる
- パラメーターベースのルール
  - 2値で表現できるもの
  - （例）ログインしているか否か
- イベントベースのルール
  - より詳細にヒントを提供するケースを絞りたい
  - （例）プロフィール画面に3回以上アクセスした時
- 上記2種類のルールを組み合わせることも可能で、ヒントをリーチしたいユーザーをより絞り込むことができる

推奨されている利用方法

WWDCのセッション内では以下のようなものが効果的なヒントの例として挙げられていました。

反対に以下のようなパターンはTipKitによるヒントの提示として相応しくないと定義していました。

キャンペーンのプロモーション
エラーメッセージ
ユーザーが操作する必要のない機能アップデートメッセージ
機能の説明だが、説明の内容が複雑すぎてその場で覚えるには学習コストが高い内容

まとめ

TipKitはヒントを提示することに特化したフレームワークです。表示するルールを設定することで対象とならないユーザーの体験は損なわず、リーチしたいユーザーにだけ価値を提供することでできそうです。
こういったヒント機能はどのアプリにも要望はありそうですが、標準となるフレームワークを使うことでコードのクリーンさや見た目の統一感を出すことにも繋がり開発者やデザイナーのプロダクト開発体験の向上にもなりそうだと思いました。

参考