【個人開発】デスク環境を色彩の観点から改善するサービス
はじめに
私はプログラミングスクールRUNTEQにてRailsを中心に学習中の者です🏃
この度、個人開発のアプリ 「デスク色彩診断」 を作成したので、苦労した点やこだわった点等を記事にしてみることにしました。
※現在はサービス終了。
サービスの説明
このサービスは普段デスクワークをしているデスク環境を色彩の観点から、「今のデスク環境とあなたのデスクワーク内容を比べると、もっとこういう色の割合を増やす（または減らす）方がいいかもしれないよ」 と診断するサービスです。
なぜこのサービスを作ろうと思ったのか？
大きく分けて以下の2点があります。
１、みんなどんなデスク環境なの？
私は前職でリモートワークを3年ほど経験しましたが、在宅でも出社時よりいかに生産性を下げないか！ にこだり、デスク環境周りをコロコロ変えてきました。そんなことをしてると、「みんなどんなデスク環境で作業してるんだろ？」的な感情が出るようになりました。すごいシンプルな理由です🫠
そこで、 デスク環境を共有するサービスを作成しよう！ となりましたが、過去のRUNTEQ卒業生のPFでも似たような物があることは知っていたので、 デスク環境を共有することで、+α何か付加価値を提供しよう！ となり、次の２個目の理由に繋がります。
２、仕事の効率と色の関係
前職で働いてたとある日、壁にさまざまなアーティストの絵画や作品が飾られるようになりました。「急になんで？？🤔」と思いましたが、「働く空間」に絵画などを飾ることで視界の情報に変化をもたらすという理由でした。要は、 「色」が人間に与える影響をうまく利用して「働く空間」を改善しよう という取組みでした。
この考え方は、広々としたオフィス空間ではなく、 個人のデスク環境にも同じことが言えるのでは？ と思い、１つ目の理由の「共有」に「色彩観点での診断機能」を加えてみようと考えました。
使用技術
| カテゴリ | 技術 |
|---|---|
| フロントエンド | TailwindCSS, JavaScript |
| バックエンド | Ruby 3.2.2, Rails 7.0.8 |
| 使用API | Google Cloud Vision API, DeepL API, ChatGPT API, 楽天API |
| データベース | PostgreSQL |
| ストレージ | AWS(S3) |
| 環境構築 | Docker |
| インフラ | Render |
機能一覧
🔍デスク環境の色彩診断機能
- 当アプリのメイン機能です。普段デスクワークをしているデスク環境の写真を投稿することで、普段の作業効率をより上げるための環境になるよう色彩の観点から診断します。
| 診断画面 | 診断結果 |
|---|---|
 |
 |
🔍診断結果に応じたデスクアイテムのレコメンド機能
- 診断結果（どの色をデスク環境に加えるべきか）に応じて、ユーザーが登録したデスクアイテム＋楽天市場商品のデスクアイテムを提案します。
| ユーザー登録アイテム提案 | 楽天市場商品提案 |
|---|---|
 |
 |
💻ユーザーが使っているデスクアイテム登録機能
- ユーザー自身が使っているおすすめのデスクアイテムを登録できます。登録時に色分類を指定することで、誰かのデスク環境診断結果におすすめのアイテムとして紹介されます。
| アイテム登録画面 | 登録完了 |
|---|---|
 |
 |
🔍ユーザーが使っているデスクアイテム登録機能
- 診断結果およびユーザー登録デスクアイテムはそれぞれの一覧画面から確認できます。診断結果のお気に入り一覧、デスクアイテムのブックマーク機能もあります。
| 診断結果一覧 | 登録アイテム一覧 |
|---|---|
 |
 |
こだわりポイント
・ 写真を用いた診断機能
メインの診断機能は、デスク環境に関する何問かのアンケートに回答して、その回答結果から診断結果を導き出すというものではなく、実際の作業しているデスク環境の写真を元に診断できるよう実装しました。
実装の大まかな流れは下記の通りです。
1, Google Cloud Vision API にデスク環境写真のデータを渡して画像解析する。
2, 解析結果から「ラベル情報」と「プロパティ情報（色情報）」を取得する。
3, ラベル情報に「desk」又は「table」が含まれ、スコアが90以上であれば次の処理に移す。条件を満たさなければ「写真から十分なデスク領域が見つかりませんでした。」とエラーメッセージを表示させる。
4, プロパティ情報から「color」情報を抽出。
5, 初期のプロンプト設定済みのOpenAI APIに色情報を渡して診断文章を生成する。
6, 生成された診断結果をDeepL APIに渡して翻訳する。
・ 診断文章生成を英語で処理してから最後に翻訳する。
OpenAI APIの利用料金の計算が「リクエスト・レスポンスに使用した文字のトークン数」で計算されることを知りました。また、日本語だと英語に比べて余分にトークン数が発生するということも調べて分りました。そこで、OpenAI APIでのプロンプトは全て英語にし、生成された診断文章をDeepL APIで翻訳して表示することでOpneAI APIの使用料を抑える工夫をしました。
・ デスクアイテムのレコメンド機能
このアプリにはユーザーが是非周りにおすすめしたいデスクアイテムを色部類別に登録することができ、デスク環境の診断結果の表示画面に、診断結果に応じてそれらのデスクアイテムをおすすめとして表示するレコメンド機能を実装しました。また、ユーザーが登録したアイテムとは別に、楽天市場のアイテムからも診断結果に応じていくつか提案するようにしました。
改善点
・ 診断結果が出るまでに若干時間がかかる。
対策案
- Google Cloud Vision API に渡す前に画像ファイルサイズを小さくし、通信負担を削減する。
- OpenAI APIの文章生成時の文字数上限を減らす。
まとめ
2023年6月に異業種からプログラミングの勉強を１から始め、何度も挫折しそうになりました。しかし、諦めずに勉強を続けて半年後に個人開発として１つの成果物を自分の手で作れたことは本当に嬉しかったです（改善点はまだ残ってますが！！）。
スクールの周りは本当にすごい方達ばかりで「自分には才能ないのかなぁ」と思う方も多いかと思います（自分もそうでした）。
周りではなく過去の自分と比べて 「成長してるゾォぉぉ！！！」 精神で続けることが大事かと思います。
１ヶ月前は全然理解できなかったことも、復習するとサクサク理解できた時のあの感覚の積み重ねが大事なのです。
こんな自分でも個人開発できたので、みんな大丈夫です。
この記事が少しでも参考・勇気づけになればと思います。
Discussion