はじめに
初めまして！まみむです🐰
プログラミングスクール「RUNTEQ」で2024年11月から学習を始め、未経験からエンジニア転職を目指しています。
ポートフォリオとして開発した「FragranceLog」について、サービスの開発理由やこだわった点について紹介します✨
1.サービス概要
FragranceLog
GitHubリポジトリ
香りと過ごす毎日を、もっと楽しく
日記形式で香水を使用記録をつけ、レビューを通じて香水をおすすめし合うことで、香水オタクから初心者まで楽しめる香水の管理・記録・レビューアプリです。
【主な機能】
- 香り日記：天気・気分・一行日記と共にその日使った香水を記録。カレンダー形式で後から思い出を振り返れます🗓️
- マイ香水管理：手持ちの香水を一覧管理。香水を集めるのが好きな人に
- みんなの香水：マイ香水の中からみんなにおすすめしたいものをレビュー。いいねやコメントで他のユーザーとも交流できます💬
- 香り診断：簡単な質問に答えてあなたにぴったりの香りを診断。「自分に合う香りがわからない」という香水初心者さんにもおすすめ🔰
2.開発のきっかけ
香水を集めすぎて管理が大変になったこと
もともと私自身香水にハマっていて、20個以上の香水を所持しています。
香水は色々な種類の香りがあるだけでなく、ビンの見た目も可愛らしくてつい集めてしまうんですよね。今月もフルーティ系の香水を１つ買いました🙋♀️
しかしそんなふうにどんどん増やしていると、やはり手持ちの把握が大変になってきます。中には棚の奥にしまわれたまま、あまり出番のない香水も。お気に入りのものを使い続けてなくなったので買おうとしたら既に廃盤になっていた…なんてことも😭
今持っている香水を一覧で管理したい・その中でもお気に入りのものはみんなにもおすすめしたい！そんな気持ちから生まれたのが「FragranceLog」です。
日によって使い分けていた香水の記録を残したい
香水を複数持っていると、日によって香りを使い分ける人も多いですよね。
仕事の時は集中できるようスッキリした香り、プライベートでは元気の出るフレッシュな香り、デートの時はとっておきの甘い香り💕…など、その日の気分やお出かけ先によって纏いたいイメージも変わってきます。
天気や気分と一緒に日記形式でその日使った香水の記録を残し、カレンダーで後から思い出を振り返ることができれば、香水ライフはもっと楽しくなると考えました。
普段使わない人にも香水の魅力を知ってほしい
香水を全く使わない方、気になってはいるけれど自分に合う香りがわからないという方、そういう人がもっと気軽に香水の魅力に触れられる場としてもFragranceLogは最適です。
初心者さんが悩むポイントである「香りのイメージがつかない」という悩みにはレーダーチャートとレビュー本文で香りを想像しやすく。
「自分に合う香りを知りたい」という希望には手軽な診断機能で寄り添います。
3.機能紹介
💕マイ香水管理
| 手持ちの香水を登録 | レーダーチャート |
|
|
| 手持ちの香水を一覧で管理。 ブランド名・香水名・ボトル画像・カテゴリや印象を選択しマイ香水を登録できます。 |
甘さ・爽やか・華やか・セクシー・スパイシー・落ち着きの６項目５段階でグラフ化。 香水初心者でもレーダーチャートで香りのイメージを視覚的にわかりやすく。 |
💬レビュー投稿
| レビュー一覧・詳細 | レビュー投稿 |
|
|
| 他のユーザーのおすすめ香水を閲覧。新しい香水に出会いましょう！ ※ログイン不要 |
マイ香水の中から選択しレビューを投稿できます。レビュー内容は後から編集/削除可能 |
| コメント | お気に入り |
|
|
| レビューにコメントで交流。好きな香水について語り合おう！ | 気になるレビューをお気に入りに保存。コメントやお気に入りは非同期で使いやすく。 |
| 公開/非公開の切り替え | SNSシェア |
|
|
| 香水の公開・非公開を自由に切り替え可能。プライベートな香水は非公開、おすすめしたい香水は公開設定に。 | レビューをXでシェアしてもっと広めよう！ |
🗓️香り日記
| 香水の使用記録をつける | カレンダー形式で日記を振り返り |
|
|
| 天気や気分、ひとこと日記と共に使用した香水を記録できます。仕事やプライベートでの香水の使い分けにも便利。 | 月毎のカレンダーで記録を一目で振り返れます。しばらく使っていない香水を使うチャンスかも。 |
✨香り診断
| ４つの質問で診断 | 結果からレビューを検索 |
|
|
| 今日の気分やお出かけ先など簡単な質問に答えるだけで、８つの香り系統からあなたにぴったりの香りを診断します。 ※ログイン不要。 |
おすすめされた香り系統でレビューを絞り込み、お気に入りの香水を見つけましょう。 診断結果はXでシェアできます。 |
👤ユーザー機能
| ユーザー登録・ログイン | マイページ |
|
|
| メールアドレス＋パスワード、またはGoogle連携でログイン。パスワードを忘れた際はリセットメールを送信できます。 | マイページではプロフィールの閲覧・編集ができます。お気に入りにした香水は最新の６件を表示。 |
その他の機能
- gem devise・Google認証を使ったユーザー登録・ログイン機能
- 検索時のオートコンプリート機能
- GitHub Actionsによるテスト自動化(RSpec・RuboCop)
- スリープ対策にGoogle Apps Scriptを活用
- お問い合わせフォーム（Googleフォーム）
- 利用規約
- プライバシーポリシー
4.使用技術について
技術スタック
| カテゴリ | 技術・ツール |
|---|---|
| バックエンド | Ruby on Rails 7.2.1 |
| フロントエンド | Ruby on Rails / JavaScript / Stimulus / Turbo |
| UI/CSS | Tailwind CSS / daisyUI |
| データベース | PostgreSQL |
| 認証 | Devise / OmniAuth (Google OAuth2) |
| ストレージ | Amazon S3 |
| 環境構築 | Docker |
| CI/CD | GitHub Actions |
| インフラ | Render |
| テスト | RSpec / Factory Bot / Capybara |
| その他 | Kaminari (ページネーション) / Ransack (検索) / Simple Calendar(カレンダー)/ Meta-tags (OGP) / chart.js(レーダーチャート) |
技術選定の理由
- Devise + OmniAuth: 安全で拡張性の高い認証システムを構築
- Tailwind CSS + daisyUI: 効率的なUI開発とデザインシステムの統一
- Simple Calendar: 香水使用履歴の視覚的管理とユーザビリティ向上
- Chart.js: レーダーチャートによる香りの特徴を直感的に可視化
- Active Storage + ImageMagick: 香水ボトル画像の効率的な管理と最適化
- 診断ロジック: スコアリング方式による客観的な香り系統判定
画面遷移図
Figma：https://www.figma.com/design/JgVPqQJR4IKZjYn4MqqM16/Untitled?node-id=0-1&t=w2gMPuBt5JpfR7jp-1
ER図
https://drive.google.com/file/d/1b6N3M7ooy3jwg23Yeb78RvLS1b1RQF3H/view?usp=sharing
工夫したポイント
①レーダーチャートによる香りの視覚化
皆さんは「レモンの香り🍋」と言われたらパッとイメージができますか？
では、「ベルガモットの香り」はどうでしょう？
香水を人におすすめする際に大変なのは、香りを言葉で表現するのが難しいということです。また、香水初心者さんの悩みとして、「サイトの説明文を読んでも香りをイメージしづらい」というのをよく聞きます。
これらの課題を解決するために、レーダーチャートを使った香りの可視化を実装しました。
【こだわりポイント】
1.甘さ・爽やか・華やか・セクシー・スパイシー・落ち着きの６項目について、１〜５で評価
2.入力時はスライダーを左右に動かして直感的に入力
3.ユーザーのおすすめ香水もレビュー文➕グラフで香りをイメージしやすく
【使用技術】
- chart.js(https://www.chartjs.org/)
chart.jsはJavaScript でグラフ(チャート)を描画するためのライブラリです。折れ線グラフ・棒グラフ・円グラフなど様々なグラフを簡単に描画でき、データを見やすくするのに便利です。
②香水の公開/非公開切り替え
香水というのは単なるオシャレ用品というだけでなく、その人のパーソナルな部分に深く結びついています。自分だけで大切にしておきたい香りもきっとあるでしょう。
FrgaranceLogでレビューとして全体に公開されるのは、マイ香水の中から公開するに設定したものだけです。全てを公開する必要はないので、プライベートも確保できます。
公開🌐or非公開🔑のステータスはマイ香水ページのアイコンで確認できます。
公開状態はいつでも切り替え可能なので、自分だけで大切にしたいものと、みんなにおすすめしたいものを自由に設定しましょう。
【実装方法】
Fragranceテーブルのstatusカラムで状態を管理
enum :status, { unpublished: 0, published: 1 }
レビューの投稿・削除に伴ってステータスを変更
def make_fragrance_public
fragrance.update(status: :published) if fragrance.unpublished?
end
def revert_fragrance_status
fragrance.update(status: :unpublished)
end
③ステップフォーム式の診断機能
香り診断では、今日の気分やお出かけ先など４つの質問に答えるだけで、あなたにぴったりの香りを提案します。
診断結果はシトラス・フローラル・ウッディ・フルーティ・スパイシー・オリエンタル・マリン・グリーンの８種類。診断は未ログインでも利用可能で、結果をXでシェアできるなど、できるだけ気軽に使えることを目指しました。
診断ロジックは独自のスコアリング方式。設問と選択肢ごとに対応するカテゴリにスコアを加算し、合計が最も高いものが出力されます。※同点のもの同士はランダム
q1: {
question: "Q1.今日のあなたの気分に一番近いのは？",
options: {
"A" => { text: "やさしく穏やかに過ごしたい", categories: [ :floral, :green ] },
"B" => { text: "楽しくワクワクしていたい", categories: [ :fruity, :citrus ] },
"C" => { text: "なんとなく気分転換したい", categories: [ :spicy, :marine ] },
"D" => { text: "落ち着いて冷静な気分", categories: [ :woody, :oriental ] }
}
},
診断ページはステップ式にし上部のプログレスバーで進捗を表示。選択肢をクリックするまでは「次へ」ボタンが押せない仕組みで診断をサポート。
→ 
④豊富な検索機能で香水探しをサポート
レビュー一覧の中から絞り込んで香水を探すことができます🔍
【こだわりポイント】
1.検索結果件数や、検索中のキーワード・タグをバッジ形式で表示し現在の状況をわかりやすく。
2.香水のカテゴリタグは香り診断の結果と同じ8種類！おすすめされた香りのものをすぐに探しに行けます。
3.香水名・ブランド名のキーワード検索ではオートコンプリートで候補を表示。英語のものが多く検索しにくいブランド名もすぐに見つけられます。
| ブランド名/香水名で検索 | タグ検索 |
|
|
| ブランド名または香水名を入力してレビュー一覧から香水を検索できます。キーワード入力時にはオートコンプリートで検索候補を表示し検索をサポートします。 | ドロップダウンから選択、またはタグをクリックで検索。キーワード検索と複合もできます。 |
開発で得た学び
最初から完璧を目指さず、段階的にアップデートすること
開発にあたってGitHub Projectでカンバン形式でissue管理を行いましたが、その際にぶつかった壁が完璧主義です。自分の理想とするアプリの完成系が頭の中にあるだけに、ついつい最初から最高のものを作ろうとしてしまいますよね。
しかし、実際には完璧な状態になってからリリースするより、最低限の状態でリリースし、ユーザーに使ってもらいながら改良を重ねた方が、サービスはより良いものになりました。
実際に香り診断機能では、①診断のみ→②結果とカテゴリタグの連動→③結果のXシェア→④ステップフォーム化という流れで順次実装を行いました。開発途中でさらなるアイデアが湧いてくることもよくあるので、まずは土台を作り、それからアップデートを重ねる方式が自分に合っていたと思います。
幅広いユーザーからフィードバックを集めること
MVPリリース後から本リリースまで、同じスクールの受講生だけでなく、友人や知人にも宣伝したくさんのフィードバックをいただきました。その中で意識していたのができるだけ幅広いユーザーに使っていただくということです。
- 香水に全然興味がない人
- スマホの操作に慣れていない人
- パソコンに詳しくない高齢者
こういった方々に触れていただくことで、意外な問題点が見えてくることも多くありました。様々なユーザーからフィードバックを集めることで誰にとっても使いやすいサービスが目指せると思います。
宣伝を欠かさないこと
先ほどの話にも繋がりますが、多くの人に使ってもらうにはまず自分のサービスを知ってもらわなければいけません。私は自身のtimesで開発状況を定期的に投稿したり、以前から投稿していたnoteの方でMVP後に宣伝記事を書いたりしていました。
また、スクール内で行われたwebアプリバトルイベント「BATTLE OF RUNTEQ vol.6」にもエントリーし、スペシャルサポーター賞をいただくことができました。
BATTLE OF RUNTEQとは……
RUNTEQ内の予選を勝ち抜いたRUNTEQ受講生・卒業生がファイナリストとして出場します。ファイナリストは制限時間内にサービス概要・企画背景・サービス詳細・こだわりポイントなどのプレゼンを行います。
現役エンジニア陣を審査員に招き、「技術力」「UXデザイン」「課題解決力」の3点を元に審査を行います。個性を感じるWebアプリの中から最後に勝つのは一体誰なのか。プログラミングスクールRUNTEQ生の本気の戦いを見届けましょう!
自分の作ったものを人におすすめするのは気恥ずかしくもありましたが、多くの人の目に触れることで得られるフィードバックも大変貴重なものでした。
今後の展望
- レーダーチャートで好みの香り統計を表示
- 月別の使用香水割合を円グラフで表示
- 香水のレコメンド機能（協調フィルタリング）
- ユーザー同士のフォロー機能
さらなるUIの改善やユーザーからのフィードバックをもとに本当に必要とされる機能を実装していきたいと考えていますのでぜひ実際に使ってみて、フィードバックをいただけたら嬉しいです。
おわりに
最後までご覧いただき、ありがとうございました。
2024年11月にRUNTEQに入学し、やっとここまで辿り着くことができました。
受講期間中から開発中までお世話になった運営様・受講生の方々、本当にありがとうございました！
FragranceLogの開発を通して、自分の好きなものを形にすること、より良いサービスを目指すための心構えなどたくさんのことを学びました。
香水が好きな方も、今まで興味がなかったという方も、このアプリを通して香りと過ごす毎日を、もっと楽しくしていただけたら幸いです✨
良かったらXでも仲良くしてください！