データサイエンスで楽々ドイツ語学習 vibecodingで自分専用の語学学習アプリを作ろう Day3
今までのお話
Day1, Day2では、フロントエンド開発経験ゼロの私がVibe Codingで自分専用の語学学習アプリをゼロから開発し、Webアプリの土台を作成しました。さらにWikipediaのコンテンツを参照し、「5分で読むドイツ語コンテンツ＋4択クイズ（3問）」を生成するところまで実装しました。
Day3の目標と結果
Day3では、学習体験（UX）の改善に取り組みます。
具体的には次を狙います。
- クリック数を減らして、学習までの到達を早くする
- 画面の情報量を整理し、迷いを減らす
- "アプリっぽさ"を出して継続しやすくする
Before
まず改善前の状態です。土台作りを優先した結果、UIはかなり素朴でした。
- Wikipedia記事候補をランダムに5つ表示
- ユーザーが記事を1つ選ぶ
- 選択した記事を表示
- B2〜C1レベルの文章に再生成
- その内容に基づいてクイズ3問を生成
まずは土台作りを優先したため、現在のページはこのような見た目です。
なんとも縦に長いページができあがってしまいました。
さらにクイズが一部しか見えていないため、全体像が掴みにくい。ボタンもテキストだけで、どこが押せるのか視認性が弱い状態です。
今日はこちらの改善に挑みます。
After
ChatGPTと調整しながらUIを整理した結果、見た目と操作感が改善しました。
変更点は主に３つです。
クリック数を「4回→1回」に削減
従来は、(1)記事選択 → (2)記事表示 → (3)B2〜C1へ再生成 → (4)クイズ生成 と、4回クリックが必要でした。
この「学習を始める前の操作」が煩わしい！！！
これでは、クリックしているうちにやる気が消えてしまいます。
そこで、記事を選択したら、残りの処理は自動で実行して表示する構造に変更し、「読む／解く」までの操作をスムーズにしました。
情報を絞って縦長を抑える
以前は、「Wikipediaの元ページ内容」と「B2～C1レベルに成形した文章」を両方表示していたため、似たような文章が縦に並び、画面が冗長になっていました。
そこで、今回は「B2〜C1レベルに整形した文章のみ」を表示し、元ページはリンクで参照する形に変更しました。必要な人だけが元ページに飛べるので、学習フローを壊さずに情報量を圧縮できます。
クイズは「全問同時表示」に
クイズも段階表示だと、結局クリックが増えます。
そこで3問を同時に表示する形にしました。結果としてページ全体の縦長さは大きくは変わりませんでしたが、少なくとも「何問あるのか」「どこまでやればよいのか」が一目で分かるようになりました。
なお、クイズを横並びにするなどのレイアウト最適化は、PC/スマホの表示差が大きいので、機能が揃ってから改めて調整する予定です。
デザインの奥の深さ
今回の改善は、「ブログに載せても耐えられる見た目」と「操作の迷いを減らす」ことを最優先にしました。実装としては src/app/globals.css を中心に触り、アプリ内で使う基本スタイル（背景・文字・余白・ボタン）を揃えました。
一方で、UIの作り方には別ルートもあります。たとえば UIコンポーネントライブラリや 「Tailwind CSS」 や「shadcn/ui」のような仕組みを使うと、設計の再利用性と見た目の品質を一気に上げられるようです。
ただ、現時点の私には学習コストが高いので、まずは語学学習アプリとしての機能を優先し、デザインは、今はここまでで止めます。
初めてのアプリ作成、完璧を求めず、少しずつ、積み上げていきます。
まとめ
今回はここまで。
学習体験の向上のため
- クリック数 4→1
- 操作ステップ削減
- クイズ全体の視認性向上
に取り組みました。
次回は、いよいよ単語帳機能を追加したいと思います。
Discussion