第5話：“なんとなく動く”を卒業するためにやったこと【実装編】」

こんにちは、ラヲウです。

「とりあえず動く画面」はできた。でも、まだ“本当に使える”とは言えません。
実際にユーザーが触って、使いやすくて、目的をちゃんと果たせるアプリにするには、もうひと工夫が必要です。

今回は、Firebase Studioでモックから“実用レベル”に引き上げるためにやったことを紹介します。

✅ ユーザーが「何をするか」を整理して画面を用意

まずは「回したガチャを記録する」「アイテムの詳細を見る」「交換を提案する」など、ユーザーが何をしたいのかを整理。それに合わせて、必要な画面を準備しました。

この段階では、まだデータベースには繋いでいません。
目的ごとに画面の流れが見えていればOK。まずは画面の見た目と動線づくりです。

Firebase Studioの良いところは、AIとのチャットだけでもサクサク画面を組み立てられる点。
迷ったら、既存アプリを参考にしつつ、できるだけシンプルで使いやすいUIを目指しました。

✅ 仮データで動作確認（Firestore接続前）

Firebase Studioでは、ブラウザのキャッシュを使って一時的な入力データを保持できます。
これがかなり便利で、

• 入力 → 一覧に反映

• 編集 → 保存

• 削除 → 表示更新

といった一連の流れを実際のDBなしで確認できるんです。

このおかげで、Firestoreにつなぐ前に画面の完成度を高められました。

✅ 画面遷移や導線をチェック（AIも活用）

「この画面からどこへ遷移する？」「“戻る”や“次へ”は自然か？」といった導線まわりも、ローカルで実際に触りながらチェックしました。

どうしても迷うときは、firebaseのAIまたはChatGPTに相談。

みたいな相談にも、かなり的確なアドバイスを返してくれます。

✅ 見やすくて使いやすいUIに調整

「動く」だけではなく、「使いやすい」ことが大事。以下の点を重点的に見直しました：

• 背景と文字の色のコントラスト

• ボタンのサイズや押しやすさ（特にスマホ）

• 情報の整理（ごちゃごちゃしていないか？）

• フォントの読みやすさ

✅ 見た目も「今っぽく」

個人開発アプリって、どうしても「2000年代っぽいUI」になりがち…。
なので、最近のデザイン傾向を意識してみました。

• スマホとPCで見た目が切り替わるレスポンシブ対応

• アイテム表示はカード風にしてメリハリを

• 余白をしっかり取って、情報を詰め込みすぎない

Firebase Studioは画面構成の変更も柔軟なので、
「やっぱり一覧にしよう」「ここ、カードにしたい」といった調整も後からラクにできます。

🔜 次回予告：Firestoreとつなぐ

次回は、いよいよFirestoreと接続して、リアルなデータを扱うフェーズへ。

ユーザーが入力したデータが保存され、他の画面にも反映される。
そんな“命が通う瞬間”をお届けします！