クイックアンサー: Appleがシステム全体の色調変更可能なアイコンと強制的なダークモードウィジェットを導入した際、従来のムードトラッカーは、感情を色分けする(怒りは赤、穏やかさは緑など)という主要な視覚ツールを失いました。ViviDiaryでは、アプリのアイコンとiOSウィジェットを再設計し、固定された色ではなく、アルファチャンネル、コントラスト、絵文字のシルエットに依存するようにしました。これにより、ユーザーがホーム画面にどのようなカスタム色調を適用しても、3秒のムード記録が直感的に行えるようになっています。

ムードトラッカー向けのダークモード対応色調変更可能なアイコンデザイン。形状ベースのUIを表示
ムードトラッカー向けのダークモード対応色調変更可能なアイコンデザイン。形状ベースのUIを表示

長年、ムードトラッキング業界は、暗黙の了解としての共通の視覚言語に頼ってきました。緑は「良い」、赤は「悪い」、黄色はその中間といった具合です。人気の「Year in Pixels(ピクセルで見る1年)」グリッドを見ると、本質的には人間の感情を信号機のように見ていることになります。

しかし、オペレーティングシステムがそれらの色を剥ぎ取ってしまったらどうなるでしょうか?

OSレベルのカスタマイズ、特に色調変更可能なアプリアイコンや強制的なモノクロのダークモードウィジェットの導入により、色への依存はUX上の大きな負債となりました。ユーザーがホーム画面を紫色に色調変更した場合、私たちが慎重に選んだ「つらい(赤)」と「最高(緑)」は、どちらも同じ紫色の色合いになってしまいます。インターフェースが崩壊してしまったのです。

ここでは、私たちがどのようにして色分けされたムードを廃止し、代わりに何を構築したのか、そしてなぜ色を剥ぎ取ることが結果としてViviDiaryをより共感的な製品にしたのか、その物語をお話しします。

ムードトラッキングにおける色分けという松葉杖

ViviDiaryを最初に構築したとき、私たちは色が簡単だったため、それに頼りました。それは認知的な近道です。巨大な緑色のボタンが目の前にあれば、ラベルを読む必要さえありません。

しかし、感情を色分けすることには、常に隠れた重荷がありました。

第一に、それは本質的に批判的です。目立つ赤色で「つらい」日を塗りつぶすことは、暗黙のうちに失敗を告げ、かすかな罪悪感を引き起こします。ViviDiaryは、厳しいコーチとしてではなく、あなたのそばに寄り添うように設計されています。私たちは、プレッシャーを与えるようなストリーク(連続記録)、達成率、あるいは「今日は記録がありません」といった罪悪感を煽る通知を意図的に避けています。それにもかかわらず、私たちのカラーパレットは、意図せずしてまさにそのプレッシャーを導入してしまっていたのです。

第二に、モジュール性とうまく適合しません。私たちは5段階の名前ベースのムードシステム(最高、良い、普通、低い、つらい)を提供しています。しかし、ユーザーが22の手動絵文字モジュールや4のHealthKit自動カテゴリを切り替えることも可能にしています。標準の5個の絵文字スケール全体で意味のある色を維持しつつ、カスタムユーザーモジュールを統合しようとすると、インターフェースは混沌とした虹色になってしまいました。

Appleが色調変更可能なアイコンを発表したとき、私たちは色が捨てるべき松葉杖であることに気づきました。

iOS 27の色調変更可能なアイコンのためのデザイン

モノクロでユーザーが色調を変更できる環境で生き残るために、私たちは視覚的なアーキテクチャを根本から考え直さなければなりませんでした。もはや色相に頼ることはできず、形状、コントラスト、タイポグラフィに頼る必要があったのです。

アルファチャンネルへのシフト

React NativeとExpoの環境において、私たちはアセットパイプラインを刷新しました。iOS 27アプリのアイコンデザインのために、フラットで色付きのPNGから脱却しました。代わりに、アルファマスクを使用してコアとなるアイコンを再構築しました。

