はじめに
東京都に引っ越すことになりまして、水道利用開始手続きをしようと思いました。
私は1年ほど前にも東京に住んでおり、その時に水道の解約手続きはWeb上で申し込んだ記憶があったので、今回もWebでやろうと思い利用申し込みページを探していると、「東京都水道局アプリ」なるものを発見しました。
どうやら今はこちらのアプリから水道関連の手続きが行えるとのことだったので利用したのですが、私が官公庁のアプリに対して抱いていたイメージよりもクオリティが高かったので、記事にしてみました。
私のエンジニアスキルは低いため、あくまで多少フロントやデザインに関する知識がある視点から感じたこととなります。
開発元
開発はNECさんがやっているみたいです。
おそらくNECさんがプライムでマネジメントを担当し、その下についたサブベンダーさんが実装といった形かなと思いました。
“スマート東京”の実現へ「東京都水道局アプリ」リリースの舞台裏
注目点
以下良いと感じた点です。
全体的に丸みがある
border-radiusがかなり大きめに設定されています。
角が少し丸みを帯びている程度であれば結構見かけたりもしますが、省庁のサイト・アプリでここまでがっつり丸いのは初めて見ました。
👇 私の抱いていたイメージ（四角くかっちりとしたイメージ、以下の比較対象の画像は全て東京都HPより）
余白が十分にある
余白が広めに設定されており、1つ1つの情報が追いやすいです。
👇 私の抱いていたイメージ（余白が狭い）
この点に関しては、水道局アプリは東京都のホームページと比較して表示する必要のある情報量が少ないため、余白を取りやすいといった点は考慮する必要があります。
ですが、おそらく従来のアプリ開発では情報量が少なくても余白はあまり取られていなかったと思うので、かなり見やすくなっている印象を受けました。
色合いが統一されている
水のイメージカラーである青色をベースとして領域ごとに濃淡をつけることで、目に優しく境目がわかりやすくなっている印象を受けました。
👇 私の抱いていたイメージ（色の多用）
情報量が多いので仕方ないですが、やっぱりどうしても見ていて目がチカチカします。
アイコンの活用
文字だけではなく、アイコンも表示されているため、直感的に理解しやすいです。
👇 私の抱いていたイメージ（アイコンがない）
トップにはホームアイコンが表示されておりますが、その他のタブにはアイコンは表示されていません。
ダークモードが設定できる
設定→カラーテーマ変更 でダークモードの設定が可能です。
このアプリを長時間見続けるということはあまりないような気がしますが、ダークモード対応しているのはかなりモダンな気がしました。
なお、東京都のHPでも色合いの設定ができますが、こちらはユニバーサルデザインに対応したものと思われます。
使用技術
設定→ライセンス情報 と進むことで使用技術を確認可能です。
フロントはVue2とTypeScriptで作られているみたいですね。
私がこれまでネットの情報から獲得した肌感だと、新規開発でjQueryを使うことは減ってきているとのことで、どちらかというとVueやReactを使うことがスタンダードになってきている感はありますが、jQueryで構築されているシステムも多いため、やはりSPAフレームワークを活用しているとモダンな印象を受けます。
（※ちなみにVue2は今年の12/31でサポート終了となります。）
アニメーション
また、アニメーションが至る所で使用されている点も注目ポイントです。
Gifだとわかりにくいので、実際にアプリを見ていただければと思います。
下からぬるっとでてきます。
マウスオーバーすると、波がゆらゆらします。
メール通知を受け取るをONにすると、水が周囲に広がります。
（これはログイン後に利用可能な機能です）
Twitterのいいねボタンみたいなやつです。
→ こんなやつ
また、通知設定をOFFにした場合、単に白くなるのではなくグレーの背景上でチェックマークが端からフェードアウトしていき、全て消えた後に背景が白になっています。
かなり細かいですね！！
水の滴が左右に移動する
画面をスマホサイズにすると、メニューがボタン表示に変わります。
「ホーム」と「メニュー」をクリックすることで、水の滴が左右に移動します
ログイン後はこんな感じ。
単に移動して終わりではなくて、端まで行った際に左右に揺れてから停止しています。
こちらもこだわりを感じます！
評価
Apple Storeでの評価は 2.1 / 5 と低めの評価となっております。
個人的に使い勝手が良かったので、レビューを読んでみましたがリリース当初はバグが結構あったみたいです。
評価の集計結果はこんな感じでした。
リリース直後にバグが出るのはあるあるですので、リリースして間もない時期にある程度低評価が集まるのは仕方ないと思いますが結構多いですね。
なんでもこのアプリは東京都としても肝入りのプロジェクトだったようで、イベントを開催したりと宣伝も結構大々的にやっていたみたいです。
そこでユーザーが結構集まったものの上手くアプリが機能せず、「全然使えねーじゃねーか」という流れで低評価に繋がったのかと思います。
ただ低評価レビューも大分減っており、バグはかなり解消されたのではないでしょうか。
モダンなUI/UXの意義
恐らく、エンジニアじゃない方だと、このアプリを使ったところで「確かにちょっと見やすいし、使い勝手がいいかもね〜」くらいにしか思わないかもしれません。
しかし、エンジニアの観点から見て私は大きな変化を感じました。
それは、
発注者側（東京都）の意識の変化
です。
このアプリは受託開発になりますので、機能の1つ1つに工数が発生しています。
従来のシステム開発のようにやっていると恐らく「こんなアニメーションいらん！」「デザイン？そんなもの重要じゃない。大切なのは情報！」「とにかく安く作ってくれ！」といった感じだったのではないでしょうか。
なぜなら、アプリの機能（今回の場合は水道利用に関する手続き全般）上、こうしたアニメーションやデザインは極論をいうと不要だからです。
こちらにアプリ開発の進捗状況が公表されていますが、ここに掲載されているモックデザインがまさに私がイメージしていた省庁のアプリです。
しかし、今回
デザインや配色、使いやすさなど、お客さま目線に立った設計を進めていきます。
とのことでデザインやアニメーションがUI/UXに与える重要性を発注者側の東京都庁の方々も理解し、きちんと工数を取ったのではないでしょうか。
この点の意識の変化が本アプリから伝わってきました。
最後に
東京都水道局アプリは2022年10月にリリースされて半年で76万ユーザーを獲得しています（2023年3月末時点で約76万ユーザー）。
凄い！
2025年までに100万ユーザーを目指しているとのことで、まだ使ったことのない方は使ってみてはいかがでしょうか？
今後の発展に期待しつつ、世間を騒がせているマイナンバーのような致命的なバグだけは発生しないことを祈っております。