UX設計が導く、“らしさ”あるUI（後編）

第5回：UXUIリニューアル（展開と提供）

前編では、理想の体験を可視化したジャーニーマップをもとに、「まずどこから届けるか？」という観点でMVPを定めていく過程をご紹介しました。

今回は、そこから実際にUIへと落とし込んでいくデザインのプロセスを振り返ります。
MVPが定まった後に待っていたのは、「その体験をどうデザインするか？」という問いでした。IDAREの体験を“らしく”届けるには、単に綺麗なUIをつくるだけでは不十分です。
アプリを開いた瞬間に世界観が伝わるような、視覚的にも一貫した「表現の芯」が必要でした。

“IDAREらしさ”を探る、世界観のマッピング

まず私たちデザイナーチームで、Pinterestを活用しながら数百点におよぶイメージを収集し、ムードボードの作成から始めました。
集めたイメージはMiro上に貼り出し、4象限のマップに整理していくことに。最初に設定したマッピング軸は「シンプル／複雑」「情緒的／システマチック」など、ビジュアル表現そのものに焦点を当てたものでした。しかし、スタイルとしては分類できるものの、「IDAREらしさ」や「届けたい感情」といった本質的な部分は浮かび上がらず、進めるほどに“本当にこれでいいのか？”という違和感が大きくなっていきました。

そうした気づきを経て、私たちは視点を根本的に見直すことにしました。
再定義したのが、以下の5つのテーマです。

• IDAREに触れるユーザー反応

• IDAREとユーザーの関係性

• ライフスタイルの変化

• IDAREの理想像

• IDAREを利用するユーザーの表情

この軸で改めてマッピングを行ったことで、「このイメージはどんな気持ちを表しているのか？」「IDAREの価値観にフィットするのはどれか？」という問いに立ち返ることができ、表層的なスタイルではなく、“伝えたい姿勢”を中心に世界観を捉える視点が得られました。

そこからは、抽象化と具体化を往復しながら、印象に残ったビジュアルを赤丸でグルーピングし、IDAREにふさわしい世界観の輪郭を丁寧に見極めていきました。
こうして浮かび上がった方向性をもとに、次のステップとして3種類のビジュアルコンセプト案を作成。
それぞれに込めた意図や感情の違いをデザイナー間で擦り合わせながら何度もブラッシュアップを重ねていき、より深く”IDAREらしさ”を追求し最終案として2案に絞り込みました。

世界観の方向性をチームとともに磨く

ブラッシュアップを経て、2案のビジュアルコンセプトが完成。

Design concept A「Little Joys」は、
窓を拭いたようなシルエットのモチーフに、情緒を感じさせるイラストを掛け合わせて、目標や目的を持って貯めたその先の未来を投影できるようなデザインにしました。

Design concept B「Fuel Cash Flow」は、流れや液体で柔軟さを意識し、ぼかしやグラデーションを取り入れ透明感や水のような質感を表現することで、新たなお金の流れや未来の変化や自身の選択の柔軟性などを表しています。

この二つのビジュアルコンセプトをUIイメージと合わせて、社内全体へ共有しました。
この評価にはIDARE事業部にとどまらず、Flex Capital事業部やコーポレート部門を含む、全社のメンバーが参加し、それぞれの案に対して「どちらが良いか」の投票と、理由を添えたフィードバックを収集しました。
フィードバックはMiro上で付箋として可視化し、主なコメントをカテゴリごとに整理。

Design concept A「Little Joys」には、

• 「ユーザーが自分ごと化できそう」

• 「ワクワクする未来が想像できる」

• 「100万DLの景色が見えた」

といった、ユーザー視点や拡張性を評価する声が集まりました。

一方、Design concept B「Fuel Cash Flow」は、

• 「金融系アプリとして今後さらに機能を拡充する上で汎用性がある」

• 「先進性という価値の観点で突き抜けている。というイメージが伝わりやすい」

• 「これまでの表現と差分が小さい分、既存ユーザーが受け入れやすい」

といった声があり、評価が二極化。


