3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【毒舌注意】UIで全てが台無しになってるアプリを忖度0で鬼レビュー&リメイクしてみた【ものぐさ家計簿】

3
Posted at

はじめに

経緯

某月某日、Xで上記の何気ない投稿が20万インプレッションを超えてちょっとしたバズとなり、多くの方のタイムラインに届きました。
その際、リプライ欄で次のようなやり取りがありました。

ということで、作者様より忖度0レビューの許可をいただきましたので、容赦なく毒舌MAXのレビューをお届けします。
ただ批判するだけでなく、改善案を取り入れた簡単なモックアップを作成し、オリジナルのUIとの比較も行います。

レビュアー(筆者)について

冒頭のXでのやりとりの通りですが、私にデザインの専門知識があるわけではありません。情報系の学士・修士を経て、IT企業で主にバックエンド開発に従事していた経験を持つ、ごく一般的なエンジニアです。
よって、あくまで 「一人のユーザー」かつ「一人のエンジニア」の視点に基づいた、感覚的なレビューとなります。本記事に記載されている内容は、科学的な根拠や専門的な理論に必ずしも基づくものではない点をご了承ください。

参考資料として、直近で私が開発したプロジェクトへのリンクを掲載しておきます。「この程度のレベルのエンジニアが偉そうに語っているのか」 という、一つの指標としてご活用いただければ幸いです。

ものぐさ家計簿 - 支出の入力がいらない家計簿

今回レビューするのは、こちらのAndroidアプリです。
詳細はストアページをご覧ください。
本記事はアプリをインストールせずとも理解できるように構成していますが、実際に触れてから読み進めていただくと、より一層楽しめるかもしれません。

ものぐさ家計簿                                                      
ものぐさ家計簿

UIレビュー

  • 冒頭でも触れましたが、一切の忖度なしで、感じたことをありのままに吐き出すスタイルのレビューです。表現が過激になる箇所がある点をご注意ください。
  • 「ものぐさ家計簿」は、広告およびサブスクリプション要素を含む商用アプリとしてリリースされています。したがって、仮に本アプリが初作品だったり、練習作であったりなどの背景や事情があったとしても、それらは考慮せず、一つの商用アプリとして成果物そのものだけを評価対象とします。
  • 本記事ではUIにフォーカスするため、アプリのコンセプトや機能性については深く言及しません。

目が、目がぁぁぁ!!!!!

ホーム画面                                                      
ホーム画面

こちらが、アプリを起動して最初に表示されるホーム画面です。
既にツッコミどころの大洪水といった様相ですが、まずは眼球を潰しにきてる配色について触れていきましょう。

黄緑色と緑                                                      
黄緑色と緑

異様に広い画面下部のボトムナビゲーション(と思われる領域)は、黄緑色の背景に緑色の文字という配色になっています。文字のような「注視される要素」と背景色のコントラスト比が低いため、文字を読んでいると眼精疲労から頭痛を引き起こすレベルです。

黄緑色とベージュ                                                      
黄緑色とベージュ

加えて、ボトムナビゲーションのボタンの色(黄緑色)と、メイン背景の色(ベージュ色)も色相が近く、インタラクティブな要素とそうでない要素のメリハリがありません。 画面全体がぼやけた印象になり、前述の疲労感に拍車をかけています。

円グラフ?                                                      
円グラフ?

さらに、円グラフの黄色と背景のベージュも色が同化しており、視認性は壊滅的です。
たった1つの画面の中に、ここまで視認性における重大な欠陥が詰め込まれている例は稀でしょう。
(この記事を書くためにスクリーンショットを何度も凝視していましたが、比喩ではなく本当に頭痛がしてしまいました)

グラフ画面                                                      
グラフ画面

資産推移などを表示するグラフ画面においても、一目で分かる(というより、二度見してしまうレベルの)致命的な配色の問題があります。

グラフ                                                      
グラフ

