• jp
  • en
イオンカード暮らしのマネーサイト・イオンウォレット

新たなサービス創出を可能にする「金融プラットフォーム」へ

イオンカードのポータルサイト「暮らしのマネーサイト」と、カード利用者向けの公式アプリ「イオンウォレット」。事業パートナーであるNTTデータとの共同で、両サービスのリニューアルを行いました。特徴的なのは、アーキテクチャの再構築にまで踏み込み、チャレンジングな仕様を実装している点。複数のベンダーの叡智が結びつき、カード決済を起点とした未来のデジタルサービスの創出を可能にする、新たなサービス基盤が誕生しました。
Solution / Output
ResearchAnalysisStrategic PlanningInformation ArchitectureUX ConsultingUX DesignDesign Language SystemContents DesignUI DesignArt DirectionVisual DesignFrontend DevelopmentCMS DevelopmentProject ManagementMotion DesignUser Testing
Visit Website

「夢のある未来」を描き、土台から刷新

リニューアル以前のサイトは、長年にわたり運用が続けられ、新たな種別のカードが追加されたり、機能を拡張したりする度に改修が重ねられてきたもの。利用者のUXが考慮されておらず、サイト全体のUIの統一感にも課題を抱えていました。また、従来のオーソドックスな開発手法にのっとり、データや画面資材がサーバー側で密結合した状態で構築されているため、軽微な修正であっても反映までに数週間単位の時間を要するなど、運用改善と情報鮮度の維持が課題でした。

さらに、2016年にサービス提供が開始された公式アプリについても、サイトとの連携が十分ではなく、活用範囲が限定されていました。リニューアルにあたっては、こうした課題も念頭に、デジタル時代にふさわしい顧客中心のサービスが提供可能となる土台づくりを行い、夢のある未来への確かな道筋をつけることを目標に設定。こうして、デザインの刷新とあわせ、アーキテクチャの抜本的な見直しを行うことになりました。

親しみやすく、幅広い層にとって心地よい UX/UI

UXの検討、UIのデザインにあたっては、既存のコアユーザーである30~50代の女性(主婦層)のみならず、今後具現化していきたいデジタルサービスのユーザーをも念頭に置いています。1,200名規模のアンケート調査や、インタビュー、さらにイオングループの複数の小売店舗での行動観察を実施し、ターゲットとなるペルソナを5タイプ策定しました。

そこから導き出したデザインのキーワードが、ユーザーにちょっとしたワクワク感を届ける「親しみやすさ」、そしてどのような人にとっても明快かつ受け入れやすい世界観となるような「シンプル&クリア」と「ニュートラル」。白を基調に、イオンカラーであるマゼンダ、そしてイオンカードのサービスカラーである茄子紺の2色をアクセントに用いています。また、アクションの優先度や位置づけに応じて、UIのパターンを分類。それをサイトとアプリの共通ルールとして適用することで、操作性の明快さと、両者を併用するユーザーにとって重要な、世界観の連続性を担保しています。

1 2

サービスユーザーも情報発信者も嬉しい、プラットフォームのあり方

システム面では、静的コンテンツと動的アプリケーションのそれぞれについて、アーキテクチャを刷新しています。具体的には、サイト全体で1,000ページ超に上る静的コンテンツは、新たに導入したCMS*1ソリューション「Sitecore」を活用し、CMS上での構造化・テンプレート化を実現。これについては、CMS開発の知見を有するベンダーの協力を得ています。また、動的アプリケーションが必要な約250ページについては、SPA*2方式を採用した上で、すべての処理をOpen API*3化。新たなアーキテクチャでは、Webレイヤーの修正であればサーバーサイドの編集が不要となるため、スムーズな更新作業が可能になります。

また操作性の面でも、従来の開発方式のように画面描画の度にすべてのアセットを読み込むのではなく、必要な対象のみを都度読み込む作りにできるSPAだからこそ、アプリのように滑らかなUXを実現できます。さらに、処理単位ごとにOpen APIとして切り出す方法をとっているため、アプリケーション側の機能追加や外部システムとの連携も容易です。加えて、今回開発した大部分のOpen APIはサイトとアプリで共用ができるため、更改作業を一本化することができます。今回、サイトとアプリ両方のデザインに加え、サイトの画面ごとのロジック実装やシナリオ試験設計/打鍵もフォーデジットが担当しています。基盤以降の開発全般を担当したNTTデータをはじめとする複数のベンダーの総力で、難度の高いアーキテクチャを具現化することができました。

デジタルサービス創出のスタートラインに

2020年9月にリリースを終え、その後はCMSとSPAそれぞれの領域について運用チームを組織しています。即時対応が求められる改修や運用更新はもちろん、リニューアル以後のサービス全体の利用状況のリサーチや分析、さらには今後の改善に関する提案やバックログ管理まで、幅広いサポートを行っています。ここまでは、いわばプロジェクトの「STEP1」。将来的に実現したいデジタルサービスを打ち出すためのプラットフォームがようやく整ったところです。今後は、お客様とともに効果検証を重ねながら、夢のある未来へと連なる「STEP2」に向けた準備を進めていきます。
  1. Content Management System:ページを構成するテキストや画像、描画に必要なテンプレートなどをデータベース上で管理しておき、構造に配慮した一括更新やコンテンツの配信制御を可能にする仕組み。
  2. Single Page Application:画面の描画に必要なHTMLやCSS、JavaScriptなどの資材を予めクライアント側にダウンロードしておき、新規のページを表示する際は、すべての資材を都度サーバーからロードするのではなく、JavaScriptを使い必要なデータのみを取得し、動的にページを書き換えるアプリケーション。シームレスな遷移体験が実現できる上、データと画面が分離しているため更新性が高い。
  3. Application Programming Interface:特定の機能に特化した、共有可能なプログラム。または共有のための仕組みがパッケージ化されたもの。Open APIならば、どこからでも参照・呼び出しが可能。

Client

イオンクレジットサービス株式会社

Credit

UX CONSULTANT
Takehiro SUENARI
UX DESIGN
Nozomu NITTA , Wataru SAITO , Hayato MURAI
INFORMATION ARCHITECTURE
Asato KATSUMATA
UX DESIGN ASST.
Miho TANAKA , Takafumi NAKAMURA
RESEARCH
Rika ISHIHARA
ART DIRECTION
Reiko OKUDA , Taro UEDA
DESIGN
Pengjun Liu , Yurika WATANABE
TECHNICAL DIRECTION
Takuya ABE , Kanon KAKUNO
DEVELOPMENT
Takayuki SAKIMOTO , Yoshitaka SHINMURA
TESTER
Iori HARADA , Aya KAJIMOTO , KaedeAOYAMA
DATA ANALYSIS
Masashi MIZUTANI
PROJECT MANAGEMENT
Kazuki YABE
GROWTH UX DESIGN
Yutaro INAI , Taro AIZAWA , Natsumi NAGANUMA , Keisuke KINOSHITA , Chihiro MORI , Yuta SHINADA

Partner

PROJECT MANAGMENT / SYSTEM SUPERVISE
NTT DATA Corporation
CMS DEVELOPMENT
LYZON Inc.
DEVELOPMENT
3FORCOM
TEST MANAGEMENT
NTT DATA Vietnam
MOVIE EDIT
ELEPHANTSTONE Co., Ltd.
PHOTOGRAPHY
Tsukasa ISONO (RicoLeRisa)

Other Projects

ニトムズ

バラエティに富んだ製品を象徴的に魅せるビジュアルデザイン

Information ArchitectureUI DesignArt DirectionVisual DesignFrontend Development
Back to Index