はじめに
こんにちは！「料理を通して幸せを」のコンセプトのアプリCook For Youの開発における気付きを共有します。 (ちょっとした気付きと修正なので短めの記事です)
私たちは、ユーザーの皆さんに良い体験を届けるため、機能だけでなくサクサク感にもこだわってます。今回は、LINEミニアプリ（LIFF）とSupabaseを組み合わせた構成特有の「初期ロードの壁」に対し、ゲーム演出からヒントを得て解決した事例をご紹介します。
課題：LINEミニアプリ×Supabaseの「初期ロードの壁」
Cook For Youは、LINE上で動作するミニアプリ（LIFF）として提供しており、バックエンドにはSupabaseを採用しています。このモダンな構成は開発効率が良い反面、ユーザーがアプリを開く際の「初期ロード」において、どうしても避けられない待ち時間が発生します。
具体的には、Userがアプリを開いた瞬間、以下のような処理が裏側で走っています：
- 1次リダイレクト: LIFFの仕様上、まずは必ずRoot Pathへ遷移します (図１)。
- Next.js Middleware: ここでサーバーサイドでの認証チェックやリダイレクト判定が走ります。
- LINE認証 & アプリ初期化: クライアント側でLIFF SDKの初期化と認証が行われます。
-
Supabase認証連携: 取得したLINEトークンを使ってSupabaseへログインし、セッションを確立します。
この結果、数秒の待ち時間が発生してしまいます。
せっかく「料理を作ろう！」とアプリを開いてくれたのに、最初に目にするのが無機質なグルグル（ローディングスピナー）だと、「重いな…」というネガティブな印象を与えかねません。
(https://developers.line.biz/ja/docs/liff/opening-liff-app/#setting-second-redirectより引用)
解決策：「バイオハザードの扉」に学ぶ、待ち時間のエンタメ化
「技術的に時間を短縮する限界があるなら、その時間を楽しんでもらえばいいのでは？」
そこでヒントにしたのが、名作ゲーム『バイオハザード』シリーズの「扉が開く演出」です。あの演出は、元々はデータロードの時間を隠すための苦肉の策だったと言われていますが、プレイヤーにとっては「この先に何が待っているんだろう？」という恐怖と期待を高める重要な演出になっていました。
私たちもこれに倣い、「待たされている時間」を「これから料理の世界が始まるワクワクする時間」に変えることにしました。
実装：Framer Motionで「没入感」を演出
具体的には、単純なローディングスピナーを廃止し、以下のようなアニメーションを実装しました。
- 出現: アプリのアイコンがフワッと現れる。
- 溜め: 認証処理が進む間、アイコンが鎮座し、ブランドを印象付ける（あえて最低表示時間を設け、一瞬で消えないようにする）。
- 退場（ここが重要！）: 準備が整うと、アイコンが**画面いっぱいにズーム拡大しながらフェードアウト（Blur）**し、そのままホーム画面へと「飛び込む」ように遷移する。
技術的には、Next.jsとframer-motionを使用しています。
// 実際のコードイメージ（概要）
<AnimatePresence>
{!shouldExit && (
<motion.div
initial={{ scale: 0.5, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{
scale: 5, // 大胆にズームイン！
opacity: 0,
filter: "blur(10px)", // 疾走感を出すブラー
transition: { duration: 0.5, ease: "easeInOut" },
}}
>
<img src="/icon.png" alt="Cook For You" />
</motion.div>
)}
</AnimatePresence>
この「ズームして中に入っていく」動きにより、「アプリの外側」から「Cook For Youの世界」へ没入する感覚を表現しました。
結果：ネガティブからポジティブへ
この変更により、アプリ起動時の実際の時間は変わりませんが、ユーザーの (少なくても私の)受ける印象は大きく変わりました。
- Before: 「またロードか…早く終わらないかな」
- After: 「お、始まるぞ！（ワクワク）」
単なる待ち時間が、アプリへの期待感を高める「プロローグ」へと変わったのです。
LIFFの仕様を逆手に取った設計
通常、アプリの入り口は複数存在しがちですが、LIFFアプリは仕様上、最初に必ず設定された1次リダイレクトURL（今回はRoot Path）を経由します。
これを一見「手間」に感じるかもしれませんが、逆に捉えれば**「Root Path (/) にアニメーションを実装するだけで、どの画面から開いても必ず統一されたオープニング演出を提供できる」**ということでもあります。
結果として、個別のページごとに複雑なローディング処理を書くことなく、アプリ全体のUXを底上げすることができました。
まとめ
パフォーマンスチューニングでロード時間を削ることはもちろん重要です。しかし、どうしても削れない時間があるなら、そこを**「UXの表現の場」**として捉え直すことで、ピンチをチャンスに変えることができます。
Cook For Youでは、これからも「ユーザーの感情」を第一に考えた開発を続けていきます。
ぜひ、新しくなった起動アニメーションを体験してみてください！
体験はこちらから
私が開発しているCook For Youは、LINE BotとLIFF Webアプリで使った料理をとおして、幸せをコンセプトに作られたアプリです。
一度以下のボタンまたはQRコードから友達追加していただき、Lineを通したアプリを体験してみてください。