メイン要素であるはずの折れ線グラフを、まともに視認できるでしょうか?
背景のベージュ色と線の黄緑色のコントラストがあまりにも弱く、控えめに言っても視認性は最悪です。眼球へのダメージは計り知れません。

色覚検査                                                      
色覚検査

まるで、色覚検査を強制されているような気分にさせられます。

[問] 次の円グラフが何を表しているか3行で説明しなさい

円グラフ?                                                      
円グラフ?

さて、ここで問題です。
あなたはこのグラフを見て、何を表しているか説明できますか?
後ほど答え合わせをしますので、一旦スクロールを止め、あなたなりの解釈を導き出してみてください。
ちなみに私は、自分なりの仮説が立つまで数分間の熟考を要しました。
では、始め!

・・・

終了!
正解の保証はありませんが、私なりの解答を示します。おそらく、以下の3種類の情報を同時に表したグラフだと推測されます。

  • 当月の収入と支出の割合
  • これまでの資産合計額に対する当月の収入の割合
  • 当月を含めた資産合計額に対する今月の支出の割合

分解したイメージとしては次のような感じでしょうか。

円グラフを分解してみる(AI画像生成)                                                      
円グラフを分解してみる(AI画像生成)

(これでもまだ問題があるのは否めませんが) 分解することで、一つ一つの要素に関しては比較的理解しやすくなったのではないでしょうか。
万一解釈が誤っていたら申し訳ありませんが、この認識が正しいものと仮定してレビューを進めます。

円グラフ?                                                      
円グラフ?

ではまずこの円グラフの問題の一点目、全く直感的ではありません。
数値をあえてグラフで表すメリットは、直感的な理解を促せる点にあります。確かに、似たような3種類のグラフを並べるのは冗長に感じられるため、統合したくなる気持ちは理解できます。
しかし、それは統合前よりも解釈の難易度が下がる、あるいは同程度に抑えられる場合にのみ有効な手段です。
今回の場合、残念ながら統合したことによって解釈の難易度が跳ね上がってしまっています
ユーザーにじっくりと考えさせてしまっている時点で、UIとしては失敗と言わざるを得ません。(私がアホなだけたったらすみません…)

次に二点目、これらは本当にホーム画面に必要な情報でしょうか?
当月の収入と支出の割合に関しては、家計管理においてはまだ比較的有用な指標になり得ると思います。
しかし、残りの

  • これまでの資産合計額に対する当月の収入の割合
  • 当月を含めた資産合計額に対する今月の支出の割合

これらを最も目立つホーム画面に表示する必然性を見出せません。
実用性よりも、単なる「家計簿アプリっぽさ」の演出を優先してしまい、本来の目的を見失ってしまっているように感じます。

一般人が急に飛行機のコックピットに座らされた感覚を体験できる

グラフ画面                                                      
グラフ画面

このグラフ表示画面には前のセクションで触れた配色問題の他にも、「アンユーザーフレンドリー」な致命的な問題が存在します。
それは、画面下の設定UI群です。

グラフ画面の設定UI                                                      
グラフ画面の設定UI

これの何が問題か、分かりやすく図示するとこうなります。

グラフ画面の設定UIの解説                                                      
グラフ画面の設定UIの解説

いかがでしょうか?
今のあなたのお気持ちを代弁させていただきます。

「分かるか!!!!!!」

余白ゼロで異なる入力要素が密集しており、項目の視覚的なグルーピングがされていないため、ユーザーが迷子になること必至です。
これはもはや、現代のUIの常識に対する宣戦布告とすら捉えられかねません。

え、これってボタンだったの?

画面の半分を覆う4つのボタン                                                      
画面の半分を覆う4つのボタン

まるでATMの操作画面や、子供向けの知育玩具を彷彿とさせる、画面の半分を占有する巨大なボトムナビゲーションの4つのボタンが目を引きます。
高齢者向けアプリであれば理解できなくもありませんが、アプリの説明を読む限り、そういった意図はなさそうです。

