From 127d7027c085ce9a10c92fd63cc4c797f1a6a962 Mon Sep 17 00:00:00 2001
From: Asa <26807394+a01sa01to@users.noreply.github.com>
Date: Sun, 6 Jun 2021 17:10:42 +0900
Subject: [PATCH] =?UTF-8?q?Update:=20=E6=9D=B1=E4=BA=AC=E9=83=BD=E7=89=88?=
 =?UTF-8?q?=E3=81=AB=E8=BF=BD=E5=BE=93=E3=81=97=E3=81=A6components?=
 =?UTF-8?q?=E3=83=87=E3=82=A3=E3=83=AC=E3=82=AF=E3=83=88=E3=83=AA=E3=82=92?=
 =?UTF-8?q?=E6=95=B4=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CardsReferenceInfection.vue        |  51 --------
 components/PrinterButton.vue                  |  92 ---------------
 components/SimpleMixedChart.vue               |   0
 components/{ => _shared}/AppLink.vue          |   0
 .../{ => _shared}/DevelopmentModeMark.vue     |   2 +-
 components/{ => _shared}/NoScript.vue         |   0
 components/{ => _shared}/PageHeader.vue       |   0
 components/{ => _shared}/SideNavigation.vue   |   6 +-
 .../SideNavigation}/LanguageSelector.vue      |   0
 .../{ => _shared/SideNavigation}/MenuList.vue |   2 +-
 components/{ => _shared}/StaticCard.vue       |   0
 .../{cards => index/CardsApps}/CocoaCard.vue  |   0
 .../CardsApps}/IbarakiAmabieCard.vue          |   0
 .../ConfirmedCasesAttributes/Card.vue}        |   2 +-
 .../ConfirmedCasesAttributes}/DataTable.vue   |   9 +-
 .../ConfirmedCasesByAge/Card.vue}             |  10 +-
 .../ConfirmedCasesByAge/Chart.vue}            |   6 +-
 .../ConfirmedCasesByMunicipalities/Card.vue}  |   8 +-
 .../ConfirmedCasesByMunicipalities/Chart.vue} |   6 +-
 .../ConfirmedCasesDetails/Card.vue}           |  17 ++-
 .../ConfirmedCasesDetails/Chart.vue}          |   0
 .../ConfirmedCasesNumber/Card.vue}            |   2 +-
 .../CardsInfection/Deaths/Card.vue}           |   2 +-
 .../IbarakiCoronaNext/Card.vue}               |   4 +-
 .../IbarakiGraphicalMap/Card.vue}             |   2 +-
 .../MutantConfirmedCasesNumber/Card.vue}      |   2 +-
 .../NationalInfectionStatus/Card.vue}         |   2 +-
 .../CardsInfection/Recovered/Card.vue}        |   2 +-
 .../CardsInfection/UntrackedRate/Card.vue}    |   8 +-
 .../CardsInfection/UntrackedRate/Chart.vue}   |  10 +-
 .../InspectionPersonsNumber/Card.vue}         |   2 +-
 .../MutantInspectionPersonsNumber/Card.vue}   |   2 +-
 .../MutantInspectionPersonsNumber/Chart.vue}  |  14 ++-
 .../TelephoneAdvisoryReportsNumber/Card.vue}  |   2 +-
 .../CardsInspection/TestedNumber/Card.vue}    |   8 +-
 components/{ => index}/CardsReferenceApps.vue |   8 +-
 components/index/CardsReferenceInfection.vue  |  62 ++++++++++
 .../{ => index}/CardsReferenceInspection.vue  |  18 ++-
 .../{ => index}/CardsReferenceVaccination.vue |   9 +-
 components/{ => index}/CardsTab.vue           |   9 +-
 .../CardsVaccination/1st/Card.vue}            |   2 +-
 .../CardsVaccination/2nd/Card.vue}            |   2 +-
 .../CardsVaccination/Chart.vue}               |  12 +-
 components/{ => index}/SiteTopUpper.vue       |  10 +-
 ...LinkToInformationAboutEmergencyMeasure.vue |   2 +-
 .../{ => index/SiteTopUpper}/StaticInfo.vue   |  12 +-
 .../{ => index/SiteTopUpper}/WhatsNew.vue     |   6 +-
 .../{cards => index/_shared}/CardRow.vue      |   0
 .../{ => index/_shared}/CardsLazyRow.vue      |   2 +-
 .../{ => index/_shared}/DataSelector.vue      |   0
 components/{ => index/_shared}/DataView.vue   |   6 +-
 .../_shared/DataView/CustomInfoPanel.vue}     |   2 +-
 .../_shared/DataView/ExpantionPanel.vue}      |   0
 .../_shared/DataView/Share.vue}               |   0
 .../_shared}/DataViewDataSetPanel.vue         |   0
 .../{ => index/_shared}/DataViewTable.vue     |   0
 .../_shared}/HorizontalBarChart.vue           |   9 +-
 .../_shared}/MixedBarAndLineChart.vue         |  10 +-
 .../{ => index/_shared}/OpenDataLink.vue      |   2 +-
 .../{ => index/_shared}/ScrollableChart.vue   |   0
 .../{ => index/_shared}/TimeBarChart.vue      |  12 +-
 .../_shared}/TimeBarWithAverageChart.vue      |  12 +-
 layouts/default.vue                           |   8 +-
 nuxt-i18n.config.ts                           |  12 +-
 pages/about.vue                               |   6 +-
 pages/cards/_card.vue                         | 110 ++++++++++--------
 pages/contacts.vue                            |   4 +-
 pages/emergency-measures.vue                  |   6 +-
 pages/index.vue                               |   9 +-
 pages/otherpref.vue                           |   2 +-
 pages/worker.vue                              |   6 +-
 71 files changed, 301 insertions(+), 342 deletions(-)
 delete mode 100644 components/CardsReferenceInfection.vue
 delete mode 100644 components/PrinterButton.vue
 delete mode 100644 components/SimpleMixedChart.vue
 rename components/{ => _shared}/AppLink.vue (100%)
 rename components/{ => _shared}/DevelopmentModeMark.vue (94%)
 rename components/{ => _shared}/NoScript.vue (100%)
 rename components/{ => _shared}/PageHeader.vue (100%)
 rename components/{ => _shared}/SideNavigation.vue (98%)
 rename components/{ => _shared/SideNavigation}/LanguageSelector.vue (100%)
 rename components/{ => _shared/SideNavigation}/MenuList.vue (98%)
 rename components/{ => _shared}/StaticCard.vue (100%)
 rename components/{cards => index/CardsApps}/CocoaCard.vue (100%)
 rename components/{cards => index/CardsApps}/IbarakiAmabieCard.vue (100%)
 rename components/{cards/ConfirmedCasesAttributesCard.vue => index/CardsInfection/ConfirmedCasesAttributes/Card.vue} (98%)
 rename components/{ => index/CardsInfection/ConfirmedCasesAttributes}/DataTable.vue (94%)
 rename components/{cards/ConfirmedCasesByAgeCard.vue => index/CardsInfection/ConfirmedCasesByAge/Card.vue} (93%)
 rename components/{ConfirmedCasesByAge.vue => index/CardsInfection/ConfirmedCasesByAge/Chart.vue} (88%)
 rename components/{cards/ConfirmedCasesByMunicipalitiesCard.vue => index/CardsInfection/ConfirmedCasesByMunicipalities/Card.vue} (93%)
 rename components/{ConfirmedCasesByMunicipalitiesTable.vue => index/CardsInfection/ConfirmedCasesByMunicipalities/Chart.vue} (88%)
 rename components/{cards/ConfirmedCasesDetailsCard.vue => index/CardsInfection/ConfirmedCasesDetails/Card.vue} (86%)
 rename components/{ConfirmedCasesDetailsTable.vue => index/CardsInfection/ConfirmedCasesDetails/Chart.vue} (100%)
 rename components/{cards/ConfirmedCasesNumberCard.vue => index/CardsInfection/ConfirmedCasesNumber/Card.vue} (96%)
 rename components/{cards/DeathsCard.vue => index/CardsInfection/Deaths/Card.vue} (91%)
 rename components/{cards/IbarakiCoronaNext.vue => index/CardsInfection/IbarakiCoronaNext/Card.vue} (98%)
 rename components/{cards/IbarakiGraphicalMapCard.vue => index/CardsInfection/IbarakiGraphicalMap/Card.vue} (98%)
 rename components/{cards/MutantConfirmedCasesNumberCard.vue => index/CardsInfection/MutantConfirmedCasesNumber/Card.vue} (96%)
 rename components/{cards/NationalInfectionStatus.vue => index/CardsInfection/NationalInfectionStatus/Card.vue} (99%)
 rename components/{cards/RecoveredCard.vue => index/CardsInfection/Recovered/Card.vue} (95%)
 rename components/{cards/UntrackedRateCard.vue => index/CardsInfection/UntrackedRate/Card.vue} (96%)
 rename components/{UntrackedRateMixedChart.vue => index/CardsInfection/UntrackedRate/Chart.vue} (98%)
 rename components/{cards/InspectionPersonsNumberCard.vue => index/CardsInspection/InspectionPersonsNumber/Card.vue} (96%)
 rename components/{cards/MutantInspectionPersonsNumberCard.vue => index/CardsInspection/MutantInspectionPersonsNumber/Card.vue} (96%)
 rename components/{MutantInspectionPersonsNumberChart.vue => index/CardsInspection/MutantInspectionPersonsNumber/Chart.vue} (97%)
 rename components/{cards/TelephoneAdvisoryReportsNumberCard.vue => index/CardsInspection/TelephoneAdvisoryReportsNumber/Card.vue} (92%)
 rename components/{cards/TestedNumberCard.vue => index/CardsInspection/TestedNumber/Card.vue} (95%)
 rename components/{ => index}/CardsReferenceApps.vue (81%)
 create mode 100644 components/index/CardsReferenceInfection.vue
 rename components/{ => index}/CardsReferenceInspection.vue (50%)
 rename components/{ => index}/CardsReferenceVaccination.vue (57%)
 rename components/{ => index}/CardsTab.vue (92%)
 rename components/{cards/VaccineSummary1stCard.vue => index/CardsVaccination/1st/Card.vue} (98%)
 rename components/{cards/VaccineSummary2ndCard.vue => index/CardsVaccination/2nd/Card.vue} (98%)
 rename components/{VaccineSummaryChart.vue => index/CardsVaccination/Chart.vue} (97%)
 rename components/{ => index}/SiteTopUpper.vue (90%)
 rename components/{ => index/SiteTopUpper}/LinkToInformationAboutEmergencyMeasure.vue (95%)
 rename components/{ => index/SiteTopUpper}/StaticInfo.vue (95%)
 rename components/{ => index/SiteTopUpper}/WhatsNew.vue (92%)
 rename components/{cards => index/_shared}/CardRow.vue (100%)
 rename components/{ => index/_shared}/CardsLazyRow.vue (96%)
 rename components/{ => index/_shared}/DataSelector.vue (100%)
 rename components/{ => index/_shared}/DataView.vue (96%)
 rename components/{DataViewCustomInfoPanel.vue => index/_shared/DataView/CustomInfoPanel.vue} (86%)
 rename components/{DataViewExpantionPanel.vue => index/_shared/DataView/ExpantionPanel.vue} (100%)
 rename components/{DataViewShare.vue => index/_shared/DataView/Share.vue} (100%)
 rename components/{ => index/_shared}/DataViewDataSetPanel.vue (100%)
 rename components/{ => index/_shared}/DataViewTable.vue (100%)
 rename components/{ => index/_shared}/HorizontalBarChart.vue (95%)
 rename components/{ => index/_shared}/MixedBarAndLineChart.vue (97%)
 rename components/{ => index/_shared}/OpenDataLink.vue (88%)
 rename components/{ => index/_shared}/ScrollableChart.vue (100%)
 rename components/{ => index/_shared}/TimeBarChart.vue (97%)
 rename components/{ => index/_shared}/TimeBarWithAverageChart.vue (97%)

