/
Quick Menu & Icon Design
Role & Contribution
役割
UI/UXデザイナー（インターン）
チーム
本人、メンター1名、UXライター1名、プロダクトマネージャー、エンジニア、QA、関連部門担当者
期間
3か月（2024年8月〜10月）
活用スキル
ユーザー調査・市場調査／モバイルアプリ設計／マルチプラットフォームUX設計／デザインシステム構築／開発連携
主要業務
• UX設計を調査→試作→検証→開発連携→受入試験（UAT）まで一貫して主導
• インタビュー8件＋アンケート42件（計50名）を実施
• クロスプラットフォーム対応のアイコン体系を設計（最大4枠・可変サイズ対応）
プロジェクト概要
クイックメニューとは、スマートフォンのアプリアイコンを長押しした際に表示されるショートカット機能である。
2015年にiOSの3D Touch機能を通じて導入され、現在ではInstagram、X、Grab、LINE MANなど主要アプリで一般的に活用されている。
任意機能ではあるが、アプリ内の深い階層にある主要操作をホーム画面から直接実行できるため、操作効率を高め、頻繁に利用する「スキャン」や「チャージ」などの処理におけるTime-to-Value（価値到達時間）を短縮できる。
TIMELINE
Approach & Process
技術調査
プラットフォーム制約
各OSにおける制約（最大表示数、システム表示文言、アイコン形式）を整理し、設計および実装への影響を分析。
ユーザー調査
利用行動 & 優先事項
詳細インタビュー8件（45–60分）
アンケート42件
調査内容：利用状況、クイックメニュー認知度、利用頻度、期待機能
市場調査
競合環境分析
Platform research
主要設計検討事項
プラットフォーム固有の規則およびシステム挙動
1～4項目
主に迅速な操作が求められる公共環境で利用
SF Symbols準拠または独自設計
線幅の統一
ダークモード／ライトモード対応
Highlights
表示枠は通常1–4件＋システム項目
極小サイズでも可読性を維持 ・ダークモード／ライトモード両対応
Highlights
通常4–5件
マテリアルデザイン準拠
可変アイコン対応
設計方針
システム標準アイコンとの線幅統一を図りつつ、アプリ内デザインとの整合性と即時認識性を両立
User reseach
混合手法（N＝50）
• 詳細インタビュー8件（45～60分／ヘビーユーザー・ライトユーザー）
• ユーザージャーニー、クイックメニュー認知度、利用頻度、期待機能を把握するためのアンケート42件
対象ユーザー区分
1
ヘビーユーザー
課題
・日常的にスキャン／振込を利用
・公共空間での利用頻度が高い
・簡易決済に対して「起動が遅い」と認識
・少額取引での再認証に不満
対応方針
意図から実行までの時間短縮。
プラットフォーム規定内で不要な再認証を回避。
2
ライトユーザー
課題
・クイックメニューの存在を知らない層が多い
・明確で簡潔な表示を求める
・操作の安全性・制御感を重視
対応方針
簡潔性と明確な視覚的手がかり
単一操作による起動 (Single-tap activation)
ブランド整合性のある視覚階層設計
安全性と自己制御感
「毎回使うわけではないが、あるだけで安心感がある」
速度
「公共の場での簡単な支払いには、フル機能のアプリは遅すぎる」
関連性
「スキャンやチャージなど、日常的に本当に必要な機能だけを表示してほしい」
高頻度・高価値取引
ユーザー選好と利用統計の整合性
速度 vs. 信頼性
認証簡略化は銀行方針上許容されるのか。信頼性低下の懸念はないか
設計戦略
第1–3週：競合調査（18社）
第4–6週：ユーザー調査・要件整理
第7–8週：プラットフォーム／ブランド指針精査
第9–10週：高精度試作・ユーザビリティ検証 第11週：アイコン最終調整・仕様整理
第12週：最終引継ぎ・受入試験支援
Design Outcome
メニュー構成
1
項目数
4項目（利用傾向・OS制限に基づく）
2
最終項目
・スキャン ・振込 ・請求書支払 ・チャージ
3
表示順
アイコン設計
クイックメニュー用アイコンは、アプリ内アイコンを簡略化し、制約のある表示領域でも明確に認識できるよう設計した
* 全アイコンはダークモード／ライトモードに対応し、共通グリッドおよび線幅体系を採用
文言設計
ブランドトーン、レイアウト制約、各プラットフォーム慣習に整合する、簡潔で動詞中心の文言をUXライターと協働で策定した
採用語：
Scan(スキャン) · Transfer(振込) · Pay Bill(請求書支払) · Top Up(チャージ)
冗長表現や不統一語（例：Bill Pay、TopUp、Scan QR）は不採用。各語は明確性、一貫性、競合差別化の観点から精査した。
導入前後の操作フロー
従来(約20秒)
step 01
ホーム画面
step 02
アプリ起動（スプラッシュ画面）
step 03
認証
step 04
ホーム画面到達
step 05
機能選択
step 06
取引開始
step 07
取引完了時の再認証
クイックメニュー導入後 (約11秒)
step 01
ホーム画面
step 02
銀行アプリアイコンを長押し
step 03
アプリ起動（スプラッシュ画面）
step 04
取引開始
step 05
約45％の時間短縮を確認
検証環境下
Summary
成果物
1
週次進捗報告
100名以上の関係者へ週次報告
2
競合・ユーザー分析資料
競合・ユーザー分析 タイ国内銀行およびフィンテックアプリとの比較分析
REFLECTION
学び
ユーザー洞察が革新を生む
数値だけでなくユーザーの発言を含めることで議論が活性化した。現地調査により課題理解が深化し、確信を持って説明できるようになり、ユーザーの課題を具体的解決策へ転換できた。
すべては設計されている
アイコン設計を通じ、ピクセルからプロダクト全体に至るまで、すべてが意図的に設計されていることを実感した。本プロジェクトは、細部まで配慮する設計思考を形成した。
改善点
検証環境と実利用環境の乖離
Maze上の検証条件は実利用環境と一致しない
利用者母集団の偏り
主にバンコク圏での募集であったため、50名のサンプルでは500万人規模の多様性を十分に反映できなかった。
