DUOLABS
ポートフォリオ

銀行アプリの画面整備

地方銀行が運営するモバイルアプリ5本を、画面上部がくぼんだノッチと下部のホームバーを備えた新しいスマートフォン画面に合わせて直しました。古い画面は以前の小さな画面サイズを基準に、位置を数字で直接書き込んで描かれていたため、新しい画面では上部メニューや下部ボタンが切れたり重なったりするおそれがありました。金融アプリでボタン・入力欄・認証画面が正しく表示されないと、業務そのものに支障が出ます。画面を一つずつ点検して、共通の基準で直すものとアプリごとに個別に手を入れるものを分け、直した画面は改めて確認しました。

Launch
2018
Client
韓国の地方銀行
Type
銀行・認証

01 / 04

ノッチとホームバーを避けて置き直した画面配置

新しいスマートフォンには、画面上部中央がくぼんだノッチと、下端のホームバーが加わりました。地方銀行アプリ5本の上部ステータスバーとメニュー領域、下部のボタンとタブがこの領域に入り込まないよう、画面ごとに配置を点検して直しました。機種ごとに画面比率や上部の高さが違っても画面が切れたり重なったりしないよう、メーカーのデザインガイドラインのセーフエリアを基準に配置ルールを整理しました。

ノッチとホームバーを避けて置き直した画面配置
02 / 04

小さな画面サイズを数字で書き込んだ古い画面コード

地方銀行アプリの古い画面コードは、以前の小さなスマートフォンの固定された画面サイズを基準に、要素の位置と大きさを数字で直接書いて描いたものでした。こうしたコードは画面サイズが変わるとそのままずれます。画面サイズの変化に弱い数値を探し出し、現在の機種の規格に合わせて画面に沿って位置と大きさが決まるよう補いました。

小さな画面サイズを数字で書き込んだ古い画面コード
03 / 04

下部ボタンとキーボードが重なるケースまで見直した回帰確認

金融アプリでは、ボタン、入力欄、認証の手順、案内文が正しく表示されないと、ユーザーはその業務を終えにくくなります。配置を直した画面は一つずつ改めて確認しました。特に、画面下部に固定されたボタンがキーボードに隠れたり、スクロール領域と重なったりするケースを重点的に見ました。

下部ボタンとキーボードが重なるケースまで見直した回帰確認
04 / 04

5本のアプリに共通させた基準と、アプリごとの対応

地方銀行のアプリ5本を同時に直しました。この銀行は個人顧客向けと法人顧客向けのモバイルバンキングを別アプリにするなど、使う人と業務に応じてアプリを分けて運営しています。複数のアプリで繰り返される画面パターンは一つの基準にそろえ、アプリごとに異なる古い構造は個別に分析して対応しました。運用契約で担当していた別の銀行のアプリにも、同じ画面対応を行いました。同じ問題でもアプリごとにコード構造と画面ポリシーが異なるため、それぞれのアプリの状態に合わせて直しました。

5本のアプリに共通させた基準と、アプリごとの対応

この仕事のポイント

01

銀行アプリ5本をノッチ・ホームバーのある新しい画面規格に対応

02

小さな画面を基準に位置を数字で書き込んだ古い画面コードの整備

03

下部固定ボタン・キーボード・スクロールが重なるケースを中心にした回帰確認

インサイト

ブログをすべて見る