投票数でもAが16票、Bが15票と拮抗し、社内からのフィードバックだけでは最終決定が難しい状況に。
そこで次のステップとして、週末に友人や知人といった社外の人たちにもヒアリングを実施し、生活者としての視点を取り入れることにしました。
結果的に、視覚表現としては「Little Joys」の方向性に決定。
その決め手となったのは、たくさんの人からいただいたフィードバックから見えてきた世界観でした。
「この世界観には、ユーザー自身にこうなってほしいという“願い”が込められているように感じられる」
単なるビジュアルの好みではなく、IDAREの思想や目指す未来が、直感的に伝わるという点が、最終的な選定を後押ししました。
ただし、その一方で、「このコンセプトタイトルが、世界観を言い切れているか？」という新たな問いも生まれ、以降はこの“らしさ”をどう言語化するかという、表現の芯を磨くフェーズへと進んでいきます。

コンセプトの言語化。「貯める」が物語になるということ

ビジュアルコンセプトの方向性が定まり、次に向き合ったのは世界観を象徴する「コンセプトテーマ」の言語化でした。
当初、UIの方向性に対して「Little Joys（日常の中にある小さな幸せ）」「Joyful Days（喜びで満たされる日々）」といった案を提案していましたが、ここでメンバーからいくつかのフィードバックを受けました。

• イラストの世界観が非日常的であるのに対し、テーマは日常を表していて乖離を感じる

• コンセプトワードが「日常の幸福」に寄りすぎていて、IDAREが届けたい“未来に向けた変化”が表現できていない

• 「欲しかったものや叶えたかったことを、自分でコツコツ貯めて実現する」ストーリー性が弱い

こうした違和感を出発点に、私たちは再びこれまでの議論やリサーチに立ち返りました。ユーザーインタビューやVIリニューアルの過程で出てきた「安心感」「心の余裕」「無理のない」「喜び」などの言葉を紐解き直し、そこから抽出されたのが、

• 「穏やかさと小さな幸せ」日々の積み重ねがもたらす安心感

• 「内面的豊かさの追求」未来に向けて自己肯定感や選択肢を広げていく感覚

といった軸でした。これらは、ユーザーの声とチームでの対話から必然的に浮かび上がってきたものです。
そうした視点を踏まえてあらためて議論を重ね、最終的に導き出されたのが
「貯める」があなたの物語になる
というUIのコンセプトテーマです。
このテーマには、以下のような想いを込めています。

• 「貯蓄＝我慢」ではなく「貯蓄＝未来をつくること」という認識を広めたい

• シンプルで穏やかなUIの中で、自分のペースで小さな幸せを積み重ねる設計

• その積み重ねが、やがて“自分だけのストーリー”として可視化される世界観

• あえてお金や節約を想起させる言葉を避けることで、「ポイ活」的な印象を回避し、自己成長の物語として捉えてもらえる表現を意図

つまり、「貯蓄のための貯蓄」ではなく、「自分の未来のための貯蓄」という体験の価値転換こそが、IDAREが提供したい“らしさ”なのだと明確に位置付けることができました。

UXライティング。ワークショップと人格形成

コンセプトテーマ「“貯める”があなたの物語になる」が定まり、次のフェーズで私たちが向き合ったのは、“どんな語り口で”ユーザーと向き合うのかという、言葉の人格設計でした。

ワークショップの構成

このフェーズでは、職種を問わず全メンバーが参加するUXライティングのワークショップを実施。
以下の3つの問いを起点に、IDAREらしさを言葉として炙り出していきました。

• IDAREはユーザーにどう思われたいか？
  → 信頼、親しみ、肯定、背中を押す、など

• 私たちはユーザーにどんな価値を届けたいか？
  → 簡単・わかりやすい、新鮮な驚き、説明しすぎない、など

• 最終的にIDAREがあることで、どんな世界にしたいか？
  → 自分の未来が楽しみになる、幸福感、肯定される社会、など

付箋で自由にアイデアを出し合い、全員で俯瞰しながら言葉をグルーピング・整理することで、IDAREが目指すコミュニケーションの方向性が少しずつ可視化されていきました。

IDAREを“人”として捉える。IDEさんの誕生

言葉の印象をより明確にするため、後半のセッションでは「IDAREを人として擬人化すると？」という問いを設け、メンバーそれぞれが「IDAREってどんな人？」というプロフィールを作成。
たとえば、

