diff --git a/resources/setting_ui_template.html b/resources/setting_ui_template.html
index b65526e4c..245f6e4c3 100644
--- a/resources/setting_ui_template.html
+++ b/resources/setting_ui_template.html
@@ -103,7 +103,7 @@ <h1 class="mb-3">{{brandName}} エンジン 設定</h1>
             download="VOICEVOXユーザー辞書.json"
             class="btn btn-primary mb-3"
             href="/user_dict"
-            @click="showToastWithMessage('辞書をエクスポートしました。');"
+            @click="showToastWithMessage('辞書をエクスポートしました。', 'success');"
             target="_blank"
             rel="noopener noreferrer"
           >
@@ -166,7 +166,8 @@ <h5 class="modal-title" id="importUserDictModalLabel">
       <!-- トースト -->
       <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
         <div
-          class="toast align-items-center autohide text-white bg-success"
+          class="toast align-items-center autohide text-white"
+          :class="'bg-' + toastType"
           role="alert"
           aria-live="assertive"
           aria-atomic="true"
@@ -187,7 +188,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
           setup() {
             // 設定値周り
             const corsPolicyMode = ref(
-              "<JINJA_PRE>cors_policy_mode<JINJA_POST>"
+              "<JINJA_PRE>cors_policy_mode<JINJA_POST>",
             );
             const allowOrigin = ref("<JINJA_PRE>allow_origin<JINJA_POST>");
 
@@ -203,9 +204,9 @@ <h5 class="modal-title" id="importUserDictModalLabel">
                 body: formData,
               }).then((res) => {
                 if (res.ok) {
-                  showToastWithMessage("設定を保存しました。");
+                  showToastWithMessage("設定を保存しました。", "success");
                 } else {
-                  showToastWithMessage("設定の保存に失敗しました。");
+                  showToastWithMessage("設定の保存に失敗しました。", "danger");
                 }
               });
             });
@@ -223,14 +224,20 @@ <h5 class="modal-title" id="importUserDictModalLabel">
                 const params = new URLSearchParams({
                   override: true, // 重複するエントリを上書きする
                 });
-                await fetch(`/import_user_dict?${params}`, {
+                const response = await fetch(`/import_user_dict?${params}`, {
                   method: "POST",
                   mode: "same-origin",
                   headers: { "Content-Type": "application/json" },
                   body: reader.result,
                 });
-
-                showToastWithMessage("辞書をインポートしました。");
+                if (response.ok) {
+                  showToastWithMessage("辞書をインポートしました。", "success");
+                } else {
+                  showToastWithMessage(
+                    "辞書のインポートに失敗しました。",
+                    "danger",
+                  );
+                }
               });
 
               reader.readAsText(userDictFileForImport.value);
@@ -240,16 +247,20 @@ <h5 class="modal-title" id="importUserDictModalLabel">
             const toastElem = ref(undefined);
             const bootstrapToast = ref(undefined);
             const toastMessage = ref("");
+            const toastType = ref("success");
             onMounted(() => {
               if (toastElem.value == undefined) {
                 throw new Error("toastElemが見つかりません。");
               }
               bootstrapToast.value = new bootstrap.Toast(toastElem.value);
             });
-            const showToastWithMessage = (message) => {
-              console.log(`showToastWithMessage: ${message}`);
+
+            // メッセージを表示する。typeはsuccess・info・warning・dangerなど。
+            const showToastWithMessage = (message, type) => {
+              console.log(`showToastWithMessage: ${message}, ${type}`);
               bootstrapToast.value.show();
               toastMessage.value = message;
+              toastType.value = type;
             };
 
             // 表示用の情報
@@ -268,6 +279,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
               importUserDict,
               toastElem,
               toastMessage,
+              toastType,
               showToastWithMessage,
               brandName,
             };
@@ -306,7 +318,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
             elem.onload = resolve;
             elem.onerror = () => {
               console.warn(
-                `CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`
+                `CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`,
               );
               document.head.removeChild(elem);
               current++;
@@ -331,7 +343,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
             "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
             "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css",
           ],
-          "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+          "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC",
         );
         libraryLoadingPromises.push(bootstrapCssPromise);
 
@@ -342,7 +354,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
             "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js",
             "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js",
           ],
-          "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+          "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM",
         );
         libraryLoadingPromises.push(bootstrapScriptPromise);
 
@@ -354,7 +366,7 @@ <h5 class="modal-title" id="importUserDictModalLabel">
             "https://cdn.jsdelivr.net/npm/vue@3.3.10/dist/vue.global.js",
             "https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.10/vue.global.js",
           ],
-          "sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE"
+          "sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE",
         );
         libraryLoadingPromises.push(vuePromise);
 
