diff --git a/components/DataView.vue b/components/DataView.vue
index e49e90a40985b..80b834033f720 100644
--- a/components/DataView.vue
+++ b/components/DataView.vue
@@ -74,44 +74,44 @@
                 :aria-label="$t('シェアリンクをコピー', { title })"
                 @click="copyLink"
               >
-                <picture>
-                  <img src="/link.png" alt="link" class="icon-resize link" />
-                </picture>
+                <PictureLoader
+                  filename="link"
+                  alt="link"
+                  classname="icon-resize link"
+                />
               </button>
 
               <button
                 :aria-label="$t('LINEで{title}のグラフをシェア', { title })"
                 @click="line"
               >
-                <picture>
-                  <img src="/line.png" alt="LINE" class="icon-resize line" />
-                </picture>
+                <PictureLoader
+                  filename="line"
+                  alt="LINE"
+                  classname="icon-resize line"
+                />
               </button>
 
               <button
                 :aria-label="$t('Twitterで{title}のグラフをシェア', { title })"
                 @click="twitter"
               >
-                <picture>
-                  <img
-                    src="/twitter.png"
-                    alt="Twitter"
-                    class="icon-resize twitter"
-                  />
-                </picture>
+                <PictureLoader
+                  filename="twitter"
+                  alt="Twitter"
+                  classname="icon-resize twitter"
+                />
               </button>
 
               <button
                 :aria-label="$t('facebookで{title}のグラフをシェア', { title })"
                 @click="facebook"
               >
-                <picture>
-                  <img
-                    src="/facebook.png"
-                    alt="facebook"
-                    class="icon-resize facebook"
-                  />
-                </picture>
+                <PictureLoader
+                  filename="facebook"
+                  alt="facebook"
+                  classname="icon-resize facebook"
+                />
               </button>
             </div>
           </div>
@@ -133,7 +133,10 @@
 <script lang="ts">
 import Vue from 'vue'
 
