diff --git a/app/components/ModelLoad.tsx b/app/components/ModelLoad.tsx
index 058bb31..b9c02a6 100644
--- a/app/components/ModelLoad.tsx
+++ b/app/components/ModelLoad.tsx
@@ -2,6 +2,7 @@ import { Billboard, OrbitControls, Text, useGLTF } from "@react-three/drei";
 import { Canvas, useFrame, useThree } from "@react-three/fiber";
 import { Bloom, EffectComposer } from "@react-three/postprocessing";
 import { type ReactNode, Suspense, useEffect, useMemo, useRef } from "react";
+import { ErrorBoundary, useErrorBoundary } from "react-error-boundary";
 import type { MeshStandardMaterial } from "three";
 import * as THREE from "three";
 import { OutlineEffect } from "three/addons/effects/OutlineEffect.js";
@@ -145,54 +146,70 @@ function Character({ characterSetting }: ModelProps): ReactNode {
 	);
 }
 
-export function ModelViewer({ characterSetting }: ModelProps): ReactNode {
+export function Viewer({ characterSetting }: ModelProps): ReactNode {
 	return (
-		<div className="h-[50dvh] w-full">
-			<Canvas
-				scene={{
-					background: new THREE.Color("#0ea5e9"),
-				}}
-				camera={{
-					position: [1, 0, 2],
-					fov: 30,
-				}} // カメラの初期位置と視野角を設定
+		<Canvas
+			scene={{
+				background: new THREE.Color("#0ea5e9"),
+			}}
+			camera={{
+				position: [1, 0, 2],
+				fov: 30,
+			}} // カメラの初期位置と視野角を設定
+		>
+			{/* ライトを設定 */}
+			<ambientLight />
+			<directionalLight position={[6, 5, 5]} intensity={1} />
+			{/* ポストプロセッシング */}
+			<EffectComposer autoClear={false}>
+				<Bloom intensity={1} luminanceThreshold={1} radius={0.8} mipmapBlur />
+			</EffectComposer>
+			<Suspense
+				fallback={
+					<Billboard>
+						<Text
+							fontSize={0.1}
+							font="/assets/font.ttf"
+							characters="読み込み中…"
+						>
+							読み込み中…
+						</Text>
+					</Billboard>
+				}
 			>
-				{/* ライトを設定 */}
-				<ambientLight />
-				<directionalLight position={[6, 5, 5]} intensity={1} />
-				{/* ポストプロセッシング */}
-				<EffectComposer autoClear={false}>
-					<Bloom intensity={1} luminanceThreshold={1} radius={0.8} mipmapBlur />
-				</EffectComposer>
-				<Suspense
-					fallback={
-						<Billboard>
-							<Text
-								fontSize={0.1}
-								font="/assets/font.ttf"
-								characters="読み込み中…"
-							>
-								読み込み中…
-							</Text>
-						</Billboard>
-					}
-				>
-					{/* GLBモデルの読み込みと表示 */}
-					<Character characterSetting={characterSetting} />
-				</Suspense>
-				{/* カメラコントロールの追加（ユーザーが自由にカメラを操作できるようにする） */}
-				<OrbitControls
-					enablePan={false}
-					minPolarAngle={(Math.PI / 5) * 2}
-					maxPolarAngle={(Math.PI / 5) * 2}
-					maxDistance={3}
-					minDistance={1}
-					autoRotate
-					autoRotateSpeed={2}
-				/>
-				{/* アウトラインエフェクト */}
-				{/* <OutlineRenderer /> */}
-			</Canvas>
+				{/* GLBモデルの読み込みと表示 */}
+				<Character characterSetting={characterSetting} />
+			</Suspense>
+			{/* カメラコントロールの追加（ユーザーが自由にカメラを操作できるようにする） */}
+			<OrbitControls
+				enablePan={false}
+				minPolarAngle={(Math.PI / 5) * 2}
+				maxPolarAngle={(Math.PI / 5) * 2}
+				maxDistance={3}
+				minDistance={1}
+				autoRotate
+				autoRotateSpeed={2}
+			/>
+			{/* アウトラインエフェクト */}
+			{/* <OutlineRenderer /> */}
+		</Canvas>
+	);
+}
+
+function ErrorFallback(): ReactNode {
+	return (
+		<div className="grid h-full w-full place-items-center bg-sky-500">
+			<p className="text-lg drop-shadow-base">表示できません :(</p>
+		</div>
+	);
+}
+
+export function ModelViewer({ characterSetting }: ModelProps): ReactNode {
+	return (
+		<div className="h-[40dvh] w-full">
+			<ErrorBoundary fallback={<ErrorFallback />}>
+				<Viewer characterSetting={characterSetting} />
+			</ErrorBoundary>
 		</div>
 	);
 }
diff --git a/package.json b/package.json
index 93f0dc0..c447a7d 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
 		"qrcode.react": "4.1.0",
 		"react": "18.3.1",
 		"react-dom": "18.3.1",
+		"react-error-boundary": "4.1.2",
 		"react-hook-form": "7.53.1",
 		"swr": "2.2.5",
 		"tailwind-merge": "2.5.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 160cbf1..4864981 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       react-dom:
         specifier: 18.3.1
         version: 18.3.1(react@18.3.1)
+      react-error-boundary:
+        specifier: 4.1.2
+        version: 4.1.2(react@18.3.1)
       react-hook-form:
         specifier: 7.53.1
         version: 7.53.1(react@18.3.1)
@@ -4199,6 +4202,11 @@ packages:
       react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0
       react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1 || ^18.0.0
 
+  react-error-boundary@4.1.2:
+    resolution: {integrity: sha512-GQDxZ5Jd+Aq/qUxbCm1UtzmL/s++V7zKgE8yMktJiCQXCCFZnMZh9ng+6/Ne6PjNSXH0L9CjeOEREfRnq6Duag==}
+    peerDependencies:
+      react: '>=16.13.1'
+
   react-hook-form@7.53.1:
     resolution: {integrity: sha512-6aiQeBda4zjcuaugWvim9WsGqisoUk+etmFEsSUMm451/Ic8L/UAb7sRtMj3V+Hdzm6mMjU1VhiSzYUZeBm0Vg==}
     engines: {node: '>=18.0.0'}
@@ -9588,6 +9596,11 @@ snapshots:
       react-dom: 18.3.1(react@18.3.1)
       react-is: 18.1.0
 
+  react-error-boundary@4.1.2(react@18.3.1):
+    dependencies:
+      '@babel/runtime': 7.26.0
+      react: 18.3.1
+
   react-hook-form@7.53.1(react@18.3.1):
     dependencies:
       react: 18.3.1