また、そもそも一見してこれがボタンであると認識できませんでした
表示されている文字を読んで、ようやく「これはボタン…なのか?」と推測できるレベルです。
その要因として、以下の点が挙げられます。

  • ただの四角い塗りつぶしにしか見えない: 立体感や影などの「押せる予感」が皆無です。
  • ボタン間の余白が一切ない: 要素同士が密着しており、個別のボタンとして認識しづらいです。
  • 巨大すぎる: ナビゲーションというより、背景やコンテンツの一部のように見えます。
  • 標準的なUIからの逸脱: ユーザーが慣れ親しんだ「ボタン表現」からあまりにかけ離れています。UIは基本的にデファクトスタンダードに従うべきであり、逸脱する場合は、それを補うだけの十分なガイドが必要です。

「使い方画面」においても、似たような問題があります。

使い方画面                                                      
① ②

上記1枚目の画像の赤枠部分をタップすると、2枚目の画面に遷移します。
そう、実は 「入力」という単なるテキストに見える赤枠部分は、タブ切り替えボタンだったのです。
初見でこれをインタラクティブな要素(タブ)だと認識できる人は、ほぼ皆無でしょう。

どれがボタンでどれがボタンじゃない?                                                      
どれがボタンでどれがボタンじゃない?

挙げればキリがありませんが、画面左上の「ホーム」はボタンである一方、画面中央上の「過去データ入力」は単なるヘッダーテキストであり、タップしても何も起こりません。
どの要素が操作可能で、どの要素がただの表示なのかが直感的に判別できないため、ユーザーの認知負荷は極めて高くなります。

俺はこのフォントだけが好きなんだ!

全て同じフォント①                                                      
全て同じフォント①
全て同じフォント②                                                      
全て同じフォント②

ボタンも見出しも説明文も、全て同じ「癖のある太字フォント」 で統一されています。このため、文章が読みづらいだけでなく、情報の階層構造も理解しづらく、デザインの足を大きく引っ張っています。
単一のフォントで構成する場合は、視認性が高く癖のない標準的なフォントを選ぶのが鉄則だと思うのですが、このスタイルはその真逆を行っています。
この手のフォントは、見出しなどの「特に強調したい部分」に限定して使用するのが定石でしょう。

また、「家計簿」という堅実さが求められるアプリのコンセプトに対し、この脱力感のある丸文字フォントは絶望的にミスマッチです。
家計管理を任せるアプリには、信頼感や清潔感、正確性が求められます。この「ふにゃふにゃ」したフォントのアプリに、大切なお金の管理を任せたいと思うユーザーは少ないのではないでしょうか。

今何を見せているのかって?当ててごらん♥

あ、これってタブだったの?今どれが選択されているの?                                                      
あ、これってタブだったの?今どれが選択されているの?

現在選択中のタブにスタイル変化が一切ないのも、大きな減点材料です。
どのタブがアクティブなのか、今どの情報を表示しているのかが一目で分かりません。
グラフ入力画面ではアクティブなタブの表現が実装されていたにもかかわらず、こちらの画面では漏れているのが非常に勿体ない点です。

さらに、そもそもアプリの「使い方」を長文で説明している時点で、UIとしては敗北と言えます。(業務系アプリなどの特殊なケースを除き)
ユーザーは基本的に面倒くさがり屋であり、操作説明の退屈なテキストなど読みません。
説明なしでも直感で使えるUIでなければ、即座に飽きられ、離脱されてしまうでしょう。まずはUIのデファクトスタンダードに従うことを大前提とし、その上で独自の世界観を表現するアプローチが求められるのではないでしょうか。

パンツはみ出てますよ

ヘッダー上の謎余白                                                      
ヘッダー上の謎余白

ヘッダー上部の謎の空白も非常に気になります。
おそらくOSのステータスバー領域だと推測されますが、このような目立つ部分に「工事現場のような余白」を残してしまうのは、アプリのクオリティに対する不信感をユーザーに与えかねません。
車のボンネットを付けずに公道を走っているようなものです。
最低でもヘッダーの背景色で塗りつぶすなどして、「舞台裏が見えている感」を解消する工夫は必須です。