diff --git a/components/CardsReferenceInfection.vue b/components/CardsReferenceInfection.vue
deleted file mode 100644
index c9e0719742b..00000000000
--- a/components/CardsReferenceInfection.vue
+++ /dev/null
@@ -1,51 +0,0 @@
-<template>
-  <cards-lazy-row :rows="rows" />
-</template>
-
-<script lang="ts">
-import Vue from 'vue'
-
-const ConfirmedCasesAttributesCard = () =>
-  import('@/components/cards/ConfirmedCasesAttributesCard.vue')
-const ConfirmedCasesByAgeCard = () =>
-  import('@/components/cards/ConfirmedCasesByAgeCard.vue')
-const ConfirmedCasesByMunicipalitiesCard = () =>
-  import('@/components/cards/ConfirmedCasesByMunicipalitiesCard.vue')
-const ConfirmedCasesDetailsCard = () =>
-  import('@/components/cards/ConfirmedCasesDetailsCard.vue')
-const ConfirmedCasesNumberCard = () =>
-  import('@/components/cards/ConfirmedCasesNumberCard.vue')
-const DeathsCard = () => import('@/components/cards/DeathsCard.vue')
-const IbarakiCoronaNext = () =>
-  import('@/components/cards/IbarakiCoronaNext.vue')
-const IbarakiGraphicalMapCard = () =>
-  import('@/components/cards/IbarakiGraphicalMapCard.vue')
-const RecoveredCard = () => import('@/components/cards/RecoveredCard.vue')
-const UntrackedRateCard = () =>
-  import('@/components/cards/UntrackedRateCard.vue')
-const NationalInfectionStatus = () =>
-  import('@/components/cards/NationalInfectionStatus.vue')
-const MutantConfirmedCasesNumberCard = () =>
-  import('@/components/cards/MutantConfirmedCasesNumberCard.vue')
-
-export default Vue.extend({
-  data() {
-    return {
-      rows: [
-        ConfirmedCasesDetailsCard,
-        IbarakiCoronaNext,
-        NationalInfectionStatus,
-        ConfirmedCasesNumberCard,
-        ConfirmedCasesAttributesCard,
-        ConfirmedCasesByMunicipalitiesCard,
-        IbarakiGraphicalMapCard,
-        ConfirmedCasesByAgeCard,
-        UntrackedRateCard,
-        MutantConfirmedCasesNumberCard,
-        RecoveredCard,
-        DeathsCard,
-      ],
-    }
-  },
-})
-</script>
diff --git a/components/PrinterButton.vue b/components/PrinterButton.vue
deleted file mode 100644
index 0249a5b50e4..00000000000
--- a/components/PrinterButton.vue
+++ /dev/null
@@ -1,92 +0,0 @@
-<template>
-  <div :class="wrapperClass">
-    <v-btn
-      class="PrinterButton"
-      outlined
-      :to="localePath(to)"
-      target="_blank"
-      @mouseover="mouseover"
-      @mouseleave="mouseleave"
-    >
-      <div class="PrinterButton-PrinterIcon">
-        <printer-white-icon v-if="hover" aria-hidden="true" />
-        <printer-icon v-else aria-hidden="true" />
-      </div>
-      <span class="PrinterButton-Text">
-        {{ $t('print') }}
-      </span>
-    </v-btn>
-  </div>
-</template>
-
-<script>
-import PrinterIcon from '@/static/printer.svg'
-import PrinterWhiteIcon from '@/static/printer-white.svg'
-
-export default {
-  components: {
-    PrinterIcon,
-    PrinterWhiteIcon,
-  },
-  props: {
-    wrapperClass: {
-      type: String,
-      default: '',
-    },
-    to: {
-      type: String,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      hover: this.hover,
-    }
-  },
-  methods: {
-    mouseover() {
-      this.hover = true
-    },
-    mouseleave() {
-      this.hover = false
-    },
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.PrinterButton {
-  @include button-text('md');
-
-  &:hover {
-    color: $white !important;
-  }
-
-  &-Text {
-    margin: 6px auto 0;
-
-    @include lessThan($small) {
-      position: absolute !important;
-      height: 1px !important;
-      width: 1px !important;
-      padding: 0 !important;
-      border: 0 !important;
-      white-space: nowrap !important;
-      overflow: hidden !important;
-      clip: rect(1px, 1px, 1px, 1px) !important;
-      clip-path: inset(50%) !important;
-    }
-  }
-  &-PrinterIcon {
-    margin-top: 8px;
-    width: 25px;
-
-    @include largerThan($small) {
-      padding-right: 7px;
-    }
-    svg {
-      width: auto;
-    }
-  }
-}
-</style>
diff --git a/components/SimpleMixedChart.vue b/components/SimpleMixedChart.vue
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/components/AppLink.vue b/components/_shared/AppLink.vue
similarity index 100%
rename from components/AppLink.vue
rename to components/_shared/AppLink.vue
diff --git a/components/DevelopmentModeMark.vue b/components/_shared/DevelopmentModeMark.vue
similarity index 94%
rename from components/DevelopmentModeMark.vue
rename to components/_shared/DevelopmentModeMark.vue
index 4ad03a029db..17b56415ff9 100644
--- a/components/DevelopmentModeMark.vue
+++ b/components/_shared/DevelopmentModeMark.vue
@@ -6,7 +6,7 @@
 </template>
 
 <script>
-import AppLink from '@/components/AppLink.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
 
 export default {
   name: 'DevelopmentModeMark',
diff --git a/components/NoScript.vue b/components/_shared/NoScript.vue
similarity index 100%
rename from components/NoScript.vue
rename to components/_shared/NoScript.vue
diff --git a/components/PageHeader.vue b/components/_shared/PageHeader.vue
similarity index 100%
rename from components/PageHeader.vue
rename to components/_shared/PageHeader.vue
diff --git a/components/SideNavigation.vue b/components/_shared/SideNavigation.vue
similarity index 98%
rename from components/SideNavigation.vue
rename to components/_shared/SideNavigation.vue
index be878e897a2..e6a4b458e59 100644
--- a/components/SideNavigation.vue
+++ b/components/_shared/SideNavigation.vue
@@ -157,9 +157,9 @@ import {
 import Vue from 'vue'
 import { TranslateResult } from 'vue-i18n'
 
-import AppLink from '@/components/AppLink.vue'
-import LanguageSelector from '@/components/LanguageSelector.vue'
-import MenuList from '@/components/MenuList.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
+import LanguageSelector from '@/components/_shared/SideNavigation/LanguageSelector.vue'
+import MenuList from '@/components/_shared/SideNavigation/MenuList.vue'
 
 type Item = {
   iconPath?: string
diff --git a/components/LanguageSelector.vue b/components/_shared/SideNavigation/LanguageSelector.vue
similarity index 100%
rename from components/LanguageSelector.vue
rename to components/_shared/SideNavigation/LanguageSelector.vue
diff --git a/components/MenuList.vue b/components/_shared/SideNavigation/MenuList.vue
similarity index 98%
rename from components/MenuList.vue
rename to components/_shared/SideNavigation/MenuList.vue
index 9803ee323e2..10d297d0d5a 100644
--- a/components/MenuList.vue
+++ b/components/_shared/SideNavigation/MenuList.vue
@@ -27,7 +27,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 
-import AppLink from '@/components/AppLink.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
 import CovidIcon from '@/static/covid.svg'
 import MaskTrashIcon from '@/static/masktrash.svg'
 import ParentIcon from '@/static/parent.svg'
diff --git a/components/StaticCard.vue b/components/_shared/StaticCard.vue
similarity index 100%
rename from components/StaticCard.vue
rename to components/_shared/StaticCard.vue
diff --git a/components/cards/CocoaCard.vue b/components/index/CardsApps/CocoaCard.vue
similarity index 100%
rename from components/cards/CocoaCard.vue
rename to components/index/CardsApps/CocoaCard.vue
diff --git a/components/cards/IbarakiAmabieCard.vue b/components/index/CardsApps/IbarakiAmabieCard.vue
similarity index 100%
rename from components/cards/IbarakiAmabieCard.vue
rename to components/index/CardsApps/IbarakiAmabieCard.vue
diff --git a/components/cards/ConfirmedCasesAttributesCard.vue b/components/index/CardsInfection/ConfirmedCasesAttributes/Card.vue
similarity index 98%
rename from components/cards/ConfirmedCasesAttributesCard.vue
rename to components/index/CardsInfection/ConfirmedCasesAttributes/Card.vue
index 1abf87b9166..b4972eefb41 100644
--- a/components/cards/ConfirmedCasesAttributesCard.vue
+++ b/components/index/CardsInfection/ConfirmedCasesAttributes/Card.vue
@@ -58,7 +58,7 @@ import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import VueI18n from 'vue-i18n'
 
-import DataTable from '@/components/DataTable.vue'
+import DataTable from '@/components/index/CardsInfection/ConfirmedCasesAttributes/DataTable.vue'
 import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 import { DataType, formatTable, TableDateType } from '@/utils/formatTable'
diff --git a/components/DataTable.vue b/components/index/CardsInfection/ConfirmedCasesAttributes/DataTable.vue
similarity index 94%
rename from components/DataTable.vue
rename to components/index/CardsInfection/ConfirmedCasesAttributes/DataTable.vue
index 01b6e897fcf..d9fb4a55d8b 100644
--- a/components/DataTable.vue
+++ b/components/index/CardsInfection/ConfirmedCasesAttributes/DataTable.vue
@@ -79,9 +79,6 @@
     </template>
     <template #footer>
       <open-data-link :url="url" />
-      <p class="FooterNote">
-        {{ $t('下記更新日時はオープンデータAPIの反映日時に準じています') }}
-      </p>
     </template>
   </data-view>
 </template>
@@ -91,9 +88,9 @@ import { mdiAlert } from '@mdi/js'
 import Vue from 'vue'
 import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue'
 
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
 
 export default Vue.extend({
   components: { DataView, DataViewDataSetPanel, OpenDataLink, ScaleLoader },
diff --git a/components/cards/ConfirmedCasesByAgeCard.vue b/components/index/CardsInfection/ConfirmedCasesByAge/Card.vue
similarity index 93%
rename from components/cards/ConfirmedCasesByAgeCard.vue
rename to components/index/CardsInfection/ConfirmedCasesByAge/Card.vue
index 7cbd81b9cd1..aa8de005fdc 100644
--- a/components/cards/ConfirmedCasesByAgeCard.vue
+++ b/components/index/CardsInfection/ConfirmedCasesByAge/Card.vue
@@ -1,7 +1,7 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
     <client-only>
-      <confirmed-cases-by-age
+      <chart
         :title="$t('年代別の感染状況')"
         :title-id="'number-of-confirmed-cases-by-age'"
         :chart-data="ageTable"
@@ -27,7 +27,7 @@
             </li>
           </ul>
         </template>
-      </confirmed-cases-by-age>
+      </chart>
     </client-only>
   </v-col>
 </template>
@@ -35,15 +35,15 @@
 <script>
 import dayjs from 'dayjs'
 
-import ConfirmedCasesByAge from '@/components/ConfirmedCasesByAge.vue'
+import Chart from '@/components/index/CardsInfection/ConfirmedCasesByAge/Chart.vue'
 import Data from '@/data/data.json'
-import { getCommaSeparatedNumberToFixedFunction } from '~/utils/valueFormatter'
+import { getCommaSeparatedNumberToFixedFunction } from '@/utils/valueFormatter'
 
 const countFormatter = getCommaSeparatedNumberToFixedFunction()
 
 export default {
   components: {
-    ConfirmedCasesByAge,
+    Chart,
   },
   data() {
     const { data, date } = Data.patients_age
diff --git a/components/ConfirmedCasesByAge.vue b/components/index/CardsInfection/ConfirmedCasesByAge/Chart.vue
similarity index 88%
rename from components/ConfirmedCasesByAge.vue
rename to components/index/CardsInfection/ConfirmedCasesByAge/Chart.vue
index 528ca2ada2f..7a144cfbf15 100644
--- a/components/ConfirmedCasesByAge.vue
+++ b/components/index/CardsInfection/ConfirmedCasesByAge/Chart.vue
@@ -31,9 +31,9 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
 
 export default Vue.extend({
   components: { DataView, DataViewDataSetPanel, OpenDataLink },
diff --git a/components/cards/ConfirmedCasesByMunicipalitiesCard.vue b/components/index/CardsInfection/ConfirmedCasesByMunicipalities/Card.vue
similarity index 93%
rename from components/cards/ConfirmedCasesByMunicipalitiesCard.vue
rename to components/index/CardsInfection/ConfirmedCasesByMunicipalities/Card.vue
index 25c3658de74..33a778df7ed 100644
--- a/components/cards/ConfirmedCasesByMunicipalitiesCard.vue
+++ b/components/index/CardsInfection/ConfirmedCasesByMunicipalities/Card.vue
@@ -1,7 +1,7 @@
 <template>
   <v-col cols="12" md="6" class="DataCard ConfirmedCasesByMunicipalitiesCard">
     <client-only>
-      <confirmed-cases-by-municipalities-table
+      <chart
         :title="$t('陽性者数（市町村別）')"
         :title-id="'number-of-confirmed-cases-by-municipalities'"
         :chart-data="municipalitiesTable"
@@ -20,7 +20,7 @@
             </li>
           </ul>
         </template>
-      </confirmed-cases-by-municipalities-table>
+      </chart>
     </client-only>
   </v-col>
 </template>
@@ -28,7 +28,7 @@
 <script>
 import dayjs from 'dayjs'
 
-import ConfirmedCasesByMunicipalitiesTable from '@/components/ConfirmedCasesByMunicipalitiesTable.vue'
+import Chart from '@/components/index/CardsInfection/ConfirmedCasesByMunicipalities/Chart.vue'
 import CityData from '@/data/cities.json'
 import Data from '@/data/data.json'
 import { getCommaSeparatedNumberToFixedFunction } from '@/utils/valueFormatter'
@@ -37,7 +37,7 @@ const countFormatter = getCommaSeparatedNumberToFixedFunction()
 
 export default {
   components: {
-    ConfirmedCasesByMunicipalitiesTable,
+    Chart,
   },
   data() {
     const { data, date } = Data.patients_city
diff --git a/components/ConfirmedCasesByMunicipalitiesTable.vue b/components/index/CardsInfection/ConfirmedCasesByMunicipalities/Chart.vue
similarity index 88%
rename from components/ConfirmedCasesByMunicipalitiesTable.vue
rename to components/index/CardsInfection/ConfirmedCasesByMunicipalities/Chart.vue
index a4be09d1593..d8b46b0fa9e 100644
--- a/components/ConfirmedCasesByMunicipalitiesTable.vue
+++ b/components/index/CardsInfection/ConfirmedCasesByMunicipalities/Chart.vue
@@ -34,9 +34,9 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
 
 export default Vue.extend({
   components: { DataView, DataViewDataSetPanel, OpenDataLink },
diff --git a/components/cards/ConfirmedCasesDetailsCard.vue b/components/index/CardsInfection/ConfirmedCasesDetails/Card.vue
similarity index 86%
rename from components/cards/ConfirmedCasesDetailsCard.vue
rename to components/index/CardsInfection/ConfirmedCasesDetails/Card.vue
index 180afad761c..c50a9705805 100644
--- a/components/cards/ConfirmedCasesDetailsCard.vue
+++ b/components/index/CardsInfection/ConfirmedCasesDetails/Card.vue
@@ -31,10 +31,7 @@
             </li>
           </ul>
         </template>
-        <confirmed-cases-details-table
-          :aria-label="$t('検査陽性者の状況')"
-          v-bind="confirmedCases"
-        />
+        <chart :aria-label="$t('検査陽性者の状況')" v-bind="confirmedCases" />
         <horizontal-bar-chart
           :chart-id="'horizontal-bar-chart-details'"
           :chart-data="confirmedDetailCases"
@@ -55,11 +52,11 @@
 <script>
 import dayjs from 'dayjs'
 
-import ConfirmedCasesDetailsTable from '@/components/ConfirmedCasesDetailsTable.vue'
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
-import HorizontalBarChart from '@/components/HorizontalBarChart.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
+import HorizontalBarChart from '@/components/index/_shared/HorizontalBarChart.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+import Chart from '@/components/index/CardsInfection/ConfirmedCasesDetails/Chart.vue'
 import Data from '@/data/data.json'
 import formatConfirmedCases from '@/utils/formatConfirmedCases'
 import formatDetailConfirmedCases from '@/utils/formatDetailGraph'
@@ -67,7 +64,7 @@ import formatDetailConfirmedCases from '@/utils/formatDetailGraph'
 const options = {
   components: {
     DataView,
-    ConfirmedCasesDetailsTable,
+    Chart,
     HorizontalBarChart,
     DataViewDataSetPanel,
     OpenDataLink,
diff --git a/components/ConfirmedCasesDetailsTable.vue b/components/index/CardsInfection/ConfirmedCasesDetails/Chart.vue
similarity index 100%
rename from components/ConfirmedCasesDetailsTable.vue
rename to components/index/CardsInfection/ConfirmedCasesDetails/Chart.vue
diff --git a/components/cards/ConfirmedCasesNumberCard.vue b/components/index/CardsInfection/ConfirmedCasesNumber/Card.vue
similarity index 96%
rename from components/cards/ConfirmedCasesNumberCard.vue
rename to components/index/CardsInfection/ConfirmedCasesNumber/Card.vue
index 5a768cbe3ce..3888773684a 100644
--- a/components/cards/ConfirmedCasesNumberCard.vue
+++ b/components/index/CardsInfection/ConfirmedCasesNumber/Card.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import ConfirmedCasesNumberChart from '@/components/TimeBarWithAverageChart.vue'
+import ConfirmedCasesNumberChart from '@/components/index/_shared/TimeBarWithAverageChart.vue'
 import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 import {
diff --git a/components/cards/DeathsCard.vue b/components/index/CardsInfection/Deaths/Card.vue
similarity index 91%
rename from components/cards/DeathsCard.vue
rename to components/index/CardsInfection/Deaths/Card.vue
index 2df55fb8e87..3e3d158e7bb 100644
--- a/components/cards/DeathsCard.vue
+++ b/components/index/CardsInfection/Deaths/Card.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
+import TimeBarChart from '@/components/index/_shared/TimeBarChart.vue'
 import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 
diff --git a/components/cards/IbarakiCoronaNext.vue b/components/index/CardsInfection/IbarakiCoronaNext/Card.vue
similarity index 98%
rename from components/cards/IbarakiCoronaNext.vue
rename to components/index/CardsInfection/IbarakiCoronaNext/Card.vue
index 24b0625ddff..f440686b19c 100644
--- a/components/cards/IbarakiCoronaNext.vue
+++ b/components/index/CardsInfection/IbarakiCoronaNext/Card.vue
@@ -190,8 +190,8 @@
 </template>
 
 <script>
-import DataView from '@/components/DataView.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
 import Data from '@/data/data.json'
 
 export default {
diff --git a/components/cards/IbarakiGraphicalMapCard.vue b/components/index/CardsInfection/IbarakiGraphicalMap/Card.vue
similarity index 98%
rename from components/cards/IbarakiGraphicalMapCard.vue
rename to components/index/CardsInfection/IbarakiGraphicalMap/Card.vue
index 87a5e2db95e..856de8b7fa1 100644
--- a/components/cards/IbarakiGraphicalMapCard.vue
+++ b/components/index/CardsInfection/IbarakiGraphicalMap/Card.vue
@@ -43,7 +43,7 @@
 
 <script>
 import IbarakiMap from '@/assets/ibaraki-map.svg'
-import DataView from '@/components/DataView.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
 import CityData from '@/data/cities.json'
 import Data from '@/data/data.json'
 
diff --git a/components/cards/MutantConfirmedCasesNumberCard.vue b/components/index/CardsInfection/MutantConfirmedCasesNumber/Card.vue
similarity index 96%
rename from components/cards/MutantConfirmedCasesNumberCard.vue
rename to components/index/CardsInfection/MutantConfirmedCasesNumber/Card.vue
index a5542a4cd0a..7a1805f1aec 100644
--- a/components/cards/MutantConfirmedCasesNumberCard.vue
+++ b/components/index/CardsInfection/MutantConfirmedCasesNumber/Card.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import ConfirmedCasesNumberChart from '@/components/TimeBarWithAverageChart.vue'
+import ConfirmedCasesNumberChart from '@/components/index/_shared/TimeBarWithAverageChart.vue'
 import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 import {
diff --git a/components/cards/NationalInfectionStatus.vue b/components/index/CardsInfection/NationalInfectionStatus/Card.vue
similarity index 99%
rename from components/cards/NationalInfectionStatus.vue
rename to components/index/CardsInfection/NationalInfectionStatus/Card.vue
index 0f7133c7c79..952c00dd4be 100644
--- a/components/cards/NationalInfectionStatus.vue
+++ b/components/index/CardsInfection/NationalInfectionStatus/Card.vue
@@ -236,7 +236,7 @@
 </template>
 
 <script>
-import DataView from '@/components/DataView.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
 import CityData from '@/data/cities.json'
 import Data from '@/data/data.json'
 
diff --git a/components/cards/RecoveredCard.vue b/components/index/CardsInfection/Recovered/Card.vue
similarity index 95%
rename from components/cards/RecoveredCard.vue
rename to components/index/CardsInfection/Recovered/Card.vue
index e868cd430c6..1ec3d12491f 100644
--- a/components/cards/RecoveredCard.vue
+++ b/components/index/CardsInfection/Recovered/Card.vue
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
+import TimeBarChart from '@/components/index/_shared/TimeBarChart.vue'
 import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 
diff --git a/components/cards/UntrackedRateCard.vue b/components/index/CardsInfection/UntrackedRate/Card.vue
similarity index 96%
rename from components/cards/UntrackedRateCard.vue
rename to components/index/CardsInfection/UntrackedRate/Card.vue
index ee6c9ffe0c4..c3c1df0d49e 100644
--- a/components/cards/UntrackedRateCard.vue
+++ b/components/index/CardsInfection/UntrackedRate/Card.vue
@@ -1,6 +1,6 @@
 <template>
   <v-col cols="12" md="6" class="DataCard">
-    <untracked-rate-mixed-chart
+    <chart
       :title="$t('感染経路不明者数推移')"
       :title-id="'untracked-rate'"
       :chart-id="'untracked-rate-chart'"
@@ -53,12 +53,12 @@
           </li>
         </ul></template
       >
-    </untracked-rate-mixed-chart>
+    </chart>
   </v-col>
 </template>
 
 <script>
-import UntrackedRateMixedChart from '@/components/UntrackedRateMixedChart'
+import Chart from '@/components/index/CardsInfection/UntrackedRate/Chart.vue'
 import Data from '@/data/data.json'
 import {
   getNumberToFixedFunction,
@@ -67,7 +67,7 @@ import {
 
 export default {
   components: {
-    UntrackedRateMixedChart,
+    Chart,
   },
   data() {
     const data = Data.patients_summary
diff --git a/components/UntrackedRateMixedChart.vue b/components/index/CardsInfection/UntrackedRate/Chart.vue
similarity index 98%
rename from components/UntrackedRateMixedChart.vue
rename to components/index/CardsInfection/UntrackedRate/Chart.vue
index 4b3167081c6..8d4dcefc573 100644
--- a/components/UntrackedRateMixedChart.vue
+++ b/components/index/CardsInfection/UntrackedRate/Chart.vue
@@ -109,14 +109,14 @@ import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import { TranslateResult } from 'vue-i18n'
 
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
 import DataViewTable, {
   TableHeader,
   TableItem,
-} from '@/components/DataViewTable.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
-import ScrollableChart from '@/components/ScrollableChart.vue'
+} from '@/components/index/_shared/DataViewTable.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+import ScrollableChart from '@/components/index/_shared/ScrollableChart.vue'
 import {
   DisplayData,
   yAxesBgPlugin,
diff --git a/components/cards/InspectionPersonsNumberCard.vue b/components/index/CardsInspection/InspectionPersonsNumber/Card.vue
similarity index 96%
rename from components/cards/InspectionPersonsNumberCard.vue
rename to components/index/CardsInspection/InspectionPersonsNumber/Card.vue
index dcd183fdffc..f0abde744d4 100644
--- a/components/cards/InspectionPersonsNumberCard.vue
+++ b/components/index/CardsInspection/InspectionPersonsNumber/Card.vue
@@ -51,7 +51,7 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
+import TimeBarChart from '@/components/index/_shared/TimeBarChart.vue'
 import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 
diff --git a/components/cards/MutantInspectionPersonsNumberCard.vue b/components/index/CardsInspection/MutantInspectionPersonsNumber/Card.vue
similarity index 96%
rename from components/cards/MutantInspectionPersonsNumberCard.vue
rename to components/index/CardsInspection/MutantInspectionPersonsNumber/Card.vue
index 4698cff1228..80cfeada878 100644
--- a/components/cards/MutantInspectionPersonsNumberCard.vue
+++ b/components/index/CardsInspection/MutantInspectionPersonsNumber/Card.vue
@@ -23,7 +23,7 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import Chart from '@/components/MutantInspectionPersonsNumberChart.vue'
+import Chart from '@/components/index/CardsInspection/MutantInspectionPersonsNumber/Chart.vue'
 import Data from '@/data/data.json'
 import {
   getNumberToFixedFunction,
diff --git a/components/MutantInspectionPersonsNumberChart.vue b/components/index/CardsInspection/MutantInspectionPersonsNumber/Chart.vue
similarity index 97%
rename from components/MutantInspectionPersonsNumberChart.vue
rename to components/index/CardsInspection/MutantInspectionPersonsNumber/Chart.vue
index 02ece97d72d..929f4b7d511 100644
--- a/components/MutantInspectionPersonsNumberChart.vue
+++ b/components/index/CardsInspection/MutantInspectionPersonsNumber/Chart.vue
@@ -104,11 +104,13 @@ import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import { TranslateResult } from 'vue-i18n'
 
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
-import DataViewTable, { TableHeader } from '@/components/DataViewTable.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
-import ScrollableChart from '@/components/ScrollableChart.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
+import DataViewTable, {
+  TableHeader,
+} from '@/components/index/_shared/DataViewTable.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+import ScrollableChart from '@/components/index/_shared/ScrollableChart.vue'
 import {
   DisplayData,
   yAxesBgPlugin,
@@ -376,7 +378,7 @@ const options: ThisTypedComponentOptionsWithRecordProps<
       const scaledTicksYAxisMax = this.scaledTicksYAxisMax
       const scaledTicksYAxisMaxRight = this.scaledTicksYAxisMaxRight
 
-      const options: Chart.ChartOptions = {
+      const options: ChartOptions = {
         tooltips: {
           displayColors: false,
           callbacks: {
diff --git a/components/cards/TelephoneAdvisoryReportsNumberCard.vue b/components/index/CardsInspection/TelephoneAdvisoryReportsNumber/Card.vue
similarity index 92%
rename from components/cards/TelephoneAdvisoryReportsNumberCard.vue
rename to components/index/CardsInspection/TelephoneAdvisoryReportsNumber/Card.vue
index 25bf2209bf7..4ca3099e8be 100644
--- a/components/cards/TelephoneAdvisoryReportsNumberCard.vue
+++ b/components/index/CardsInspection/TelephoneAdvisoryReportsNumber/Card.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import TimeBarChart from '@/components/TimeBarChart.vue'
+import TimeBarChart from '@/components/index/_shared/TimeBarChart.vue'
 import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
 
diff --git a/components/cards/TestedNumberCard.vue b/components/index/CardsInspection/TestedNumber/Card.vue
similarity index 95%
rename from components/cards/TestedNumberCard.vue
rename to components/index/CardsInspection/TestedNumber/Card.vue
index 6ba1c53345d..722828ec6b5 100644
--- a/components/cards/TestedNumberCard.vue
+++ b/components/index/CardsInspection/TestedNumber/Card.vue
@@ -107,10 +107,10 @@
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
-import HorizontalBarChart from '@/components/HorizontalBarChart.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
+import HorizontalBarChart from '@/components/index/_shared/HorizontalBarChart.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
 import Data from '@/data/data.json'
 dayjs.extend(duration)
 
diff --git a/components/CardsReferenceApps.vue b/components/index/CardsReferenceApps.vue
similarity index 81%
rename from components/CardsReferenceApps.vue
rename to components/index/CardsReferenceApps.vue
index 02fb2c75dc5..945ee5aec66 100644
--- a/components/CardsReferenceApps.vue
+++ b/components/index/CardsReferenceApps.vue
@@ -28,15 +28,17 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import StaticCard from '@/components/StaticCard.vue'
+import StaticCard from '@/components/_shared/StaticCard.vue'
+import CardsLazyRow from '@/components/index/_shared/CardsLazyRow.vue'
 
-const CocoaCard = () => import('@/components/cards/CocoaCard.vue')
+const CocoaCard = () => import('@/components/index/CardsApps/CocoaCard.vue')
 const IbarakiAmabieCard = () =>
-  import('@/components/cards/IbarakiAmabieCard.vue')
+  import('@/components/index/CardsApps/IbarakiAmabieCard.vue')
 
 export default Vue.extend({
   components: {
     StaticCard,
+    CardsLazyRow,
   },
   data() {
     return {
diff --git a/components/index/CardsReferenceInfection.vue b/components/index/CardsReferenceInfection.vue
new file mode 100644
index 00000000000..04a5347aeef
--- /dev/null
+++ b/components/index/CardsReferenceInfection.vue
@@ -0,0 +1,62 @@
+<template>
+  <cards-lazy-row :rows="rows" />
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+
+import CardsLazyRow from '@/components/index/_shared/CardsLazyRow.vue'
+
+const ConfirmedCasesAttributesCard = () =>
+  import('@/components/index/CardsInfection/ConfirmedCasesAttributes/Card.vue')
+const ConfirmedCasesByAgeCard = () =>
+  import('@/components/index/CardsInfection/ConfirmedCasesByAge/Card.vue')
+const ConfirmedCasesByMunicipalitiesCard = () =>
+  import(
+    '@/components/index/CardsInfection/ConfirmedCasesByMunicipalities/Card.vue'
+  )
+const ConfirmedCasesDetailsCard = () =>
+  import('@/components/index/CardsInfection/ConfirmedCasesDetails/Card.vue')
+const ConfirmedCasesNumberCard = () =>
+  import('@/components/index/CardsInfection/ConfirmedCasesNumber/Card.vue')
+const DeathsCard = () =>
+  import('@/components/index/CardsInfection/Deaths/Card.vue')
+const IbarakiCoronaNextCard = () =>
+  import('@/components/index/CardsInfection/IbarakiCoronaNext/Card.vue')
+const IbarakiGraphicalMapCard = () =>
+  import('@/components/index/CardsInfection/IbarakiGraphicalMap/Card.vue')
+const RecoveredCard = () =>
+  import('@/components/index/CardsInfection/Recovered/Card.vue')
+const UntrackedRateCard = () =>
+  import('@/components/index/CardsInfection/UntrackedRate/Card.vue')
+const NationalInfectionStatusCard = () =>
+  import('@/components/index/CardsInfection/NationalInfectionStatus/Card.vue')
+const MutantConfirmedCasesNumberCard = () =>
+  import(
+    '@/components/index/CardsInfection/MutantConfirmedCasesNumber/Card.vue'
+  )
+
+export default Vue.extend({
+  components: {
+    CardsLazyRow,
+  },
+  data() {
+    return {
+      rows: [
+        ConfirmedCasesDetailsCard,
+        IbarakiCoronaNextCard,
+        NationalInfectionStatusCard,
+        ConfirmedCasesNumberCard,
+        ConfirmedCasesAttributesCard,
+        ConfirmedCasesByMunicipalitiesCard,
+        IbarakiGraphicalMapCard,
+        ConfirmedCasesByAgeCard,
+        UntrackedRateCard,
+        MutantConfirmedCasesNumberCard,
+        RecoveredCard,
+        DeathsCard,
+      ],
+    }
+  },
+})
+</script>
diff --git a/components/CardsReferenceInspection.vue b/components/index/CardsReferenceInspection.vue
similarity index 50%
rename from components/CardsReferenceInspection.vue
rename to components/index/CardsReferenceInspection.vue
index a28793d1635..ba936025174 100644
--- a/components/CardsReferenceInspection.vue
+++ b/components/index/CardsReferenceInspection.vue
@@ -5,15 +5,25 @@
 <script lang="ts">
 import Vue from 'vue'
 
+import CardsLazyRow from '@/components/index/_shared/CardsLazyRow.vue'
+
 const InspectionPersonsNumberCard = () =>
-  import('@/components/cards/InspectionPersonsNumberCard.vue')
+  import('@/components/index/CardsInspection/InspectionPersonsNumber/Card.vue')
 const TelephoneAdvisoryReportsNumberCard = () =>
-  import('@/components/cards/TelephoneAdvisoryReportsNumberCard.vue')
-const TestedNumberCard = () => import('@/components/cards/TestedNumberCard.vue')
+  import(
+    '@/components/index/CardsInspection/TelephoneAdvisoryReportsNumber/Card.vue'
+  )
+const TestedNumberCard = () =>
+  import('@/components/index/CardsInspection/TestedNumber/Card.vue')
 const MutantInspectionPersonsNumberCard = () =>
-  import('@/components/cards/MutantInspectionPersonsNumberCard.vue')
+  import(
+    '@/components/index/CardsInspection/MutantInspectionPersonsNumber/Card.vue'
+  )
 
 export default Vue.extend({
+  components: {
+    CardsLazyRow,
+  },
   data() {
     return {
       rows: [
diff --git a/components/CardsReferenceVaccination.vue b/components/index/CardsReferenceVaccination.vue
similarity index 57%
rename from components/CardsReferenceVaccination.vue
rename to components/index/CardsReferenceVaccination.vue
index 79aa955b45c..2f517636da3 100644
--- a/components/CardsReferenceVaccination.vue
+++ b/components/index/CardsReferenceVaccination.vue
@@ -5,12 +5,17 @@
 <script lang="ts">
 import Vue from 'vue'
 
+import CardsLazyRow from '@/components/index/_shared/CardsLazyRow.vue'
+
 const VaccineSummary1stCard = () =>
-  import('@/components/cards/VaccineSummary1stCard.vue')
+  import('@/components/index/CardsVaccination/1st/Card.vue')
 const VaccineSummary2ndCard = () =>
-  import('@/components/cards/VaccineSummary2ndCard.vue')
+  import('@/components/index/CardsVaccination/2nd/Card.vue')
 
 export default Vue.extend({
+  components: {
+    CardsLazyRow,
+  },
   data() {
     return {
       rows: [VaccineSummary1stCard, VaccineSummary2ndCard],
diff --git a/components/CardsTab.vue b/components/index/CardsTab.vue
similarity index 92%
rename from components/CardsTab.vue
rename to components/index/CardsTab.vue
index 9147b0d5cdc..cc6cfb6c27f 100644
--- a/components/CardsTab.vue
+++ b/components/index/CardsTab.vue
@@ -32,12 +32,13 @@ import Vue from 'vue'
 import VaccineIcon from '@/static/vaccine.svg'
 import { EventBus, TOGGLE_EVENT } from '@/utils/tab-event-bus.ts'
 const CardsReferenceInfection = () =>
-  import('@/components/CardsReferenceInfection.vue')
+  import('@/components/index/CardsReferenceInfection.vue')
 const CardsReferenceInspection = () =>
-  import('@/components/CardsReferenceInspection.vue')
-const CardsReferenceApps = () => import('@/components/CardsReferenceApps.vue')
+  import('@/components/index/CardsReferenceInspection.vue')
+const CardsReferenceApps = () =>
+  import('@/components/index/CardsReferenceApps.vue')
 const CardsReferenceVaccination = () =>
-  import('@/components/CardsReferenceVaccination.vue')
+  import('@/components/index/CardsReferenceVaccination.vue')
 
 export default Vue.extend({
   components: {
diff --git a/components/cards/VaccineSummary1stCard.vue b/components/index/CardsVaccination/1st/Card.vue
similarity index 98%
rename from components/cards/VaccineSummary1stCard.vue
rename to components/index/CardsVaccination/1st/Card.vue
index 5a473698ff9..1aeee340631 100644
--- a/components/cards/VaccineSummary1stCard.vue
+++ b/components/index/CardsVaccination/1st/Card.vue
@@ -54,7 +54,7 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import Chart from '@/components/VaccineSummaryChart.vue'
+import Chart from '@/components/index/CardsVaccination/Chart.vue'
 import CityData from '@/data/cities.json'
 import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
diff --git a/components/cards/VaccineSummary2ndCard.vue b/components/index/CardsVaccination/2nd/Card.vue
similarity index 98%
rename from components/cards/VaccineSummary2ndCard.vue
rename to components/index/CardsVaccination/2nd/Card.vue
index c957f46ce84..9795688b4e9 100644
--- a/components/cards/VaccineSummary2ndCard.vue
+++ b/components/index/CardsVaccination/2nd/Card.vue
@@ -54,7 +54,7 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import Chart from '@/components/VaccineSummaryChart.vue'
+import Chart from '@/components/index/CardsVaccination/Chart.vue'
 import CityData from '@/data/cities.json'
 import Data from '@/data/data.json'
 import formatGraph from '@/utils/formatGraph'
diff --git a/components/VaccineSummaryChart.vue b/components/index/CardsVaccination/Chart.vue
similarity index 97%
rename from components/VaccineSummaryChart.vue
rename to components/index/CardsVaccination/Chart.vue
index b02ba47a21f..003af4e7626 100644
--- a/components/VaccineSummaryChart.vue
+++ b/components/index/CardsVaccination/Chart.vue
@@ -105,15 +105,15 @@ import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import { TranslateResult } from 'vue-i18n'
 
-import DataSelector from '@/components/DataSelector.vue'
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
+import DataSelector from '@/components/index/_shared/DataSelector.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
 import DataViewTable, {
   TableHeader,
   TableItem,
-} from '@/components/DataViewTable.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
-import ScrollableChart from '@/components/ScrollableChart.vue'
+} from '@/components/index/_shared/DataViewTable.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+import ScrollableChart from '@/components/index/_shared/ScrollableChart.vue'
 import {
   DisplayData,
   yAxesBgPlugin,
diff --git a/components/SiteTopUpper.vue b/components/index/SiteTopUpper.vue
similarity index 90%
rename from components/SiteTopUpper.vue
rename to components/index/SiteTopUpper.vue
index 1f4d59116a1..5e28445e304 100644
--- a/components/SiteTopUpper.vue
+++ b/components/index/SiteTopUpper.vue
@@ -18,13 +18,13 @@
       </div>
     </div>
     <whats-new class="mb-4" :items="newsItems" :is-emergency="true" />
-    <lazy-static-info
+    <static-info
       class="mb-4"
       :url="'https://www.pref.ibaraki.jp/1saigai/2019-ncov/210409_kaiken.html'"
       :text="$t('今後の感染拡大に備え対策を強化します')"
       :btn-text="$t('詳しくはこちら')"
     />
-    <lazy-static-info
+    <static-info
       class="mb-4"
       :url="'https://www.pref.ibaraki.jp/hokenfukushi/yobo/kiki/yobo/kansen/idwr/information/other/documents/corona-soudan.html'"
       :text="$t('自分や家族の症状に不安や心配があればまずは電話相談をどうぞ')"
@@ -37,8 +37,9 @@
 import { mdiChartTimelineVariant } from '@mdi/js'
 import Vue from 'vue'
 
-import PageHeader from '@/components/PageHeader.vue'
-import WhatsNew from '@/components/WhatsNew.vue'
+import PageHeader from '@/components/_shared/PageHeader.vue'
+import StaticInfo from '@/components/index/SiteTopUpper/StaticInfo.vue'
+import WhatsNew from '@/components/index/SiteTopUpper/WhatsNew.vue'
 import Data from '@/data/data.json'
 import News from '@/data/news.json'
 import { convertDatetimeToISO8601Format } from '@/utils/formatDate'
@@ -47,6 +48,7 @@ export default Vue.extend({
   components: {
     PageHeader,
     WhatsNew,
+    StaticInfo,
   },
   data() {
     const { lastUpdate } = Data
diff --git a/components/LinkToInformationAboutEmergencyMeasure.vue b/components/index/SiteTopUpper/LinkToInformationAboutEmergencyMeasure.vue
similarity index 95%
rename from components/LinkToInformationAboutEmergencyMeasure.vue
rename to components/index/SiteTopUpper/LinkToInformationAboutEmergencyMeasure.vue
index 26ea89c991e..c424782a211 100644
--- a/components/LinkToInformationAboutEmergencyMeasure.vue
+++ b/components/index/SiteTopUpper/LinkToInformationAboutEmergencyMeasure.vue
@@ -16,7 +16,7 @@
 import { mdiBullhorn } from '@mdi/js'
 import Vue from 'vue'
 
-import AppLink from '@/components/AppLink.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
 
 export default Vue.extend({
   components: { AppLink },
diff --git a/components/StaticInfo.vue b/components/index/SiteTopUpper/StaticInfo.vue
similarity index 95%
rename from components/StaticInfo.vue
rename to components/index/SiteTopUpper/StaticInfo.vue
index 81bf68d4600..0226fbcb11b 100644
--- a/components/StaticInfo.vue
+++ b/components/index/SiteTopUpper/StaticInfo.vue
@@ -12,7 +12,7 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import AppLink from '@/components/AppLink.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
 
 export default Vue.extend({
   components: { AppLink },
@@ -36,14 +36,14 @@ export default Vue.extend({
 <style lang="scss">
 .StaticInfo {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
   flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5em 1em;
   background-color: $white;
   border: 1px solid $gray-4;
-  box-shadow: $shadow;
   border-radius: 4px;
-  padding: 0.5em 1em;
+  box-shadow: $shadow;
 
   @include font-size(14);
 
@@ -52,8 +52,8 @@ export default Vue.extend({
     text-align: right;
 
     > a {
-      text-decoration: none;
       color: $green-1 !important;
+      text-decoration: none;
       @include button-text('sm');
 
       &:hover {
diff --git a/components/WhatsNew.vue b/components/index/SiteTopUpper/WhatsNew.vue
similarity index 92%
rename from components/WhatsNew.vue
rename to components/index/SiteTopUpper/WhatsNew.vue
index 244a47ac1e5..911952b5954 100644
--- a/components/WhatsNew.vue
+++ b/components/index/SiteTopUpper/WhatsNew.vue
@@ -8,7 +8,7 @@
         {{ $t('最新のお知らせ') }}
       </h3>
       <div class="WhatsNew-linkGroup">
-        <lazy-link-to-information-about-emergency-measure v-if="isEmergency" />
+        <link-to-information-about-emergency-measure v-if="isEmergency" />
         <app-link
           class="WhatsNew-linkButton"
           to="https://www.pref.ibaraki.jp/1saigai/2019-ncov/covid-19_vaccine/team.html"
@@ -55,7 +55,8 @@
 import { mdiInformation } from '@mdi/js'
 import Vue from 'vue'
 
-import AppLink from '@/components/AppLink.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
+import LinkToInformationAboutEmergencyMeasure from '@/components/index/SiteTopUpper/LinkToInformationAboutEmergencyMeasure.vue'
 import VaccineIcon from '@/static/vaccine.svg'
 import { convertDateToISO8601Format } from '@/utils/formatDate'
 
@@ -63,6 +64,7 @@ export default Vue.extend({
   components: {
     AppLink,
     VaccineIcon,
+    LinkToInformationAboutEmergencyMeasure,
   },
   props: {
     items: {
diff --git a/components/cards/CardRow.vue b/components/index/_shared/CardRow.vue
similarity index 100%
rename from components/cards/CardRow.vue
rename to components/index/_shared/CardRow.vue
diff --git a/components/CardsLazyRow.vue b/components/index/_shared/CardsLazyRow.vue
similarity index 96%
rename from components/CardsLazyRow.vue
rename to components/index/_shared/CardsLazyRow.vue
index 574491e9ddb..350e3721a6e 100644
--- a/components/CardsLazyRow.vue
+++ b/components/index/_shared/CardsLazyRow.vue
@@ -20,7 +20,7 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import CardRow from '@/components/cards/CardRow.vue'
+import CardRow from '@/components/index/_shared/CardRow.vue'
 
 type Data = {
   actives: boolean[]
diff --git a/components/DataSelector.vue b/components/index/_shared/DataSelector.vue
similarity index 100%
rename from components/DataSelector.vue
rename to components/index/_shared/DataSelector.vue
diff --git a/components/DataView.vue b/components/index/_shared/DataView.vue
similarity index 96%
rename from components/DataView.vue
rename to components/index/_shared/DataView.vue
index ab1519ca0b6..25e318c2f94 100644
--- a/components/DataView.vue
+++ b/components/index/_shared/DataView.vue
@@ -81,9 +81,9 @@
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
 
-import AppLink from '@/components/AppLink.vue'
-import DataViewExpantionPanel from '@/components/DataViewExpantionPanel.vue'
-import DataViewShare from '@/components/DataViewShare.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
+import DataViewExpantionPanel from '@/components/index/_shared/DataView/ExpantionPanel.vue'
+import DataViewShare from '@/components/index/_shared/DataView/Share.vue'
 import { convertDatetimeToISO8601Format } from '@/utils/formatDate'
 
 export default Vue.extend({
diff --git a/components/DataViewCustomInfoPanel.vue b/components/index/_shared/DataView/CustomInfoPanel.vue
similarity index 86%
rename from components/DataViewCustomInfoPanel.vue
rename to components/index/_shared/DataView/CustomInfoPanel.vue
index f9d430fed3a..7b217386976 100644
--- a/components/DataViewCustomInfoPanel.vue
+++ b/components/index/_shared/DataView/CustomInfoPanel.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts">
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
 export default DataViewDataSetPanel.extend({
   props: {
     lText: {
diff --git a/components/DataViewExpantionPanel.vue b/components/index/_shared/DataView/ExpantionPanel.vue
similarity index 100%
rename from components/DataViewExpantionPanel.vue
rename to components/index/_shared/DataView/ExpantionPanel.vue
diff --git a/components/DataViewShare.vue b/components/index/_shared/DataView/Share.vue
similarity index 100%
rename from components/DataViewShare.vue
rename to components/index/_shared/DataView/Share.vue
diff --git a/components/DataViewDataSetPanel.vue b/components/index/_shared/DataViewDataSetPanel.vue
similarity index 100%
rename from components/DataViewDataSetPanel.vue
rename to components/index/_shared/DataViewDataSetPanel.vue
diff --git a/components/DataViewTable.vue b/components/index/_shared/DataViewTable.vue
similarity index 100%
rename from components/DataViewTable.vue
rename to components/index/_shared/DataViewTable.vue
diff --git a/components/HorizontalBarChart.vue b/components/index/_shared/HorizontalBarChart.vue
similarity index 95%
rename from components/HorizontalBarChart.vue
rename to components/index/_shared/HorizontalBarChart.vue
index 07376c9618b..71dc135c38d 100644
--- a/components/HorizontalBarChart.vue
+++ b/components/index/_shared/HorizontalBarChart.vue
@@ -17,13 +17,14 @@
 </template>
 
 <script lang="ts">
+import { Chart } from 'chart.js'
 import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
-import { Chart } from 'chart.js'
+
+import DataView from '@/components/index/_shared/DataView.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+import { DisplayDetailData, yAxesBgPlugin } from '@/plugins/vue-chart'
 import { GraphDataType } from '@/utils/formatDetailGraph'
-import DataView from '@/components/DataView.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
-import { yAxesBgPlugin, DisplayDetailData } from '@/plugins/vue-chart'
 
 type Data = {
   dataKind: 'transition'
diff --git a/components/MixedBarAndLineChart.vue b/components/index/_shared/MixedBarAndLineChart.vue
similarity index 97%
rename from components/MixedBarAndLineChart.vue
rename to components/index/_shared/MixedBarAndLineChart.vue
index 27f0f9ec348..6119fbf4216 100644
--- a/components/MixedBarAndLineChart.vue
+++ b/components/index/_shared/MixedBarAndLineChart.vue
@@ -92,14 +92,14 @@ import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import { TranslateResult } from 'vue-i18n'
 
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
 import DataViewTable, {
   TableHeader,
   TableItem,
-} from '@/components/DataViewTable.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
-import ScrollableChart from '@/components/ScrollableChart.vue'
+} from '@/components/index/_shared/DataViewTable.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+import ScrollableChart from '@/components/index/_shared/ScrollableChart.vue'
 import { DisplayData, yAxesBgPlugin } from '@/plugins/vue-chart'
 import calcDayBeforeRatio from '@/utils/calcDayBeforeRatio'
 import { getGraphSeriesColor, SurfaceStyle } from '@/utils/colors'
diff --git a/components/OpenDataLink.vue b/components/index/_shared/OpenDataLink.vue
similarity index 88%
rename from components/OpenDataLink.vue
rename to components/index/_shared/OpenDataLink.vue
index 624beedfa82..e733e7da0f1 100644
--- a/components/OpenDataLink.vue
+++ b/components/index/_shared/OpenDataLink.vue
@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue from 'vue'
 
-import AppLink from '@/components/AppLink.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
 
 export default Vue.extend({
   components: { AppLink },
diff --git a/components/ScrollableChart.vue b/components/index/_shared/ScrollableChart.vue
similarity index 100%
rename from components/ScrollableChart.vue
rename to components/index/_shared/ScrollableChart.vue
diff --git a/components/TimeBarChart.vue b/components/index/_shared/TimeBarChart.vue
similarity index 97%
rename from components/TimeBarChart.vue
rename to components/index/_shared/TimeBarChart.vue
index 5f9ccd77b8a..4b710c12eae 100644
--- a/components/TimeBarChart.vue
+++ b/components/index/_shared/TimeBarChart.vue
@@ -66,15 +66,15 @@ import dayjs from 'dayjs'
 import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 
-import DataSelector from '@/components/DataSelector.vue'
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
+import DataSelector from '@/components/index/_shared/DataSelector.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
 import DataViewTable, {
   TableHeader,
   TableItem,
-} from '@/components/DataViewTable.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
-import ScrollableChart from '@/components/ScrollableChart.vue'
+} from '@/components/index/_shared/DataViewTable.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+import ScrollableChart from '@/components/index/_shared/ScrollableChart.vue'
 import { DisplayData, yAxesBgPlugin } from '@/plugins/vue-chart'
 import calcDayBeforeRatio from '@/utils/calcDayBeforeRatio'
 import { getGraphSeriesStyle } from '@/utils/colors'
diff --git a/components/TimeBarWithAverageChart.vue b/components/index/_shared/TimeBarWithAverageChart.vue
similarity index 97%
rename from components/TimeBarWithAverageChart.vue
rename to components/index/_shared/TimeBarWithAverageChart.vue
index 7dfda14db2c..ed891711e4e 100644
--- a/components/TimeBarWithAverageChart.vue
+++ b/components/index/_shared/TimeBarWithAverageChart.vue
@@ -103,15 +103,15 @@ import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import { TranslateResult } from 'vue-i18n'
 
-import DataSelector from '@/components/DataSelector.vue'
-import DataView from '@/components/DataView.vue'
-import DataViewDataSetPanel from '@/components/DataViewDataSetPanel.vue'
+import DataSelector from '@/components/index/_shared/DataSelector.vue'
+import DataView from '@/components/index/_shared/DataView.vue'
+import DataViewDataSetPanel from '@/components/index/_shared/DataViewDataSetPanel.vue'
 import DataViewTable, {
   TableHeader,
   TableItem,
-} from '@/components/DataViewTable.vue'
-import OpenDataLink from '@/components/OpenDataLink.vue'
-import ScrollableChart from '@/components/ScrollableChart.vue'
+} from '@/components/index/_shared/DataViewTable.vue'
+import OpenDataLink from '@/components/index/_shared/OpenDataLink.vue'
+import ScrollableChart from '@/components/index/_shared/ScrollableChart.vue'
 import { DisplayData, yAxesBgPlugin } from '@/plugins/vue-chart'
 import calcDayBeforeRatio from '@/utils/calcDayBeforeRatio'
 import { getGraphSeriesColor, SurfaceStyle } from '@/utils/colors'
diff --git a/layouts/default.vue b/layouts/default.vue
index 1f25339c596..a0593c4da6e 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -44,9 +44,9 @@ import type { NuxtOptionsHead as MetaInfo } from '@nuxt/types/config/head'
 import { Component, Vue } from 'nuxt-property-decorator'
 import ScaleLoader from 'vue-spinner/src/ScaleLoader.vue'
 
-import DevelopmentModeMark from '@/components/DevelopmentModeMark.vue'
-import NoScript from '@/components/NoScript.vue'
-import SideNavigation from '@/components/SideNavigation.vue'
+import DevelopmentModeMark from '@/components/_shared/DevelopmentModeMark.vue'
+import NoScript from '@/components/_shared/NoScript.vue'
+import SideNavigation from '@/components/_shared/SideNavigation.vue'
 import Data from '@/data/data.json'
 import { convertDateToSimpleFormat } from '@/utils/formatDate'
 import { getLinksLanguageAlternative } from '@/utils/i18nUtils'
@@ -271,10 +271,10 @@ export default class Default extends Vue implements NuxtConfig {
     width: 240px;
     height: 100%;
     overflow-y: auto;
+    overscroll-behavior: contain;
     border-right: 1px solid $gray-4;
     border-left: 1px solid $gray-4;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
-    overscroll-behavior: contain;
   }
 }
 @include largerThan($huge) {
diff --git a/nuxt-i18n.config.ts b/nuxt-i18n.config.ts
index c0a5c3602a9..35f2aa814d2 100644
--- a/nuxt-i18n.config.ts
+++ b/nuxt-i18n.config.ts
@@ -1,4 +1,5 @@
-import type { NuxtVueI18n } from 'nuxt-i18n'
+import { NuxtConfig } from '@nuxt/types'
+import { NuxtVueI18n } from 'nuxt-i18n/types'
 
 const dateTimeFormatsCommon = {
   dateTime: {
@@ -29,18 +30,19 @@ const dateTimeFormatsCommon = {
   },
 }
 
-const options: NuxtVueI18n.Options.AllOptionsInterface = {
+const options: NuxtConfig = {
   strategy: 'prefix_except_default',
   detectBrowserLanguage: false,
   defaultLocale: 'ja',
+
   vueI18n: {
     fallbackLocale: 'ja',
+    formatFallbackMessages: true,
     dateTimeFormats: {
       ja: dateTimeFormatsCommon,
       en: dateTimeFormatsCommon,
       'ja-basic': dateTimeFormatsCommon,
     },
-    formatFallbackMessages: true,
   },
   // vueI18nLoader: true,
   lazy: true,
@@ -62,7 +64,7 @@ const options: NuxtVueI18n.Options.AllOptionsInterface = {
     },
     {
       code: 'ja-basic',
-      name: 'やさしいにほんご',
+      name: 'やさしい にほんご',
       iso: 'ja-JP',
       file: 'ja-Hira.json',
       description: 'Easy Japanese',
@@ -71,4 +73,4 @@ const options: NuxtVueI18n.Options.AllOptionsInterface = {
   seo: false,
 }
 
-export default options
+export default options as NuxtVueI18n.Options.AllOptionsInterface
diff --git a/pages/about.vue b/pages/about.vue
index a82eb91f902..400c72fcbee 100644
--- a/pages/about.vue
+++ b/pages/about.vue
@@ -268,9 +268,9 @@
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
 
-import AppLink from '@/components/AppLink.vue'
-import PageHeader from '@/components/PageHeader.vue'
-import StaticCard from '@/components/StaticCard.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
+import PageHeader from '@/components/_shared/PageHeader.vue'
+import StaticCard from '@/components/_shared/StaticCard.vue'
 
 export default Vue.extend({
   components: {
diff --git a/pages/cards/_card.vue b/pages/cards/_card.vue
index f9bfd826a6e..f695750108e 100644
--- a/pages/cards/_card.vue
+++ b/pages/cards/_card.vue
@@ -8,48 +8,56 @@
 <script>
 import { Component, Vue } from 'nuxt-property-decorator'
 
-import ConfirmedCasesAttributesCard from '@/components/cards/ConfirmedCasesAttributesCard.vue'
-import ConfirmedCasesByAgeCard from '@/components/cards/ConfirmedCasesByAgeCard.vue'
-import ConfirmedCasesByMunicipalitiesCard from '@/components/cards/ConfirmedCasesByMunicipalitiesCard.vue'
-import ConfirmedCasesDetailsCard from '@/components/cards/ConfirmedCasesDetailsCard.vue'
-import ConfirmedCasesNumberCard from '@/components/cards/ConfirmedCasesNumberCard.vue'
-import DeathsCard from '@/components/cards/DeathsCard.vue'
-import IbarakiCoronaNext from '@/components/cards/IbarakiCoronaNext.vue'
-import IbarakiCityMapCard from '@/components/cards/IbarakiGraphicalMapCard.vue'
-import InspectionPersonsNumberCard from '@/components/cards/InspectionPersonsNumberCard.vue'
-import MutantConfirmedCasesNumberCard from '@/components/cards/MutantConfirmedCasesNumberCard.vue'
-import MutantInspectionPersonsNumberCard from '@/components/cards/MutantInspectionPersonsNumberCard.vue'
-import NationalInfectionStatus from '@/components/cards/NationalInfectionStatus.vue'
-import RecoveredCard from '@/components/cards/RecoveredCard.vue'
-import TelephoneAdvisoryReportsNumberCard from '@/components/cards/TelephoneAdvisoryReportsNumberCard.vue'
-import TestedNumberCard from '@/components/cards/TestedNumberCard.vue'
-import UntrackedRateCard from '@/components/cards/UntrackedRateCard.vue'
-import VaccineSummary1stCard from '@/components/cards/VaccineSummary1stCard.vue'
-import VaccineSummary2ndCard from '@/components/cards/VaccineSummary2ndCard.vue'
+// Infection
+import ConfirmedCasesAttributesCard from '@/components/index/CardsInfection/ConfirmedCasesAttributes/Card.vue'
+import ConfirmedCasesByAgeCard from '@/components/index/CardsInfection/ConfirmedCasesByAge/Card.vue'
+import ConfirmedCasesByMunicipalitiesCard from '@/components/index/CardsInfection/ConfirmedCasesByMunicipalities/Card.vue'
+import ConfirmedCasesDetailsCard from '@/components/index/CardsInfection/ConfirmedCasesDetails/Card.vue'
+import ConfirmedCasesNumberCard from '@/components/index/CardsInfection/ConfirmedCasesNumber/Card.vue'
+import DeathsCard from '@/components/index/CardsInfection/Deaths/Card.vue'
+import IbarakiCoronaNextCard from '@/components/index/CardsInfection/IbarakiCoronaNext/Card.vue'
+import IbarakiGraphicalMapCard from '@/components/index/CardsInfection/IbarakiGraphicalMap/Card.vue'
+import MutantConfirmedCasesNumberCard from '@/components/index/CardsInfection/MutantConfirmedCasesNumber/Card.vue'
+import NationalInfectionStatusCard from '@/components/index/CardsInfection/NationalInfectionStatus/Card.vue'
+import RecoveredCard from '@/components/index/CardsInfection/Recovered/Card.vue'
+import UntrackedRateCard from '@/components/index/CardsInfection/UntrackedRate/Card.vue'
+// Inspection
+import InspectionPersonsNumberCard from '@/components/index/CardsInspection/InspectionPersonsNumber/Card.vue'
+import MutantInspectionPersonsNumberCard from '@/components/index/CardsInspection/MutantInspectionPersonsNumber/Card.vue'
+import TelephoneAdvisoryReportsNumberCard from '@/components/index/CardsInspection/TelephoneAdvisoryReportsNumber/Card.vue'
+import TestedNumberCard from '@/components/index/CardsInspection/TestedNumber/Card.vue'
+// Vaccination
+import VaccineSummary1stCard from '@/components/index/CardsVaccination/1st/Card.vue'
+import VaccineSummary2ndCard from '@/components/index/CardsVaccination/2nd/Card.vue'
+// Error
 import ErrorCard from '@/layouts/error.vue'
 import { convertDateToSimpleFormat } from '@/utils/formatDate'
 import { getLinksLanguageAlternative } from '@/utils/i18nUtils'
 
 @Component({
   components: {
+    // Infection
+    ConfirmedCasesAttributesCard,
+    ConfirmedCasesByAgeCard,
+    ConfirmedCasesByMunicipalitiesCard,
     ConfirmedCasesDetailsCard,
     ConfirmedCasesNumberCard,
+    DeathsCard,
+    IbarakiCoronaNextCard,
+    IbarakiGraphicalMapCard,
+    RecoveredCard,
     UntrackedRateCard,
-    ConfirmedCasesAttributesCard,
-    ConfirmedCasesByMunicipalitiesCard,
-    IbarakiCityMapCard,
+    NationalInfectionStatusCard,
+    MutantConfirmedCasesNumberCard,
+    // Inspection
     InspectionPersonsNumberCard,
     TelephoneAdvisoryReportsNumberCard,
-    RecoveredCard,
-    DeathsCard,
-    IbarakiCoronaNext,
-    ConfirmedCasesByAgeCard,
     TestedNumberCard,
-    NationalInfectionStatus,
-    MutantConfirmedCasesNumberCard,
     MutantInspectionPersonsNumberCard,
+    // Vaccination
     VaccineSummary1stCard,
     VaccineSummary2ndCard,
+    // Error
     ErrorCard,
   },
 })
@@ -59,60 +67,64 @@ export default class CardContainer extends Vue {
     let title, updatedAt, cardComponent
     let err = false
     switch (this.$route.params.card) {
-      case 'details-of-confirmed-cases':
-        cardComponent = 'confirmed-cases-details-card'
-        break
-      case 'number-of-confirmed-cases':
-        cardComponent = 'confirmed-cases-number-card'
-        break
+      // Infection
       case 'attributes-of-confirmed-cases':
         cardComponent = 'confirmed-cases-attributes-card'
         break
-      case 'number-of-inspection-persons':
-        cardComponent = 'inspection-persons-number-card'
-        break
-      case 'number-of-tested':
-        cardComponent = 'tested-number-card'
-        break
-      case 'number-of-reports-to-covid19-telephone-advisory-center':
-        cardComponent = 'telephone-advisory-reports-number-card'
+      case 'number-of-confirmed-cases-by-age':
+        cardComponent = 'confirmed-cases-by-age-card'
         break
       case 'number-of-confirmed-cases-by-municipalities':
         cardComponent = 'confirmed-cases-by-municipalities-card'
         break
-      case 'ibaraki-graphical-map':
-        cardComponent = 'ibaraki-city-map-card'
+      case 'details-of-confirmed-cases':
+        cardComponent = 'confirmed-cases-details-card'
         break
-      case 'number-of-recovered':
-        cardComponent = 'recovered-card'
+      case 'number-of-confirmed-cases':
+        cardComponent = 'confirmed-cases-number-card'
         break
       case 'number-of-deaths':
         cardComponent = 'deaths-card'
         break
       case 'ibaraki-corona-next':
-        cardComponent = 'ibaraki-corona-next'
+        cardComponent = 'ibaraki-corona-next-card'
         break
-      case 'number-of-confirmed-cases-by-age':
-        cardComponent = 'confirmed-cases-by-age-card'
+      case 'ibaraki-graphical-map':
+        cardComponent = 'ibaraki-graphical-map-card'
+        break
+      case 'number-of-recovered':
+        cardComponent = 'recovered-card'
         break
       case 'untracked-rate':
         cardComponent = 'untracked-rate-card'
         break
       case 'infection-status-by-national-index':
-        cardComponent = 'national-infection-status'
+        cardComponent = 'national-infection-status-card'
         break
       case 'number-of-mutant-confirmed-cases':
         cardComponent = 'mutant-confirmed-cases-number-card'
         break
+      // Inspection
+      case 'number-of-inspection-persons':
+        cardComponent = 'inspection-persons-number-card'
+        break
+      case 'number-of-reports-to-covid19-telephone-advisory-center':
+        cardComponent = 'telephone-advisory-reports-number-card'
+        break
+      case 'number-of-tested':
+        cardComponent = 'tested-number-card'
+        break
       case 'number-of-mutant-inspection-persons':
         cardComponent = 'mutant-inspection-persons-number-card'
         break
+      // Vaccination
       case 'vaccination-1st':
         cardComponent = 'vaccine-summary-1st-card'
         break
       case 'vaccination-2nd':
         cardComponent = 'vaccine-summary-2nd-card'
         break
+      // Error
       default:
         err = true
         break
diff --git a/pages/contacts.vue b/pages/contacts.vue
index 1fc94e8d1ca..5bbf0507ff1 100644
--- a/pages/contacts.vue
+++ b/pages/contacts.vue
@@ -187,8 +187,8 @@
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
 
-import PageHeader from '@/components/PageHeader.vue'
-import StaticCard from '@/components/StaticCard.vue'
+import PageHeader from '@/components/_shared/PageHeader.vue'
+import StaticCard from '@/components/_shared/StaticCard.vue'
 
 export default Vue.extend({
   components: {
diff --git a/pages/emergency-measures.vue b/pages/emergency-measures.vue
index e4cf0e7e03a..627827287a3 100644
--- a/pages/emergency-measures.vue
+++ b/pages/emergency-measures.vue
@@ -410,9 +410,9 @@
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
 
-import AppLink from '@/components/AppLink.vue'
-import PageHeader from '@/components/PageHeader.vue'
-import StaticCard from '@/components/StaticCard.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
+import PageHeader from '@/components/_shared/PageHeader.vue'
+import StaticCard from '@/components/_shared/StaticCard.vue'
 import { convertDatetimeToISO8601Format } from '@/utils/formatDate'
 
 export default Vue.extend({
diff --git a/pages/index.vue b/pages/index.vue
index f63c11e933c..95046de628e 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-scroll="onScroll">
     <site-top-upper />
-    <lazy-cards-tab v-if="$vuetify.breakpoint.smAndUp || showCardsTab" />
+    <cards-tab v-if="$vuetify.breakpoint.smAndUp || showCardsTab" />
   </div>
 </template>
 
@@ -10,6 +10,9 @@ import Vue from 'vue'
 import { ThisTypedComponentOptionsWithRecordProps } from 'vue/types/options'
 import { MetaInfo } from 'vue-meta'
 
+import CardsTab from '@/components/index/CardsTab.vue'
+import SiteTopUpper from '@/components/index/SiteTopUpper.vue'
+
 type Data = {
   showCardsTab: boolean
 }
@@ -26,6 +29,10 @@ const options: ThisTypedComponentOptionsWithRecordProps<
   Computed,
   Props
 > = {
+  components: {
+    CardsTab,
+    SiteTopUpper,
+  },
   data() {
     return {
       showCardsTab: false,
diff --git a/pages/otherpref.vue b/pages/otherpref.vue
index 9d96aa4e725..a508382cceb 100644
--- a/pages/otherpref.vue
+++ b/pages/otherpref.vue
@@ -51,7 +51,7 @@
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
 
-import PageHeader from '@/components/PageHeader.vue'
+import PageHeader from '@/components/_shared/PageHeader.vue'
 import Data from '@/data/otherpref.json'
 
 export default Vue.extend({
diff --git a/pages/worker.vue b/pages/worker.vue
index b24a1c21fdf..e4dbb4ef209 100644
--- a/pages/worker.vue
+++ b/pages/worker.vue
@@ -18,9 +18,9 @@
 import Vue from 'vue'
 import { MetaInfo } from 'vue-meta'
 
-import AppLink from '@/components/AppLink.vue'
-import PageHeader from '@/components/PageHeader.vue'
-import StaticCard from '@/components/StaticCard.vue'
+import AppLink from '@/components/_shared/AppLink.vue'
+import PageHeader from '@/components/_shared/PageHeader.vue'
+import StaticCard from '@/components/_shared/StaticCard.vue'
 import Data from '@/data/worker.json'
 export default Vue.extend({
   components: {