実績

OUR WORKS

生産性の高い開発で利便性とセキュリティレベルを追求したネットバンクアプリを開発

PayPay銀行株式会社 様
  • DX・内製化支援
  • システム構築・アプリ開発
  • UX/UIデザイン
WORK #28 eyecatch

ジャパンネット銀行(現PayPay銀行)様の普通預金口座をお持ちの方向けに、口座残高が確認できるアプリを開発しました。その他、当せん確認アプリ/ローンアプリ/ビジネスアプリ/トークンアプリもアシアルで開発を担当しました。

目的・背景

※2015年時点の情報を掲載

スマホの普及により、スマホからジャパンネット銀行(現PayPay銀行)様のサービスを利用されるお客様が増えました。スマホからの利用動向分析などを行ったところ、PCからの利用に比べ、残高照会や取引明細照会のみを目的とした短時間のお取引が多いということが分かりました。また、Visaデビット付キャッシュカードのご利用が増加していることで、外出先からスマホによる残高照会が増えることも予想できました。ジャパンネット銀行(現PayPay銀行)様はスマホ向けにはスマホ用Webサイトを中心にサービス提供を行っていましたが、機能を特化したアプリを提供する事によって、利便性を更に向上出来るのではないかと検討されていました。

そこで、ジャパンネット銀行(現PayPay銀行)様は残高照会を簡単かつセキュアに行えるアプリをお客様に提供することにしました。本システムを開発するにあたり「iOSとAndroid向けのクロスプラットフォーム対応であること」や「将来的に自社内でのアプリの改修を行えること」、「シンプルな機能のみの提供となること」などのアプリの要件から、「HTML5ハイブリッドアプリ」に開発手法が絞られました。

アシアルの提案は、「Monacaによる生産性の高い開発による費用と開発期間」や「Onsen UIを使ったネイティブ開発に劣らない操作感の実現」といった、同分野での保有技術の高さと開発経験の豊富さに裏打ちされた内容であり、ジャパンネット銀行(現PayPay銀行)様の要件に最も合致していることが評価され採用されました。

インタビュー

article visual #6 with Text
お話しいただいた方

島崎 建 様
執行役員(開発二部、開発三部担当)
IT本部副本部長 兼 開発三部長 CDIO

※インタビュー内容は2015年時点の情報を掲載

アプリの操作感で特に留意した点を教えてください。

島崎様
外出先でもすぐに残高を確認できるように、ログイン操作や残高を確認する画面にこだわりました。特にログイン画面は直感的操作で極めて短い時間でログインできるよう設計しました。滑らかなUI表現の実現に関しては、HTML5を採用する上での懸念点だったのですが、Onsen UIを活用することで、当社が期待する操作感を実現できたと感じています。

HTML5ハイブリッドアプリ開発を選択された理由を教えてください。

島崎様
iOS用とAndroid用のアプリケーションを開発する場合、ネイティブ言語で開発を行うと、それぞれに開発コストがかかります。HTML5ハイブリッドアプリであれば、ソースコードの共通化ができるため初期の開発コストや改修コストが大幅に削減できると考えました。また、スマートフォンアプリはリリース後も短いスパンで改良を重ねる必要があるため、我々でもメンテナンスができるWeb技術を採用するということは、大きなメリットがあると考えています。

セキュリティについて留意した点についてお教えください。

島崎様
お客様の大事な情報を扱うアプリケーションになりますので、セキュリティの考慮はとても重要です。アプリ側は単純なビュー機能に限定させ、セキュリティに関わる重要な処理は全てサーバー側で行なっています。さらにMonacaの機能でアプリ側のリソースファイルも暗号化をするという2段構えの対策を行っています。これらにより、HTML5ハイブリッドアプリに関するセキュリティ面の懸念点はクリアされると考えています。

今後の展開について教えてください。

島崎様
今後は社内でのアプリのメンテナンス体制に移行し、アプリの日々の改善など、様々な施策を迅速に行い、より利便性の高いサービスをお客様に提供したいと考えています。

開発したアプリの紹介

