はじめに
UX / UIデザイナーとして活動しているKikoといいます。
デザインエンジニアになることを目標に今年の1月からReactの勉強を始めました。
今回は制作期間1ヶ月で、自分が以前から欲しいと思っていた単語帳アプリを作りました。
自分の簡単な自己紹介はこちらです👇
どんなサービスを作ったのか
一つの単語を入力すると、対義語・派生語まで"ついで覚え"ができるAI英単語アプリを作成しました。
このアプリではユーザーが単語を追加すると、裏側でGeminiが動いて派生語や対義語を自動で提案してくれます。必要な情報だけをAIで抽出することで無駄なく学べる仕組みになっています。
さらに対義語・関連語まで「ついでに覚える」体験を通じて、通常よりも効率よく単語を習得できることを目指しています。
このアプリで解決したかった課題
広告まみれの辞書アプリが多かった
以前使っていた単語帳アプリは広告が多く操作も煩雑で、例文も実用的とは言えないものでした。学習の集中を妨げる要素が多く、使い続けるのが難しいと感じていました。
試験用に固定された単語ではなく、自分で単語を集めて育てられる単語アプリが欲しかった
市販の単語アプリはTOEICやIELTSなどの試験に特化しており、あらかじめ用意された語彙に従って学ぶ形式が中心です。しかし、洋画や洋書を読む中で出会うような未知の単語を自分で記録し辞書のように意味や使い方を調べながら育てていけるアプリは見つかりませんでした。
以上の2点を兼ね備えたアプリが私の欲しいものでした。
機能説明
単語検索 & サジェスト機能
検索フォームに任意の単語を記入すると、対象の単語に付随した対義語 + 関連語まで表示されます。
単語追加機能
そして、そのサジェストされたカードも単語リストに追加することが可能です。
単語リスト機能
保存された単語カードはリストとして、保存が可能です。（現在最大30個まで）
技術スタック
- 言語
- React
- TypeScript
- DB設計
- Supabase
- フロントエンd
- Tailwind CSS
- ビルドツール / 開発環境
- Vite
- テスト
- Jest / React testing library
- AI
- Gemini 2.5 Flash
- CI/CD
- firebase
- Github Action
1カ月をどう過ごしたか
1週目 ブレストとMVP設計
最初の週は「何を作るか」を明確にするためのブレインストーミングを行いました。ある程度まとまったアイデアをJISOUの人に提案し、MVPを決定しました。
このようにhackMDでMVPごとにタスクを細分化しtodoリストとしてまとめると、進捗管理がスムーズでした。
2週目 デザインと設計フェーズ
Figmaでデザインモックを作成し、それに基づいて開発環境を整備しました。同時にSupabaseのテーブル設計もこのタイミングで行いました。
3週目 プロトタイプとフィードバック
ある程度動く形が見えてきた段階で、コミュニティのメンバーにもプロトタイプを共有しフィードバックを受けました。ここで得た意見をもとに改善を重ねました。
4週目 仕上げとテスト
最後の週では、バグ修正やUXの改善を中心に進めました。小さなテストを繰り返しながらできる限りの完成度を高めました。
デザインでこだわった部分
SPとPCで体験を切り分けた設計
検索機能ではスマートフォンでは縦長の画面を活かし、入力フォームが途中でFAB（Floating Action Button）に切り替わる動線を設計しました。
一方PCでは、横幅を活かして常時フォームを表示する構成にするなどデバイスごとに最適な体験を目指しました。
UIはなるべく最低2パターンは作り検証した
またUIを数パターン作りA/Bで検証しながら進めるなど、限られた機能・リソースの中でできる限りの体験の向上を目指しました。
実装者の目線からデザインシステムを構築
これまではFigmaでのVariantsやプロパティ管理までが自分の範囲で、実装はイメージしきれていませんでした。今回は実際に関数を書き、propsで状態を管理しながらReactコンポーネントを構築することで、デザインシステムがどうコードに落ちていくのか、その流れを実感できました。
苦戦したところ
Supabaseのテーブル設計
単語の保存構造や型定義など、今後の機能追加を見据えた拡張性など考える要素が多く常に手探りで進めました。
words テーブルで単語データを管理し、saved_words テーブルでユーザーごとの保存履歴を持たせる構成にしました。
MVPの作成
やりたいことが多かったため、まずは最小限の構成に絞るという作業に時間がかかりました。「これも必要では？」と追加しそうになる気持ちを抑えるのが大変でした。
初期に決めたMVPは常に状況に応じて小さくピボットし、最適化するという柔軟性がとても大切だとここで気がつきました。
Geminiの出力パース調整
Geminiに渡すプロンプト設計にも手こずりました。期待する形式のJSON文字列を得るために何度も調整を重ねました。
const parseGeminiResponse = async (): Promise<GeminiParsedResult | undefined> => {
const prompt = `
次の英単語「${input}」について、日本語で以下の形式の**JSON文字列のみ**を返してください。装飾や説明文は不要です。
mainは検索結果で、mainの関連語をsynonyms、対義語をantonymsに表示してください。
{
"main": {
"word": "単語",
"meaning": "意味（日本語）",
"pos": "品詞",
"pronunciation": "発音記号",
"example": "英語の例文",
"translation": "例文の日本訳"
},
"synonyms": {...},
"antonyms": {...}
}`;
意図した形で返ってこないことも多く、試行錯誤が必要でした。
その辺りの試行錯誤はここで記事にしています
制作を通じて得たもの
MVPの大切さ
1カ月という期間で「どこをゴールにするのか」 を見定めることの大切さを実感しました。まずは世に出すこと、そして早くフィードバックをもらうこと。これは、自分がUXデザイナーとして日々の業務で大事にしている視点と通じています。
一方で、会社での開発ではユーザーインタビューや要件定義などの設計がしっかりしている分、個人開発ではもっと最小単位での改善サイクルが回せると感じました。小さく作って小さく試す その柔軟さとスピード感が、個人開発の良さだと思いました。
レビューし合うことの大切さ
個人開発に取り組む他の学習者と定期的にやりとりできたことで、MVP単位でのフィードバックを受けられました。自分では気づかない視点をもらえたり、開発の進捗を共有することでモチベーションも保てました。孤独になりがちな個人開発においてとても助けになりました。
次のステップ
まずは自分が欲しいと思っていた形にはなりましたが、まだ不完全だなあと感じます。
ログイン機能や多義語への対応、コロケーションや熟語への対応など、改善したいポイントがたくさんあります。次のリリースではそれらを少しずつ実装して一般公開したいと考えています。
おわりに
学習歴6カ月でも、自分が必要とする機能を明確にすれば個人開発で形にすることは可能だと感じました。今後も学びながら使いやすいサービスに育てていきたいと思います。
次はnext.JSを勉強するので、新しい技術でさらにアップデートしたいと思います🔥
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからお願いします👇