EnMate - AIチャット×英単語学習アプリ（架空）

英語学習の過程でAIはますます身近な存在になっています。実際、私もアプリやブラウザで単語検索をするのではなく、会話形式で自由に質問できるAIチャットを使用して学習することがほとんどになりました。

そこでもし、AIチャットの履歴から自動的に自分専用の単語帳を作成できたら、ストレスなく復習の機会も得られて便利ではないかという発想から、AIを活用した新しい語彙学習アプリを個人制作としてデザインしました。

プロトタイプで確認

※プロトタイプの操作：画面のどこかをタップすると操作可能なエリアが青く光ります
※本プロジェクトはカナダ留学中に制作したためテキストは英語表記となります

📝 主な機能

AIチャット：語彙、イディオム、フレーズなど英語に関することを会話形式で質問
単語帳：AIチャットの履歴から自動的に単語帳が更新される
フラッシュカード：単語帳に登録された語彙をフラッシュカードで復習

✏️ 制作プロセス

このプロジェクトでは、デザイン思考のフレームワークを適用しました。
「共感（Empathize）」「定義（Define）」「発想（Ideate）」「プロトタイプ（Prototype）」
までの各ステップを通して、ユーザーのニーズを把握し、課題を定義し、アイデアを展開して、解決策を形にしました。

Step01：Empathize（共感）

競合調査

既存アプリの体験を通じて、ユーザーが挫折しやすいポイントに共感し、課題を抽出しました。

単語検索による登録の限界：単純な単語検索ではなく会話（AIチャット）の文脈からそのまま単語帳を作れる体験の必要性を実感
「教科書」テイストの堅いUI：フォーマルで単調なデザインが多く、エンゲージメントやモチベーションの維持が困難
手動登録の手間：単語を手動で入力・追加していく作業がユーザーの心理的負荷になっている

シンプルで直感的に使いやすいデザイン
AIチャットと単語帳両方を活用している

手動で単語帳に語彙を登録する必要がある
フォルダを整理したり登録済みの単語をサーチする機能が不足

フラッシュカードで復習ができる
単語のフォルダ整理・検索が可能

手動で単語帳に語彙を登録する必要がある
単語検索はできるが、AIのような柔軟な質問には対応していない
フォルダ整理が直感的ではない

Step02：Define（定義）

ペルソナ

英語学習者が何を求め、どんな悩みを抱えているかを明確にするため、また、デザインプロセスの1つの指針としてペルソナを作成しました。

目的

英語学習者がAIチャットを通して学んだ英語を、気軽かつ継続的に復習する機会を提供することで、効率的な英語学習を可能にする。

Step03：Ideate（発想）

サイトマップ

アプリに必要な機能を洗い出し、マップにしました。

Step04：Prototype（プロトタイプ）

ワイヤーフレーム

ユーザーフローと主要画面を整理するために、低精度（ロー・ファイ）のワイヤーフレームを作成しました。

プロトタイプ

※プロトタイプの操作：
1. 画面のどこかをタップすると操作可能なエリアが青く光ります
2. 左下のファイル名から別タブで開くか、画面を最大にしての操作を推奨します

💻 デザインのハイライト

デザインスタイル

アプリのメインカラーには、知性や論理を象徴し、ユーザーの集中を促す効果のある青を採用しました。
また、硬い・冷たい印象を避けるために、ベースとなる背景には青と紫のやわらかいグラデーションを使用しています。

チャットを親しみやすいパートナーのように感じてもらうために、3DツールのSplineを使ってキャラクターを作成し、随所に使用しています。
アイコンはFigmaでデザインし、視覚的な重みや統一感に配慮しつつ、シンプルで丸みのあるスタイルにしました。3DイラストはSplineで作成しています。

ユーザーホーム：モチベーション維持＆チャットへの簡単なアクセスUser Home

学習のモチベーション向上のため、獲得バッジや連続ログイン記録を表示する進捗可視化機能を取り入れました。これらをホーム画面に集約して日々の成長を視覚的に伝えることで、ユーザーが楽しく学習を継続できる設計にしています。

また、アプリを開いた後にワンタップでチャット画面に遷移してそのまま文字入力ができるよう、チャットの入力ボックスをホーム画面下部に配置しました。出先や移動中でふと気になることを聞くような状況を想定しているので、「素早く気軽に質問ができる」ことを重視した設計です。

単語の自動登録Chat

AIがチャット内で自動登録した単語は、一目でわかるようにマーカーで差別化。タップで開くモーダル上で、内容の修正（Edit）や完了ステータスへの変更（Learned）がその場で完結する柔軟なUIを設計しました。

また、1日の終わりに「今日登録された単語を復習したい」という場合は、ホーム画面の「Review New Vocab」から直近の日別で確認できます。

チャットの中で自動登録されていない単語の手動追加にも対応。
単語を長押しするとメニューが表示される直感的なUIで、単語をスムーズに登録できます。

直感的な編集操作Vocabulary

単語帳での検索やフォルダ整理、単語編集といった基本操作において、ユーザーの心理的負荷を減らすため、画面遷移を挟まないUI設計に注力しました。

タップで意味確認：リスト上の単語をタップするだけで意味や例文を確認できる軽快な操作
インプレイスな編集モード：フォルダの整理や単語の編集をページ遷移なしで行うことでスムーズな整理が可能

ゲーム感覚で単語を復習Flashcard

チャットで登録した単語は、単語帳での確認だけでなく、フラッシュカードを使ったテストでより効果的に記憶に定着させることができます。登録済みの単語の復習だけでなく、未知の単語とランダムに出会える「New Word Challenge」を設けることで、ユーザーの自発的な語彙力アップを促します。

挑戦心を刺激するグラフィック：「New Word Challenge」を独自のビジュアルで差別化し、学習へのモチベーションを向上
直感的な2択のカード操作：プレイ中は「Not yet（未習得）」と「Got it（習得済）」を直感的に仕分けられるシンプルな操作を採用
自由度を残した振り返り：セッション終了後、復習した単語の中から「Learned Vocab（覚えた単語）」に追加するものをユーザー自身が最終選択・解除できる柔軟なUIを構築

デザインシステム

💬 制作後のひとこと

初めてのアプリデザイン制作となった本プロジェクトでは、新しく学んだ3DツールSplineを活用して、すべてのアセットを自作することが個人的なテーマでした。3Dの技術はまだ基礎レベルではありますが、表現の幅を広げる挑戦となりました。

制作を通して、ビジュアルの自由度が高く「閲覧」がメインとなるWebデザインとは異なり、「操作」が主体となるアプリデザインの複雑さと奥深さを痛感しました。一般的なUIパーツや操作ルールへの理解したうえで適切な設計を選ぶ重要性を学び、日頃から様々なUIに触れる必要性を強く感じています。

だからこそ、実際に手を動かす中での「ユーザーは次にこう動きたくなるはず」という視点の広がりは大きな収穫でした。表現の引き出しを増やすと同時に、ユーザーの潜在的なニーズを先回りして設計する、UI/UXデザイナーとしての思考の基礎を得られた経験となりました。