diff --git a/test/e2e/single_api/setting/__snapshots__/test_setting_api.ambr b/test/e2e/single_api/setting/__snapshots__/test_setting_api.ambr
index a720bd08c..37d3bdf5e 100644
--- a/test/e2e/single_api/setting/__snapshots__/test_setting_api.ambr
+++ b/test/e2e/single_api/setting/__snapshots__/test_setting_api.ambr
@@ -106,7 +106,7 @@
               download="VOICEVOXユーザー辞書.json"
               class="btn btn-primary mb-3"
               href="/user_dict"
-              @click="showToastWithMessage('辞書をエクスポートしました。');"
+              @click="showToastWithMessage('辞書をエクスポートしました。', 'success');"
               target="_blank"
               rel="noopener noreferrer"
             >
@@ -169,7 +169,8 @@
         <!-- トースト -->
         <div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
           <div
-            class="toast align-items-center autohide text-white bg-success"
+            class="toast align-items-center autohide text-white"
+            :class="'bg-' + toastType"
             role="alert"
             aria-live="assertive"
             aria-atomic="true"
@@ -190,7 +191,7 @@
             setup() {
               // 設定値周り
               const corsPolicyMode = ref(
-                "localapps"
+                "localapps",
               );
               const allowOrigin = ref("");
   
@@ -206,9 +207,9 @@
                   body: formData,
                 }).then((res) => {
                   if (res.ok) {
-                    showToastWithMessage("設定を保存しました。");
+                    showToastWithMessage("設定を保存しました。", "success");
                   } else {
-                    showToastWithMessage("設定の保存に失敗しました。");
+                    showToastWithMessage("設定の保存に失敗しました。", "danger");
                   }
                 });
               });
@@ -226,14 +227,20 @@
                   const params = new URLSearchParams({
                     override: true, // 重複するエントリを上書きする
                   });
-                  await fetch(`/import_user_dict?${params}`, {
+                  const response = await fetch(`/import_user_dict?${params}`, {
                     method: "POST",
                     mode: "same-origin",
                     headers: { "Content-Type": "application/json" },
                     body: reader.result,
                   });
-  
-                  showToastWithMessage("辞書をインポートしました。");
+                  if (response.ok) {
+                    showToastWithMessage("辞書をインポートしました。", "success");
+                  } else {
+                    showToastWithMessage(
+                      "辞書のインポートに失敗しました。",
+                      "danger",
+                    );
+                  }
                 });
   
                 reader.readAsText(userDictFileForImport.value);
@@ -243,16 +250,20 @@
               const toastElem = ref(undefined);
               const bootstrapToast = ref(undefined);
               const toastMessage = ref("");
+              const toastType = ref("success");
               onMounted(() => {
                 if (toastElem.value == undefined) {
                   throw new Error("toastElemが見つかりません。");
                 }
                 bootstrapToast.value = new bootstrap.Toast(toastElem.value);
               });
-              const showToastWithMessage = (message) => {
-                console.log(`showToastWithMessage: ${message}`);
+  
+              // メッセージを表示する。typeはsuccess・info・warning・dangerなど。
+              const showToastWithMessage = (message, type) => {
+                console.log(`showToastWithMessage: ${message}, ${type}`);
                 bootstrapToast.value.show();
                 toastMessage.value = message;
+                toastType.value = type;
               };
   
               // 表示用の情報
@@ -271,6 +282,7 @@
                 importUserDict,
                 toastElem,
                 toastMessage,
+                toastType,
                 showToastWithMessage,
                 brandName,
               };
@@ -309,7 +321,7 @@
               elem.onload = resolve;
               elem.onerror = () => {
                 console.warn(
-                  `CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`
+                  `CDNの読み込みに失敗しました。 ${candidateUrlList[current]}`,
                 );
                 document.head.removeChild(elem);
                 current++;
@@ -334,7 +346,7 @@
               "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css",
               "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css",
             ],
-            "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
+            "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC",
           );
           libraryLoadingPromises.push(bootstrapCssPromise);
   
@@ -345,7 +357,7 @@
               "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js",
               "https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/js/bootstrap.bundle.min.js",
             ],
-            "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
+            "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM",
           );
           libraryLoadingPromises.push(bootstrapScriptPromise);
   
@@ -357,7 +369,7 @@
               "https://cdn.jsdelivr.net/npm/vue@3.3.10/dist/vue.global.js",
               "https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.10/vue.global.js",
             ],
-            "sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE"
+            "sha384-ttfhgYK68lNlS8ak6Z//mvUbpRbRCh43MYGuqEtK8mj/yzlKqY8GA8o3BPMi23cE",
           );
           libraryLoadingPromises.push(vuePromise);