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

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

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

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

この仕事のポイント
銀行アプリ5本をノッチ・ホームバーのある新しい画面規格に対応
小さな画面を基準に位置を数字で書き込んだ古い画面コードの整備
下部固定ボタン・キーボード・スクロールが重なるケースを中心にした回帰確認
インサイト
GA4 client_storage: 'none'은 정말 쿠키를 막을까?
두 달 전 이 블로그에 「GA4 쿠키 없이 쓰기」라는 글을 썼습니다. clientstorage: 'none' 으로 쿠키 저장을 끄고, 자체 분석이 쓰던 익명 ID 를 clientid 로 넘기면 쿠키 0개로 GA4 를 쓸 수 있다는 내…
GA4 Measurement Protocol: gtag.js 없이 서버에서 이벤트 보내기
랜딩 페이지의 전송량을 파일 단위로 쪼개 보다가, 가장 큰 파일이 우리 코드가 아니라는 것을 알았습니다. Google Analytics 의 gtag.js 였고, 방문 한 번에 176KB 를 받고 있었습니다. 페이지 전체가 1,094K…
중소 제조업 AI 도입 순서: DX를 먼저 끝내야 할까?
공장을 가진 중소·중견 제조기업 16만여 곳 가운데 스마트공장을 도입한 곳은 19.5%입니다. 회사가 작을수록 이 비율은 더 떨어집니다. 중소벤처기업부가 2025년 4월에 낸 제1차 스마트제조혁신 실태조사 결과입니다. 그림: 기업 규…
Next.js loading.tsx와 404: 버튼이 화면보다 먼저 살아나게 하기
관리 화면 왼쪽 위에 사이드바를 접고 펴는 ☰ 버튼이 있습니다. 폭 하나 바꾸는 버튼인데, 대시보드에서 누르면 2초 넘게 아무 반응이 없었습니다. 레이아웃만 바꾸는 일이 왜 이렇게 오래 걸리는지부터 들여다봤습니다. Next.js 16…



