lumenHeroです。
現在開発中の、6節のショートショートを投稿できるSNS「六節噺（仮称）」。 今回は、ユーザーが自分の過去の作品を振り返ったり、通知を確認したりするための「ユーザーホーム画面」の設計と実装について共有します。
ホーム画面に必要なこと
ユーザーホーム画面は、SNSにおいて「ユーザーの家」とも言える重要な場所です。 実装にあたり、既存のSNSやアプリにどのような機能があるかをリストアップし、このサービスに必要な機能を洗い出してみました。
一般的なSNSで必要な機能
A. アイデンティティ（誰なのか）
- アイコン/表示名/ID: その人を表す基本情報。
- 自己紹介（Bio）: 人となりや作風の説明。
B. 実績・ステータス（活動の証）
- フォロー/フォロワー数: 社会的つながりの可視化。
- 投稿数: 活動量の目安。
- リアクション数: いいねや保存された数。
C. コンテンツ管理（作品・収集）
- 自分の投稿一覧: 作品のアーカイブ。
- 保存した投稿: 「本棚」や「ブックマーク」機能。
- 下書き: 未公開作品の管理。
D. 設定・編集（コントロール）
- プロフィールの編集: 名前やアイコンの変更。
- 設定: 通知、プライバシー、アカウント削除など。
羅列してみると、非常に多くの機能が必要であることがわかります。 しかし、今回のサービスでは「気負わず、気が向いたときに投稿してほしい」「作品との一期一会を楽しんでほしい」という思いがあります。
そこで、「フォロー・フォロワー数」や「メンション機能」はあえて実装しないことにしました。数値や人間関係に疲れてしまうのを防ぐためです。その代わり、気に入った作品を自分の本棚に集める「保存機能」を重視します。
これらのうち、必要でかつそれなりに実装が簡単なものから着手していくことにしました。
実装した機能
- アイデンティティ リンクやUID除く
- 実績・ステータス 詠んだ数と累計ログイン日数と総いいね数
- コンテンツ管理 過去の投稿を管理できる(削除のみ)
- 設定・編集 設定ページを用意しそこに飛べるようにした。
DBとUI設計
データの管理には、Firebaseの Cloud Firestore（NoSQL）を使用しています。 users コレクションを作成し、認証データ（Authentication）と紐づけたドキュメントを作成。セキュリティルールを設定し、「本人のみがプロフィールを編集できる」という権限管理を行っています。
firebase cloudstoreのドキュメントとコレクション
Firestoreでは、データは「コレクション（フォルダ）」と「ドキュメント（ファイル）」という単位で管理されます。
- ドキュメント: 1件分のデータ。「名前」「作成日時」などの項目を自由な形式で保存できます。
- コレクション: ドキュメントをまとめる入れ物。
重要なのは、「コレクション → ドキュメント → サブコレクション」という階層構造を作れる点です。 例えば、「ユーザー（User A）」の下に「投稿（Posts）」というサブコレクションをぶら下げることで、ユーザーごとのデータを直感的に整理できます。
また、SNSのようなサービスでは、「特定のユーザーの投稿一覧を取得する」という処理が頻繁に発生します。NoSQLであれば、ユーザーID（UID）を指定してそのコレクションを叩くだけで、その人の投稿データを一括で高速に取得できるため、開発スピードとパフォーマンスの両面でメリットがあります。
UIの参考・インスピレーション
UIをゼロから考えるのは大変なので、優れたデザインのアプリを参考にしました。 個人的にUIが素晴らしいと感じているのは、任天堂のスマートフォンアプリや、HoYoLAB（miHoYoのコミュニティアプリ）です。
以前、Flutterの学習中に任天堂アプリのUIを模写（再現）したことがあるのですが、情報が整理されていて非常に使い勝手が良かったのを覚えています。今回はその経験をベースに、Reactで構築しました。
下部: 投稿一覧（カード形式）。
上部: ユーザー情報、活動記録、設定への導線。
作成したUI
要件をもとに、作成したUIです。
ホーム画面のUI
六節噺のユーザホーム画面です。
全体は、上下で２つに分かれており、上部には、アイコンと名前、その下に、活動実績が表示されています。
任天堂アプリ等の例では設定アイコンなどが並んでいますが、このアプリでは機能がシンプルなため、右上に控えめに配置しています。全体的に余白を取り、落ち着いて言葉と向き合える雰囲気を意識しました。
下側には、これまで投稿した投稿を、共有やいいねなどの機能を載せたカードコンポーネントを配置するようにしました。投稿によっては、高さが異なるので、互い違いに上から詰めていくレイアウトを採用しています。
Masonry（メイソンリー）レイアウトの採用
下部の投稿一覧エリアには、「Masonryレイアウト」を採用しています。 投稿されるテキストの長さ（行数）によってカードの高さが変わるため、単純なグリッドだと隙間ができてしまいます。Masonryレイアウト（石積み）にすることで、高さの違うカードを互い違いに隙間なく、美しく並べることができます。
レイアウト自体は cssでできるはずだったのですが、不安定だったので、投稿を分割して配置するように実装しました。
まとめ
ユーザーホーム画面は、機能が多くなりがちですが、「このSNSでユーザーにどう過ごしてほしいか」という軸（今回は「気負わない」「一期一会」）を持つことで、実装すべき機能を絞り込むことができました。
次は、他のユーザや自身が投稿した話をさらさらと見える”広場”ページの作成に取り掛かろうと思います。
ここまで読んでいただきありがとうございます。
では、次の記事で。 lumenHero
前回 投稿画面設計
【六節噺(仮称)】投稿で文字配置を変えられるようにしました。
言葉が本になるSNS開発記。今回は「投稿画面」のデザインについて。ただ文字を入力するだけでなく、縦書きやポラロイド風など、物語の雰囲気に合わせてレイアウトを選べるUIを実装しました。その制作過程とこだわりを公開。
