WEB / UI/UX

韓国語学習アプリのUI・ユーザーフロー設計

漢字語とハングルを対応づけて学ぶ韓国語学習アプリのUI設計。グループ・セットの選択から練習、結果確認、誤答の復習、単語の参照へ進む流れを、ユーザーフローとワイヤーフレーム、画面デザインに整理した事例です。

分野: 教育 / 韓国語学習
制作内容: アプリUI / 情報設計 / ユーザーフロー
制作ツール: UI設計ツール / オンラインホワイトボード

制作の目的

学習者が現在の進捗と次に学べる内容を把握し、練習後には誤答を確認して復習へ進める画面構成を検討しました。学習を順に進める操作と、一覧表から単語を参照する操作を分け、用途に応じて必要な情報を確認できることが設計上のテーマでした。

画面と操作のつながり

ユーザーフローでは、新規・登録済みユーザー、学習履歴の有無、正誤や次のセットの有無を分岐で整理しています。UIでは完了・学習中・未開始・ロック中をラベルとアイコンで区別。結果画面には誤答と正解の比較、次のセットと復習への入口を置き、一覧表には絞り込みと単語詳細・お気に入り保存をまとめています。

制作資料

ユーザーフロー、ワイヤーフレーム、配色・書体の検討を経て、7つの主要画面のUIデザインを納品資料に整理しました。開発向けの引継ぎメモには、ボタン・カード・状態表示・テーブル・モーダルなどの共通化、状態別の表示、文字の可読性、控えめな背景装飾の扱いを記載しています。アプリ開発フレームワーク向けの実装確認事項であり、本事例でアプリのプログラミングまで担当したことを示すものではありません。