はじめに：やっぱり「面倒くさい」は最強の敵
こんにちは！万年ダイエッターのワクッカ (Wakuqqa)です✌️
前回の記事（【個人開発】万年ダイエッターが作った食事管理アプリにLINE連携機能をつけたら、二重ログインの罠にハマった話）では、アカウント重複という「地獄の入口」をなんとか乗り越えた記録をお届けしました。
おかげさまで、私の開発したAI食事管理アプリ「Log-Eats」も、LINEから写真を送るだけで記録できるという「究極のズボラ環境」が整いつつあります。
しかし！アプリを使い続けていて、またまた思ってしまったのです。
「AIの解析待ちの数秒間、じっと待ってるの、地味に暇じゃね？」
そうです。ダイエッターはワガママなのです。AIが頑張ってカロリーを計算してくれているその「数秒」すら、手持ち無沙汰に感じてしまう。
ということで、今回も最強の相棒・Antigravityと一緒に、UX（ユーザー体験）を爆上げし、ついでにSEO（検索エンジン最適化）も全部盛りにして、世界中のダイエッターに見つけてもらえるように改造した裏側をお話しします！
1. 解析中の「ワクワク」を演出しろ！スケルトンUIの魔法 🪄
AIに写真を送ってから結果が出るまで、どうしても「間」が空きます。以前はプログレスバーを出していましたが、これだと「まだかな〜」という「待ち時間」を感じさせてしまいます。
そこで、Antigravityにバイブスを伝えました。
「ねえ、結果が出る場所に、あらかじめ『ここに結果が出るよ！』っていう気配を出せない？」
作ってもらったのが、今流行りのスケルトンUIです。
// 動的なプレースホルダーで「気配」を出す
export function NutritionSkeleton() {
return (
<div className="animate-pulse space-y-4 p-4 bg-white rounded-2xl border border-sage-100 shadow-sm">
<div className="h-4 bg-sage-200 rounded w-1/4"></div>
{/* カロリーやPFCの枠だけチラ見せ */}
<div className="grid grid-cols-2 gap-4">
<div className="h-20 bg-sage-100 rounded-2xl"></div>
<div className="h-20 bg-sage-100 rounded-2xl"></div>
</div>
</div>
);
}
結果が出る枠が「シュワシュワ」と動いているだけで、「おっ、今AIが必死に計算してるな！」というライブ感が出て、待ち時間が一気に「期待感」に変わりました。これぞUXの魔法！
2. 数字でぶん殴れ！「体験型」目標計算ツール ⚙️
LP（ランディングページ）を作っていて、ふと思いました。
「『AIが目標を計算します』って文字で書いてあるだけじゃ、誰もピンとこないよね」
だったら、ログインする前にその場で計算させちゃえばいいじゃん！
ということで、年齢、身長、体重を入れるだけで、ハリス・ベネディクト方程式に基づいた「あなただけの目標PFC」を算出するツールをLPに爆誕させました。
これ、未ログインのユーザーがポチポチ入力して「あなたの適正カロリーは1,800kcalです！」とか言われると、**「へぇ〜、じゃあ今の食事はどうなんだろう？」**と、思わずそのままアプリを使いたくなるんです。
「説得」するのではなく「体験」してもらうインサイドセールの如きUX。Antigravity、神か。
3. Google様に気に入られたい！SEO全部盛り 🚀
せっかく良いアプリを作っても、誰にも見つけてもらえなければ、ただの自己満足です。
そこで、今回は技術的な「見栄え」だけでなく、Google検索結果の「見栄え」にもこだわりました。
JSON-LDで検索結果をハックする
Next.js 15 のMetadata APIを駆使して、構造化データをガッツリ仕込みました。
特に効果的なのが「FAQ」と「HowTo」の追加です。
const jsonLd = {
"@context": "https://schema.org",
"@graph": [
{ "@type": "WebApplication", "name": "Log-Eats", ... },
{
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "無料で使えるの？",
"acceptedAnswer": { "@type": "Answer", "text": "はい、AI解析も全部タダです！" }
}
]
}
]
};
これを仕込んでおくと、検索結果にアプリの使い方がステップバイステップで表示されたり、よくある質問が載ったりして、クリック率が爆上がり（するはず）です！
まとめ：UXとSEOは「おもてなし」である
結局のところ、UXを良くするのもSEOを頑張るのも、**「ここに来た人を迷わせない、楽しませる」**という「おもてなしの心」なんだな、と学んだ開発でした。
万年ダイエッターの挑戦はまだまだ続きますが、とりあえず今は、新しくなったスケルトンUIで自分のランチを解析して「うわ、脂質高いな……」と絶望しているところです😂
皆さんも、AIを味方につけて「おもてなしUX」を追求してみませんか？
Log-Eats でズボラな食事管理を始めよう 🥗
📲 LINEで簡単にカロリー計算
Log-eatsのLINE公式アカウントで、食事の写真を送るだけでAIがカロリーを計算します。
👉 LINEでカロリー計算はこちら（友だち追加）