デザインが全てバックトゥザフューチャー

入力画面 / 月選択                                                      
入力画面 月選択

身も蓋もない言い方になりますが、とにかく全体的にUIがチープです。
これまでに挙げた問題点に加え、ドロップシャドウ(影)、角丸、透過、統一感のある余白、適度なグラデーション、視線誘導のエフェクト、アイコンの活用、アニメーションといった、視覚的な工夫が一切見当たりません。
ふと、子供の頃に「ホームページビルダー」を使って「THE 平成」なWebサイトを作っていた頃の、微笑ましい私の黒歴史が脳裏をよぎりました。
後述するAIの台頭により、もはやこれらの視覚的工夫は「されていて当然」 という時代です。加点要素ではなく、欠けていれば大きな減点要素となります。
仮に本アプリがインターネット黎明期にリリースされたものであれば、まだ理解の余地はあったかもしれませんが、残念ながら今は2026年です。
現代においては、普通に生活しているだけで優れたUIのプロダクトに触れる機会が無限にあるため、ユーザーの目は肥え、デザインの専門家でなくとも即座に「アマチュアっぽさ」を感じ取ります。
現在のクオリティでユーザーが感じる違和感をごまかすことは不可能でしょう。

あ、ちなみにバックトゥザフューチャーシリーズが一番好きな映画です。

素人UIが許された時代の終焉

Claude Code                                                      
Claude Code
Gemini                                                      
Gemini

昨今のIT界隈では生成AIを利用した開発(バイブコーディング)が大流行しています。
UIの設計・実装も例外ではなく、よほど狂ったプロンプトでない限り、デザイン素人が絶対に到達できなかったレベルの高品質な成果物を、ものの数分で生成してくれます。
個人でも十分に手の届く費用感であり、フロントエンドのモック程度なら完全無料で生成できるほど手軽になりました。

そのような現代において、AIに適当なプロンプトを投げて生成された成果物よりも遥かに劣るUIを採用することは、開発者として致命的な判断ミスです。
「雑にAIに依頼して生成されたクオリティ(50~60点)」が出発点であり、そこからいかに独自の工夫を加えて洗練させていくかが、現代の開発におけるスタートラインではないでしょうか。

Bootstrap                                                      
Bootstrap
Vuetify                                                      
Vuetify

AIが存在しなかった時代でも、私を含むデザイン素人は、BootstrapやVuetifyなどのUIフレームワークや、デザインテンプレートを活用し、なんとか一般ユーザーが許容できるレベルのUIを実現してきたのではないでしょうか。

しかし幸運なことに、現代においては我々のような素人でも、デザイン周りをAIに任せるだけで、本記事で指摘したような基本的な問題を最低限の労力でほぼ全て解決できるのです。
もちろん、AI特有の「詰めの甘さ」や、「AI生成っぽさ」といった新たな課題は発生しますが、それは今の状態よりもずっと高度な次元の話です。現状のUIよりは1000倍マシになると断言できます。

アプリのコンセプト自体は、私のようなズボラ人間に刺さる素晴らしいものです。 だからこそ、この素人臭さMAXのUIが全ての良さを台無しにしている現状が、本当にもったいないのです。
Xでの投稿が伸びた事実からも、「UIに素人感があると使う気が失せる」と感じているのは私だけではなく、多くのユーザー共通の心理であることは明白です。この問題は、決して無視できるものではありません。

一次面接を突破せよ!何故UIが超重要なのか

普段、XやReddit、ProductHuntなどを通じて、国内外の個人開発プロダクトをリサーチしていますが、サービスのサイトを開いた瞬間に、その質や開発者の技量がある程度推し量れてしまうような感覚を覚えます。
「UIの質」と「プロダクト全体の質」には、強い正の相関関係があるように感じてしまうのです。

