「なんかダサい」から抜け出す！個人開発アプリのUIをそれっぽく見せる、色彩計画とコンポーネント設計の記録【英語学習アプリ開発#5】

こんにちは、とむです。個人開発中の英語学習アプリ『（仮）Re-Learn English』の開発進捗報告です。

（前回の記事はこちら → [何をしても "Element type is invalid" が解決しない！答えは意外とすぐそこに...?【英語学習アプリ開発#4】](https://qiita.com/tama0931/items/478b40eb8569d7ca1480)）

前回、サーバーサイドの複雑なエラーとの長い戦いに、ついに終止符を打ちました。
機能が安定して動くようになった今、次なる壁は**「デザイン」**でした。「機能は動くけど、なんだか見た目がパッとしない…」。今回は、そんな悩みを抱えた私が、プロのUI/UXデザイナー（という設定のAI）にレビューを依頼し、UIを劇的に改善していく過程を記録します。

1.これまでのUIと今回のコンセプト

まず、改善前のUIがこちらです。

見ての通り、白い背景に緑文字、という非常にシンプルなデザインです。機能はしますが、ユーザーが「使いたい！」とワクワクするような魅力はありません。
**「これではユーザーは学習を継続できない」**と、感じました。

デザインコンセプトの策定：「黄昏の海辺 × リキッドグラス」

そこで、以下のコンセプトを策定しました。

• テーマ: 「黄昏の海辺（Coastal Twilight）」。学習前の心を落ち着かせ、集中力を高める、青とオレンジの美しいグラデーションを基調とする。
• UIスタイル: 「リキッドグラス（Liquid Glass）」。背景が透ける、流体のようなガラスの質感をUI要素に取り入れ、モダンで先進的な印象を与える。

↑参考にした、最近Figmaとかで話題のリキッドグラス。
このコンセプトを元に、UI/UXデザイナー（AI）に具体的な改善指示を出しました。

実装のポイントとテクニック

「オーロラ・グラデーション」背景

静的な線形グラデーションでは、リキッド・グラスの質感は引き立ちません。そこで、globals.css に、複数の放射状グラデーションを重ね合わせることで、より深みのある背景を実装しました。

2."リキッド・グラス"カードの実装

今回の主役であるリキッド・グラスは、Tailwind CSSのクラスを組み合わせることで実現しました。
SkillProficiencyCard.tsx というコンポーネントを例に挙げます

const SkillProficiencyCard = ({ ... }) => {
  return (
    <div className="
      bg-black/10           // 1. 半透明の黒い背景
      backdrop-blur-xl        // 2. 背景を強くぼかす
      rounded-2xl             // 3. 大きめの角丸
      p-6                     // 4. 内側の余白
      border border-white/10  // 5. うっすらとした白い境界線
      shadow-lg shadow-black/20 // 6. 背景に馴染むリアルな影
    ">
      {/* ... コンポーネントの中身 ... */}
    </div>
  );
};

ポイントは、背景を完全な白や黒にせず、bg-black/10 のように透明度を持たせた色にすることです。これにより、背景のグラデーションがいい感じに透ける仕様にできました。

3. 「アクションの最適化」

当初、ボタンアクションの役割が曖昧でした。
連続で問題が出題されても、どの問題からもクエストを完了させることができてしまうという、謎仕様になっていました。。。

これを、UI/UXの原則に従って以下のように改善しました。
アクションの最適化:
「添削する」ボタンと「次へ進む」ボタンが同時に表示されないように、状態に応じて表示を切り替えるロジックを実装。
ユーザーが常に「次に何をすべきか」が一つに絞られるようにした。
これにより、見た目が美しくなっただけでなく、ユーザーを迷わせない、直感的な操作性も実現できました。
After：完成したUI
そして、これらの改善をすべて適用した最終的な画面がこちらです。

ホーム画面

(※実装途中です。)

クエスト画面

クエストクリア画面

レベルアップ時は、少々盛大なUIにしてみました👍
無機質だったUIが、テーマと一貫性のある、使っていて心地よいデザインに生まれ変わったのではないでしょうか。

4.まとめ

背景のグラデーション、カードの質感、余白、そしてユーザーの視線の流れ。これらを一つひとつ丁寧に設計していくことで、アプリの「体験価値」は大きく向上するのではないでしょうか。
今回のデザイン改修は、機能実装と同じくらい、いや、それ以上に困難な道のりでしたが、その価値は間違いなくありました。
この記事が、個人開発で「見た目」に悩んでいる方の、何かしらのヒントになれば幸いです。
最後までお読みいただき、ありがとうございました！