シルスプのブログ
わたしのペースで、心地よい毎日をつくっていく
UIアウトプット

Daily UI #077:電子書籍アプリのサンクスページ|完了画面で読書を習慣化する設計

Daily UI #077:電子書籍アプリのサンクスページ|完了画面で読書を習慣化する設計 UIイメージ

「ダウンロード完了しました」──そう表示されたら、あなたはどうしますか?

すぐに画面を閉じる?それとも、そのまま読み始める?

実は、ダウンロード完了直後は、ユーザーのモチベーションが最も高い「ゴールデンタイム」です。この瞬間をどう設計するかで、アプリの継続率は大きく変わります。

Daily UI #077では、無料電子書籍をダウンロードしたユーザーに向けた、温かみのあるサンクスページを制作しました。完了画面を「手続きの終わり」ではなく、「読書習慣の始まり」に変える設計です。

多くのアプリでは、ダウンロード完了後に以下のような問題が起きています:

  • ダウンロードしたまま読まずに放置(アクティベーション率の低下)
  • 次のアクションが分からず離脱(エンゲージメント率の低下)
  • 無料だからという理由で価値を感じない(ブランド体験の希薄化)

サンクスページは、これらの課題を解決する最後のチャンスなのです。

ダウンロード直後は「ゴールデンタイム」

ユーザーが無料書籍をダウンロードした直後は、そのコンテンツに対する期待値が最大化している「ゴールデンタイム」です。この瞬間に:

  • すぐに読み始めてもらう
  • ライブラリに保存して習慣化の第一歩とする
  • アプリへの好感度を高める

これらを実現できれば、継続率は大きく向上します。

1. コンセプト設計:完了を「喜び」に変える

1-1. ターゲットとユーザー体験の定義

  • ターゲット:
    日常の隙間時間に読書を楽しみたい、あるいは新しい知識を求めているユーザー。

  • 利用シーン: スマホアプリで気になる無料書籍を見つけ、ダウンロードボタンを押した直後。

1-2. デザインの指針:「読書のある暮らし」の提示

単に「完了しました」と事務的に伝えるのではなく、
「この本を読むことで得られる心地よい時間」を視覚的に
提示することを最優先しました。
ダウンロードというデジタルな作業の先に、アナログで豊かな読書体験が待っていることを予感させる設計です。

無料書籍アプリ特有の課題

無料コンテンツは、有料コンテンツに比べて以下の傾向があります:

  • ダウンロードしても読まれない(コミットメントの低さ)
  • 価値を感じてもらいにくい(無料=価値が低いという誤解)
  • アプリへの愛着が生まれにくい(ブランドロイヤルティの低さ)

だからこそ、サンクスページで「読書の価値」を視覚的に提示することが重要なのです。

2. ビジュアルデザインの解剖:共感と信頼の構築

画面をご覧ください。完成した画面をもとに、デザインの意図を解説していきます。

DailyUI #077_Thank You (Page or Message)

2-1. 理想のシチュエーションを描く

画面上部には、窓辺で猫と一緒に読書を楽しむ女性のイラストを配置しました。

  • デザイン意図:

    具体的で温かみのあるイラストは、文字情報よりも早くユーザーの脳に届きます。
    「自分もこんなふうにリラックスして読もう」という自己投影を
    促し、読書へのモチベーションを高めます。

    窓辺、猫、リラックスした姿勢──
    これらの要素は、「読書のある暮らし」という理想的なライフスタイルを象徴しています。

  • トーンの統一:
    背景の柔らかなペールピンクとオレンジのアクセントカラーは、温かい達成感を表現しています。
    この配色は、ユーザーに安心感と活力の両方を与えることを意図しています。

2-2. メッセージ設計:感謝と利便性の両立

  • メインコピー:感謝の明示:

    画面中央のオレンジ色の文字をご覧ください。
    「ダウンロードが完了しました ありがとうございます」というストレートな感謝を、
    オレンジ色の大きなフォントで配置しました。

    多くのサービスは「完了しました」だけで終わりますが、
    「ありがとうございます」という感謝の言葉を添えることで、
    ユーザーとの心理的な距離を縮めます。

  • サブコピー:利便性の再認識:

    「おうちでも、外出先でもすぐ読めます」と付け加えることで、
    オフライン環境でも利用可能という無料書籍アプリの利便性を再認識させています。

    この一文が、ユーザーに「いつでもどこでも読める」という自由と安心感を与えます。

3. UX・情報設計:熱量を逃がさない導線作り

この画面の最重要ミッションは、ダウンロードしただけで満足させず、実際に「読み始めてもらう」ことです。

3-1. 優先順位に基づいた2つのCTA(Call to Action)

