diff --git a/docs/index.html b/docs/index.html
index eaf3448..4a2c2e8 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -10,7 +10,9 @@
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
   </head>
   <body>
-    <div id="play-ground">
+    <div id="playground">
+      <div id="title">Playground at UKR & SOM</div>
+
       <div id="data-option">
           <br>
           <div id="data-menu"></div>
@@ -63,6 +65,7 @@
         <br>
         <br>
       </div>
+
       <div id="figure">
         <div class="no-select">
           <font size=4>
@@ -75,19 +78,70 @@
     </div>
 
 <style>
-  #play-ground {
-    display: flex;
-    justify-content: center;
+  #playground {
+      display: grid;
+      margin: 0;
+      min-height: 100vh;
+      grid-template-rows: 50px 1fr 1fr;
+      grid-template-columns: 1fr 1fr;
+      grid-template-areas:
+        "title  title"
+        "figure data-option"
+        "figure desc-params";
+      grid-gap: 5px;
+      background-color: white;
   }
+  @media screen and (min-width: 480px) and (max-width: 1024px) {
+    #playground {
+      display: grid;
+      margin: 0;
+      min-height: 100vh;
+      grid-template-rows: 90px 1fr 1fr;
+      grid-template-columns: 5% 1fr 1fr 5%;
+      grid-template-areas:
+        "title  title   title        title"
+        ".      figure  data-option  ."
+        ".      figure  desc-params  .";
+      background-color: #bbb;
+      grid-gap: 10px;
+    }
+  }
+  @media screen and (min-width: 1024px) {
+    #playground {
+      display: grid;
+      margin: 0;
+      min-height: 100vh;
+      grid-template-rows: 90px 1fr 1fr;
+      grid-template-columns: 1fr 444px 444px 1fr;
+      grid-template-areas:
+        "title  title   title        title"
+        ".      figure  data-option  ."
+        ".      figure  desc-params  .";
+      background-color: #ccc;
+    }
+  }
+  #title {
+      grid-area: title;
+      padding: 10px;
+      font-size: 1.5em;
+      background: #f88;
+    }
+    @media screen and (min-width: 480px) {
+      #title {
+        padding: 25px;
+        font-size: 2em;
+      }
+    }
   #data-option {
-    width: 33%;
+    grid-area: data-option;
+    /* width: 33%; */
     overflow:hidden;
     margin-top: 0px;
     text-align: center;
   }
   /* Data Menu */
   #data-menu {
-    width: 100%;
+    width: 70%;
     max-width: 400px;
     /* float: left; */
     margin-bottom: 24px;
@@ -167,13 +221,15 @@
   }
 
   #figure {
+    grid-area: figure;
     display: flex;
     flex-direction: column;
-    width:33%;
+    width:100%;
     /* text-align: center; */
     padding: 0;
     margin:0 auto;
     text-align:center;
+    background-color: cornflowerblue;
   }
 
   #demo-description {
@@ -181,6 +237,7 @@
   }
 
   #desc-params {
+    grid-area: desc-params;
     width: 33%;
     margin: 0 auto;
     text-align: center;
diff --git a/docs/main.js b/docs/main.js
index cc8c468..d6f9e52 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -13,6 +13,10 @@ var GLOBALS = {
   visibility: "off",
   current_Z: null,
   current_Y: null,
+  figure: {
+    width: 300,
+    height: 300,
+  },
 };
 
 d3.select("#play_pause").on("click", () => {
@@ -518,8 +522,6 @@ function demoMaker(
   tau,
   eta,
   mapping_resolution,
-  width,
-  height,
   margin,
   stepCb
 ) {
@@ -560,6 +562,9 @@ function demoMaker(
   function iterate() {
     if (paused) return;
 
+    // 画面が変更されたときにfigureサイズを変更するために用意
+    figureSizeUpdate();
+
     // control speed at which we iterate
     if (step >= 200 || Dim == 3) chunk = 1;
     for (var k = 0; k < chunk; k++) {
@@ -605,7 +610,13 @@ function demoMaker(
       }
     } else {
       // UKR
-      visualize_latent_space(Z, Zeta, width, height, margin);
+      visualize_latent_space(
+        (Z = Z),
+        (Zeta = Zeta),
+        (width = GLOBALS.figure.width),
+        (height = GLOBALS.figure.height),
+        (margin = margin)
+      );
       if (Dim < 4 && GLOBALS.visibility == "on") {
         var newY = ukr.generate_new_mapping(X, Z, mapping_resolution);
         // Dim=1,2,3のときだけ観測空間を表示
@@ -685,8 +696,6 @@ function main(X) {
     Y = initMatrix(X.length, Dim);
   }
 
-  var width = 330;
-  var height = 330;
   var margin = { top: 30, bottom: 60, right: 30, left: 60 };
 
   // Dimが3以下のとき，観測データは表示せずにvisibility iconのみ表示する．
@@ -716,12 +725,23 @@ function main(X) {
     tau,
     eta,
     mapping_resolution,
-    width,
-    height,
     margin
   );
 }
 
+function figureSizeUpdate() {
+  // var size_ = document.getElementById("playground").style;
+  var figure = document.getElementById("figure");
+  var w = figure.clientWidth;
+  var h = figure.clientHeight;
+  // GLOBALS.figure.width = Math.min(w, h);
+  // GLOBALS.figure.height = Math.min(w, h);
+  GLOBALS.figure.width = 400;
+  GLOBALS.figure.height = 400;
+  // console.log(GLOBALS.figure);
+  // console.log(size_.grid);
+}
+
 window.onload = () => {
   //radio button's setting
   function model_select() {
@@ -831,5 +851,11 @@ window.onload = () => {
   for (let i = 0; i < demo.options.length; i++)
     params.push(GLOBALS.state.demoParams[i]);
   var points = demo.generator.apply(null, params);
-  main(points);
+  // main(points);
+  figureSizeUpdate();
+};
+
+window.onresize = () => {
+  figureSizeUpdate();
+  // console.log(document.getElementById("figure").clientWidth);
 };