+const PictureLoader = () => import('~/components/PictureLoader.vue')
+
 export default Vue.extend({
+  components: { PictureLoader },
   props: {
     title: {
       type: String,
diff --git a/components/PictureLoader.vue b/components/PictureLoader.vue
new file mode 100644
index 0000000000000..2f967976f1389
--- /dev/null
+++ b/components/PictureLoader.vue
@@ -0,0 +1,51 @@
+<template>
+  <picture>
+    <source
+      :srcset="'/' + filename + '.webp'"
+      :width="width"
+      :height="height"
+      :alt="alt"
+      :class="classname"
+      decoding="async"
+      loading="lazy"
+      type="image/webp"
+    />
+    <img
+      :src="'/' + filename + '.png'"
+      :width="width"
+      :height="height"
+      :class="classname"
+      :alt="alt"
+      loading="lazy"
+      decoding="async"
+    />
+  </picture>
+</template>
+
+<script>
+export default {
+  name: 'PictureLoader',
+  props: {
+    filename: {
+      type: String,
+      default: ''
+    },
+    alt: {
+      type: String,
+      default: ''
+    },
+    width: {
+      type: String,
+      default: '100%'
+    },
+    height: {
+      type: String,
+      default: '100%'
+    },
+    classname: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
diff --git a/components/SideNavigation.vue b/components/SideNavigation.vue
index 3a5997722e0e0..0b51736975496 100644
--- a/components/SideNavigation.vue
+++ b/components/SideNavigation.vue
@@ -67,17 +67,22 @@
             target="_blank"
             rel="noopener"
           >
-            <img src="/twitter.png" width="90px" height="90px" alt="Twitter" />
+            <PictureLoader
+              filename="twitter"
+              width="30px"
+              height="30px"
+              alt="Twitter"
+            />
           </a>
           <a
             href="https://www.facebook.com/Justdouit19/"
             target="_blank"
             rel="noopener"
           >
-            <img
-              src="/facebook.png"
-              width="90px"
-              height="90px"
+            <PictureLoader
+              filename="facebook"
+              width="30px"
+              height="30px"
               alt="Facebook"
             />
           </a>
@@ -86,7 +91,12 @@
             target="_blank"
             rel="noopener"
           >
-            <img src="/github.png" width="90px" height="90px" alt="GitHub" />
+            <PictureLoader
+              filename="github"
+              width="30px"
+              height="30px"
+              alt="Github"
+            />
           </a>
         </div>
         <div class="SideNavigation-SponsorLinkContainer">
@@ -109,9 +119,9 @@
                 <span class="image-title">{{ $t('CC BY 4.0') }}</span>
               </template>
               <template #ccByImage>
-                <img
-                  class="cc-by-logo"
-                  src="/cc-by-mini.svg"
+                <PictureLoader
+                  classname="cc-by-logo"
+                  filename="cc-by-mini"
                   width="85.3px"
                   height="16px"
                   :alt="$t('CC BY 4.0')"
@@ -119,25 +129,28 @@
               </template>
             </i18n> </a
           ><br />
+          <br />
           {{ $t('Operations by:') }}<br />
           <nuxt-link :to="{ path: localePath('/about/') }">
             <span class="image-title">{{ $t('JUST道IT') }}</span>
-            <img
-              class="justdoit-logo"
-              src="/justdouit.png"
+
+            <PictureLoader
+              classname="justdoit-logo"
+              filename="justdouit"
               width="132px"
               height="46.6px"
               :alt="$t('JUST道IT')"
             />
           </nuxt-link>
 
+          <br />
           <br />
           {{ $t('Powered by:') }}<br />
           <a href="https://www.sakura.ad.jp/" target="_blank" rel="noopener">
             <span class="image-title">{{ $t('さくらインターネット') }}</span>
-            <img
-              class="sakura-internet-logo"
-              src="/sakura.svg"
+            <PictureLoader
+              classname="sakura-internet-logo"
+              filename="sakura"
               width="176px"
               height="62px"
               :alt="$t('さくらインターネット')"
@@ -155,8 +168,11 @@ import LogoAnimation from '@/components/Logo-Animation'
 import LogoAnimationSp from '@/components/Logo-Animation-sp.vue'
 const LanguageSelector = () => import('@/components/LanguageSelector.vue')
 
+const PictureLoader = () => import('~/components/PictureLoader.vue')
+
 export default {
   components: {
+    PictureLoader,
     LogoAnimationSp,
     LogoAnimation,
     ListItem,
@@ -363,14 +379,14 @@ export default {
     & a:hover {
       opacity: 0.6;
     }
-    & img {
+    & picture {
       padding-bottom: 0.9rem;
     }
-    & img.justdouit-logo {
+    & picture.justdouit-logo {
       margin: 0 0 0 -3px;
       width: 132px;
     }
-    & img.sakura-internet-logo {
+    & picture.sakura-internet-logo {
       margin: -6px 0 0 -14px;
       width: 176px;
     }
@@ -407,11 +423,9 @@ export default {
   }
   &-SocialLinkContainer {
     display: flex;
-    & img {
+    & picture {
       width: 30px;
-      &:first-of-type {
-        margin-right: 10px;
-      }
+      margin-right: 10px;
     }
   }
 }
diff --git a/pages/about.vue b/pages/about.vue
index fd39c1276a73d..e73275328f1eb 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -297,7 +297,11 @@
     </TextCard>
 
     <TextCard title="">
-      <img src="/ogp.png" />
+      <PictureLoader
+        filename="ogp"
+        classname="img"
+        :alt="$t('北海道アイキャッチ画像')"
+      />
       <i18n path="Illustration by {LITTLEKIT} under {ccBy}">
         <template #LITTLEKIT>
           <a href="https://twitter.com/LITTLEKIT">{{ $t('LITTLEKIT') }}</a>
@@ -315,10 +319,12 @@
 <script lang="ts">
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
+const PictureLoader = () => import('~/components/PictureLoader.vue')
 const TextCard = () => import('@/components/TextCard.vue')
 
 export default Vue.extend({
   components: {
+    PictureLoader,
     TextCard
   },
   head(): MetaInfo {
diff --git a/pages/print/info.vue b/pages/print/info.vue
index c5de504532376..c1959e9cc23e5 100644
--- a/pages/print/info.vue
+++ b/pages/print/info.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <img src="/ogp.png" alt="{{ $t('北海道アイキャッチ画像')" />
+    <PictureLoader filename="ogp" :alt="$t('北海道アイキャッチ画像')" />
     <br />
     <br />
     <h1 class="sitename">
@@ -39,12 +39,12 @@
             <span class="image-title">{{ $t('CC BY 4.0') }}</span>
           </template>
           <template #ccByImage>
-            <img
-              class="cc-by-logo"
-              src="/cc-by-mini.svg"
+            <PictureLoader
+              classname="cc-by-logo"
+              src="cc-by-mini"
               width="85.3px"
               height="16px"
-              alt="$t('CC BY 4.0')"
+              :alt="$t('CC BY 4.0')"
             />
           </template>
         </i18n>
@@ -52,23 +52,23 @@
       <li class="supplementHeader2">
         {{ $t('Operations by:') }}<br />
         <span class="image-title">{{ $t('JUST道IT') }}</span>
-        <img
-          class="justdoit-logo"
-          src="/justdouit.png"
+        <PictureLoader
+          filename="justdouit"
+          classname="justdoit-logo"
           width="132px"
           height="46.6px"
-          alt="$t('JUST道IT')"
+          :alt="$t('JUST道IT')"
         />
       </li>
       <li class="supplementHeader3">
         {{ $t('Powered by:') }}<br />
         <span class="image-title">{{ $t('さくらインターネット') }}</span>
-        <img
-          class="sakura-internet-logo"
-          src="/sakura.svg"
+        <PictureLoader
+          classname="sakura-internet-logo"
+          filename="sakura"
           width="176px"
           height="62px"
-          alt="$t('さくらインターネット')"
+          :alt="$t('さくらインターネット')"
         />
       </li>
     </ul>
@@ -76,7 +76,9 @@
 </template>
 
 <script>
+const PictureLoader = () => import('@/components/PictureLoader')
 export default {
+  components: { PictureLoader },
   layout: 'print',
   head() {
     return {
diff --git a/static/cc-by-mini.png b/static/cc-by-mini.png
new file mode 100644
index 0000000000000..4c25077431504
Binary files /dev/null and b/static/cc-by-mini.png differ
diff --git a/static/cc-by-mini.svg b/static/cc-by-mini.svg
deleted file mode 100644
index e0a20281f8473..0000000000000
--- a/static/cc-by-mini.svg
+++ /dev/null
@@ -1,32 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://web.resource.org/cc/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="80" height="15" id="svg2279" sodipodi:version="0.32" inkscape:version="0.45+devel" version="1.0" sodipodi:docname="by.svg" inkscape:output_extension="org.inkscape.output.svg.inkscape">
-  <defs id="defs2281">
-    <clipPath clipPathUnits="userSpaceOnUse" id="clipPath3442">
-      <rect style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect3444" width="20.614058" height="12.483703" x="171.99832" y="239.1203"/>
-    </clipPath>
-  </defs>
-  <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#999999" borderopacity="1" gridtolerance="10000" guidetolerance="10" objecttolerance="10" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="10.5125" inkscape:cx="40" inkscape:cy="7.5" inkscape:document-units="px" inkscape:current-layer="layer1" width="80px" height="15px" showborder="true" inkscape:showpageshadow="false" inkscape:window-width="935" inkscape:window-height="624" inkscape:window-x="50" inkscape:window-y="160"/>
-  <metadata id="metadata2284">
-    <rdf:RDF>
-      <cc:Work rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1">
-    <g id="BY" transform="matrix(0.9875019,0,0,0.9333518,-323.90064,-271.87688)">
-      <g transform="translate(158,54)" id="g3693">
-        <rect y="237.86218" x="170.5" height="15" width="80" id="rect3695" style="fill:#ffffff;fill-opacity:1;stroke:#000000;stroke-width:1.04161763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"/>
-        <rect style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:0.92243534;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" id="rect3697" width="77" height="12" x="172" y="239.36218"/>
-        <path sodipodi:nodetypes="cccscc" id="path3699" d="M 171.99996,239.37505 L 171.99996,251.37505 L 192.33474,251.37505 C 193.64339,249.62474 194.52652,247.59057 194.52652,245.37505 C 194.52652,243.17431 193.65859,241.1179 192.36599,239.37505 L 171.99996,239.37505 z" style="fill:#abb1aa;fill-opacity:1;stroke:none;stroke-width:1;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.46913578"/>
-        <g clip-path="url(#clipPath3442)" transform="matrix(0.9612533,0,0,0.9612533,6.8341566,9.5069994)" id="g3701">
-          <path style="opacity:1;fill:#ffffff" d="M 190.06417,245.36206 C 190.06667,249.25405 186.91326,252.41072 183.02153,252.41323 C 179.12979,252.41572 175.97262,249.26256 175.97036,245.3706 C 175.97036,245.36783 175.97036,245.36507 175.97036,245.36206 C 175.9681,241.47007 179.12126,238.3134 183.013,238.31113 C 186.90524,238.30864 190.06191,241.46181 190.06417,245.3538 C 190.06417,245.35628 190.06417,245.35929 190.06417,245.36206 z" rx="22.939548" type="arc" cy="264.3577" ry="22.939548" cx="296.35416" id="path3703"/>
-          <path style="opacity:1" id="path3705" d="M 188.74576,239.62226 C 190.30843,241.18492 191.08988,243.09869 191.08988,245.36206 C 191.08988,247.62592 190.32197,249.51913 188.78615,251.04165 C 187.15627,252.64521 185.22995,253.44672 183.00722,253.44672 C 180.81132,253.44672 178.91837,252.65172 177.32887,251.06174 C 175.73912,249.47198 174.94436,247.57226 174.94436,245.36206 C 174.94436,243.15235 175.73912,241.23908 177.32887,239.62226 C 178.87799,238.0591 180.77094,237.27764 183.00722,237.27764 C 185.2706,237.27764 187.18312,238.05909 188.74576,239.62226 z M 178.38093,240.67355 C 177.05978,242.008 176.39945,243.57116 176.39945,245.36429 C 176.39945,247.15694 177.05326,248.70682 178.36062,250.01393 C 179.66822,251.32153 181.22487,251.97509 183.03105,251.97509 C 184.83724,251.97509 186.40716,251.31502 187.74161,249.99412 C 189.0086,248.76725 189.64234,247.22467 189.64234,245.36429 C 189.64234,243.51799 188.99831,241.95084 187.71101,240.66354 C 186.42396,239.37649 184.86406,238.7327 183.03105,238.7327 C 181.19804,238.73271 179.64767,239.37975 178.38093,240.67355 z M 181.85761,244.57559 C 181.65573,244.13545 181.35354,243.91525 180.95051,243.91525 C 180.23802,243.91525 179.8819,244.39501 179.8819,245.35404 C 179.8819,246.31328 180.23802,246.79255 180.95051,246.79255 C 181.421,246.79255 181.75705,246.55908 181.95869,246.09111 L 182.94629,246.61701 C 182.47555,247.45339 181.76934,247.87168 180.82763,247.87168 C 180.10136,247.87168 179.51953,247.64899 179.08265,247.20409 C 178.64502,246.7587 178.42684,246.14477 178.42684,245.36206 C 178.42684,244.59313 178.65204,243.98271 179.10271,243.53056 C 179.55338,243.07838 180.11463,242.8524 180.7875,242.8524 C 181.78288,242.8524 182.49561,243.24465 182.92647,244.02835 L 181.85761,244.57559 z M 186.50398,244.57559 C 186.30184,244.13545 186.00567,243.91525 185.61517,243.91525 C 184.88839,243.91525 184.52474,244.39501 184.52474,245.35404 C 184.52474,246.31328 184.88839,246.79255 185.61517,246.79255 C 186.08642,246.79255 186.41644,246.55908 186.6048,246.09111 L 187.61447,246.61701 C 187.14448,247.45339 186.43926,247.87168 185.49931,247.87168 C 184.77403,247.87168 184.19346,247.64899 183.75683,247.20409 C 183.32096,246.7587 183.10254,246.14477 183.10254,245.36206 C 183.10254,244.59313 183.32422,243.98271 183.76737,243.53056 C 184.21026,243.07838 184.77404,242.8524 185.4592,242.8524 C 186.45282,242.8524 187.16455,243.24465 187.5939,244.02835 L 186.50398,244.57559 z"/>
-        </g>
-      </g>
-      <path id="text3707" d="M 357.4197,298.68502 C 357.66518,298.68503 357.85131,298.63145 357.9781,298.52427 C 358.10488,298.41711 358.16827,298.25904 358.16828,298.05007 C 358.16827,297.84377 358.10488,297.68704 357.9781,297.57987 C 357.85131,297.47003 357.66518,297.41511 357.4197,297.4151 L 356.55784,297.4151 L 356.55784,298.68502 L 357.4197,298.68502 M 357.4723,301.30928 C 357.78522,301.30928 358.0199,301.24363 358.17637,301.11235 C 358.33552,300.98108 358.4151,300.78282 358.4151,300.51758 C 358.4151,300.2577 358.33686,300.06346 358.18041,299.93486 C 358.02396,299.80358 357.78792,299.73795 357.4723,299.73794 L 356.55784,299.73794 L 356.55784,301.30928 L 357.4723,301.30928 M 358.92089,299.15121 C 359.25538,299.24766 359.51434,299.42582 359.69779,299.6857 C 359.88121,299.94558 359.97293,300.26439 359.97294,300.64216 C 359.97293,301.22086 359.776,301.6522 359.38217,301.9362 C 358.98833,302.22019 358.38947,302.36218 357.5856,302.36218 L 355.00001,302.36218 L 355.00001,296.36218 L 357.33878,296.36218 C 358.17771,296.36219 358.78466,296.48811 359.15962,296.73995 C 359.53727,296.9918 359.7261,297.39501 359.7261,297.94959 C 359.7261,298.24163 359.65732,298.49079 359.51975,298.69708 C 359.38217,298.9007 359.18255,299.05208 358.92089,299.15121 M 359.83746,296.36218 L 361.54096,296.36218 L 362.91671,298.50016 L 364.29245,296.36218 L 366,296.36218 L 363.69764,299.83439 L 363.69764,302.36218 L 362.13982,302.36218 L 362.13982,299.83439 L 359.83746,296.36218" style="font-size:8.25858784px;font-style:normal;font-weight:bold;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;font-family:'Bitstream Vera Sans'"/>
-    </g>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/static/cc-by-mini.webp b/static/cc-by-mini.webp
new file mode 100644
index 0000000000000..950d2ddcfdba4
Binary files /dev/null and b/static/cc-by-mini.webp differ
diff --git a/static/cc-by.png b/static/cc-by.png
new file mode 100644
index 0000000000000..dda5a4f3bab6c
Binary files /dev/null and b/static/cc-by.png differ
diff --git a/static/cc-by.svg b/static/cc-by.svg
deleted file mode 100644
index e44c25f0a4324..0000000000000
--- a/static/cc-by.svg
+++ /dev/null
@@ -1,155 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://web.resource.org/cc/"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="120"
-   height="42"
-   id="svg2759"
-   sodipodi:version="0.32"
-   inkscape:version="0.45+devel"
-   version="1.0"
-   sodipodi:docname="by.svg"
-   inkscape:output_extension="org.inkscape.output.svg.inkscape">
-  <defs
-     id="defs2761" />
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#8b8b8b"
-     borderopacity="1"
-     gridtolerance="10000"
-     guidetolerance="10"
-     objecttolerance="10"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1"
-     inkscape:cx="179"
-     inkscape:cy="89.569904"
-     inkscape:document-units="px"
-     inkscape:current-layer="layer1"
-     width="120px"
-     height="42px"
-     inkscape:showpageshadow="false"
-     inkscape:window-width="1198"
-     inkscape:window-height="624"
-     inkscape:window-x="396"
-     inkscape:window-y="242" />
-  <metadata
-     id="metadata2764">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1">
-    <g
-       transform="matrix(0.9937728,0,0,0.9936696,-177.69267,6.25128e-7)"
-       id="g260"
-       inkscape:export-filename="/mnt/hgfs/Bov/Documents/Work/2007/cc/identity/srr buttons/big/by.png"
-       inkscape:export-xdpi="300.23013"
-       inkscape:export-ydpi="300.23013">
-	<path
-   id="path3817_1_"
-   nodetypes="ccccccc"
-   d="M 181.96579,0.51074 L 296.02975,0.71338 C 297.6235,0.71338 299.04733,0.47705 299.04733,3.89404 L 298.90768,41.46093 L 179.08737,41.46093 L 179.08737,3.75439 C 179.08737,2.06934 179.25046,0.51074 181.96579,0.51074 z"
-   style="fill:#aab2ab" />
-
-	<path
-   d="M 297.29636,0 L 181.06736,0 C 179.82078,0 178.80613,1.01416 178.80613,2.26074 L 178.80613,41.75732 C 178.80613,42.03906 179.03513,42.26757 179.31687,42.26757 L 299.04734,42.26757 C 299.32908,42.26757 299.55808,42.03905 299.55808,41.75732 L 299.55808,2.26074 C 299.55807,1.01416 298.54343,0 297.29636,0 z M 181.06735,1.02148 L 297.29635,1.02148 C 297.98043,1.02148 298.53658,1.57714 298.53658,2.26074 C 298.53658,2.26074 298.53658,18.20898 298.53658,29.71045 L 215.19234,29.71045 C 212.14742,35.21631 206.28121,38.95459 199.54879,38.95459 C 192.81344,38.95459 186.94869,35.21973 183.90524,29.71045 L 179.8276,29.71045 C 179.8276,18.20899 179.8276,2.26074 179.8276,2.26074 C 179.82761,1.57715 180.38376,1.02148 181.06735,1.02148 z"
-   id="path263" />
-
-	<g
-   enable-background="new    "
-   id="g265">
-		<path
-   d="M 253.07761,32.95605 C 253.39499,32.95605 253.68503,32.98437 253.94773,33.04003 C 254.20945,33.09569 254.43308,33.18749 254.62058,33.31542 C 254.8071,33.44237 254.95261,33.6123 255.05515,33.82323 C 255.15769,34.03514 255.20945,34.29589 255.20945,34.60741 C 255.20945,34.94335 255.13328,35.22264 254.97996,35.44628 C 254.82762,35.67089 254.60105,35.85351 254.30223,35.99706 C 254.71434,36.11522 255.02196,36.32226 255.22508,36.61815 C 255.4282,36.91404 255.52977,37.27049 255.52977,37.68749 C 255.52977,38.02343 255.46434,38.31444 255.33348,38.56054 C 255.20262,38.80566 255.02586,39.00683 254.80516,39.1621 C 254.58348,39.31835 254.33055,39.43358 254.04735,39.5078 C 253.76317,39.583 253.47215,39.6201 253.17235,39.6201 L 249.936,39.6201 L 249.936,32.95604 L 253.07761,32.95604 L 253.07761,32.95605 z M 252.89011,35.65137 C 253.15183,35.65137 253.36667,35.58887 253.53562,35.46485 C 253.70359,35.34083 253.78757,35.13965 253.78757,34.86036 C 253.78757,34.70509 253.75925,34.57716 253.70359,34.47852 C 253.64695,34.37891 253.57273,34.30176 253.47898,34.24512 C 253.38523,34.18946 253.27781,34.15039 253.15671,34.12891 C 253.03561,34.10743 252.90866,34.09668 252.77878,34.09668 L 251.40476,34.09668 L 251.40476,35.65137 L 252.89011,35.65137 z M 252.97604,38.47949 C 253.11959,38.47949 253.25631,38.46582 253.38717,38.4375 C 253.51803,38.40918 253.63326,38.3623 253.73385,38.29785 C 253.83346,38.23242 253.91256,38.14355 253.97213,38.03125 C 254.0317,37.91992 254.061,37.77637 254.061,37.60254 C 254.061,37.26074 253.96432,37.0166 253.77096,36.87012 C 253.5776,36.72461 253.32174,36.65137 253.00436,36.65137 L 251.40475,36.65137 L 251.40475,38.47949 L 252.97604,38.47949 z"
-   id="path267"
-   style="fill:#ffffff" />
-
-		<path
-   d="M 255.78854,32.95605 L 257.43209,32.95605 L 258.99264,35.58789 L 260.54342,32.95605 L 262.17721,32.95605 L 259.70358,37.0625 L 259.70358,39.62012 L 258.23483,39.62012 L 258.23483,37.02539 L 255.78854,32.95605 z"
-   id="path269"
-   style="fill:#ffffff" />
-
-	</g>
-
-	<g
-   id="g5908_1_"
-   transform="matrix(0.872921,0,0,0.872921,50.12536,143.2144)">
-		
-			<path
-   id="path5906_1_"
-   cx="296.35416"
-   ry="22.939548"
-   cy="264.3577"
-   type="arc"
-   rx="22.939548"
-   d="M 186.90065,-141.46002 C 186.90623,-132.77923 179.87279,-125.73852 171.19257,-125.73291 C 162.51235,-125.72736 155.47051,-132.76025 155.46547,-141.44098 C 155.46547,-141.44714 155.46547,-141.45331 155.46547,-141.46002 C 155.46043,-150.14081 162.49333,-157.18152 171.17355,-157.18658 C 179.8549,-157.19213 186.89561,-150.15924 186.90065,-141.47845 C 186.90065,-141.4729 186.90065,-141.46619 186.90065,-141.46002 z"
-   style="fill:#ffffff" />
-
-		<g
-   id="g5706_1_"
-   transform="translate(-289.6157,99.0653)">
-			<path
-   id="path5708_1_"
-   d="M 473.57574,-253.32751 C 477.06115,-249.8421 478.80413,-245.5736 478.80413,-240.52532 C 478.80413,-235.47594 477.09136,-231.25329 473.66582,-227.85741 C 470.03051,-224.28081 465.734,-222.49309 460.77635,-222.49309 C 455.87858,-222.49309 451.65648,-224.26628 448.11122,-227.81261 C 444.56541,-231.35845 442.79277,-235.59563 442.79277,-240.52532 C 442.79277,-245.45391 444.56541,-249.7213 448.11122,-253.32751 C 451.56642,-256.81402 455.7885,-258.557 460.77635,-258.557 C 465.82465,-258.55701 470.09039,-256.81403 473.57574,-253.32751 z M 450.45776,-250.98267 C 447.51104,-248.00629 446.03823,-244.51978 446.03823,-240.52033 C 446.03823,-236.52198 447.49651,-233.06507 450.41247,-230.14966 C 453.32897,-227.23316 456.80096,-225.77545 460.82952,-225.77545 C 464.85808,-225.77545 468.35967,-227.24768 471.33605,-230.19385 C 474.16198,-232.9303 475.57549,-236.37091 475.57549,-240.52033 C 475.57549,-244.63837 474.13903,-248.13379 471.26781,-251.00501 C 468.39714,-253.87568 464.9179,-255.31159 460.82952,-255.31159 C 456.74112,-255.31158 453.28314,-253.86841 450.45776,-250.98267 z M 458.21225,-242.27948 C 457.76196,-243.26117 457.08795,-243.75232 456.18903,-243.75232 C 454.59986,-243.75232 453.80558,-242.68225 453.80558,-240.54321 C 453.80558,-238.40368 454.59986,-237.33471 456.18903,-237.33471 C 457.23841,-237.33471 457.98795,-237.85546 458.43769,-238.89922 L 460.64045,-237.72625 C 459.59052,-235.86077 458.01536,-234.92779 455.91496,-234.92779 C 454.29506,-234.92779 452.99733,-235.42449 452.0229,-236.4168 C 451.0468,-237.41021 450.56016,-238.77953 450.56016,-240.52532 C 450.56016,-242.24035 451.06245,-243.60186 452.06764,-244.61034 C 453.07283,-245.61888 454.32466,-246.12291 455.82545,-246.12291 C 458.04557,-246.12291 459.63526,-245.24803 460.59626,-243.50005 L 458.21225,-242.27948 z M 468.57562,-242.27948 C 468.12475,-243.26117 467.46417,-243.75232 466.5932,-243.75232 C 464.97217,-243.75232 464.16107,-242.68225 464.16107,-240.54321 C 464.16107,-238.40368 464.97217,-237.33471 466.5932,-237.33471 C 467.64429,-237.33471 468.38037,-237.85546 468.80048,-238.89922 L 471.05249,-237.72625 C 470.00421,-235.86077 468.43127,-234.92779 466.33478,-234.92779 C 464.7171,-234.92779 463.42218,-235.42449 462.44831,-236.4168 C 461.47614,-237.41021 460.98896,-238.77953 460.98896,-240.52532 C 460.98896,-242.24035 461.48341,-243.60186 462.47181,-244.61034 C 463.45966,-245.61888 464.71711,-246.12291 466.24531,-246.12291 C 468.4615,-246.12291 470.04896,-245.24803 471.0066,-243.50005 L 468.57562,-242.27948 z" />
-
-		</g>
-
-	</g>
-
-	<g
-   id="g275">
-		<circle
-   cx="255.55124"
-   cy="15.31348"
-   r="10.80664"
-   id="circle277"
-   sodipodi:cx="255.55124"
-   sodipodi:cy="15.31348"
-   sodipodi:rx="10.80664"
-   sodipodi:ry="10.80664"
-   style="fill:#ffffff" />
-
-		<g
-   id="g279">
-			<path
-   d="M 258.67819,12.18701 C 258.67819,11.77051 258.3403,11.4331 257.92526,11.4331 L 253.15182,11.4331 C 252.73678,11.4331 252.39889,11.7705 252.39889,12.18701 L 252.39889,16.95996 L 253.72994,16.95996 L 253.72994,22.61182 L 257.34713,22.61182 L 257.34713,16.95996 L 258.67818,16.95996 L 258.67818,12.18701 L 258.67819,12.18701 z"
-   id="path281" />
-
-			<circle
-   cx="255.53854"
-   cy="9.1723604"
-   r="1.63281"
-   id="circle283"
-   sodipodi:cx="255.53854"
-   sodipodi:cy="9.1723604"
-   sodipodi:rx="1.63281"
-   sodipodi:ry="1.63281" />
-
-		</g>
-
-		<path
-   clip-rule="evenodd"
-   d="M 255.5239,3.40723 C 252.29148,3.40723 249.55515,4.53516 247.31589,6.79102 C 245.01804,9.12452 243.8696,11.88672 243.8696,15.07569 C 243.8696,18.26466 245.01804,21.00733 247.31589,23.30225 C 249.61374,25.59668 252.35007,26.74414 255.5239,26.74414 C 258.73679,26.74414 261.52195,25.58789 263.87742,23.27295 C 266.09715,21.07568 267.2075,18.34326 267.2075,15.07568 C 267.2075,11.8081 266.07762,9.04687 263.8198,6.79101 C 261.56003,4.53516 258.79538,3.40723 255.5239,3.40723 z M 255.55319,5.50684 C 258.20163,5.50684 260.45065,6.44092 262.30026,8.30811 C 264.1694,10.15528 265.10397,12.41114 265.10397,15.07569 C 265.10397,17.75928 264.18893,19.98633 262.35885,21.75587 C 260.43014,23.66212 258.16256,24.61476 255.55319,24.61476 C 252.94284,24.61476 250.69381,23.67189 248.80612,21.78517 C 246.91647,19.89845 245.97311,17.66212 245.97311,15.0757 C 245.97311,12.48879 246.92721,10.23341 248.83541,8.30812 C 250.6655,6.44092 252.90475,5.50684 255.55319,5.50684 z"
-   id="path285"
-   style="fill-rule:evenodd" />
-
-	</g>
-
-</g>
-  </g>
-</svg>
diff --git a/static/cc-by.webp b/static/cc-by.webp
new file mode 100644
index 0000000000000..a95813c69b37d
Binary files /dev/null and b/static/cc-by.webp differ
diff --git a/static/facebook.webp b/static/facebook.webp
new file mode 100644
index 0000000000000..1b5d2385d0b0d
Binary files /dev/null and b/static/facebook.webp differ
diff --git a/static/github.webp b/static/github.webp
new file mode 100644
index 0000000000000..f944624143656
Binary files /dev/null and b/static/github.webp differ
diff --git a/static/justdouit.webp b/static/justdouit.webp
new file mode 100644
index 0000000000000..da5a50d6ce77c
Binary files /dev/null and b/static/justdouit.webp differ
diff --git a/static/line.webp b/static/line.webp
new file mode 100644
index 0000000000000..8455b25880d93
Binary files /dev/null and b/static/line.webp differ
diff --git a/static/link.webp b/static/link.webp
new file mode 100644
index 0000000000000..f0b637d6c3f78
Binary files /dev/null and b/static/link.webp differ
diff --git a/static/ogp.webp b/static/ogp.webp
new file mode 100644
index 0000000000000..e3851054576c7
Binary files /dev/null and b/static/ogp.webp differ
diff --git a/static/sakura.png b/static/sakura.png
new file mode 100644
index 0000000000000..392c05466ac1b
Binary files /dev/null and b/static/sakura.png differ
diff --git a/static/sakura.svg b/static/sakura.svg
deleted file mode 100644
index 28bced68f5869..0000000000000
--- a/static/sakura.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg id="whiteback" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1254 339"><defs><style>.cls-1{fill:#f57;}.cls-2{opacity:0.4;}.cls-3{fill:#808088;}</style></defs><title>アートボード 2</title><path class="cls-1" d="M242.18,73.59c-22.21-17.86-54.81-14-72.75,8.17l-24.3,30a12.28,12.28,0,0,0,9.54,20h71.12a20.88,20.88,0,0,1,20.42,16.54l.43,2,3.31-4.09A51.57,51.57,0,0,0,242.18,73.59Z"/><g class="cls-2"><path class="cls-3" d="M97.6,135.33l-3.31,4.09a51.57,51.57,0,0,0,7.77,72.65,50.91,50.91,0,0,0,32,11.26,52.35,52.35,0,0,0,40.71-19.43l24.3-30a12.28,12.28,0,0,0-9.54-20H118.45A20.88,20.88,0,0,1,98,137.35l-.43-2"/></g><path class="cls-3" d="M459.56,174.7v52.92c0,16.6,12.26,28.85,33.93,28.85,20.41,0,33.72-11.14,33.72-29.31V174.7H515.37v49.08c0,17.23-7.37,22.79-20.75,22.79-14,0-19.54-7.12-19.54-23.14V174.69Z"/><rect class="cls-3" x="742.63" y="195.4" width="14.72" height="59.8"/><circle class="cls-3" cx="749.99" cy="179.76" r="8.74"/><path class="cls-3" d="M913.84,194.13c-18,0-28.58,12.76-28.58,31v.58c0,19,12,30.7,30.56,30.7a42,42,0,0,0,22-5.88V240.35C930.93,245.46,924,248,916,248c-8.59,0-14.9-5.93-14.9-19.42h40.24C941.38,207.13,933.26,194.13,913.84,194.13ZM901.31,220c.47-10.48,3.75-17.38,12.54-17.38,8.36,0,11.41,7.63,11.67,17.38Z"/><path class="cls-3" d="M1094.8,194.13c-18,0-28.58,12.76-28.58,31v.58c0,19,12,30.7,30.56,30.7a42,42,0,0,0,22-5.88V240.35c-6.89,5.12-13.81,7.6-21.79,7.6-8.59,0-14.9-5.93-14.9-19.42h40.24C1122.33,207.13,1114.21,194.13,1094.8,194.13ZM1082.26,220c.47-10.48,3.75-17.38,12.54-17.38,8.36,0,11.41,7.63,11.67,17.38Z"/><path class="cls-3" d="M859.16,239V203.91H876.5V195.4H859.16V177.69H844.44V195.4h-8v8.51h8v36c0,9.69,8,16.53,19.73,16.53,5.33,0,9.23-1,12.47-3.15v-7.46a25.12,25.12,0,0,1-9.18,1.63C862.5,247.49,859.16,244.16,859.16,239Z"/><path class="cls-3" d="M241.64,193.87c0-6.58,4.52-10.43,13.32-10.43,9.59,0,15.9,2.67,23.75,7.8v-13a61.63,61.63,0,0,0-23.78-4.72c-17.52,0-30,8.63-30,21.62,0,26.61,40.85,22.31,40.85,40.19,0,7.1-5.21,11.1-12.71,11.1-11.06,0-20.93-5.53-28-11.39v13.35c8,5.74,18.26,7.93,29,7.93,17.21,0,28.31-9,28.31-22.48C282.48,205.43,241.64,211,241.64,193.87Z"/><path class="cls-3" d="M611.69,198.38c0-17.53-14.71-23.68-28.9-23.68H546.93v80.5h15.52V223.11h14.81l18.32,32.08h17.88L594.1,221.25C602.73,218.92,611.69,211.86,611.69,198.38Zm-49.24-13.73h15.21c10.39,0,17.36,4.71,17.36,14.46,0,10.4-8.29,14-17.36,14H562.45Z"/><polygon class="cls-3" points="428.42 255.2 447.82 255.2 414.22 210.4 445.9 174.7 432.68 174.7 393.26 219.12 393.26 174.7 377.73 174.7 377.73 255.2 393.26 255.2 393.26 234.02 403.7 222.25 428.42 255.2"/><path class="cls-3" d="M350,255.2H366.7l-31.45-81.07H319.47L288,255.2h12.7L309,233.88h32.78ZM312.83,224l12.56-32.37L337.94,224Z"/><path class="cls-3" d="M807.9,194.13c-7.93,0-16,5.3-19.55,10.12V195.4H773.63v59.79h14.72V213.31c3.3-6.14,8.8-9.14,13.43-9.14a8.68,8.68,0,0,1,8.82,8.72v42.31h14.72V209.61C825.32,202.31,820.23,194.13,807.9,194.13Z"/><path class="cls-3" d="M1036.24,194.13c-7.93,0-16,5.3-19.55,10.12V195.4H1002v59.79h14.72V213.31c3.3-6.14,8.8-9.14,13.43-9.14a8.68,8.68,0,0,1,8.82,8.72v42.31h14.72V209.61C1053.66,202.31,1048.57,194.13,1036.24,194.13Z"/><path class="cls-3" d="M969.38,206V195.4H954.66v59.8h14.72V215.07c6.08-6.61,13.16-9.09,22.22-9.09V194.82A27.38,27.38,0,0,0,969.38,206Z"/><path class="cls-3" d="M683.53,255.2h16.65l-31.45-81.07H653L621.51,255.2h12.7l8.27-21.31h32.78ZM646.31,224l12.56-32.37L671.43,224Z"/><path class="cls-3" d="M1153.42,239V203.91h17.34V195.4h-17.34V177.69H1138.7V195.4h-8v8.51h8v36c0,9.69,8,16.53,19.73,16.53,5.33,0,9.23-1,12.47-3.15v-7.46a25.12,25.12,0,0,1-9.18,1.63C1156.77,247.49,1153.42,244.16,1153.42,239Z"/></svg>
\ No newline at end of file
diff --git a/static/sakura.webp b/static/sakura.webp
new file mode 100644
index 0000000000000..d110b730acb72
Binary files /dev/null and b/static/sakura.webp differ
diff --git a/static/twitter.webp b/static/twitter.webp
new file mode 100644
index 0000000000000..fa9cf732b6549
Binary files /dev/null and b/static/twitter.webp differ