「ペットみるん」アプリのデザインプロセス
こんにちは。ajikeでUI/UXデザイナーを担当しているハラです。
趣味は、飼っているチワワ２匹（9才女の子、1才男の子）を連れて、ビールを飲みながら散歩をすることです。
下記は秩父の紅葉を見に行ったときのものです🍁（かわいい）
はじめに
今回は、私が担当した「ペットみるん」というアプリの進め方について簡単に書いていきたいと思います。
まずは、「ペットみるん」について簡単にご紹介します。
「ペットみるん」とは
留守中でも、離れていても、ペットが1日どんな様子だったのか、アプリで簡単に確認できるAI搭載ペット専用見守りアプリです。
AIが自動でペットの様子を録画・解析し、ベストショットを保存してくれます。もちろん、ライブ映像でもペットの様子を確認でき、自分で撮影することもできます。
提供：東京電力エナジーパートナー株式会社
共働きなどで外出が多く留守にしがちな、ペットを飼っている方に大変嬉しいアプリですね…！
私も2匹のチワワを飼っているので、実際のペルソナの気持ちになって取り組みました。
---
さて、ここから「ペットみるん」で私が担当した、UXD・UID・ブランドデザイン・ロゴデザインの話を簡単に紹介していきたいと思います。
目次
1. アプリ外とアプリ内の体験をシームレスにつなぐUXD
2. ユーザー体験向上と効率化を図るプロトタイプ
3. 一貫した体験を実現するブランドデザインとロゴデザイン
1. アプリ外とアプリ内の体験をシームレスにつなぐUXD
「シームレスにつなぐUXD」には、アプリを使っている間以外の体験も一貫してデザインするという意味が込められています。
「ペットみるん」は、カメラとアプリを連携することで初めて使用できるアプリのため、「カメラを設置する」というアプリ外の行動がとても重要な体験となっています。
もしユーザーが
『カメラとアプリの連携がうまくいかず、アプリそのものを使えなかったら…』
『ペットのいない位置にカメラを置いてしまい、ちっとも留守中の様子がわからなかったら…』
など、これらのアプリ外の行動はユーザー体験の低下に大きく関わります。せっかくお金を払って始めたのに最初の設定でつまづいたら嫌ですよね。
はじめに行ったこと
ペルソナとイラスト付きのカスタマージャーニーを作成し、以下のようなアプリ外とアプリ内の行動を可視化しました。
カスタマージャーニーで可視化してみると、各フェーズの中でユーザーに与えなくてはいけない重要な体験が実現できていないことで、アプリ全体の体験が低下していることに気づきました。
特に離脱に関わるカメラ設置に関しては、アプリ上で行動をカバーする要素がなく、優先度としては一番始めに取り組むべき項目でした。
そこで、まずはアプリ外からアプリ内へのスムーズな誘導を実現するチュートリアルの設計から改善をスタートしました。
下記は、実際の課題と改善案の資料です。
チュートリアルの役割定義
構造や情報設計に関する課題と解決
フローに関する課題と解決
2. ユーザー体験向上と効率化を図るプロトタイプ
チュートリアルの基本設計が完了した後は、実際にSketchとプロトタイプツール「Principle」を使って、プロトタイプを作成していきました。
前段でご紹介した画面遷移の整理やインタラクション部分を実際のプロトタイプ画面で確認していくことで、一連の操作の中での課題や違和感を早い段階で発見することができました。
また、クライアントへの提案の際や開発会社の方への共有もスムーズに行うことができ、プロジェクト進行にも大きく役立ちました。
Principleの作業画面
実際のプロトタイプの一部
3. 一貫した体験を実現するブランドデザインとロゴデザイン
プロトタイプを作成し、チュートリアルの情報設計が完了した後は、全体のデザイントンマナに関わるブランドデザインとロゴデザインに着手しました。
UXDフェーズで作成したペルソナをもとにペルソナが好むキーワードや企業として与えたい印象をヒアリング＆リストアップし、カラーやテイストを決めていきました。
ペルソナからキーワードを抽出
決定したデザインコンセプトとキーワード
上記の方向性からブランドカラーを選定し、ロゴマークとロゴタイプの提案を行いました。
etc…
最終的に決定したのはこちらのロゴマークとロゴタイプです↓
シンボルマークの意味としては、ぺットみるんを「飼い主とぺットを繋ぐ扉」と考え、いつでも飼い主がペットの様子を確認できるサービスであることを表現しています。
ブランドカラーは、大人の女性が好む彩度の低い落ち着きのあるブルーを採用し、ペットみるんの世界観に共感し、愛着を感じることのできるカラーになっています。
決定したロゴとブランドカラーはデザインガイドラインとしてまとめ、他媒体への展開の際にも統一した世界観を保てるよう考慮しています。
デザインガイドラインの一部
「ペットみるん」は、随時機能の追加やアップデートを行っています。
ペットを飼っていて興味のある方はぜひ試してみてください。
（アプリを利用するにはカメラの購入 or レンタルが必要です）
----
以上、「ペットみるん」のデザインプロセスを紹介させていただきました！
設計部分やデザイントンマナ決定までにはもう少しプロセスがありますが、今回は簡単に3つのポイントを紹介させていただきました。
ここまでご覧いただき、ありがとうございました！
💬デザインについて、こんなご要望はありませんか？
・自社のアプリをもっと使いやすくしたい
・オフラインからオンラインの一貫したユーザー体験を向上させたい
・サイトやアプリだけではなくブランド全体のデザインを依頼したい
ajikeはWebを主軸にUXデザインを行っています。
詳しくは、コーポレートサイトをご覧ください。
この記事が気に入ったらサポートをしてみませんか？