diff --git a/src/scss/keyframes/_common.scss b/src/scss/keyframes/_common.scss
index b7d326c..efe46bc 100644
--- a/src/scss/keyframes/_common.scss
+++ b/src/scss/keyframes/_common.scss
@@ -46,3 +46,8 @@
   from { transform: scale(1); }
   to   { transform: scale(1.5); }
 }
+
+@keyframes width0-100 {
+  from { width: 0; }
+  to   { width: 100%; }
+}
diff --git a/src/scss/keyframes/pc/_calling.scss b/src/scss/keyframes/pc/_calling.scss
index 75c52be..b98d880 100644
--- a/src/scss/keyframes/pc/_calling.scss
+++ b/src/scss/keyframes/pc/_calling.scss
@@ -28,3 +28,19 @@
   from { width: 0; left: 50%; }
   to   { width: 500px; left: calc(50% - 250px); }
 }
+
+@keyframes calling__show-live-view {
+  from { width: 0; margin-left: 50%; margin-top: 10px; }
+  to   { width: calc(100% - 20px); margin-left: 10px; margin-top: 10px; }
+}
+
+@keyframes calling__char-name-frame-1 {
+  0%   { opacity: 0; transform: translate(4px, 4px); }
+  10%  { opacity: 1; }
+  100% { opacity: 1; transform: translate(0px, 0px); }
+}
+@keyframes calling__char-name-frame-2 {
+  0%   { opacity: 0; transform: translate(-4px, -4px); }
+  10%  { opacity: 1; }
+  100% { opacity: 1; transform: translate(0px, 0px); }
+}
diff --git a/src/scss/modules/pc/_calling.scss b/src/scss/modules/pc/_calling.scss
index e09c61e..79126d9 100644
--- a/src/scss/modules/pc/_calling.scss
+++ b/src/scss/modules/pc/_calling.scss
@@ -195,7 +195,7 @@
   /*** controls-bar ***/
   .calling__controls-bar {
     position: absolute;
-    bottom: 60px; left: 50%;
+    bottom: 40px; left: 50%;
     width: 0px; height: 60px;
     background-color: #222;
     border-radius: 30px;
@@ -220,6 +220,89 @@
     .btn:last-child { margin-right: 0; }
   }
 
+  /*** live-view ***/
+  .calling__live-view {
+    position: absolute;
+    left: calc(50% - 500px); top: 0;
+    width: 1000px; height: calc(100% - 140px);
+
+    .view {
+      position: absolute;
+      width: 50%; height: 50%;
+
+      .char {
+        margin-left: 50%;
+        margin-top: 10px;
+        width: 0; height: calc(100% - 20px);
+        border-radius: 8px;
+        overflow: hidden;
+
+        &::after {
+          content: ""; display: block;
+          width: 100%; height: 100%;
+          background-size: auto 100%;
+          background-position: center;
+          background-repeat: no-repeat;
+          opacity: 0;
+        }
+      }
+
+      .name {
+        position: absolute;
+        bottom: 20px; left: 20px;
+        width: 150px; height: 30px;
+        
+        &::before,
+        &::after {
+          content: ""; display: block;
+          position: absolute;
+          width: 80%; height: 80%;
+          background-color: #6C9A7B;
+          border-radius: 20px;
+          opacity: 0;
+        }
+        &::before { top: -4px; left: -4px; }
+        &::after  { bottom: -4px; right: -4px; }
+
+        span {
+          display: block;
+          position: absolute;
+          top: 0; left: 0;
+          width: 0%; height: 100%; 
+          border-radius: 15px;
+          background-color: #444;
+          font-size: 12px;
+          line-height: 30px;
+          text-align: center;
+          color: #fff;
+          overflow: hidden;
+          z-index: 1;
+        }
+      }
+    }
+    .view:nth-child(1) {
+      top: 0; left: 0;
+      .char {
+        background-color: $theme-light-purple;
+        &::after { background-image: url(../images/calling/icons/yui_large.png); }
+      }
+    }
+    .view:nth-child(2) {
+      top: 0; right: 0;
+      .char {
+        background-color: $theme-mint;
+        &::after { background-image: url(../images/calling/icons/eriri_large.png); }
+      }
+    }
+    .view:nth-child(3) {
+      bottom: 0; left: 25%;
+      .char {
+        background-color: $theme-pink;
+        &::after { background-image: url(../images/calling/icons/gab_large.png); }
+      }
+    }
+  }
+
   .calling[data-state="start"] {
     /*** bg ***/
     .calling__bg {
@@ -341,5 +424,54 @@
           scale0-1 0.8s ease 7.2s forwards;
       }
     }
+
+    /*** live-view ***/
+    .calling__live-view {
+      .view:nth-child(1) {
+        .char {
+          animation: calling__show-live-view 0.4s ease 8s forwards;
+          &::after {
+            animation:
+              fadein 0.3s ease 8.8s forwards,
+              slide-top 0.5s ease 8.8s forwards;
+          }
+        }
+        .name {
+          span { animation: width0-100 0.3s ease 9.7s forwards; }
+          &::before { animation: calling__char-name-frame-1 0.6s ease 10s forwards; }
+          &::after  { animation: calling__char-name-frame-2 0.6s ease 10s forwards; }
+        }
+      }
+      .view:nth-child(2) {
+        .char {
+          animation: calling__show-live-view 0.4s ease 8.2s forwards;
+          &::after {
+            animation:
+              fadein 0.3s ease 9s forwards,
+              slide-right 0.5s ease 9s forwards;
+          }
+        }
+        .name {
+          span { animation: width0-100 0.3s ease 9.9s forwards; }
+          &::before { animation: calling__char-name-frame-1 0.6s ease 10.2s forwards; }
+          &::after  { animation: calling__char-name-frame-2 0.6s ease 10.2s forwards; }
+        }
+      }
+      .view:nth-child(3) {
+        .char {
+          animation: calling__show-live-view 0.4s ease 8.4s forwards;
+          &::after {
+            animation:
+              fadein 0.3s ease 9.2s forwards,
+              slide-left 0.5s ease 9.2s forwards;
+          }
+        }
+        .name {
+          span { animation: width0-100 0.3s ease 10.1s forwards; }
+          &::before { animation: calling__char-name-frame-1 0.6s ease 10.4s forwards; }
+          &::after  { animation: calling__char-name-frame-2 0.6s ease 10.4s forwards; }
+        }
+      }
+    }
   }
 }