優れたデザインのサービスは、大抵の場合、機能面やコンセプトにも光るものがあります。逆に、ぱっと見で素人っぽいデザインのサービスは、機能やコンセプト自体にも疑問符がつくケースが少なくありません。
そんな経験則から、「デザインが洗練されていないサービスは即座に閉じ、見向きもしない」 という行動が無意識の習慣になってしまいます。
いかに中身が優れていようと、その「顔」となる部分が微妙であれば、急激に信頼と興味を失い、代替サービスがある限りは見向きもしなくなってしまうのです。
(仕事の関係で関わらざるを得ない場合を除き、人間関係でも第一印象が悪い相手の良い面を見つけるのが難しいのと同様です)

残酷で非合理的にも思えますが、恋愛や商談などと同様、サービスの評価においても「第一印象」が決定的な役割を果たすことは、誰もが実感していることでしょう。
だからこそ人は、身だしなみを整え、SNSのプロフィールを磨き、立派なWebサイトを立ち上げて、「なんとなくデキそうな雰囲気」を醸し出し、周囲の「一次面接」を突破しようと必死になるのです。

関連した例として、本記事のOGP画像の初期案と最終案を見比べてみましょう。

初期案 / 最終案                                                      
初期案 最終案

いかがでしょうか?あなたはどちらの方が好みでしょうか?
初期案の方が好きという方も一部いらっしゃるかもしれませんが、最終案は 「思わずクリックしてみたくなるサムネ」 を目指して、何度も試行錯誤を重ねた結果であり、タイトルや視認性、背景、スマホの傾斜、光沢など、至るところに改善が垣間見えるのではないでしょうか。
正直初期案でも及第点ではあると思いますが、本記事においての「顔」はOGP画像なので、さらに時間を費やしてでも試行錯誤を重ねる価値があったのです。(AI生成っぽさ、安っぽさが抜けきれてなかったり、全体的に少し暗すぎるような印象など、まだまだ改善の余地は多々ありそうですが…)

もちろん、サービスの本質は一次面接の先にある「課題解決能力(機能)」 にあります。「外面だけ良くても意味がない」という指摘はもっともです。
しかし、最も悲惨なのは「中身を見てもらう前に離脱されること」 です。外観が怪しいお店や、ショボいお店には新規客が来ることは無いでしょう。
本記事においても、 一番恐ろしいのは「無関心」 で、誰にも読まれないことです。内容を読んでもらってから「クソだ」と批判される分には今後に活かせる経験値が多いので、ずっと良いのです。

したがって、WebサービスやアプリにおけるUIは、この「一次面接」を突破し、サービスの本質(中身)をユーザーに届けるための「入場チケット」として極めて重要であると、私は考えています。

劇的ビフォーアフター

ここまで、デザイン素人の筆者が偉そうにダメ出しを続けてきましたが、人様の創作物をここまで否定するからには、対案を提示してこそ意味が生まれます
批判だけして代案を出さないのは無責任であり、建設的ではありません。

そこで、前セクションで提案した 「我々のようなデザイン素人は、大人しくAIに任せるべき」という主張をもとに、「ものぐさ家計簿」を題材に実証実験をしてみようと思います。

基本的な条件は下記の通りです。

項目 内容
IDE Antigravity
Model Gemini 3.0 Pro(High)
技術スタック Next.js, TailwindCSS, Lucide React(Icons)
プロンプト オリジナルの「ものぐさ家計簿」のストアページURL、アプリのスクショ数枚、本記事記載の私が考えるこのアプリのUIの悪いと思う部分を参考資料として添えて、 0から「ものぐさ家計簿」のUIを自由に構築するように指示

