/
Scan Widget Design
Role & Contribution
役割
チーム
本人、メンター2名、UXライター1名、PM、開発者、関連部門担当者
期間
3か月（2024年8〜10月）
活用スキル
ユーザー・市場調査 / モバイルデザイン / マルチプラットフォームUX / デザインシステム / 開発者向け引き渡し
主要業務
Project Details
2024年、タイのモバイルバンキングでPromptPayやQR決済が標準化される中、主要銀行アプリは「スキャンで支払い」を提供していたが、ユーザージャーニーは依然として煩雑だった。
TIMELINE
調査手法（N=50）
• アンケート42件（ウィジェットの認知、使用頻度、期待値把握）
ユーザーセグメント・洞察
ヘビーユーザー
既存の銀行/その他アプリウィジェットを使用
課題
「チェックアウトが早すぎてウィジェットを忘れる」
「ウィジェットでもタップが多すぎる」
対応方針
ロック画面からアクセス
可能な円形iOSウィジェット
ライトユーザー
ウィジェットをほとんど使用しない
課題
「存在を知らない」
「使っても違いがわからない」
対応方針
わかりやすい視覚的手がかり
シングルタップ起動
ブランドに沿った視覚階層
81.8%
意図到行動高速化
20秒 → 11秒（利用者試験確認）
85.7%
過去ウィジェット利用済
ただし存在を忘却
意外: 66.67%
ダークモード好み
33%はライトモード想定
Platform research
プラットフォーム調査
iOS (iOS 17+)
Highlights
ホーム画面、Todayビュー、ロック画面に表示可能
円形ロック画面ウィジェット対応
サイズ、タップターゲット、可読性に関する厳格なガイドライン
Android (Android 14+)
Highlights
ユーザーがサイズ変更可能
自由配置、背景透過、格子状レイアウト可能
12ブレークポイントに対応（必須）
* ttbウィジェットはスキャン機能に特化した単機能ウィジェットであり、iOSのホーム画面、Todayビュー、ロック画面に配置可能。Androidでも基本的な配置は可能だが、小型の円形ウィジェットに対応しているのはiOSのみである。
設計上の考慮
ビジュアルの一貫性
OSを問わず、余白・文字組み・ブランドカラーを統一
ブレークポイント
& グリッド
アイコンとタップ領域を統一
ダークモード対応
Widget Name
Widget Name
Widget Name
Label
Label
Label
Design Process
戦略
1–2週目：
競合分析（10+銀行/全サービスアプリ）、ユーザーフロー、ガイドライン調査
3–6週目：
デザイン案作成 → プロトタイプ → Mazeテスト
7–10週目：
追加案 → アンケート → 3案に絞り込み
11週目：
ハイファイビジュアル調整、プラットフォーム適用
12週目：
最終引き渡し・実装サポート
デザインの3つの柱
シンプル & 最小限
「スキャン開始」を明示する
分かりやすく、親しみやすい
アプリ内で一貫したコピーとアイコン
ブランドの“らしさ”を担保する
ブランドカラー、書体、色・文字・形
フロー比較
Summary
成果物
1
開発者向けFigmaファイル
iOS・Android
2
ウィジェット用デザインシステム
色、書体、余白、状態 (state)、ブレークポイント (breakpoint)
振り返り
機会を積極的に捉える
主体的なコミュニケーションと積極的な姿勢が、高影響度プロジェクトへの参画機会につながった
先入観を持たず傾聴する
直接的なユーザー調査を通じて予想外の行動を発見した。66.67%がダークモードを好むという結果は、仮説よりも調査の重要性を示した
ビジネスと創造性の両立
技術的制約、業務規定、厳格なデザインシステムの中で創造性を維持することを学んだ
改善点
適応型デザイン思考
iOS 26でLiquid Glassが導入された際、2024年のデザイン自体に問題はなかったが、OSの進化とともにデザインも成長させる視点が不足していたと気づいた。デザインの寿命を最大化するため、固定的なスタイルよりも適応性を重視し、単色ブランドカラーに依存せず繊細なレイヤー表現を用いる設計へと考え方を改めた。再設計には時間とコストがかかるため、将来を見据えた設計が重要である