OSが色調を適用するとき、基本的にはアルファチャンネル(透明度)を見て、ユーザーが選択した色をどこに適用し、どこで背景を黒や濃い灰色に落とすかを決定します。もしアイコンが白い背景に黄色いスマイリーフェイスに依存している場合、青いOSの色調を適用すると、全体が濁った判読不能な青い四角形になってしまいます。

私たちは5段階のムードインジケーターを、シルエットと表情だけで即座に認識できるように再設計しました。「最高」のムードは、緑色であることではなく、笑顔の特定の曲線と開いた目で定義されます。「つらい」ムードは、赤色であることではなく、重い眉のラインと下向きの曲線で定義されます。

絵文字記録UIの進化

ViviDiaryはモジュール式であるため(新規ユーザーは「ムード」のみがONで、他はすべてOFFの状態から始まります)、絵文字記録UIはユーザーがアプリと対話する主要な方法です。

私たちは、高コントラストで形状を優先するデザインシステムに移行しました。ユーザーがアプリ(またはウィジェット)を開くと、アクティブな状態は色の切り替えではなく、不透明度、スケール、そしてかすかな触覚フィードバックによって示されるようになりました。これは、今後予定されているGenmojiムード記録機能と完璧に連携し、ユーザーが生成したカスタム形状が周囲のUIテーマに関係なく判読可能であることを保証します。

色ではなく高コントラストの形状を表示する絵文字記録UI
色ではなく高コントラストの形状を表示する絵文字記録UI

私たちが拒否したもの:「強制的なオリジナル」アプローチ

形状優先の再設計を決定する前に、私たちは他の2つの道を検討しました。そして、両方とも拒否しました。

代替案1:オリジナルの色を強制する AppleのAPIは、技術的には開発者が特定のコンテキストでウィジェットの色調変更をオプトアウトし、ユーザーのホーム画面設定に関係なくウィジェットをオリジナルの色でレンダリングさせることを許可しています。

私たちはこれを内部でテストしました。結果はひどいものでした。ユーザーが洗練されたダークモードのモノクロホーム画面をキュレーションするのに時間を費やしているのに、その真ん中に明るくカラフルなウィジェットを強制的に配置するのは傲慢に感じられます。それは「私たちのブランドはあなたの好みよりも重要だ」と叫んでいるようなものです。私たちはこのアイデアを1週間以内に却下しました。

代替案2:インタラクティブなウィジェットを廃止する 私たちは、ムード記録をウィジェットから完全に削除し、ウィジェットを純粋な観察ツール(毎週のミラーパターンを表示するなど)に格下げすることも検討しました。以前、ウィジェットが肥大化しすぎた際に複雑なウィジェットを廃止した経験もありました。

しかし、私たちの核心的な約束は、30秒未満のチェックイン時間です。ムードを記録するたびにアプリを開くことをユーザーに強制するのは摩擦を増やします。ウィジェットをインタラクティブにする必要があり、それはつまり、逃げるのではなくデザインの問題を解決しなければならないことを意味していました。

「3秒記録」のためのダークモードウィジェットの適応

真のムードトラッカー向けのダークモード対応色調変更可能なアイコンデザインを実現するために、私たちはウィジェットの体験に重点を置きました。