プロンプトは敢えてAIへの指示を最低限にして、極力自由に作らせるために、非常に曖昧なものとなっています。
これは、過去にデザイン素人なりに詳細にプロンプトを構築したら、自由に作らせた場合よりも明らかに残念なデザインになってしまった経験を踏まえた対応です。
我々のようなセンスの無い素人は、大人しくAIに任せておきましょう。その上でどうしても気になるものがあれば、後で調整すればいいのです。
しかし今回はそれをやっているとキリがないので、今回は 初回出力からあえて修正を加えずそのまま掲載します。
そのため、一部デザインの崩れや機能不足があるかもしれませんが、今回の実験の本質ではないためご容赦ください。

改修版

ホーム画面

まずは現状のホーム画面をもう一度見ていただきましょう。

ホーム画面(オリジナル)                                                      
ホーム画面(オリジナル)

これを頭に入れて頂いた上で、改修版のホーム画面をご覧ください。

ホーム画面(改修版) 1                                                      
ホーム画面(改修版) 1 ホーム画面(改修版) 2

なんということでしょう
一目見ただけで、その差は歴然です。
改修版では、オリジナル版では多々あった配色の違和感、チープ感がほとんど見られません。
冒頭の「一次面接を突破せよ!何故UIが超重要なのか」のセクションでも述べましたが、このぱっと見で「なんとなく信頼できそう。ちゃんと作られてそう」と感じさせることができるデザインこそが超重要なのです。
ではオリジナル版との差分を個別に詳しく見ていきましょう。

まずは画面半分を占めていたボトムナビゲーションにフォーカスしてみましょう。

ボトムナビゲーション(Before)                                                      
ボトムナビゲーション(Before)
ボトムナビゲーション(After)                                                      
ボトムナビゲーション(After)

改修版は、極めて標準的で「普通」のボトムナビゲーションです。「なんだ、普通じゃん」と思われるかもしれません。
しかし、「普通」であることこそが価値なのです。
初見のユーザーであっても、これを見れば瞬時に「画面を切り替えるためのボタンだ」と認識し、迷わず操作できます
これは、他の多くのアプリが採用しているデファクトスタンダードなUI形式であり、ユーザーの過去の学習体験をそのまま活かせるからです。

もちろん、ここから独自の世界観を表現するために装飾を加えることは可能ですが、一般的な家計簿アプリに過度な独自性は求められていません。慣れ親しんだ「普通」こそが最適解です。
(エンタメ系アプリであれば別ですが、ツール系アプリにおいては「直感的であること(=既視感があること)」が最優先されるべきだと考えています)

謎のプラスボタン?                                                      
謎のプラスボタン?

中央の緑色のプラスボタンには文字がありませんが、「家計簿アプリ」という文脈と、「追加」を想起させるプラスアイコンの組み合わせにより、「ここを押して家計簿の記録を追加するんだな」と容易に推察できるはずです。
万が一推察できなくても、常に中央に鎮座するこの目立つボタンを、ユーザーはとりあえず押してみたくなるものです。
押せば入力画面が開くため、ユーザーは学習コストをかけずにアプリのコア機能を即座に理解できます。
実際にユーザーにやらせてみて理解させるというのは、多用はNGなものの、そのサービス内で特に重要な機能の場合においては非常に有効な手段だと思います。
(ちなみに、アイコンのテーマカラーとして「ものぐさ」オリジナルの緑色を踏襲してくれている点は、AIのちょっとした粋な計らいですね)

次に収支比の円グラフだった部分にフォーカスしてみましょう。

Before / After                                                      
Before After

改修版では情報を削ぎ落とし、収入と支出の割合(貯蓄率)だけを示す単純明快なドーナツグラフに生まれ変わりました。
色の占める範囲がそのまま収支のバランスを表すため、極めて直感的です。
棒グラフを円形に丸めたようなシンプルな構造ですが、視覚的な分かりやすさは雲泥の差です。クールなデザイン性も兼ね備えていて良いですね。

次に、オリジナル版にはなかった、改修版でホーム画面に新たに追加されている要素群にフォーカスしてみます。

Before / After1,2                                                      
Before After1 After2

