ワンタイムコードの入力欄をExpoで作る — SMS自動入力とセグメント表示を両立させる
6桁の確認コードを入れる画面は、見た目こそ単純ですが、SMSの自動入力・貼り付け・1文字ずつの削除まで含めると意外と作り込みが必要です。iOSとAndroidの自動入力を最初に押さえ、単一のTextInputで崩れにくいセグメント表示を組む実装をまとめました。
クリップボード連携のUXを整える — iOSのペースト許可バナーを増やさずに「コピー」と「貼り付け」を成立させる
expo-clipboard で「コピー」と「貼り付け」を実装するとき、iOS のペースト許可バナーが頻発して使い勝手を損なうことがあります。バナーの発生条件を押さえ、hasStringAsync で内容を読まずにボタンを出し分ける設計をまとめました。
「本当に削除しますか?」を出す前に — 取り消せる削除という選択肢
リストの項目を消すたびに確認ダイアログを出すと、ユーザーは反射的にOKを押すようになります。Rork(Expo)アプリで「取り消せる削除」を実装し、確認を出すべき場面と出さない場面を切り分ける設計ノートです。
Rork(Expo)のトーストは、重なっても読み上げられても崩れない設計にする
Rork が生成した React Native アプリにトースト通知を足すとき、単純な実装は『同時に2つ出ると重なる』『スクリーンリーダーに無視される』『ノッチやホームインジケータに隠れる』の3点で破綻します。ルート1か所に置くキュー設計、本体の再レンダーから切り離すアニメーション、AccessibilityInfo による読み上げ、セーフエリア対応までを動くコードで示します。
通知を「開かなくても片付く」ものにする — Rork アプリのインタラクティブ通知アクション設計
通知を長押しすると現れるボタンやテキスト入力。Rork で作った Expo アプリにこのインタラクティブ通知アクションを実装し、アプリを開かずに完了できる体験を設計します。バックグラウンド処理の落とし穴まで踏み込みます。
Rork で作るオンボーディングで初日の離脱を半分にする — データで直す設計ノート
Rork で作ったアプリのインストール直後の離脱率をどう下げるか。個人開発者として運用しているアプリの計測データを元に、初日のユーザー行動を解きほぐし、オンボーディング設計を削ぎ落としていった実装メモです。
Rork で作ったアプリを「電波が悪い日」でも失望させない設計 — ネットワーク不安定時のUX設計ノート
Rork で作った個人アプリをストアに出したあと、私が一番たくさんレビューを落とされる原因は、「なにもない画面のまま固まる」ことでした。電波が弱い日でも、体験が静かに崩れないようにするためのUX設計・エラーステート・再試行戦略を、実装パターン込みで整理しました。