ユーザーがウィジェットと対話するとき、彼らは通常急いでいます。「良い」をタップし、「家族」の絵文字を選択して、次に進みたいのです。

  1. ベースレイヤー: バッテリーを節約し、目の疲れを軽減するために、OLEDスクリーン向けの深い純粋な黒(#000000)。
  2. コンテナレイヤー: 関連するモジュール(ルーチン対ToDoなど)をグループ化するための、半透明のグレー/色調変更された表面。
  3. アクションレイヤー: インタラクティブな要素のための、高コントラストの白または明るく色調変更されたアイコン。

色分けを削除することで、私たちはジェスチャーベースのムード記録の速度を実際に向上させました。ユーザーは競合する色を解析する必要がなくなり、画面上で最もコントラストの高い要素、つまりムードそのものの形状に目が自然と引き寄せられるようになったのです。

クラウド同期、プライバシー、およびウィジェットのアーキテクチャ

メインのアプリインターフェースをバイパスするインタラクティブなウィジェットを構築する場合、データアーキテクチャとプライバシーは重要な議論となります。

ViviDiaryがこのデータをどのように扱うかについて、完全に透明でありたいと考えています。なぜなら、現在ジャーナリングの分野には誤解を招くマーケティングが溢れているからです。私たちは、厳格なデータ最小化と、AI処理前のテキストの非識別化(非識別化)によって、あなたのプライバシーを保護しています。

ViviDiaryにとって、それは誤りです。私たちはコアアーキテクチャに厳格な非識別化を伴うクラウドストレージを使用しており、そうでないふりはしません。

ViviDiaryはSupabaseを使用したクラウドストレージを採用しています。色調変更されたウィジェットでムードをタップすると、そのデータは安全にクラウドに同期されます。私たちのプライバシー第一のアプローチは、データを携帯電話に閉じ込めることではなく、厳格なデータ最小化と非識別化から生まれています。

私たちは、あなたが提供することを選択したものだけを収集します。アプリはモジュール式であるため、ムードモジュールのみをオンにしている場合、同期されるデータポイントはそれだけです。

さらに、AIの使用を選択した場合(これはより深く記録したい日のための純粋にオプションのサポートツールであり、決してコア要件ではありません)、日記のテキストは外部またはAI処理が行われる前に完全に非識別化されます。AIは、あなたの明示的な確認なしに何かを保存したり確定したりすることはありません。私たちは、データが処理される前に匿名化し、堅牢なクラウドセキュリティと厳格なデータ最小化を組み合わせることで、あなたのプライバシーを保護しています。

データ:形状ベースのUXがリテンションに与えた影響

色のようなコアとなる視覚要素を削除するたびに、ユーザーベースを混乱させるリスクがあります。私たちは、形状ベースで色調変更に対応したUIを10,000人のユーザー(無料ティアとプレミアムの月額$2.99の購読者の両方を含む)のコホートに展開し、その影響を測定しました。

結果は私たちを驚かせました。

* 記録速度: 平均チェックイン時間は24秒で安定していました。色の欠如はユーザーの速度を低下させませんでした。
* ウィジェットのエンゲージメント: ウィジェットベースの記録が18%増加しました。ホーム画面にカスタム色調を適用したユーザーは、自分の美学に一致するようになったため、ウィジェットをインストールし続ける可能性が大幅に高まりました。
* 定性的なフィードバック: ユーザーインタビューにおいて、7/10のユーザーが、新しいインターフェースは「より穏やか」で「要求が少ない」と感じたと報告しました。

この最後の点は非常に重要です。赤/緑の信号機システムを削除することで、私たちは意図せずして、より視覚的に適応性の高い体験を作り出しました。

ユーザーは、「つらい」日を記録するとき、それが怒りの赤色で光っていないため、罰を受けているように感じなくなったと語ってくれました。これは、私たちのFocusモジュール(ルーチン+ToDo)の哲学と完全に一致しています。ViviDiaryのルーチンは、単に気づいて維持したいものであり、プレッシャーを与えるようなストリークではなく、穏やかな自己ベストのカウントを維持します。UIから色分けされた失敗状態を削除したことで、アプリ全体にこの温かく、非規範的なトーンが強化されました。

今後の展望

色分けされたムードの廃止はOSのアップデートによる強制的なものでしたが、結果としてより良い製品になりました。それは私たちに、強力なタイポグラフィ、明確なアイコン、そして高いコントラストに頼ることを強いました。

次は、この形状ベースの哲学を毎週のミラー機能にどのように取り入れるかを検討しています。現在、ミラーはデータ関係に依存してパターンを発見するのに役立っています(例:「『読書』をタグ付けすると『良い』と記録することが多い」)。私たちは、カラフルな棒グラフに頼ることなくこれらのパターンを視覚化し、インターフェースを記録体験そのものと同じくらい穏やかで中立に保つ方法を模索しています。

色はデザインにおいて強力なツールです。しかし、時にはそれを削除することが、ユーザーの真の感情を輝かせる最良の方法なのです。