サービスプロダクト
手数料０円でお金の移動ができる送金アプリ
APP Store
サービスサイトURL
担当期間
2023
年
12
月
- 現在
ディレクションのもとソロまたはチームでの共同ワーク
用件定義
情報設計
UXデザイン
UIデザイン
モバイルアプリ
LP
施策販促
etc…
about
”エアウォレット”のプロダクトデザイン
その他プロモーション等のクリエイティブを担当
株式会社リクルートにフルコミット常駐しており、Airシリーズの１つである”エアウォレット”のサービスプロダクト一連のデザインを担当しています。
また、エアウォレットでも使われる決済ブランド”COIN+”のデザインも担当しております。
担当範囲
プロダクトデザイン
・エンハウス（機能追加）案件
・グロース案件
アプリケーションはnativeが基本
一部のWeb view画面も担当
その他のクリエイティブ
・webデザイン
サービスサイトや施策のLPの作成
・その他プロモーション
キャンペーン等のバナー作成やDTP
経験してきたこと
UIデザイン
要件定義 / 機能要件 / 情報設計 / WF / UIデザイン / UIグラフィックス/ デザインシステム / プロトタイピング
UXデザイン
ペルソナ手法 / カスタマージャーニーマップ / アクティビティシナリオ / ライティング / ブランディング/
ユーザーテスト / 定量定性調査 / ユーザーヒアリング
work
実績
掲載は公開可能な情報のみとしており、補足できる内容は面談時に直接お話しさせていただきます。
Project A
ギフトコード機能追加に伴う画面のUIデザイン・
ユーザーガイドLP作成
モバイルアプリ
web LP
プロジェクト概要
アプリ内のギフトコード機能画面のUIデザイン・UIグラフィックスを制作
新機能の利用が初めてのユーザーでも困らないようなオペレーションのためにユーザーガイドLPも制作
担当範囲
注力ポイント
ギフトコード機能とあわせて、ビジネス観点である”決済アクションユーザー”を増やす体験のと最適な表層の検討
前提
プロジェクト発足当初はギフトコード実装のみの検討をだったが、途中で事業収益のために決済アクションを増やすことも目的に加えられた
実践したこと
・リサーチャー、PdMと決済アクションへつながるアイディアを協力して検討
・承認へ持ち込むために、工数×バリューの評価をしながら施策や機能提案とデザインをした
プロセスとアウトプット
1
ギフトコード × 決済アクション の施策や機能アイディアを発散
ギフトコードで受け取ったCOIN+残高で決済してもらうための施策をチームで検討。”利便性重視×エアウォレットを財布的に見る”ユーザー層に対して、使えるシーンを認知させることが効果的であると分かり、利用シーンのサジェストを軸に体験とデザイン観点でアイディアを発散。 工数×バリューの評価からデザインするアイディアを3案に集束。
2
体験の整理と用件定義
収束させた３つの案を、体験の流れをジャーニーマップに洗い出し、コンテンツ要件・機能要件を作成。
3
UIデザイン
機能要件・作成したイラストを踏まえ画面遷移と情報設計を行いUIデザインを作成。（下記ギフトコード機能の一部）
4
ギフトコードのイラストを作成
ギフトコード受け取り完了時に表示するイラストを新規で作成。 ①「残高が増えた」を想起できる要素 ②「嬉しい」と想起できる要素 の２つをイラストの要件とし、お金の俗っぽいイメージに寄らないようギフトカードのイラストで合意形成をした。
5
オペレーション
アプリ以外では、新機能の利用が初めてのユーザーでも困らないようなオペレーションのためにユーザーガイドLPも制作。様々なギフトコードキャンペーンに掲載できるよう、汎用性がある内容を意識して作成。
Project B
他社アプリにCOIN+のSDK導入の案件
モバイルアプリ
プロジェクト概要
他社アプリにCOIN+のSoftware Development Kit導入にあたりアプリの新規画面
主な対象画面は専用サインイン動線とオンボーディング画面
※2025年11月ごろリリース予定
担当範囲
対象画面①
登録項目を短縮できる専用のサインイン動線
注力ポイント
複数アプリを跨ぐ複雑なログインフローに対して、制約の中でユーザーが迷わず進めるよう情報を整理して画面に落とし込んだ
前提
銀行アプリにSDKを導入し、口座開設と同時にCOIN+アカウントを自動発行。
ユーザーは口座開設情報を流用し、初期パスワード設定のみで利用開始できるが、フローは複数アプリ・複数ステップにまたがる構造だった。
課題
SDK仕様や工数の制約によりログイン導線そのものを簡略化が難しい中、複数アプリを跨ぐ複雑なフローを前提にユーザー体験を設計する必要があった。
実践したこと
複雑なログインフローを俯瞰し、迷いやすいポイントを特定して必要な情報を整理・配置し、直感的に進めるUIへ落とし込んだ。
・導線を変更できない制約下で、どの画面にどの情報を配置すべきかを設計
・登録経路の誤りを防ぐためにチュートリアル・エラー画面で案内を補強
・OTP取得フローの分岐は画面内をセクション分けして明示
・完了後はモーダルで「次に銀行アプリで利用可能」と伝え、行動の途切れを防止
プロセスとアウトプット
1
前提条件を踏まえて体験フローを先行設計して課題の洗い出し
プロジェクトの目的・システム上の制約など前提条件を踏まえて、大まかに画面フロー図を起こした。 さらに、他のSDK導入している既存アプリのサインインフローに新規作成するサインイン画面を当てはめ、どのセグメントも負が生じないことを確認し、新規の専用サインイン動線をワンタイムパスワードあり/なしで２つのパターンを確定。チームでウォークスルーをして課題を洗い出し、回収または追加が必要な画面を抽出。
2
画面遷移の設計と情報設計
SDKの共通ページの要素を保ちつつ、今回のターゲット向けの専用ログイン動線を設計。 誤操作時も自然にリカバリーできる導線を目指して設計した。
2
UIデザイン
情報設計に基づき認知負荷と離脱の低減を目指ししてUI要素を配置し、メリハリを意識して表層をデザインした。
対象画面②
専用オンボーディング
注力ポイント
構成要素が統一されていない３ページをどの端末サイズでも要件を満たしつつ美しく見えるデザイン仕様にした
前提
オンボーディングは３ページあり、1枚目はバナーエリア設置、３枚目はログインに関するアナウンスの配置など、構成要素がページによって異なった
実践したこと
・情報設計において構成要素の優先度を明確にし、FVで必要な情報を取捨選択
・ページごとに表示するコンテンツに差分がある中、どの画面サイズでもオンボーディングとして統一されたレイアウトになる仕様の設計
アウトプット
情緒的かつ認知に沿った画面設計・UIデザイン
画面フロー図に沿って、ユーザーの認知を整理しコンテンツ要件を定義。タッチポイントを加味してバナーやアナウンスのコンテンツも定義し、メインのオンボーディングの内容はもちろん、バナー、アナウス、プログレスバーなどコンテンツごとに優先度を検討。 オンボーディングの3ページがそれぞれ違うコンテンツ要素がある中で、iPhone SE ~ iPhne 16 Maxまで要求を満たす画面をエンジニアとの交渉で実装した。
Project C
ブランドパーソナリテイ（体験指針）策定と
デザインガイドラインの見直し
ブランディング
デザインガイドライン
プロジェクト概要
成長フェーズにあるエアウッレット・COIN+の事業拡大を見据え、デザインディレクターと二人三脚でリサーチ・コンセプト設計・ビジュアル検証を経てブランドパーソナリティを策定。定量調査を繰り返し、定性的な観点も踏まえてブランドパーソナリティを策定したのち、既存のデザインガイドラインを改修。アプリやプロモーションなどユーザーのタッチポイントごとにガイドラインを作成。
ドキュメント化して運用をし、ユーザーコミュニケーションにおけるデザインの一貫性の担保ができるようになった。
before
サービスローンチの時に
暫定的にできた既存の
デザインガイドライン
after
サービスの根幹・性格を
表層に落とし込んだ
デザインガイドライン
担当範囲
プロセスとアウトプット
1
プロジェクトのゴール設定
ブランドコンセプトのブレークダウンと、これまで取り組んできたことのメタアップを行い、顧客体験指針として定義する（これが判断基準・行動指針となる）ことをゴールとする。
2
ブランドパーソナリティーとなる３つの形容詞を選定
調査会社に依頼し今後ユーザーになり得る層に刺さる価値を定義。そこから具体的な体験の分析し、ブランドパーソナリティーとなる３つの形容詞を選定。調査の上位から選定し機能的価値から１つ、情緒的価値から２つの形容詞を整理した。
3
デザインテイストを絞りトンマナを決める
ブランドパーソナリティからポジショニングマッピングを用いてデザインテイストを絞り、
トンマナの要素を書き出した。
4
ガイドラインを見直し・加筆
レイアウト、カラー、テキスト、グラフィックの項目でガイドラインを改修。
5
タッチポイントごとの強化表現を定義
表現の幅をもたすためにブランドパーソナリティから強化できる項目を最初の定量調査をもとに検討
未利用/利用フェーズごとに強化して良い表現を決定した。
Project D
エアウオレットアプリの新機能追加の検討案件
モバイルアプリ
プロジェクト概要
エアウォレットの決済ユーザーを増やすことを目的とした新機能追加のビジネス検討にデザイナーとして参加
※事業の方針変更により正式リリースは未実施
担当範囲
プロセスとアウトプット
1
リサーチして一般的な体験の流れをまとめた
既存の類似サービス・機能のリサーチを通して、基本機能/応用機能・UI/UXの特性などを洗い出し整理。
基準となる体験の流れをジャーニーマップで可視化。
2
ニーズ調査ヒアリングを実施
カスタマージャーニーマップをもとに、ビジネスメンバー・PdM・デザイナーがそれぞれの分野で明確にしたい内容を持ち寄りヒアリングの設問を設計。1人5〜10名のヒアリングを担当し計20名の結果を分析。
3
用件定義と機能要件
ヒアリング結果をもとにニーズがある利用シーンを想定して、ユーザー属性の組み合わせ（既ユーザー/非ユーザー）・環境（ネイティブアプリ/ブラウザ/web view）の検討が網羅できるユーザーグループを２つ用意して、再び体験をシャーニーマップで整理。
2つのユーザーグループごとに、MUST機能ver・NEED機能ver ・WANT機能verでコンテンツ要件を網羅的に検討した。
4
UIデザイン・プロトタイピング
詳細の画面を用意しビジネス観点・ユーザー体験の付加価値の観点が評価できるものを用意した。
Other Work
webサイト
"三菱ＵＦＪカードポイントアッププログラム"施策LP作成
https://coinplus.jp/mucard/mucard-app/
要件定義 / 情報設計 / WF / UIデザイン
メール
新規申し込みユーザーへ送るシステムメールの検証
ABテスト設計 / 情報設計 / WF / UIデザイン / UIグラフィック
work
モバイルアプリ
ギフトコード付与の機能追加
UIデザイン/ UIグラフィックス
web
"三菱ＵＦＪカードポイントアッププログラム"施策LP作成
https://coinplus.jp/mucard/mucard-app/
要件定義 / 情報設計 / WF / UIデザイン
メール
新規申し込みユーザーへ送るシステムメールの検証
ABテスト設計 / 情報設計 / WF / UIデザイン / UIグラフィック
商品プロモーション
チェア カラーシミュレーター
vertebra03の店頭販売向けのカラーシミュレーター
制作期間
１週間
業務内容
UIデザイン / プロトタイピング / 素材イラスト作成
2025 - miharu.design