Rork アプリの『空っぽの画面』を整える — 初回・データ削除後・通信エラーの3つの空状態

Rork で作ったアプリを自分のスマホに入れて最初に開いたとき、リストが一行も並んでいない真っ白な画面に少し戸惑った——という経験はないでしょうか。説明文（プロンプト）から生成されるアプリは、「データが入っている状態」の画面は驚くほど綺麗に仕上がります。一方で、まだ何もない状態の画面は、AI が指示されない限りほとんど作り込んでくれません。

この「何もない画面」は専門的にはエンプティステート（空状態）と呼ばれます。地味ですが、ユーザーがアプリを初めて開いた瞬間に必ず通る画面でもあります。ここが空白のままだと、せっかくのアプリが「壊れているのかな」と誤解され、そのまま離脱につながります。私自身、個人開発でいくつものアプリを App Store と Google Play に出してきましたが、初日の離脱がいちばん減るのは、実はこの空っぽの画面を丁寧に整えたときでした。

空状態は1種類ではない、という前提

エンプティステートを「データがないときの画面」とひとくくりにすると、設計を見誤ります。同じ空白でも、ユーザーが置かれている状況は3つに分かれていて、それぞれ伝えるべきメッセージが違うからです。

ひとつめは初回の空状態です。アプリをインストールして初めて開いた、まだ何も登録していない状態。ここでユーザーが知りたいのは「自分は次に何をすればいいのか」です。

ふたつめはデータを削除しきった後の空状態です。タスクを全部完了した、保存したアイテムを全部消した、という状況。これは初回とは気分がまったく違います。ユーザーは使い方を分かっているので、操作の説明は不要で、「やりきった」という達成感や、次の小さな一歩を添えるほうが合います。

みっつめは通信エラーや読み込み失敗による空状態です。本来はデータがあるのに、取得に失敗して空に見えている状態。ここで「まだ何もありません」と表示してしまうと、ユーザーは自分のデータが消えたと勘違いします。この場合は「うまく読み込めませんでした。もう一度お試しください」という、再試行を促すメッセージが正解です。

この3つを分けて考えるだけで、空っぽの画面の印象は大きく変わります。

Rork に空状態を作ってもらうためのプロンプトの書き方

Rork は説明文に書かれていないものは基本的に作りません。逆に言えば、空状態を明示的に依頼すれば、ちゃんと画面を用意してくれます。生成のときに次のような一文を添えるのが効果的です。

リスト画面には、項目が0件のときに表示する初回向けの空状態を作ってください。
中央にやわらかいイラストかアイコン、「まだ◯◯がありません」という見出し、
一行の補足説明、そして「最初の◯◯を追加」というボタンを置いてください。

ポイントは、空状態に「次の行動を促すボタン」を必ず含めるよう指示することです。空状態は単なるお知らせではなく、ユーザーを最初の操作へ導く入り口だからです。すでにアプリを生成済みでも、Rork のチャットに「タスクが0件のときの画面が寂しいので、空状態を追加してください」と後から頼めば、その画面だけを追加してくれます。

通信エラー用については、初回とは別物だと明確に伝えます。

データの取得に失敗したときは、初回の空状態とは別の画面を出してください。
「読み込めませんでした」という見出しと、「再読み込み」ボタンを表示し、
タップすると再取得を試みるようにしてください。

コードで条件分岐を確認しておく

Rork が生成したコードを少し覗くと、空状態がどう制御されているかが分かります。React Native では、おおむね次のような分岐になっています。完璧に理解する必要はありませんが、「どの状態のときにどの画面が出るか」を読めるようになると、修正を依頼するときの言葉が具体的になります。

function ItemList({ items, isLoading, hasError, onRetry, onAdd }) {
  if (isLoading) {
    return <LoadingSpinner />;
  }
  if (hasError) {
    // 通信エラー: データが消えたわけではないと伝える
    return (
      <ErrorState
        title="読み込めませんでした"
        actionLabel="再読み込み"
        onAction={onRetry}
      />
    );
  }
  if (items.length === 0) {
    // 初回・削除後: 次の一歩を示す
    return (
      <EmptyState
        title="まだ項目がありません"
        message="右下のボタンから最初の項目を追加できます"
        actionLabel="項目を追加"
        onAction={onAdd}
      />
    );
  }
  return <List data={items} />;
}

この分岐で大事なのは、hasError の判定を items.length === 0 より先に置くことです。順番が逆だと、通信に失敗して配列が空になったときにも「まだ項目がありません」という初回向けの文言が出てしまい、ユーザーがデータの消失を疑う原因になります。生成されたコードがこの順番になっているか、一度だけ確認しておくと安心です。

3つの状態を実際に目で確かめる

設計したつもりでも、実機で見るまでは仕上がりが分かりません。3つの空状態は、それぞれ意図的に作り出して確認しておきます。初回の空状態は、アプリを入れ直すか、データをすべて削除すれば再現できます。削除後の空状態は、登録した項目を一つずつ消していけば確認できます。

少し手間がかかるのが通信エラーの空状態です。これは端末を機内モードにしてからデータ取得を伴う画面を開くと、手軽に再現できます。機内モードのまま「再読み込み」を押し、エラー画面のまま固まらないか、機内モードを解除して再度押したときにきちんとデータが戻るか——この往復を一度だけ試しておくと、本番でユーザーが圏外に入ったときの挙動を事前に確認できます。私自身、AdMob の広告を載せたアプリでは、通信が不安定なときの画面崩れがレビュー評価に直結すると感じてきたので、ここは必ず通すようにしています。

文言と余白で「丁寧さ」が伝わる

空状態は表示する情報が少ないぶん、一語一語が目立ちます。「データなし」とだけ書かれた画面と、「まだ記録がありません。今日のぶんから始めてみましょう」と書かれた画面では、受け取る印象がまるで違います。前者は機械的で、後者には書き手の体温が残ります。アプリ全体の語り口に合わせて、空状態の文言もそろえておきたいところです。

イラストやアイコンを中央に置き、上下にゆとりのある余白をとると、空白が「未完成」ではなく「意図された静けさ」に見えてきます。ここはコストをかけにくい部分ですが、Rork なら「空状態にやさしいイラストを足してください」と頼むだけで雰囲気が整います。画面設計全体の考え方はRork アプリの UX デザインパターンでも触れていますので、あわせて読んでいただけると流れがつかみやすいかもしれません。

まず初回の空状態から手を入れる

3つの状態を一度に完璧にしようとすると手が止まります。最初に整えるべきは、いちばん多くのユーザーが必ず通る初回の空状態です。ここに「次の一歩」を示すボタンが一つあるだけで、初日の離脱は目に見えて変わります。今お使いのアプリを開いて、データを空にした画面を一度確認してみてください。そこが寂しいままなら、Rork に空状態の追加を頼むところから始めるのがおすすめです。Rork そのものの全体像を確認したい方はRork — AI でモバイルアプリを作るプラットフォームの概要もどうぞ。

お読みいただきありがとうございました。小さな画面ほど、ユーザーへの気づかいが伝わる場所だと感じています。