見出し画像

#2 UXをアップデートしてみた! その2(AI翻訳サービス)

前回の#1では、ファーストビューの調整について書きましたが、
その後のことは何も書いていないままで終了しましたw

なので、その続きです!


初期のデザインでは1ページだけで終了するような作りになりますが、
現在の作りでは利用者は画面が変わるというような印象があるデザインとなります。
(実質開発の手法上はSPAと呼ばれたものですがここでは省きます!)

さて、変化を見ていきましょう!

1. FirstView以後の利用(録音)

利用イメージ

まずはマイクの表示ボタンからの選択した後、録音しているGif動画の表示を追加し、録音しているような様子を提示しました!

マイクボタンもそのまま停止するボタンになり、話終わったらすぐ押せるような状態にしました!

2. 翻訳後の表示

録音後の表示

前項の音声取得後は翻訳が実行されるので、次は利用者の見やすさをアップデートしました。

基本的には上下逆さまとなる設計になり、画面上では主に表示の強化を行いました!

続いては実は音声の出力される仕様もこっそり追加したものです!笑

3. 今回の更新に合わせて追加された機能

利用性の強化に合わせて機能の追加もしました!

1. 文字入力の追加

2. 翻訳後の音声再生機能

最後に、、、

ひとまず一段落が終わりました!

ぜひ遊んでみてください!


いいなと思ったら応援しよう!