---
title: アラートを効果的に扱おう
tags: 
author: [KAWASHIMA Yoshiyuki](https://convert.docswell.com/user/ykws)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/3EKDMVDLJD.jpg?width=480
description: アラートを効果的に扱おう by KAWASHIMA Yoshiyuki
published: February 14, 24
canonical: https://convert.docswell.com/s/ykws/KL1GYD-2024-10-13-031728
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/3EKDMVDLJD.jpg)

アラートを効果的に扱おう
KAWASHIMA Yoshiyuki
YUMEMI.grow Mobile #10 2024.2.14


# Page. 2

![Page Image](https://bcdn.docswell.com/page/L73RYMR6J5.jpg)

伝えたいこと
• ユーザがアラートを軽視しないように


# Page. 3

![Page Image](https://bcdn.docswell.com/page/87DY56YM7G.jpg)

情報源
ヒューマンインターフェースガイドライン
https://developer.apple.com/jp/design/human-interface-guidelines/
マテリアルデザイン
https://m3.material.io/


# Page. 4

![Page Image](https://bcdn.docswell.com/page/VJP6GY6QE8.jpg)

前提
詳細はヒューマンインターフェースガイドライン、マテリアルデザイン
に書いてあります。
今回の発表では、具体例と見比べながら理解を深めていきたいと思い
ます。


# Page. 5

![Page Image](https://bcdn.docswell.com/page/2EV36G3P7Q.jpg)

用語の整理
• ヒューマンインタフェースガイドライン Alert
• SwiftUI alert
• UIKit UIAlertController
• マテリアルデザイン Dialogs
• Flutter AlertDialog
• Jetpack Compose Dialog
• Android View AlertDialog


# Page. 6

![Page Image](https://bcdn.docswell.com/page/57G3N83QJL.jpg)

ヒューマンインターフェースガイドライン


# Page. 7

![Page Image](https://bcdn.docswell.com/page/4EQ5Q95WJP.jpg)

アラートは控えめに使う


# Page. 8

![Page Image](https://bcdn.docswell.com/page/KJ49NX9171.jpg)

アラートは重要な情報の提示に使えるとはいえ、そのたびにユー
ザの操作が中断されます。どのアラートにも必ず不可欠な情報
や有用なアクションが含まれているようにしないと、ユーザが
アラートを軽視するようになりかねません。
https://developer.apple.com/jp/design/human-interface-guidelines/alerts


# Page. 9

![Page Image](https://bcdn.docswell.com/page/LE1K5NK5JG.jpg)

マテリアルデザインガイドライン


# Page. 10

![Page Image](https://bcdn.docswell.com/page/GEWD54DWJ2.jpg)



# Page. 11

![Page Image](https://bcdn.docswell.com/page/47ZGN2G2E3.jpg)

アプリの通常の操作を中断する対話や、特定のユ
ーザータスク、決定、もしくは同意に必要となる
重要な情報には Dialogs を使用してください
https://m3.material.io/components/dialogs/guidelines#c395b8a7-a125-42f4-9d19-77f535b2c873


# Page. 12

![Page Image](https://bcdn.docswell.com/page/YJ6Y8VQ67V.jpg)

低または中くらいの優先度の情報に Dialogs は使用し
ないでください。代わりに Snackbar を使ってくだ
さい。消去できるし、自動的に非表示にもできます
https://m3.material.io/components/dialogs/guidelines#c395b8a7-a125-42f4-9d19-77f535b2c873


# Page. 13

![Page Image](https://bcdn.docswell.com/page/GJ5G9DR5J4.jpg)

ヒューマンインターフェースガイドライン


# Page. 14

![Page Image](https://bcdn.docswell.com/page/9E2Y28DGER.jpg)

ユーザが意図したアクションに関連する選択肢
を提示する場合は、アラートではなくアクシ
ョンシートを使用する
https://developer.apple.com/jp/design/human-interface-guidelines/alerts#iOS-iPadOS


# Page. 15

![Page Image](https://bcdn.docswell.com/page/D7YGY62G7M.jpg)

キャッシュされたデータやプレースホルダのデータ
を表示したり、ユーザの操作を中断しない形で問題
について説明するラベルを表示することができます
https://developer.apple.com/jp/design/human-interface-guidelines/alerts#Best-practices


# Page. 16

![Page Image](https://bcdn.docswell.com/page/VENGPZ88J8.jpg)

具体例


# Page. 17

![Page Image](https://bcdn.docswell.com/page/Y79W3ZKX73.jpg)

Apple Weather App
Airplane
• キャッシュがあればキャッシュ
を表示（おそらく当日のキャッ
シュの有無）


# Page. 18

![Page Image](https://bcdn.docswell.com/page/G78NM1R9JD.jpg)

Apple Music
Airplane


# Page. 19

![Page Image](https://bcdn.docswell.com/page/L7LP3QKMJR.jpg)

Apple Home
Airplane


# Page. 20

![Page Image](https://bcdn.docswell.com/page/4EM4D126JW.jpg)

Apple Books
Airplane


# Page. 21

![Page Image](https://bcdn.docswell.com/page/PERW4LMNJ9.jpg)

マテリアルデザインガイドライン


# Page. 22

![Page Image](https://bcdn.docswell.com/page/P7XP2WV8JX.jpg)



# Page. 23

![Page Image](https://bcdn.docswell.com/page/37KDMVQLED.jpg)

重要でない情報は、アプリのコンテンツの
流れの中で他の UI 使って提示してください
https://m3.material.io/components/dialogs/accessibility#a253a077-28be-4e66-b89e-a328db8a40dc


# Page. 24

![Page Image](https://bcdn.docswell.com/page/LJ3RYMP6E5.jpg)

ダイアログに重要でない情報を置くことを
避けてください
https://m3.material.io/components/dialogs/accessibility#a253a077-28be-4e66-b89e-a328db8a40dc


# Page. 25

![Page Image](https://bcdn.docswell.com/page/8JDY56LMJG.jpg)

コンテンツ


# Page. 26

![Page Image](https://bcdn.docswell.com/page/VEP6GY2Q78.jpg)

簡潔かつ明確に状況を説明するタイトルにする


# Page. 27

![Page Image](https://bcdn.docswell.com/page/27V36GDPJQ.jpg)

ユーザに状況を素早く理解してもらう必要があるので、冗長な表現を避け、漏れなく具体的に記述しま
す。できる限り、起きたこと、起きた状況、起きた理由について説明しましょう。「エラー」や「エ
ラー329347が発生しました」のような、有用な情報を伝達しないタイトルにはしないでください。2
行を超えて折り返されるような長すぎるタイトルも避けます。タイトルが完全な文である場合は、セ
ンテンススタイルの大文字化（英語の場合）を使用し、適切な文末記号を付けます。断片的な文をタ
イトルにする場合は、タイトルにふさわしい表現にし、文末記号は付けないようにします。
https://developer.apple.com/jp/design/human-interface-guidelines/alerts#Content


# Page. 28

![Page Image](https://bcdn.docswell.com/page/5JG3N8YQEL.jpg)

わかりにくい


# Page. 29

![Page Image](https://bcdn.docswell.com/page/47Q5Q9MWEP.jpg)

本当に有意義なエラーメッセージを書くには


# Page. 30

![Page Image](https://bcdn.docswell.com/page/KE49NXV1J1.jpg)

簡潔かつ明確に状況を説明するタイトル
“確実にゴミ箱を空にする”を
使用すると、“ゴミ箱”にある
項目が完全に消去されます。
完全に消去してもよろしいで
すか？
https://postd.cc/how-to-write-an-error-message/


# Page. 31

![Page Image](https://bcdn.docswell.com/page/L71K5N35EG.jpg)



# Page. 32

![Page Image](https://bcdn.docswell.com/page/G7WD54PWE2.jpg)

このダイアログのタイトルは、具体的な質問を
提示し、リクエストに関わる内容を簡潔に説
明し、明確なアクションを提供します
ff
https://m3.material.io/components/dialogs/guidelines#0c 8b6b-d4f3-4442-8194-31212f5d1a12


# Page. 33

![Page Image](https://bcdn.docswell.com/page/4JZGN2K273.jpg)

ダイアログのタイトルで曖昧な質問をしな
いでください
ff
https://m3.material.io/components/dialogs/guidelines#0c 8b6b-d4f3-4442-8194-31212f5d1a12


# Page. 34

![Page Image](https://bcdn.docswell.com/page/YE6Y8V26JV.jpg)

いつアラートを使ったら良いか？


# Page. 35

![Page Image](https://bcdn.docswell.com/page/GE5G9D25E4.jpg)

アプリ内でのバランスなので正解はない


# Page. 36

![Page Image](https://bcdn.docswell.com/page/972Y284G7R.jpg)

アプリ内でアラートを増やすことになったら
他のアラートが必要か絶えず見直しが必要


# Page. 37

![Page Image](https://bcdn.docswell.com/page/DJYGY6MGJM.jpg)

個々のアプリが対応するだけでは不十分


# Page. 38

![Page Image](https://bcdn.docswell.com/page/V7NGPZW8E8.jpg)

まずは個々のアプリから対応を
副次的効果でレビューの心象がよくなる
（はず）


# Page. 39

![Page Image](https://bcdn.docswell.com/page/YJ9W3ZXXJ3.jpg)

おわりに
共通言語を作ろう
ヒューマンインターフェースガイドライン
https://developer.apple.com/jp/design/human-interface-guidelines/
マテリアルデザイン
https://m3.material.io/


# Page. 40

![Page Image](https://bcdn.docswell.com/page/GJ8NM129ED.jpg)

おわりに
記事紹介
iOS についてのまとめ
https://zenn.dev/yumemi_inc/articles/effective-alert
元ネタのスクラップ
https://zenn.dev/ykws/scraps/1bd34b3f414206


