Component Gallery

Screen Pattern

通知画面（Notification Screen）UIの作り方

通知画面は、ユーザーに必要な更新、警告、アクション要求を時系列または重要度順に整理する画面です。

最終更新日: 2026-07-16 / レビュー状態: 未レビュー

30秒でわかる要点

通知画面は、ユーザーに必要な更新、警告、アクション要求を時系列または重要度順に整理する画面です。

自前ワイヤーフレーム

通知画面の情報配置を確認するための簡易ワイヤーフレームです。外部サービスのスクリーンショットではなく、Component Gallery側で作成した構成図です。

主なユースケース

  • ・未読通知を確認する
  • ・通知から対象画面へ遷移する
  • ・通知設定や既読操作を行う

レイアウトの考え方

  • ・未読と既読を視覚的に分ける
  • ・通知本文と発生時刻を近くに置く
  • ・重要通知は通常通知と分ける

アクセシビリティ

  • ・未読状態をテキストでも示す
  • ・通知の時刻を読み上げやすくする
  • ・一括既読操作の結果を伝える

よくある失敗

  • ・通知の重要度が分からない
  • ・遷移先が不明
  • ・既読操作で通知が突然消える

構成コンポーネント

バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。空の状態（Empty State）空の状態（Empty State）は、データが存在しない・検索結果が0件などの状態を伝えるUIコンポーネント。イラスト・説明文・アクションボタンで構成される。区切り線（Divider）区切り線（Divider）は、セクション間を視覚的に分割する水平・垂直の区切り線コンポーネント。コンテンツの論理的なグループ分けを補助する。

AI実装プロンプト

通知画面実装

通知画面をReact + Tailwind CSSで実装してください。主要コンポーネント、空状態、エラー状態、モバイル表示、アクセシビリティを含めてください。

運営・更新・参照元

最終更新日
2026-07-16
レビュー状態
未レビュー

参照元

FAQ

通知画面で最初に決めるべきことは何ですか？

まず、この画面でユーザーが完了したい主目的を1つ決めます。そのうえで、badge、card、buttonなどの構成要素を優先度順に配置します。

通知画面でよくある失敗は何ですか？

通知の重要度が分からない

通知画面をモバイル対応するときの注意点は？

最初に表示する情報を絞り、入力欄、主ボタン、エラー表示、戻る導線が狭い画面でも隠れないようにします。