サービスプロダクト

手数料0円でお金の移動ができる送金アプリ

APP Store

サービスサイトURL

担当期間

2023

12

- 現在

ディレクションのもとソロまたはチームでの共同ワーク

用件定義

情報設計

UXデザイン

UIデザイン

モバイルアプリ

LP

施策販促

etc…

about

”エアウォレット”のプロダクトデザイン
その他プロモーション等のクリエイティブを担当

株式会社リクルートにフルコミット常駐しており、Airシリーズの1つである”エアウォレット”のサービスプロダクト一連のデザインを担当しています。
また、エアウォレットでも使われる決済ブランド”COIN+”のデザインも担当しております。

担当範囲

プロダクトデザイン

・エンハウス(機能追加)案件
・グロース案件

 アプリケーションはnativeが基本
 一部のWeb view画面も担当

その他のクリエイティブ

・webデザイン

 サービスサイトや施策のLPの作成

・その他プロモーション

 キャンペーン等のバナー作成やDTP

経験してきたこと

UIデザイン

要件定義 / 機能要件 / 情報設計 / WF / UIデザイン / UIグラフィックス/ デザインシステム / プロトタイピング

UXデザイン

ペルソナ手法 / カスタマージャーニーマップ / アクティビティシナリオ / ライティング / ブランディング/
ユーザーテスト / 定量定性調査 / ユーザーヒアリング

Project A

ギフトコード機能追加に伴う画面のUIデザイン・
ユーザーガイドLP作成

モバイルアプリ

web LP

プロジェクト概要

アプリ内のギフトコード機能画面のUIデザイン・UIグラフィックスを制作
新機能の利用が初めてのユーザーでも困らないようなオペレーションのためにユーザーガイドLPも制作

担当範囲

注力ポイント

ギフトコード機能とあわせて、ビジネス観点である”決済アクションユーザー”を増やす体験のと最適な表層の検討

前提

プロジェクト発足当初はギフトコード実装のみの検討をだったが、途中で事業収益のために決済アクションを増やすことも目的に加えられた

実践したこと

・リサーチャー、PdMと決済アクションへつながるアイディアを協力して検討
・承認へ持ち込むために、工数×バリューの評価をしながら施策や機能提案とデザインをした

プロセスとアウトプット

1

ギフトコード × 決済アクション の施策や機能アイディアを発散

ギフトコードで受け取ったCOIN+残高で決済してもらうための施策をチームで検討。”利便性重視×エアウォレットを財布的に見る”ユーザー層に対して、使えるシーンを認知させることが効果的であると分かり、利用シーンのサジェストを軸に体験とデザイン観点でアイディアを発散。 工数×バリューの評価からデザインするアイディアを3案に集束。

2

体験の整理と用件定義

収束させた3つの案を、体験の流れをジャーニーマップに洗い出し、コンテンツ要件・機能要件を作成。

3

UIデザイン

機能要件・作成したイラストを踏まえ画面遷移と情報設計を行いUIデザインを作成。

4

ギフトコードのイラストを作成

ギフトコード受け取り完了時に表示するイラストを新規で作成。 ①「残高が増えた」を想起できる要素 ②「嬉しい」と想起できる要素 の2つをイラストの要件とし、お金の俗っぽいイメージに寄らないようギフトカードのイラストで合意形成をした。

5

オペレーション

アプリ以外では、新機能の利用が初めてのユーザーでも困らないようなオペレーションのためにユーザーガイドLPも制作。様々なギフトコードキャンペーンに掲載できるよう、汎用性がある内容を意識して作成。

Project B

他社アプリにCOIN+のSDK導入の案件

モバイルアプリ

プロジェクト概要

他社アプリにCOIN+のSoftware Development Kit導入にあたりアプリの新規画面
主な対象画面は専用サインイン動線とオンボーディング画面
※2025年11月ごろリリース予定

担当範囲

対象画面①

登録項目を短縮できる専用のサインイン動線

検討ポイント①