オリジナル版では貧弱だったホーム画面が、改修版では完全な「ダッシュボード」として再構築されています。
円グラフに加え、「現在の総資産額」「直近の収支」「資産ポートフォリオ」「資産推移(半年)」が一望できるようになりました。
資産管理という目的を考えれば、アプリ起動直後にこれらが確認できるのは実に合理的でしょう。

デザイン自体はシンプルで独自性は皆無ですが、堅実なUIと配色により癖がなく、誰にでも使いやすい画面に仕上がっています。
これだけで、及第点(50~60点)は余裕でクリアしていると言えます。

履歴画面

履歴画面                                                      
履歴画面

オリジナル版には存在しなかった画面ですが、月1回入力するというコンセプト上、月ごとの履歴表示機能は必須です。
細かい点ですが、「赤=警告・減少」「緑=安全・増加」という一般的なカラーコードに従っている点も、直感的な理解の促進に一役買っています。

入力画面

Before / After                                                      
Before After

入力画面では、入力金額に応じてリアルタイムで総資産や前月比が変動するプレビュー機能が追加されています。

フォーム自体はオリジナルの構成を踏襲しつつ、現代風にリファインされています。
以下の工夫により、使い勝手が格段に向上しています。

  • 区切り線によるカテゴリの明確なグルーピング
  • 各項目を直感的に連想させるアイコンの配置
  • 重要度に応じた文字サイズと色の強弱(ヘッドラインは黒・太字、サブテキストはグレー・小文字)

グラフ(資産推移)画面

Before / After                                                      
Before After

改修版では、オリジナル版の複雑なフィルタリング機能が廃止され、以下の情報に絞り込まれました。

  • 半年間の純資産増加額
  • 半年間の純資産グラフ
  • 月ごとの純資産推移

AIが「不要」と判断したのか、あるいは私の指示(スクショ提供)が不十分で機能を認識できなかったのかは定かではありません。

Before / After                                                      
Before After

肝心のグラフは、白背景に濃い緑色のラインというコントラストの高い配色になり、視認性は劇的に改善されました。
ただ個人的には、縦軸の目盛がない点が気になります。
タップすれば額を確認できるとはいえ、最大値と中間値くらいの目盛表示は常時欲しいところです。

月ごとの内訳                                                      
月ごとの内訳

また、「月ごとの内訳」というセクションでは、「履歴画面」と内容が重複気味な点など、調整が必要な箇所も見受けられます。
これらは、要件定義をせず数枚のスクショとURLだけを丸投げしたAI出力(アドリブ)の限界と言えるでしょう。
今回はUIの比較が主眼であるため、機能面の不足についてはこれ以上深掘りしません。

これが本来のスタート地点

全体的にAI生成版を称賛してきましたが、これはあくまでオリジナル版と比較した場合の話です。これでフロントエンド開発が完了したわけではなく、むしろここがスタート地点と言えます。
改修版であっても、まだまだ個人的に気になる点は山ほどあります。

  • ホーム画面の「おかえりなさい」や季節アイコンは冗長ではないか
  • 総資産表示の直下にポートフォリオと推移を配置し、ファーストビューでの情報量を増やしたい
  • 「資産ポートフォリオ」というタイトル表記は不要
  • 直近の収支セクションの高さを圧縮したい
  • 総資産額の「入力不要」ラベルは不要
  • 資産ポートフォリオはドーナツグラフより、単純な円グラフか積み上げ棒グラフの方がよい可能性
  • 凡例よりも、グラフ上に直接項目名を表示してほしい
  • 履歴画面にもう少し詳細な収支項目が欲しい
  • 入力画面でもボトムナビゲーションを表示し、誤操作防止はダイアログ等で対応したい
  • デザインが無機質すぎるため、ブランディング観点から独自のアクセントカラーやアイコンで個性を出したい

