タロット占いの記録がいつも見つからない。だから「Tarot Diary」を作りました
私はもともとタロット占いが好きで、悩みがあるときや、自分の考えを整理したいときによくカードを引いています。
でも、ひとつ困っていることがありました。
占いが終わった後、その記録はスマートフォンの写真やメモ、チャット履歴など、いろいろな場所に散らばってしまいます。
時間が経つと、
「このとき、何を悩んでいたんだっけ？」
「どうしてこのカードを引いたんだろう？」
「当時、このカードをどう解釈していたんだろう？」
と、過去の記録を振り返ることが難しくなっていました。
そこで、私は考えました。
「もし、一回一回の占いを日記のように記録して、後から振り返ることができたら、タロットはその場限りの答えではなく、自分の考えや変化を見つめるためのツールになるのではないか？」
この考えが、「Tarot Diary」の始まりでした。
Tarot Diaryとは？
Tarot Diaryは、タロット占いの内容を記録・整理し、後から振り返ることができるWebアプリケーションです。
ユーザーは、自分の悩みや質問、引いたカード、そのときの解釈や考えを記録できます。
また、自分だけのオリジナルスプレッドを作成して保存したり、占いの記録を公開して、他のユーザーと共有したりすることもできます。
このプロジェクトでは、アイデアの企画から機能設計、UI/UXデザイン、フロントエンド開発、データベース構築まで、すべて一人で担当しました。
使用した主な技術は、React、TypeScript、Firebase Authentication、Cloud Firestoreです。
一番実現したかった機能：自由にスプレッドを作る
👆🏻スプレッドを作る
👆🏻カスタムスプレッドで占う
Tarot Diaryを設計する中で、私が特にこだわった機能のひとつが、ユーザーが自由に自分のスプレッドを作れる機能です。
タロット占いには、ひとつだけの決まった形があるわけではありません。
同じ3枚のカードでも、
「過去・現在・未来」
を表すこともあれば、
「現状・問題・アドバイス」
を表すこともあります。
質問によっては、まったく異なるカードの配置が必要になることもあります。
そのため、システムが用意した固定テンプレートから選ぶだけではなく、
- カードの枚数を自由に決める
- カードの位置を自由に配置する
- それぞれの位置に名前や意味を設定する
- 作ったスプレッドを保存して、次回も使う
という機能を実現したいと考えました。
しかし、ここでひとつの問題がありました。
「自由にカードを配置する機能を、どうやって実装すればいいんだろう？」
Canvasか、Drag & Dropか？
開発初期には、Canvasを使う方法も考えました。
Canvasなら、自由な画面上に好きな位置で要素を配置できます。
しかし、私が作りたかったのは、完全に自由な配置ではありませんでした。
カードを自由に並べながらも、自然に整列され、きれいなレイアウトを保てるようにしたかったのです。
そこで最終的に、Drag & Dropを選びました。
あらかじめ定義したグリッドにカードを配置することで、自由度を残しながら、全体をきれいに整えることができます。
ライブラリを使う？それとも自分で作る？
当時の私は、まだフロントエンド開発を学び始めたばかりでした。
もちろん、既存のDrag & Dropライブラリを使うことも考えました。
でも、そのとき私はこう思いました。
「せっかく勉強しているんだから、自分で作ってみてもいいんじゃない？」
当時の私にとって、開発の一番面白いところは、機能がどのような仕組みで動いているのかを、自分の手で理解することでした。
そこで、Drag & Drop APIの仕組みを調べ、さまざまなオープンソースや実装例を参考にしながら、自分で実装することにしました。
Vanilla JavaScriptからReactへ
調べてみると、Vanilla JavaScriptを使ったDrag & Dropの実装例はたくさん見つかりました。
しかし、当時の私は、自分の要件に合うReactの実装方法をなかなか見つけることができませんでした。
「Vanilla JavaScriptの考え方を、どうやってReactに置き換えればいいんだろう？」
Reactを学び始めたばかりの私にとって、これは大きな課題でした。
一晩中考えても、答えが見つかりませんでした。
そんなとき、あるDrag & Dropライブラリのデモサイトを見つけました。
私はデモ画面で何度も要素をドラッグしながら、
「ここに移動するとどうなる？」
「別の場所に持っていくと、何が変わる？」
と、その動きを観察していました。
そして、何度も動かしているうちに、ふと思いました。
「DOMを直接動かすのではなく、データを変更して、Reactにもう一度画面を描画してもらえばいいのでは？」
そこで、Reactの基本的な考え方に戻りました。
データが変わる → Stateを更新する → Re-render
カードが新しい位置にドラッグされたとき、DOM要素を直接移動するのではなく、カードの位置を表すデータを更新します。
そして、新しいStateをもとにReactがUIを再描画する。
この考え方によって、最終的に自分が求めていたオリジナルスプレッド機能を実装することができました。
デザインとエンジニアリングは、意外と似ている
この経験を通して、私は初めて、
「プログラミングとグラフィックデザインは、意外と似ているかもしれない」
と感じました。
デザイナーとして働いていた頃、私はよく作品の構図やレイアウト、ビジュアルのルールを観察し、
「なぜこのデザインは良く見えるんだろう？」
と考えながら、その仕組みを理解し、自分のデザインに活かしていました。
今回の開発でも、私は同じことをしていました。
そのままコピーできる答えが見つからなかったため、既存のプロダクトの動きを観察し、その裏側で何が起きているのかを考え、Reactの知識を使って自分なりに再現しました。
この経験から、
「観察して、分解して、もう一度自分で作ってみる」
という力は、デザイナーとしてだけではなく、エンジニアとしても活かせる自分の強みだと気づきました。
そして、初めて挑戦する機能でも、問題をよく観察し、理解し、試し続けることで、自分なりの答えを見つけられると考えるようになりました。
機能を作るだけではなく、「自然に使える体験」を考える
Tarot Diaryの開発後半では、コミュニティ機能も追加しました。
ユーザーが自分の占いを記録するだけではなく、投稿を共有したり、他の人の解釈を読んだり、「いいね」やコメント、フォローを通して交流できるようにしたいと考えたからです。
この部分では、Facebookなどの成熟したSNSの操作方法を参考にしました。
まったく新しい操作方法を作るのではなく、多くの人がすでに慣れている方法を取り入れることで、ユーザーが迷わず使えるようにしました。
特に実装したのは、次の3つです。
- Skeleton UI：データを読み込んでいる間の空白や不安を減らす
- Optimistic Update：「いいね」を押した瞬間にUIへ反映し、操作にすぐフィードバックを返す
- Infinite Scroll ＋ Pagination：必要なタイミングで次の投稿を取得し、スムーズな閲覧体験とパフォーマンスを両立する
この実装を通して、成熟したプロダクトが自然に使える理由は、単に機能が多いからではないと気づきました。
待ち時間の不安を減らすこと。
操作にすぐ反応すること。
必要なデータだけを適切なタイミングで取得すること。
そうした小さな工夫の積み重ねが、使いやすい体験を作っているのだと思います。
「真似する」とは、単に画面をコピーすることではなく、なぜそのプロダクトが自然に使えるのかを観察し、その裏側にあるインタラクションや技術的な工夫を理解すること。
このプロジェクトを通して、私はそう学びました。
今、Tarot Diaryを作り直すなら
Tarot Diaryは、私がフロントエンド開発を学び始めた頃に完成させた、初めての本格的な個人プロジェクトです。
今振り返ると、改善したい部分もたくさんあります。
もし今の自分が作り直すなら、コンポーネントの責務やデータフローを整理し、TypeScriptの型設計をさらに強化します。
また、Loading・Error・Empty Stateの改善、アクセシビリティへの対応、画像やページ読み込みのパフォーマンス最適化にも、より力を入れたいと思います。
でも、今ならただ機能を増やすことだけを目指すことはしません。
プロダクトとしての完成度や保守性、そして一つひとつの細かい工夫が、本当にユーザーの目的を助けているのか。
そこをもっと大切にしたいと思います。
私にとってTarot Diaryは、初めて完成させた個人プロジェクトであると同時に、
「プロダクトは最初から完成された答えを持って生まれるのではなく、問題を発見し、選択し、試し、調整する中で、少しずつ形になっていく」
ということを初めて実感させてくれたプロジェクトです。
✨Tarot Diary 👈🏻 Website Link✨