SDKを導入している他アプリにも影響がない専用サインイン動線

前提

SDK共通の画面がある中で、登録項目を短縮できる専用のサインイン動線の置くことになった。

課題

今回のダーゲットにとって最適化しつつ、

多岐にわたるユーザーセグメント(同一SDKが導入されている他アプリのユーザー)のユーザー体験の悪化をさせない必要がある。

打手

画面遷移図とユーザーセグメントを掛け合わせたフロー図を作成し、セグメントごとの懸念を洗い出し、開発における各ステークホルダーとウォークスルーを通して解消した

。

検討ポイント②

複数のアプリやブラウザの行き来による操作ミス・操作遅延で離脱率のケア

前提

サインインにはワンタイムパスワード取得が必要になるため、複数のブラウザやアプリの往復が発生する。

課題

複数アプリ・ブラウザの行き来により、入力ミスや操作遅延が発生しやすく、離脱率が高まる可能性がある。

打手

各画面で進行状況を明示、次の動作が直感的にわかるように新規画面の情報/UIを設計。

プロセスとアウトプット

2

前提条件を踏まえて体験フローを先行設計して課題の洗い出し

プロジェクトの目的・システム上の制約など前提条件を踏まえて、大まかに画面フロー図を起こした。 さらに、他のSDK導入している既存アプリのサインインフローに新規作成するサインイン画面を当てはめ、どのセグメントも負が生じないことを確認し、新規の専用サインイン動線をワンタイムパスワードあり/なしで2つのパターンを確定。チームでウォークスルーをして課題を洗い出し、回収または追加が必要な画面を抽出。

2

画面遷移の設計と情報設計

SDKの共通ページの要素を保ちつつ、今回のターゲット向けの専用ログイン動線を設計。 誤操作時も自然にリカバリーできる導線を目指して設計した。

2

UIデザイン

情報設計に基づき認知負荷と離脱の低減を目指ししてUI要素を配置し、メリハリを意識して表層をデザインした。

対象画面②

専用オンボーディング

注力ポイント

構成要素が統一されていない3ページをどの端末サイズでも要件を満たしつつ美しく見えるデザイン仕様にした

前提

オンボーディングは3ページあり、1枚目はバナーエリア設置、3枚目はログインに関するアナウンスの配置など、構成要素がページによって異なった

実践したこと

・情報設計において構成要素の優先度を明確にし、FVで必要な情報を取捨選択
・ページごとに表示するコンテンツに差分がある中、どの画面サイズでもオンボーディングとして統一されたレイアウトになる仕様の設計

アウトプット

情緒的かつ認知に沿った画面設計・UIデザイン

画面フロー図に沿って、ユーザーの認知を整理しコンテンツ要件を定義。タッチポイントを加味してバナーやアナウンスのコンテンツも定義し、メインのオンボーディングの内容はもちろん、バナー、アナウス、プログレスバーなどコンテンツごとに優先度を検討。 オンボーディングの3ページがそれぞれ違うコンテンツ要素がある中で、iPhone SE ~ iPhne 16 Maxまで要求を満たす画面をエンジニアとの交渉で実装した。

Project C

ブランドパーソナリテイ(体験指針)策定と

デザインガイドラインの見直し

ブランディング

デザインガイドライン

プロジェクト概要

成長フェーズにあるエアウッレット・COIN+の事業拡大を見据え、デザインディレクターと二人三脚でリサーチ・コンセプト設計・ビジュアル検証を経てブランドパーソナリティを策定。定量調査を繰り返し、定性的な観点も踏まえてブランドパーソナリティを策定したのち、既存のデザインガイドラインを改修。アプリやプロモーションなどユーザーのタッチポイントごとにガイドラインを作成。
ドキュメント化して運用をし、ユーザーコミュニケーションにおけるデザインの一貫性の担保ができるようになった。

before

サービスローンチの時に
暫定的にできた既存の

デザインガイドライン

after

サービスの根幹・性格を

表層に落とし込んだ
デザインガイドライン

担当範囲