挙げ始めればキリがありません。
私は普段この手のアプリを使わないために表面的な調整案に留まっていますが、普段から家計簿アプリを利用しているユーザーであれば、もっと踏み込んだ、本質的な調整をしたくてたまらないことでしょう。
もしかすると 「そんなものは微調整に過ぎず、スタート地点と言うのは大袈裟ではないか」 と思われるかもしれません。
しかし、これまでの経験上、この「微調整」こそが最も労力と時間を要する、長く苦しい実装の旅の始まりなのです。
逆に言えば、AIのおかげで、その「スタートライン(微調整の旅の入り口)」に、一瞬で立つことができたとも言えます。

おわりに

中身で勝負!が通用しない残酷な現実

当初はSNSでコメントして終わる予定でしたが、あまりの衝撃的なクオリティに熱が入り、長文記事となってしまいました
しかし、それだけの価値がある題材だったと感じています。
どれだけ魂を込めてプロダクトを作っても、「外面(見た目)を最低限整えること」を怠った瞬間、その努力は水泡に帰します
これが多少強い言葉を使ってでも本記事で読者に伝えたかったことです。
プロダクトも人間も、本来は中身で評価されるべきですが、対人ビジネスである以上、「外面が全ての入り口」 であるという現実は避けられません。

AI生成臭さに対する嫌悪感

本記事では改善案として「AI生成」を活用し、多くの人にとっての及第点を超えるという提案をしましたが、同時に、レビューのなかで「AI生成はまた別の新たな課題が発生する」といった言及をしました。
様々な問題がありますが、その中でも注視すべきは、普段AIに触れている身からすると、どうしても 「AI生成っぽいUI臭さ」 を敏感に感じ取ってしまうことです。すると今度は、「AI生成特有の癖」を隠しきれていない部分に新たな「素人臭さ」を感じてしまい、プロダクトへの評価が無意識に下がってしまう現象への懸念が生まれています。

この「不気味の谷」のような嫌悪感は、AIに慣れた開発者だけでなく、近い将来、一般ユーザーにも広まっていく感覚ではないでしょうか。お手本的な優れたUIを誰もがお手軽に生成できるようになってしまったため、「素人臭さ」のハードルが急激に上がっているのです。
もちろんAIの技術進化により、いずれは「AI臭さが一切ないAI」が生まれるかもしれませんが、今のところはまだその域には到達していません。「AIに指示してはい完了」ではなく、そこから「人間がどう魂(細部へのこだわり)を吹き込むか」が、現代のエンジニアに求められる真のUIデザインスキルなのかもしれません。

ブーメラン

今回のレビューを通じ、私自身も多くの気づきを得ました。指摘した項目のいくつかは、現在私が開発中のプロダクトにもそのまま当てはまる「特大ブーメラン」 として深く突き刺さっています。
また、本記事で指摘した以外にも、その手のプロの視点から見れば数え切れないほどの欠陥があるはずです。もしお気づきの点があれば、ぜひご意見をいただければ幸いです。

「ものぐさ家計簿」は進化する

今回、UIレビューを依頼してくださった @A_sukeeeeee さんに、心より感謝申し上げます。
レビューを自ら依頼されたということは、改善への強い意志がある証拠です。本記事をきっかけとして、「ものぐさ家計簿」は、近々UI面で劇的な進化を遂げることでしょう。
その変貌を見届けるためにも、ここまで読んでくださった方はぜひ @A_sukeeeeee さんをフォローすることをお勧めします。


筆者について

Yukapero

「個人 x AI」で戦う孤独な個人開発者です。独りビジネスや、フリーランスエンジニアの生々しい実態、その軌跡や過程で得られた知見を赤裸々に発信しています。
記事が気に入りましたら、いいねやフォローを頂けたら嬉しくてむせび泣きます。

取り組んでいるプロジェクトや、記事の詳細版などにご興味のある方はぜひ yukapero.com を覗いてみてください。
SNSでも積極的に活動していますので、是非繋がりましょう! @yukapero_com

X: @yukapero_com
Web: yukapero.com

3
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?