ユーザーの状態に合わせて、2つの異なるアクションを用意しました。
画面下部をご覧ください。

  1. プライマリCTA(今すぐ無料で読む):

    最も目立つオレンジ色のボタンを配置。ダウンロード直後の高いモチベーションを逃さず、今すぐ中身を確認したいという欲求に応えます。

    「無料で」という言葉を入れることで、心理的なハードルをさらに下げています。

  2. セカンダリ導線:「あとで読む」「マイライブラリを見る」:

    「今は忙しいけれど、忘れないように確保しておきたい」というユーザーのために、ライブラリへの導線を下部に配置しました。

    テキストリンクに下線を引くことで、控えめながらも明確なクリックポイントとして認識させています。
    矢印(↓)を添えることで、視線を自然に誘導します。

3-2. 垂直方向の視線誘導

画面全体の構成は、以下のような流れるような垂直配置を採用しています:

イラスト(窓辺で読書する女性)

メッセージ(ダウンロード完了の感謝)

メインボタン(今すぐ無料で読む)

サブ導線(あとで読む/マイライブラリ)

この配置は、スマホ操作において最も自然な視線移動に沿っており、認知負荷を最小限に抑えています。

4. 検索エンジンとAIに評価されるサンクスページ設計

現代のUI/UXにおいて、サンクスページの質は、アプリの継続率(リテンション率)に直結します。

  • 目的の完結と次の提案:

    優れたサンクスページは、ユーザーが目的(ダウンロード)を達成した後、
    迷わずに次のステップへ進めるよう設計されています。

    今回の「今すぐ読む」か「ライブラリで保管する」かという明確な二択は、ユーザーの迷いを排除し、
    アプリ内での滞在時間を良質なものに変えます。

  • 情緒的価値の言語化:

    「おうちでも、外出先でも」といった具体的な利用シーンの記述は、
    ユーザーに「いつでも読める」という安心感を与えます。

    このような具体的な言葉は、ユーザーが自分の生活の中で本を読むシーンを想像しやすくし、
    実際の行動へとつなげる役割を果たします。

5. ユーザビリティとアクセシビリティの検証

  • 色のコントラスト:
    オレンジのボタンに白文字の「今すぐ無料で読む」は、視認性が高く、
    屋外などの明るい場所でも押し間違えを防ぎます。
    WCAG基準のコントラスト比を満たしています。

  • 親指の操作性(Thumb Zone):
    下半分に操作要素を集中させることで、片手操作でもスムーズに次のアクションへ移行できるよう配慮しました。
    特に通勤中などの片手操作が多い読書アプリでは重要な設計です。

  • 視線の自然な流れ:
    上から下へ、イラスト→メッセージ→ボタンという自然な視線移動に沿った配置により、
    迷わず次のアクションを選択できます。

6. まとめ:サンクスページは「最高の接客」の場である

Daily UI #077「Thank You」の制作を通じて再確認したのは、サンクスページは手続きの終了地点ではなく、
ユーザーの新しい習慣が始まる出発点であるということです。

今回のデザインで重視した3つのポイント

  1. 読後体験を予感させる情緒的なイラスト
    窓辺で猫と一緒に読書する──
    理想のシチュエーションを提示し、自己投影を促す

  2. ユーザーの状況に寄り添った2択の導線設計
    「今すぐ読む」か「あとで読む」か、明確な選択肢を提供し、迷いを排除

  3. 安心感と活力を与えるメッセージとカラー

    温かみのあるペールピンク×オレンジで達成感を演出し、次の行動を後押し

    無料書籍という「気軽な体験」を、サンクスページの丁寧なデザインによって「価値ある習慣」へと変えていく。
    それがUIデザイナーとしての付加価値だと考えています。


次のステップ:さらなるパーソナライズに向けて

このデザインをさらに進化させるなら、以下のような施策を検討したいと考えています。

  • レコメンド機能:
    画面下部に「この本を読んだ人へのおすすめ」を表示し、さらなる読書欲を刺激。
    ダウンロード直後の高いモチベーションを次の本へとつなげます。

  • SNSシェアボタン:
    「この本を読み始めます!」とシェアできる機能で、
    コミュニティへの拡散とユーザーのコミットメントを促進。
    公言することで読了率も向上します。

  • 読書リマインダー:
    「あとで読む」を選んだユーザーに対し、指定した時間に通知を送る設定を追加。
    ダウンロードしたまま忘れられることを防ぎます。

  • 読書進捗の可視化:
    「あと○ページ」「読了まで約○分」など、読書の進捗を示すことで、最後まで読み切るモチベーションを維持します。

皆さんは、何かを完了した瞬間にどんな言葉をかけられたら、そのサービスをもっと好きになりますか?
ぜひコメントで意見を聞かせてください!