Zenn
👏

初めての個人アプリ開発日記：口コミアプリ【ホーム画面編】

に公開
Firebase
Flutter
個人開発
アプリ開発
口コミ
idea

初めての個人アプリ開発日記：口コミアプリ【ホーム画面編】

最近、「信頼できる人とだけグルメ情報を共有したい」と思うことが増え、
ぐるめもというスマホアプリを個人開発しています。

この記事では、ホーム画面を仕上げるまでの流れ・工夫した点・現状のUI構成についてまとめます。

🏗 ホーム画面で実現したい要素

ホーム画面では、口コミ投稿の閲覧を快適にするため、以下のような要素を実装しています。

投稿の一覧をカテゴリ別にタブ表示：

  • 投稿時に設定したカテゴリごとに一覧表示し、タブで切り替えられるようにしています。

各投稿カードに表示される情報：

  • 店名・コメント
  • カテゴリタグ
  • ☆による評価
  • 投稿者名
  • 投稿日時
  • 写真（無料プラン：1枚、有料プラン：最大4枚）
  • お気に入りボタン（店舗をお気に入り一覧に追加可能）
  • 編集ボタン（投稿者のみ編集可能）
  • 削除ボタン（投稿者のみ削除可能）

⚙ 工夫したポイント

  • 投稿カードの高さが不揃いになるのを防ぐため、コメントの最大行数を制限
  • Firestoreの読み込み速度を考慮して表示件数に制限を設け、今後は広告表示することで追加表示を検討中
  • Firestoreとの通信回数とコストを考慮し、月あたりの投稿数に制限を設ける設計に。有料プランではこの制限を緩和する予定。
  • ニックネーム変更時に過去投稿にも反映されるよう、投稿取得時にユーザーデータも更新

📷 UIイメージ

現時点のホーム画面はこんな感じです。

ホーム画面
画像は開発中のものです。

タブごとの切り替えや投稿カードの見た目にこだわって設計しています。またテーマカラーの切り替えにも対応予定です。

💬 開発していて感じたこと

個人開発ならではの悩みとして、「コスト」と「制限のバランス」をどう取るかに一番頭を悩ませました。
SNS型口コミアプリのため、ユーザーや投稿が増えるほどコストが嵩みやすくなります。 そこをどのように抑えていくのか、どこまでなら制限を入れても問題ないかと考えるのが大変でした。

現時点ではキャッシュを利用してリロードを減らすこと、投稿、閲覧できる数に制限を入れることでコストを抑えています。

UIについても、今後ブラッシュアップしていく予定ですが、まずはStatefulWidgetベースでシンプルに構築しています。

🚧 今後の予定

  • フォロー中ユーザーや自分のみの投稿フィルタ機能の改善
  • 投稿に複数画像を添付可能に（Storage連携強化）
  • UI/UXの改善や、投稿体験の向上に向けた改修も継続して進めていく予定。

次回予告

次回は、【投稿画面編】について紹介する予定です！

おわりに

この記事では『ぐるめも』のホーム画面実装についてまとめました。

Flutter × Firebase でアプリ開発をしている方や、個人開発の進め方に興味がある方にとって、少しでも参考になれば嬉しいです！

引き続きZennで開発日記を連載していきます。フォローやいいねで応援いただけると励みになります！

Discussion