foreground-image

mymizu

  • design-icon Created with Sketch.

    デザイン - モバイルアプリのUI/UXデザイン

  • development-icon Created with Sketch.

    開発 - React Nativeを使用したiOS、Androidのアプリ構築

background-image background-image
  • design-icon Created with Sketch.

    デザイン - モバイルアプリのUI/UXデザイン

  • development-icon Created with Sketch.

    開発 - React Nativeを使用したiOS、Androidのアプリ構築

mymizuは日本のソーシャルイノベーションムーブメントの中で代表的な存在です。彼らのミッションは日本とインターナショナルのユーザーに環境を汚染するペットボトルを使わずに水分補給させること、したがって、ペットボトルの消費を最小限にし、使い捨てプラスチック消費量関連の問題の認知を上げることです。

mymizu-intro

このミッションを達成するための主な戦略はmymizuアプリです。2019年の夏にiOSのプロトタイプ版をリリースして以降、消費者やメディアから注目を集め、可能性があることを確証しました。

コーポレートパートナーからの新たなサポートで、Androidサポートや新機能の追加、ユーザー体験の改善を含むアプリの長期的な計画にコミットをすることが可能となりました。彼らがTacchiにアプローチをしてきたときには迷わずにこのプロジェクトに加わることに決めました。

mymizu-intro
mymizu-icon-refill-bottle

ユーザーエクスペリエンスデザイン

使えてモダンで、すべてのサイズや型のスマートフォンで日本語と英語の両方に効果的に機能するUIデザインを制作するために、mymizuチームと協業しました。

mymizu-screenshot
mymizu-screenshot
mymizu-screenshot

位置情報マップ

ボトルに水を補充できる場所を見つけることができるマップ機能がアプリの中心にあります。水飲み機のような公共の場所に加え、増加している無条件に給水を行う加盟店も含まれます。

元のアプリにあったデザインを基に、給水場所を案内し、それらの場所の詳細を閲覧するときの新しいレベルのインタラクション、ビジュアルの改善を加えました。

mymizu-location-map-background
mymizu-location-map-min mymizu-location-map-background

給水トラッキング

新しいバージョンのアプリは個人とユーザー全体の給水、そして環境への影響のデータをトラッキングし表示します。給水した場所のログを地図上、もしくは家やオフィスなどのプライベートスポットで残すことができます。

個人として約

6

本のペットボトルを削減しました!

mymizuコミュニティとして約

101,300

本のペットボトルを削減しました!

android-frame
mymizu-refill-tracking-background
mymizu-refill-tracking-min mymizu-refill-tracking-background

個人として約

6

本のペットボトルを削減しました!

mymizuコミュニティとして約

101,300

本のペットボトルを削減じました!

mymizu-react-native-screen1
mymizu-icon-react-native

React Nativeでのモバイルアプリ開発

mymizuチームはiOSとAndroidでアプリをリリースすることを時間的余裕のないリリース日の中で希望し、また長期的な開発の効率性も意識していたため、弊社はReact Nativeがこのアプリに適切だと考えました。iOSのSwiftやObjective-C、AndroidのKotlinやJavaといった従来の方法では不可能でしたが、React Nativeは一つのコードベースでiOSとAndroidをサポートすることが可能です。

mymizu-react-native-screen2
mymizu-react-native-screen1 mymizu-react-native-screen2

プラットフォームに合わせたネイティブエクスペリエンス

何年にも渡り従来のiOS、Android開発経験に基づいた、React Nativeを用いたクロスプラットフォームアプリのデザイン、開発の経験によりアプリがiOSユーザーにとってiOSアプリの感覚、AndroidユーザーにはAndroidアプリの感覚を提供することが可能になりました。

これらのモバイルプラットフォームが将来発展したときにもいいエクスペリエンスが継続するよう、弊社でよく使っているライブラリ(React Native Navigation)を利用し、アプリ内のスクリーン間のナビゲーションを構築しました。興味がありましたらReact Nativeでのナビゲーションという記事をご覧ください。

mymizu-platform-native
mymizu-web-service

mymizu webサービスとの統合

多くのモバイルアプリで共通であるように、給水場所やユーザーデータ、その他のコンテンツが格納されているデータベースをホストしている中心的なWebサービスからデータを取り、送ることが必要でした。

mymizuの内部で開発された既存のWebサーバーにRESTful APIがあったので、アプリのネットワークリクエスト、ローカルデータストレージの部分を扱うためにRedux Axios Middlewareと合わせReduxを使用しました。

この業界基準の組み合わせによりネットワーク、データ蓄積、viewロジックを分断し、特に開発チームの拡大や、プロダクトが複雑になっていくに連れ開発スピードが落ちないようそれらを明確に別々にしました。

一度に数百の店舗をマップで表示

React Native MapsはReact Nativeでマップに取り組む際、事実上のソリューションになります。マップの部分は多くの位置情報をきれいに表示するためピンをクラスタリングして表示する必要があり、React Native Mapsはクラスタリングに対応していないため、これに対応するベストなソリューションを考える必要がありました。

ピンをクラスタリングするいくつかのJavaScriptベースのアドオンがありますが、このプロジェクトのニーズに十分なパフォーマンスがあるとは思いませんでした。そのため、React Native Mapsのネイティブコードに編集を加えることにしました。GoogleのiOSAndroid用のSDKからのコードをネイティブレベルで統合することでマップのピンクラスタリングの表示とパフォーマンスをコントロールすることができるようになりました。

mymizu-location-map-min mymizu-hundreds-locations
mymizu-hundreds-locations
mymizu-auto-testing

自動化テストでアプリの安定性を実現

最後に、新機能や変更にもコードベースが正しく継続的に機能するようDetoxインターフェーステストライブラリを活用しました。リグレッション(前には正しく動いていた機能で発生するバグ)のためのテストをマニュアルで行う時間を減らし、より早い開発、リリースプロセスを可能にします。

ユーザーの声

True love
This app is what I wanted for so long, since I have quit using single-use plastic bottle in 2016.

If you wondered “hey does this work only in japan?” because the name is MyMizu which means my water in Japanese, please try flying over US or basically anywhere in the world and see what happens. Amazing.

Looking forward to using this to find my MyMizu spot.

mymizu-reviews-appstore

こんなアプリ探してた!
給水できる場所がすぐわかるから、マイボトルさえ持っていれば、ペットボトル飲料を買わずに済む!少しずつできるエコ活動!

mymizu-reviews-appstore

healthy, fun, educational!
The mymizu app has allowed me to be more conscious on my water intake! With its educational and fun twist, it’s been exciting to track my refills and see the impact I personally have been making as well as the collective impact of the mymizu community - environmentally, health wise and economically!

mymizu-reviews-appstore

すっごくすごく楽しみにしていた、水を補給できる場所を探せるアプリ。一目でみてわかるのが使いやすく、出先で持っていたのみものが無くなったときに、ペットボトルを買わなくてすむ!

mymizu-reviews-google

What an awesome way to create a valuable app. No more buying water bottles from convenience stores! I wish everyone had this app and we could save billions of plastic bottles every year!!!

mymizu-reviews-google

Awesome app! Who'd have thought there are so many refilling stations in my neighborhood! I just wish the pop-up that shows up after logging a refill doesn't have to show up every time. Maybe every 10 or 100 refills? Or better yet just show it once and give us an option to view it anytime via a menu item thereafter.

mymizu-reviews-google

他のプロジェクト

一緒に働きませんか?

プロジェクトに関するご相談やご質問など、お気軽にお問い合わせください。