PayPay銀行アプリ(旧:残高確認アプリ)

PayPay銀行の口座残高・入出金明細を確認できるアプリです。Cordovaを使って開発しており、生体認証やパターン登録、ソースコードやデータの暗号化の機能をハイブリッドアプリで実現しています。残高確認アプリからPayPay銀行アプリへのリニューアルに伴い、振込やローンをアプリで利用できる機能、カードレスATMや口座開設時のマイナンバーカードを使った本人確認など、様々な機能を追加をして年々高機能になっています。

article visual #19 with Text
  • PayPay銀行口座の情報を閲覧
    PayPay銀行口座の預金残高と最新20件の取引明細をアプリから確認することができます。
  • ログインパターンによる素早いログイン
    初回ログイン時にログインパターンを登録することで次回からはパターンをなぞるだけで素早くログイン、そして口座の情報を閲覧することができます。ログインパターン登録後は「生体認証」もご利用いただけます。
  • Monaca技術による開発工数の短縮
    ネイティブアプリとは異なりHTML+CSS+JSを作るだけでiPhoneアプリとAndroidアプリをマルチパブリッシュすることで開発工数の短縮につなげることができました。 また、Onsen UIを導入したことでモダンなインタラクションも実現できました。

当せん確認アプリ

PayPay銀行口座で購入したスポーツくじ(BIG/toto/WINNER)や、宝くじ(ロト/ナンバーズ)の当せん結果を確認できるアプリです。また、アプリからくじの購入も簡単に行えます。

article visual #26 with Text
  • ネイティブアプリに劣らない操作感
    くじの当せん照会では、横スワイプのアクションにより、BIG・toto・WINNER・ロト・ナンバーズの当せん照会画面を切り替えることが出来ます。 購入したくじの詳細も、タップすることで表示・非表示が切り替えられます。 また、初回ログイン時にログインパターンを登録することで、次回からはパターンをなぞるだけで素早くログインすることができます。
  • 多彩なアニメーションによってくじのワクワク感を演出
    くじが当せんしていた場合、該当のくじには王冠の当たりマークが表示され、光るアニメーションが表示されます。 そして、キャリーオーバーが発生している場合、ドラムロール風のアニメーションでキャリーオーバー額が表示されることで、ワクワク感を演出しています。
  • 開発環境として、「Monaca」を採用
    開発環境として、アシアルの提供するモバイルアプリケーション開発環境である「Monaca」のエンタープライズ版を採用しています。 ローカル環境で開発を行い、すぐにアプリの状態が確認できる「Monaca」デバッガーを活用し、様々なテストを行うことで、短期間でAndroid/iOS両対応の高品質なアプリを開発することができました。

ローンアプリ

PayPay銀行のローンの利用と状況の確認ができるアプリです。口座開設後のローン利用手続き、借り入れ・返済・利用状況の確認や各種手続きが簡単にできるようになっています。また、プッシュ通知によって返済日を事前にお知らせする機能もあります。

article visual #33 with Text

ビジネスアプリ

PayPay銀行口座の残高・入出金明細を確認できる機能に加えて、複数の口座に一括で振り込む機能に特化したアプリです。従業員の方への給与の支払いやお取引先への支払いなど、多くの口座に振込する必要がある場合に便利に使えます。

article visual #37 with Text

トークンアプリ

大切な手続きや取引の時に必要となるワンタイムパスワードを発行するアプリです。このアプリを使うとカード型トークン(ボタンを押すとワンタイムパスワードが表示されるカード)が不要になり、より便利になりました。PayPay銀行アプリやウェブブラウザで表示しているページから簡単にアプリを起動でき、シームレスに手続きできるようになっています。

article visual #41 with Text
To our contact form
この実績に関することなら、
お気軽にお問い合わせください。
PAGE TOP
PAGE TOP
Asialの発信や
ニュースをチェック
アシアルTechブログ

アシアルの中の人が
技術と想いのたけをつづるブログ

アシアルnote

日々の活動や取り組み、
アシアルのカルチャーを紹介