はじめに
最近セルフネイルを始めたのですが、ショート動画を見て「このデザインを真似したい！」と思っても、使用しているネイル用品が動画内に散らばっていたり、そもそも何のアイテムを使っているのか紹介されていなかったりすることがあります。
そこで、ネイルデザインだけでなく「使用したアイテム」も一緒に残るアプリがあれば、同じデザインを再現しやすいのでは？と思い、ネイルレシピアプリを開発してみました。
画面構成
① ネイルデザイン画像一覧
Pinterest風の画像一覧画面です。ハッシュタグ検索や、＋ボタンから新規投稿を行えます。
② ネイルデザイン詳細
ネイルデザインに使用したアイテムをカード形式で表示しています。アイテムをタップすると商品サイトへ遷移・ハッシュタグをタップすると、そのタグで絞り込んだ検索結果へ移動します。ファッションコーディネートアプリのWEARを参考に、ネイルデザインと使用アイテムを一緒に確認しやすいUIを意識しました。
③ 検索結果
ハッシュタグに該当するネイルレシピの一覧です。
④ ブックマーク一覧
保存したネイルレシピの一覧です。あとで参考にしたいデザインをブックマークしておけます。
⑤ 投稿/アイテム選択
ネイルレシピを投稿するか、マイアイテム一覧を確認するかを選ぶ画面です。
「ネイルレシピを投稿」から写真を選択して投稿フローへ進み、「マイアイテムを確認」から自分が持っているネイルアイテム一覧へ移動できます。
⑥ ネイルレシピ新規投稿
写真の選択・クロップ・変更、使用アイテムの追加・削除、タグ入力、所要時間の選択を行い、ネイルレシピを投稿する画面です。
⑦ マイアイテム一覧
自分が登録したネイルアイテムの一覧画面です。
投稿フロー中は＋ボタンから投稿に使用アイテムを追加できます。⑤からアクセスした場合は、アイテムの編集・削除や新規アイテム登録への移動ができます。
⑨ アイテム登録・編集
ネイルアイテムを登録・編集する画面です。
URLからの登録ではOGP情報を自動取得し、画像からの登録では自分で商品名・カテゴリ・カラーなどを入力して保存できます。
技術スタック
- React + TypeScript
- Vite
- Supabase（DB / Storage）
- Firebase Hosting（デプロイ先）
- GitHub Actions（CI/CD）
- Vitest（テスト）
- Tailwind CSS
- TanStack Router（ルーティング）
- PWA（ホーム画面追加・アプリっぽい体験）
工夫した点
1. OGP取得によるアイテム入力の補助
一番悩んだのが、使用したネイルアイテムの入力部分です。
商品名を手入力したり、毎回画像を撮影したりするのは手間がかかります。そこで、使用アイテムの商品URLを入力すると、OGPから画像とタイトルを自動入力できるようにしました。
ブラウザから直接OGPを取得しようとするとCORSの制約で取得できないため、Supabase Edge Function を使ってサーバー側でOGP情報を取得しています。
2. PWA対応
Webアプリでもスマホアプリのように使いたかったため、PWA化しました。
manifest.webmanifest でアプリ名・アイコン・表示モードを設定し、ホーム画面に追加してアプリのように起動できるようにしています。
オフライン対応はService WorkerでHTML / JS / CSSをキャッシュしているため、アプリ自体は起動できますが、レシピ画像やDBのデータはキャッシュしていないため、実質的にはオフラインでの閲覧はできません。完全なオフライン対応は今後の課題です。
3. localStorageによるデータ保存
アカウント登録の手間をなくし、ユーザーが気軽に使い始められるようにするため、今回はログイン機能を実装せず、一部はlocalStorage に保存するようにしました。レシピ投稿は他のユーザーと共有するデータなのでSupabaseのDBに保存し、マイアイテムとブックマークは自分専用のデータのため、localStorageを使用しています。
ただ、localStorageは端末をまたいで同期されないため、将来的にはログイン機能を追加して、複数端末で同期できるようにしたいです。
大変だったこと
MVPは決めていたものの、開発していく中で「もっと入力を楽にしたい」「どんな動線なら使いやすいか」など、改善したい部分がどんどん出てきてしまい、リリースまでに時間がかかりました。
特にアイテム入力部分は悩みました。
- URL入力自体が面倒に感じる場合がある
- 画像必須にすると、手元に画像がないときに登録しづらい
- カテゴリを増やしすぎると、選択が面倒になる
など、ユーザーの立場で考えるほど「どこまで入力を求めるべきか」の判断が難しかったです。
おわりに
今回は、セルフネイルをしている方向けに、ネイルデザインと使用アイテムを一緒に管理できるネイルレシピアプリを作ってみました。
まだアイテム入力のUXには改善の余地があるので、今後も使いやすくしていきたいです！