人気スマートフォンアプリのUI分析【Vol.1】Duolingo 1.概要紹介

公開日:2014-04-03 更新日:2024-01-31 by SEデザイン編集部

目次

「良いアプリは良いUIを備えている」
これはアプリを使っている誰もが、自然に感じることだと思います。

では一体、良いアプリのUIにはどんな特長があるのでしょうか?
この連載では、そんな疑問を出発点に、スマートフォンアプリのUIを分析していきます。

今回取り上げるのは、多言語学習アプリ「Duolingo」です。
UIを中心に、このアプリの特長を3回にわたってご紹介します。

Duolingo

Duolingo icon
Duolingo | 英語を無料で学ぼう
https://www.duolingo.com/ja

概要

多言語学習・クラウド型翻訳サービスアプリ。
スペイン語、フランス語、ドイツ語、ポルトガル語、イタリア語、英語が対象。
アプリ全体にゲーミフィケーションを取り入れ、ゲーム感覚で学習を続けられる点が評価されています。

このアプリの良さ

心地よい操作性とゲーム要素により、文法の知識が無くてもいつの間にかフレーズや発音、単語が身についているところ(しかも無料!)。

UIレビュー

それでは、実際の画面を見てみましょう。

スプラッシュ、ログイン画面

スプラッシュ、ログイン画面

スプラッシュ画面でアプリの概要を説明。
レッスン画面に出てくるハートのアイコンなどが登場し、今後のアクションとシンクロできるようにしています。
背景に流れる雲のアニメーションも心地良いです。

スプラッシュ、ログイン画面

学習したい言語を選択。

トップ画面、レッスン選択画面

トップ画面、レッスン選択画面

ここでは例として、フランス語を選択しました。
レッスンの種類と進捗はアイコンで視認できます。初回はBasic1のみアクティブになっています。アイコンの卵が割れているのにウィットを感じます。

トップ画面、レッスン選択画面

レベルをクリアするとアイコンの配色が変わり、次のレベルのアイコンがアクティブになりました。レッスン選択画面の配色も同期しています。

トップ画面、レッスン選択画面

上級者向けに、レベルをスキップするテストが用意されています。
レベルとレベルの間にバナーが表示されるため、どのレベルをスキップするか把握しやすいです。

次回、レッスン画面に続きます。

アプリのダウンロードはこちら

Duolingo | 英語を無料で学ぼう iPhone:
https://itunes.apple.com/jp/app/duolingo-learn-languages-for/id570060128

Duolingo | 英語を無料で学ぼう Android:
https://play.google.com/store/apps/details?id=com.duolingo

LPOの基礎
新規CTA

関連記事

コンテンツマーケティングで、
ビジネスの効果を最大化しませんか?

もっと詳しく知りたい方

ご質問・ご相談したい方