プロセスとアウトプット

1

プロジェクトのゴール設定

ブランドコンセプトのブレークダウンと、これまで取り組んできたことのメタアップを行い、顧客体験指針として定義する(これが判断基準・行動指針となる)ことをゴールとする。

2

ブランドパーソナリティーとなる3つの形容詞を選定

調査会社に依頼し今後ユーザーになり得る層に刺さる価値を定義。そこから具体的な体験の分析し、ブランドパーソナリティーとなる3つの形容詞を選定。調査の上位から選定し機能的価値から1つ、情緒的価値から2つの形容詞を整理した。

3

デザインテイストを絞りトンマナを決める

ブランドパーソナリティからポジショニングマッピングを用いてデザインテイストを絞り、
トンマナの要素を書き出した。

4

ガイドラインを見直し・加筆

レイアウト、カラー、テキスト、グラフィックの項目でガイドラインを改修。

5

タッチポイントごとの強化表現を定義

表現の幅をもたすためにブランドパーソナリティから強化できる項目を最初の定量調査をもとに検討
未利用/利用フェーズごとに強化して良い表現を決定した。

Project D

エアウオレットアプリの新機能追加の検討案件

モバイルアプリ

プロジェクト概要

エアウォレットの決済ユーザーを増やすことを目的とした新機能追加のビジネス検討にデザイナーとして参加


※事業の方針変更により正式リリースは未実施

担当範囲

注力ポイント

グループ内に複数のユーザーセグメント(既存・非ユーザー混在)を想定し、利用パターンの整理・網羅・技術的実現を踏まえつつ、ユーザーのニーズにあった体験設計をした。

前提

複数人で利用する機能、かつアカウントを保有していない非ユーザーも利用が可能な機能になる。
非ユーザーはブラウザでの利用を想定する。

実践したこと

・ユーザーのセグメント整理
・ヒアリングでニーズ調査
・ニーズと機能のボリューム(開発工数)ごとに3パターンのコンテンツ要件を提案

プロセスとアウトプット

1

リサーチして一般的な体験の流れをまとめた

既存の類似サービス・機能のリサーチを通して、基本機能/応用機能・UI/UXの特性などを洗い出し整理。
基準となる体験の流れをジャーニーマップで可視化。

2

ニーズ調査ヒアリングを実施

カスタマージャーニーマップをもとに、ビジネスメンバー・PdM・デザイナーがそれぞれの分野で明確にしたい内容を持ち寄りヒアリングの設問を設計。1人5〜10名のヒアリングを担当し計20名の結果を分析。

3

用件定義と機能要件

ヒアリング結果をもとにニーズがある利用シーンを想定して、ユーザー属性の組み合わせ(既ユーザー/非ユーザー)・環境(ネイティブアプリ/ブラウザ/web view)の検討が網羅できるユーザーグループを2つ用意して、再び体験をシャーニーマップで整理。
2つのユーザーグループごとに、MUST機能ver・NEED機能ver ・WANT機能verでコンテンツ要件を網羅的に検討した。

4

UIデザイン・プロトタイピング

詳細の画面を用意しビジネス観点・ユーザー体験の付加価値の観点が評価できるものを用意した。

Other Work

webサイト

"三菱UFJカードポイントアッププログラム"施策LP作成

https://coinplus.jp/mucard/mucard-app/

要件定義 / 情報設計 / WF / UIデザイン

webサイト

COIN+サービスサイト改修

要件定義 / 情報設計 / WF / UIデザイン

メール

新規申し込みユーザーへ送るシステムメールの検証

ABテスト設計 / 情報設計 / WF / UIデザイン / UIグラフィック

work

実績 

掲載は公開可能な情報のみとしており、補足できる内容は面談時に直接お話しさせていただきます。

商品プロモーション

チェア カラーシミュレーター

vertebra03の店頭販売向けのカラーシミュレーター

制作期間

1週間

業務内容

UIデザイン / プロトタイピング / 素材イラスト作成

2025 - miharu.design