見出し画像

進捗グラフをリニューアルしました

サービス全体でのデザインシステムを整えていく施策として、右側にあった進捗グラフを左サイドバーに移動しました。

画像4

↑ サイドバーを開くと進捗具合を見ることができます。

改修の理由としては、いままで進捗グラフを配置していた右側の幅が可変にも関わらず、横に広がるような情報がなく、収まりがよくなかったためですね。右側が広がると間延びした印象だったのでなんとかしたいと思っていました。

ただ、完了時のアニメーションは好評だったので、完了ボタンの近くに実装してみました。

画像1

↑ 完了ボタンをクリックすると進捗バーがアニメーションします。

CSS Transitionを使ってふんわりとしたポップアップの表示と、進捗バーのぐぐっと伸びる動きを作っています。また、達成感を出すために、すべてのレッスンが完了するとパーティクルがはじけるようにもしてみました。

画像2

↑ 全レッスンを完了すると...ドットインストールパーティクルがはじけます。パーティクルのかたちは四角いボックスになっています...!

レッスン動画ページはもっともよく使われるので、これからも改善を重ねていく予定です。是非サービスサイトの方で動きを確認してみてください。

・ドットインストール
https://dotinstall.com/
この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
スキありがとうございます!
23
3分動画でマスターするプログラミング学習サービス「ドットインストール https://dotinstall.com 」の公式 note アカウントです。 お問い合わせは https://dotinstall.com/contact からどうぞ!