【2025年版】【図解】モーダルより“非モーダル”｜止めないUIの作り方と文言テンプレ

“説明したい欲”が強いほど、モーダルは増えます。けれど、触る手が止まるUIは先行指標を悪化させがち。私は、まず非モーダルで“進みながら理解できる”形に寄せます。

結論：説明は画面内に埋めるのが最短。モーダルは例外時のみ、基本は“非モーダル（トースト/インラインヒント）＋主ボタン1つ”で進めます。

使い分けの基準（ねらい→やり方→失敗）

ねらいは“止めずに理解させる”こと。やり方は、初回はサンプルと主ボタンで誘導し、迷いは非モーダルで補助。失敗は、初手のフルスクリーン説明や強制モーダルです。

KPIはKPI設計と運用ガイドでAha/TTV/翌日活性に揃えると、UI判断が速くなります。

文言テンプレ（コピペOK）

説明は短く、所要時間を明記。押すべきボタンは1つに絞ります。

■ インラインヒント
テキスト：サンプルから始めると30秒で完了します
リンク：テンプレから入力する

■ トースト（成功時）
文言：保存できました。“続きへ（30秒）”で次へ

■ 主ボタン
文言：テンプレから続きの作業を始める

AB設計：どこから比べるか

UIの良し悪しは感想では決めません。Aha/TTV/翌日活性の差分だけを毎週読み、入替を決めます。比べる順番を固定して、議論を短くしましょう。

1. 主ボタンの位置と数（1つか）
2. インラインヒントの文言（所要時間の明記）
3. 成功トーストの次導線（直行リンク）

提出前チェック（3分）

“止めないUI”になっているかを、3点でサッと確認します。迷ったら非モーダルを優先します。

• 主ボタンは1つに統一されている
• ヒントは非モーダルで10秒以内に出る
• 成功後のトーストに次導線がある

FAQ

Q. モーダルは完全に不要？

A. 例外時（危険操作/同意/重大な選択）に限って使います。それ以外は非モーダルが基本です。

Q. 説明が不足しませんか？

A. サンプルと所要時間の明記で十分。長文はドキュメントに逃がします。