UIを一新したら、可愛くなった件｜個人開発アプリ

こんにちは、非エンジニアで個人開発に挑戦中のゆんぺんです。

私が開発した買い物比較アプリ「トクリス」ですが、このたびUIを大幅にリニューアルしました！今回は、なぜUI変更に踏み切ったのか、どんな風に変わったのかをお話しします。

▼アプリの詳細はこちら

「あれ？なんか雰囲気が暗い…」と感じた瞬間

リリース後、毎日自分のアプリを使っていたのですが、ふとした瞬間に気づいたんです。

「あれ？なんか雰囲気が暗いな…」

最初は気のせいかなと思ったのですが、使えば使うほどその印象は強くなりました。機能的には問題ないのに、なんとなく使っていて楽しくない。せっかく節約のために使うアプリなのに、気分が上がらないのはもったいないなと感じていました。

色味や参考サイトを見て気づいた改善点

そこで、UIデザインについて本格的に勉強…というほど大げさではないのですが、色味の参考になるサイトを見たり、「すぐにできるUI改善」みたいな実践系のツイートや記事を読み漁りました。

すると…改めて自分のアプリを見たときに、改善点がたくさん見えてきたんです！

「あ、この色合いだと確かに重たく見えるな」 「参考サイトと比べると、全体的にくすんでる…」

特に気になったのが色味のくすみでした。他のアプリや参考サイトと見比べてみると、全体的にグレーがかった色合いで、確かに落ち着いた印象はあるものの、毎日使うアプリとしては少し重たい印象でした。

ボタンの位置はそのまま、色味を明るく！

今回のリニューアルでは、ユーザーが慣れ親しんだ操作感は大切にしたかったので、ボタンの位置や基本的なレイアウトは変更せず、色味を中心に明るめに修正しました。

くすんだグレーから、温かみのある明るいトーンに変更。特にメインカラーは、親しみやすさを感じられるような色調にこだわりました。

プロモーション画像とスクショも一新

アプリ内だけでなく、App Storeで表示されるプロモーション画像やスクリーンショットも全て作り直し！以前のものと比べると、明るくなり、楽しそうな印象になりました。

さらに今回は、AIを使ってかわいい画像も追加して、よりポップな感じに仕上げています。

「Whisk」で理想通りの画像を作成

AI画像生成には、最近私のお気に入りの「Whisk」を使用しました。

Whiskの何が素晴らしいって、画像の雰囲気やモデルを画像で選択できるんです！プロンプトを書くのがそれほど得意ではない私でも、参考画像をアップロードするだけで思った通りの画像が作れちゃいます。
そして、嬉しいことに基本無料なので、何個でもガシガシ作れるし、クレジット気にせずに画像生成できます！

▼「Whisk」の公式サイトはこちら

次回予告：ついにレシート機能を実装！

UI一新が完了したところで、次はいよいよレシート機能の実装に取り掛かります！

レシートを撮影するだけで商品価格を一括登録できる機能を予定しています。非エンジニアの私にとっては大きな挑戦ですが、皆さんの買い物がもっと便利になるよう頑張ります。

最後に

今回のUI変更で、トクリスがより親しみやすく、毎日使いたくなるアプリになったと思います。小さな変更かもしれませんが、日々使うものだからこそ、気分よく使えることって大切ですよね。

ぜひ新しくなったトクリスを試してみてください！何かご意見や要望があれば、お気軽にお聞かせくださいね。

📱 ダウンロードはこちら

コメントやメッセージが励みになります！
気軽に質問、コメントください