マインドフルネス オンボーディングアプリのデザイン

Lull のオンボーディングフロー

Lull のオンボーディングフローは、OpenDesign が制作した公式の OpenDesign サンプルです。元の説明では、温かみのあるキャンバス、セリフ体の見出し、単一のアクセントという一貫したトーンで3画面を構成しています。完成したアカウントや瞑想サービスではなく、モバイルアプリの画面シーケンスとして提示されています。

最初の画面は「Quiet beats noise.」で始まります。補足コピーでは練習を「Twelve minutes a day」「a practice that fits in a coffee break」と表現し、「streaks」や「badges」をはっきり否定します。この組み合わせにより、アカウント作成を求める前に製品の約束が理解できるようになっています。

ビジュアルも同じ抑制を支えています。1画面目は温かみのある円形の構図、2画面目は線画の練習カードとオレンジのチェック円が主役です。どちらもセリフ体の見出しと短い本文の上にイラスト領域を置いています。ゆとりのある余白でメッセージが伝わりやすくなる一方、長いコピーや追加コントロールを置く余地は少なくなります。

落ち着いた第一印象

最初の画面では、大きなオレンジ系の円、小さな淡い円、低く湾曲した下部の形が、暗色のセリフ体見出しと組み合わされています。このイラストはデータ表示ではなく、文章がルーティンを説明する前に雰囲気をつくる役割です。このパターンを応用するなら、画像と文章のバランスを保つか、最初のビューポートが密になることを受け入れる必要があります。

このフローの活用シーン

このシーケンスは、サインインの選択肢を出す前に毎日の練習を説明したいマインドフルネスアプリに向いています。順序は意図的です。まず穏やかなベネフィットの提示、次に適応の説明があり、その後にようやくアカウント設定画面が来ます。これにより、認証コントロールが製品の最初のメッセージになってしまう可能性が下がります。

コピーは、オンボーディング特有の緊張関係にも向き合っています。根拠のない成果の約束をせずに、ルーティンを続けられそうだと感じさせることです。「Shorter on busy days, deeper on quiet ones」は、意図する適応を平易に説明しています。柔軟性は伝わりますが、このデザインはセッションがどう変わるか、またその挙動が実装されているかを示してはいません。

このフローは、インターフェースのスタイリングだけでなく、コンテンツ階層を学ぶのにも有用です。最初の2画面は右上に「Skip」、下部に「Continue」を置き、最後の画面では補助アクションが「Help」に変わります。これらのラベルは、進行と支援を区別していますが、キャプチャからは各コントロールが実行時に何をするかは分かりません。

静かな導入からアカウント設定へ

3つのスマートフォン画面は、繰り返し構造を持つコンパクトな物語を形づくります。最初の2画面は、上部のステータス領域、「Skip」コントロール、イラスト領域、見出し、本文、進行インジケーター、下部の「Continue」ボタンが共通です。反復によって導入状態間の移行が分かりやすくなり、同時に3画面目の異なるレイアウトが意味のある状態変化として感じられます。

1画面目では、アクティブな進行マークは左のオレンジのピルです。2画面目では中央に移ります。3画面目では右のオレンジのピルを使い、イラストと下部アクションを3つのアカウント選択肢に置き換えます。見える印は連続の中での位置を伝え、変わるコンテンツはオンボーディングが説明からコミットメントへ移ったことを伝えます。

最後の画面は「Make a place for it.」で始まり、「Save your sessions across devices. We don’t email, we don’t share.」という一文が続きます。その後、枠線付きの大きな3つの行「Continue with Apple」「Continue with Google」「Continue with email」が並びます。行の扱いが揃っているため比較しやすく、円形の異なるアイコンが各プロバイダーを素早く見分ける手がかりになります。

下部の同意文では、「Terms」と「Privacy Policy」がアクセントカラーで示されます。元のソースではこれらのリンクはプレースホルダーとされており、この画面は完成した遷移ではなく、法的文言を置く想定位置を示しています。選択肢の下に法的文言を置くことには、メインの判断領域から離れる一方で、補足対象のコントロールから視覚的に離れるというトレードオフもあります。

繰り返される構造と変わる状態

1画面目と2画面目はほぼ並行した状態ですが、イラストは異なります。1つ目は温かみのある円形の構図、2つ目は短い線、オレンジのコントロール、チェックマークを備えた枠付きパネルです。これにより視覚的な密度を保ちつつ、それぞれの約束に固有のシンボルを与えています。3画面目ではそのイラスト層を完全に取り除き、認証の選択肢と同意文のための余地をつくっています。

見えるデザインと機能の範囲

キャプチャが示すのは、3つの異なるスマートフォン状態、具体的なコピー、コントロール、プロバイダーラベル、進行マーク、法的文言の配置を備えた、オンボーディングの視覚的コンセプトです。認証済みアカウント、デバイス間のセッション保存、適応型セッションのロジック、Terms や Privacy への遷移の完成、動作するオンボーディングフローは示していません。セッションの保存や情報を共有しないことに関する文言は、デザイン内に表示された製品コピーであり、検証済みのサービス動作ではありません。

新たに実装する場合は、独自の認証、セッション保存、適応型練習、同意の挙動が必要です。このソースでは、Skip と Help はテキストの span、Continue とアカウント行はスタイルを付けた div、Terms と Privacy Policy は遷移先のないアンカーです。このシーケンスはそれらの判断を描いているだけで、操作可能にはしていません。

この例から学べること

最も応用しやすい学びは、メッセージの順序とコミットメントの関係です。練習を説明し、その柔軟性を説明し、それからアカウントを求めます。Lull 固有のコピー、イラスト、プライバシー文言はこの例のものです。新しいプロダクトでは、それらを確立された事実としてそのまま写すのではなく、独自の主張、適応ルール、同意の遷移先が必要です。