• 年齢・口調・性格・趣味・休日の過ごし方

• 好きな本・音楽・価値観

• ユーザーにどう接するか、どんな声で話しかけるか

といった切り口で、チームごとに異なるIDAREらしい人物像が描かれました。
それぞれの案を共有・比較しながら共通点を抽出していく中で、自然とチームの共通認識として浮かび上がってきた人格がありました。
それが「IDE（イデ）さん」です。

IDEさんとは、どんな人か？

• 落ち着きがあり、押しつけがましくない

• 自分の価値観を大事にしながら、人の話をよく聞く

• 派手ではないが、確かな優しさと芯をもつ

• 「こうすべき」ではなく、「あなたはどうしたい？」と問いかける存在

• お金の知識を語るのではなく、自分の未来を楽しみにできるように背中を押してくれる

IDEさんという人格が生まれたことで、UI上の言葉選び、説明のトーン、メッセージの出し方にまで「誰として語っているのか？」の基準ができ、体験全体を通して一貫した“らしさ”を持たせることが可能になりました。

スタイルガイドとUIルール設計

コンセプトが決まった後は、デザインの基盤づくりに入ります。
感覚に頼ることなく、誰が手を動かしても世界観が崩れないようにするため、スタイルガイドやデザインシステムを整備しました。
主に整備した項目は以下の通りです。

• カラー設計：ライト／ダークモードを両立させつつ、セマンティックカラー（意味を持たせた色）を定義。アクセシビリティに配慮し、コントラスト比もチェック

• タイポグラフィ：フォントサイズごとに最適な行間やカーニングを調整。読み心地と一貫性を両立

• その他のスタイル要素：角丸、シャドウ、透明度などもトークン化して設計

• アイコン：すべてのアイコンをゼロから設計し、今回のビジュアルコンセプトに沿うように統一

この整備によって、「機能性」と「らしさ」を両立できるUIの下地が完成しました。
スタイルガイドの整備と並行して、UI設計も進行。

• 目的達成に必要な情報が自然に見える順に配置されているか

• 行動の導線が直感的に伝わるか

• 不安や迷いが生まれそうな場面に対して、どのようにガイドするか

といった観点を意識しながら議論を繰り返し、最終的に223枚のUIデザインへと落とし込みました。
画面数が増えた背景には、「すべての状態に“意図”を込めたい」という想いがあります。
エンプティステートやエラー表示なども含め、あらゆる画面に“IDAREらしい体験”が滲み出るよう、余白・余韻・トーンを細かく調整していきました。

UIで届けたかったのは「感情の接続」

IDAREが目指すのは、機能のわかりやすさだけではない、「感情と繋がる体験」です。
前述した「窓を拭いたようなシルエット」というモチーフも、その一つ。繰り返し登場させることで、貯めた先の未来を俯瞰して見渡せるような感覚をユーザーに届けたいと考えました。
UIはあくまで表現の手段ですが、その手段によって、ユーザーの感情が「行動」へと変わる瞬間を後押しできる。──そんな体験設計を、芯に据えてつくってきました。

リニューアル前のUIと議論を重ね、最終的にリリースとなったUIがこちら。

こうして生まれた新しいIDAREのUIは、ただの表層のリニューアルではありません。
ユーザーに届けたい体験の“芯”を見つけ、それを可視化し、伝わるようにデザインする。その一貫したプロセスを経てようやく形になったUIです。
私たちが信じたのは、「UIは思想を体験に変える翻訳装置である」ということ。
この体験が、少しでも誰かの未来を動かすものでありますように。
これからも、ユーザーのみなさんと一緒に歩みながら、プロダクトもブランドも育てていきます。

今回のPJを振り返ってみて

振り返ってみると、今回のリニューアルは「IDAREらしさ」を再発見する旅でもありました。
VIの再構築に始まり、UX設計、UIデザインに至るまで、チーム全員が同じゴールを見つめ続けられたからこそ、約半年という短期間でここまで到達できたのだと思います。
もちろん、完成はゴールではなく新たなスタートライン。これからもユーザーの声に耳を傾け、IDAREならではの体験を一歩ずつ積み重ねていきたいと思います。