diff --git a/public/images/product/gatebox.png b/public/images/product/gatebox.png
new file mode 100644
index 0000000..8c5e75e
Binary files /dev/null and b/public/images/product/gatebox.png differ
diff --git a/src/scripts/components/product-box.tag b/src/scripts/components/product-box.tag
index b4f7366..86f70e6 100644
--- a/src/scripts/components/product-box.tag
+++ b/src/scripts/components/product-box.tag
@@ -10,13 +10,13 @@
       </a>
     </section>
 
-    <h3 class="sub-title">ライブラリ</h3>
+    <h3 class="sub-title">お仕事の実績</h3>
     <section>
-      <a each={ lib, key in opts.products.lib } href={ lib.link } target="_blank">
-        <img src={ lib.thumb } alt={ lib.name } />
-        <h4 class="name">{ lib.name }</h4>
-        <p class="description">{ lib.description }</p>
-        <small class="date">{ lib.date }</small>
+      <a each={ work, key in opts.products.works } href={ work.link } target="_blank">
+        <img src={ work.thumb } alt={ work.name } />
+        <h4 class="name">{ work.name }</h4>
+        <p class="description">{ work.description }</p>
+        <small class="date">{ work.date }</small>
       </a>
     </section>
 
@@ -29,6 +29,16 @@
         <small class="date">{ design.date }</small>
       </a>
     </section>
+    
+    <h3 class="sub-title">ライブラリ</h3>
+    <section>
+      <a each={ lib, key in opts.products.lib } href={ lib.link } target="_blank">
+        <img src={ lib.thumb } alt={ lib.name } />
+        <h4 class="name">{ lib.name }</h4>
+        <p class="description">{ lib.description }</p>
+        <small class="date">{ lib.date }</small>
+      </a>
+    </section>
 
     <h3 class="sub-title">動画</h3>
     <section>
diff --git a/src/scripts/config/product.js b/src/scripts/config/product.js
index 92bf5db..4a4e264 100644
--- a/src/scripts/config/product.js
+++ b/src/scripts/config/product.js
@@ -36,6 +36,31 @@ export default {
       "date": "2017/04/15"
     }
   ],
+  "works": [
+  	{
+      "name": "初音ミク HomeLive in Gatebox",
+      "link": "https://gatebox.ai/homelive/",
+      "thumb": "./images/product/gatebox.png",
+      "description": "コーディング&アニメーションを担当。Webデザインは@KmGraphさんです。ロゴデザインは@reku_ALさんです。",
+      "date": "2018/04/28"
+    }
+  ],
+  "design": [
+    {
+      "name": "ChocolateCake",
+      "link": "https://chocolate-cake.yuki540.com/",
+      "thumb": "./images/product/chocolate-cake.png",
+      "description": "僕が作ったCSS Animation作品をまとめたサイト",
+      "date": "2018/03/22"
+    },
+    {
+      "name": "俺ガイル非公式サイト",
+      "link": "http://oregairu.yuki540.com",
+      "thumb": "./images/product/oregairu.png",
+      "description": "『俺は、本物が欲しい。』",
+      "date": "2016/03/20"
+    }
+  ],
   "lib": [
     {
       "name": "shuvi-lib",
@@ -59,22 +84,6 @@ export default {
       "date": "2016/09/25"
     }
   ],
-  "design": [
-    {
-      "name": "ChocolateCake",
-      "link": "https://chocolate-cake.yuki540.com/",
-      "thumb": "./images/product/chocolate-cake.png",
-      "description": "僕が作ったCSS Animation作品をまとめたサイト",
-      "date": "2018/03/22"
-    },
-    {
-      "name": "俺ガイル非公式サイト",
-      "link": "http://oregairu.yuki540.com",
-      "thumb": "./images/product/oregairu.png",
-      "description": "『俺は、本物が欲しい。』",
-      "date": "2016/03/20"
-    }
-  ],
   "movie": [
     {
       "name": "COLORFUL_STEP",