Design

kinoshita木下 雄貴 (Kinoshita Yuki) / 2020.3.2

1310

教育でUIの参考にしたい3つのアプリ

目次1 「Progate」1.1 特徴:ゲーム感覚で楽しく言語を身につけることができる工夫2 「スタディサプリ

「Progate」

「Progate」はアプリで学ぶプログラミング学習アプリです。

特徴:ゲーム感覚で楽しく言語を身につけることができる工夫

このアプリの特徴として、一つの講義を終えるごとにポイントがもらえ、ポイントが貯まるとレベルアップするというゲーミフィケーション要素があるところです。一回のレッスンごとに経験値が貯まってレベルが上っていきます。また演習クリア数や終了レッスン数などを見ることができるので、ゲームの実績解除を行う感覚でさらに頑張れます。

テレビゲームでよくある、キャラを使ったローディングアニメーションを用いることで勉強という意識を排してゲーム感覚で学べるという点はモチベーション高く学べそうです。

デザインは人を選ばないフラットデザインで、余計な装飾がなくすっきりとした画面になっています。基本的にシンプルな画面ですが、ボタンはボタンらしさを出すためシャドウをつけていたり、タップされたことがわかるように色を反転させる、ページ遷移動きをつけるなど、退屈な画面にさせない細かい工夫が随所に見られるアプリです。

「スタディサプリ」

「スタディサプリ」は中・高・大学受験生向けのオンライン学習サービスです。

特徴:すべての操作が片手で直感的にできる!

人気プロ講師が教える4万本を超える授業動画が月額見放題のサービスです。累計利用者数は64万人以上に上ります。多くの支持を集める理由としてオンラインでプロ講師の授業がいつでもどこでも塾より安く受けられることができるのが大きな魅力です。

アプリを開くとトップページに教科ごとの講義一覧が表れます。そこから受けたい講義をタップすると講座を始める事ができます。その際の操作感が直感的で、トップページでは左右にスワイプでタブの切り替えができるので片手の操作がしやすく、アイコンの位置・形が絶妙で全体の操作が簡単かつ明快に行えるように作られています。

UIで優れていると思った点は受講生の行動導線を考え、ストレスのない操作感にこだわっている点です。講座の機能は1画面内にすべて収まっており、動画の設定は動画再生中でも行え、少し早回しで見たい場合は上のコントロールバーか、右の速度表示をタップでも切り替えることができます。

授業のテキストを開くと動画の下のチャプター選択部分がテキストに入れ替わるので、テキストを開きながら勉強を行えます。
すべての動作は動画を妨げることが無いよう設計されており、同じ講座内のチャプターが切り替わる際もローディングがなくストレスをまったく感じず、快適でとても使いやすいアプリです。

「mikan」

「mikan」はひたすら数をこなして覚えることに特化した英単語アプリです。自分で単語帳を作れたり、中・高・大学受験・センター試験・TOEICの英単語などが収録されており、フリープランでもかなりの数の単語を覚えることができます。

特徴:長続きする工夫が満載の英単語学習アプリの決定版!

「mikan」には学習を続けたくなるような仕組みが色々あります。初めに1日何単語覚えるかという目標を決め、その目標数を達成できるとスタンプが押されます。このスタンプはトップの達成ボタンから確認でき、押すと「ポン」という小気味良い音と共に確認画面が立ち上がります。そこでは現在何連続達成したかがわかりやすく表示され、その画面をツイッターで共有することもできるので、次のモチベーションに繋がります。

さらに詳しく確認できる中央の実績タブでは手に入れたスタンプとこれまで覚えた単語数のグラフ、連続日数などが確認できます。覚えた単語数はオレンジのバーでグラフに記入されていき、最長連続日数が日々加算されていくので、記録を途切れさせたくないという思いが働き、習慣化するまで続けやすくなるように工夫されています。

アイコン・文字色は基本的にグレーの濃さで差を出しており、アプリのキーカラーであるオレンジ色は多用せず必要に応じて少し使用される程度でごちゃっとした印象はなく、すっきりとまとまっています。

UIで優れている点は機能ごとにボタンの色がはっきり分かれていて、必要最低限のボタンのみなので直感的にわかりやすく、一つ一つが大きいので押しやすいです。切り替えのタブはアイコンだけでなく下に文字も入っているので、年齢問わず使いやすいアプリになっています。


Warning: Use of undefined constant sidebar_widget - assumed 'sidebar_widget' (this will throw an Error in a future version of PHP) in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/sidebar.php on line 3

同じテーマの記事

kinoshita木下 雄貴 (Kinoshita Yuki) / 2019.2.27

997

Sketch Search Everywhereで簡単にレイヤーを探す


Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/single.php on line 152

kinoshita木下 雄貴 (Kinoshita Yuki) / 2019.6.3

990

企業やサービスの継続的なイメージアップに。デザインシステムを取り入れたブランディング事例


Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/single.php on line 152

kinoshita木下 雄貴 (Kinoshita Yuki) / 2019.6.10

969

「伝える」気持ちを大切に。ユニバーサルデザインとアクセシビリティについて考えてみました。


Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/single.php on line 152

kinoshita木下 雄貴 (Kinoshita Yuki) / 2019.11.4

969

業務でUIの参考にしたい3つのアプリ


Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/single.php on line 152

kinoshita木下 雄貴 (Kinoshita Yuki) / 2019.9.30

959

ログイン & リマインダーのUIデザインで工夫のある3つのアプリ


Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/2/nscreates/web/blog.nscreates.com/nsc/wp-content/themes/wp_NsCreateblog/single.php on line 152
N's Creates について詳しく見る