昔の写真に「今日の気持ち」を書き足せるアプリを作っている。重ねる UX とその実装

綴Photo には、 1枚の写真に対して、複数の言葉を後から重ねて書ける機能があります。 3年前の旅行の写真を今見たときの気持ちも、ちゃんと記録に残せます。このコンセプトと、それを支える UX/実装の方針を残しておきたい。

なぜ「重ねる」を作ろうと思ったか

最初は素直に「写真 1 枚 = 言葉 1 つ」で考えていた。 SNS と同じ感覚だ。投稿は基本 1 回、その時の気持ちが添えられます。

でも、大切な写真ってそれだと足りない、と途中で気づいた。

これはどれも「同じ写真への気持ち」だけど、まったく違う情報だ。 1つ目を上書きするのも、別の写真として保存するのも、俺がやりたいことと違っていた。

「同じ写真に、層を重ねていく」。このメタファーが頭の中で固まったとき、機能の形が見えた。

データの形は割とすぐ決まった(写真 1:N 言葉)。詰まったのは UI/UX の方だった。

「同じ写真に複数の言葉が紐付いている」状態を、ユーザーにどう見せるか。

最初に試した案たち。

最終的には C をベースにした。ただし、ただ並べるんじゃなくて、

という形にした。

「重ねる」の方向は、現実のノートだと上に書き足していくものです。だからアプリ上でも、新しいものが上にスタックします。このメタファーが揃うと、ユーザーが説明されなくても操作の意味が分かります。

機能としては作れた。でも、「3年前の写真に今書く」という体験そのものを成立させるには、 3年前の写真にちゃんと出会わせる必要があります。

書くインターフェースだけ用意しても、ユーザーが昔の写真を掘りに行かなければ何も起きません。

ここで前に書いた「Pass(また今度)」と「再浮上」の設計が効いてきます。

つまり、「重ねる」機能は単独では成立しません。 Pass・再浮上・スキャン・詳細画面の全部が組み合わさって、やっと「3年前の写真に今書く」体験になります。

このことに気づいたとき、「アプリの設計って、機能 1 個ずつじゃ足りないんだな」と思った。

データの形はとてもシンプルだ。

dart

// イメージ。実装の詳細は別記事に分けたい
class Entry {
  final String id;
  final String photoId;
  final String body;
  final DateTime writtenAt;
}

これだと、後から書く言葉も、最初に書いた言葉も、扱いに差がありません。「最初の言葉が特別」みたいな構造にすると、後で「あ、最初のやつ消したい」となったときに困ります。

「全部対等」にしておくのが、後で楽になる設計だった。

データは平らだけど、UI では「層が重なっている」感を出したい。

これが地味に難しい。平らに並べると単なるリスト、立体的にすると読みづらい、その間を狙う必要があります。

このあたりの「ちょっと重ねて貼ったみたいな見た目」を作るために、別記事で書いた「ハンドメイド感」のテクニックがそのまま流用できた。

このあたりは UI 寄りの細かい話なので別記事に分けたい。

大切な写真は、撮った瞬間で気持ちが固定されません。時間が経つほど、別の意味を持ち始めます。その変化をちゃんと拾えるアプリにしたかった。

「重ねる」というたった1つのコンセプトだけど、これが綴Photo の中心にあるんだなと、書きながら改めて思った。

この記事は2026年4月時点の自分の理解と実装方針で書いています。アプリは継続開発中なので、現在の実装と細部が違っている可能性があります。