diff --git a/src/App.vue b/src/App.vue
index 379c056..8b20424 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -65,10 +65,10 @@ a {
 
   &--main {
     position: relative;
-    padding: 0.25em 0.5em;
-    margin: 0.75em 0;
+    padding: 0 0.5em;
+    margin: 1em 0;
     font-size: 2rem;
-    border-left: solid 6px #3fc1c9;
+    border-left: solid 6px #364f6b;
   }
 
   &--sub {
@@ -91,4 +91,10 @@ a {
     font-size: 1rem;
   }
 }
+
+.text {
+  &--bold {
+    font-weight: bold;
+  }
+}
 </style>
diff --git a/src/components/ContactTable.vue b/src/components/ContactTable.vue
new file mode 100644
index 0000000..2918698
--- /dev/null
+++ b/src/components/ContactTable.vue
@@ -0,0 +1,43 @@
+<template>
+  <v-row
+    class="my-6"
+    justify="center"
+  >
+    <v-col cols="12">
+      <v-simple-table>
+        <template #default>
+          <tbody>
+            <tr>
+              <td>お名前</td>
+              <td>{{ contactForm.name }}</td>
+            </tr>
+            <tr>
+              <td>学籍番号</td>
+              <td>{{ contactForm.studentId }}</td>
+            </tr>
+            <tr>
+              <td>メールアドレス</td>
+              <td>{{ contactForm.email }}</td>
+            </tr>
+            <tr>
+              <td>問い合わせ内容</td>
+              <td>{{ contactForm.message }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-simple-table>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  name: 'ContactTable',
+  props:{
+    contactForm: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
diff --git a/src/components/ReserveTable.vue b/src/components/ReserveTable.vue
new file mode 100644
index 0000000..7f789d7
--- /dev/null
+++ b/src/components/ReserveTable.vue
@@ -0,0 +1,51 @@
+<template>
+  <v-row
+    class="my-6"
+    justify="center"
+  >
+    <v-col cols="12">
+      <v-simple-table>
+        <template #default>
+          <tbody>
+            <tr>
+              <td>お名前</td>
+              <td>{{ reserveForm.name }}</td>
+            </tr>
+            <tr>
+              <td>学籍番号</td>
+              <td>{{ reserveForm.studentId }}</td>
+            </tr>
+            <tr>
+              <td>メールアドレス</td>
+              <td>{{ reserveForm.email }}</td>
+            </tr>
+            <tr>
+              <td>予約日</td>
+              <td>{{ reserveForm.date }}</td>
+            </tr>
+            <tr>
+              <td>予約時間</td>
+              <td>{{ reserveForm.time }}</td>
+            </tr>
+            <tr>
+              <td>補足事項</td>
+              <td>{{ reserveForm.message }}</td>
+            </tr>
+          </tbody>
+        </template>
+      </v-simple-table>
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+export default {
+  name: 'ReserveTable',
+  props:{
+    reserveForm: {
+      type: Object,
+      required: true,
+    }
+  }
+}
+</script>
diff --git a/src/components/WelcomeUser.vue b/src/components/WelcomeUser.vue
index 1647062..bfc2b18 100644
--- a/src/components/WelcomeUser.vue
+++ b/src/components/WelcomeUser.vue
@@ -1,14 +1,17 @@
 <template>
-  <h4 v-show="useremail">
+  <p
+    v-show="useremail"
+    class="header--min aling-right"
+  >
     ようこそ {{ useremail }} さん
-  </h4>
+  </p>
 </template>
 
 <script>
 import firebase from '../firebase.js'
 
 export default {
-  name: 'Welcomeuser',
+  name: 'WelcomeUser',
   data () {
     return {
       useremail: null
@@ -27,7 +30,7 @@ export default {
 </script>
 
 <style scoped>
-h4 {
+.aling-right {
   text-align: right;
 }
 </style>
diff --git a/src/views/About.vue b/src/views/About.vue
index 9083eb3..8398687 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,96 +1,105 @@
 <template>
-  <div class="about">
-    <h1 class="heading--main">
-      コンテンツ
-    </h1>
-    <h2 class="heading--sub">
-      ここでは、皆様の役に立つかもしれない情報を発信します。
-    </h2>
+  <article aria-label="コンテンツページ">
+    <section aria-label="研究室に関連するコンテンツへのリンクなど">
+      <h1 class="heading--main">
+        コンテンツ
+      </h1>
+      <h2 class="heading--sub">
+        ここでは、皆様の役に立つかもしれない情報を発信します。
+      </h2>
 
-    <v-alert
-      outlined
-      type="warning"
-      border="left"
-    >
-      コンテンツは随時更新する予定ですが、ぶっちゃけた話はオープンラボ当日にお話しできるかと思います！<br>みなさんの研究室選びのお役に立てるよう情報発信します！
-    </v-alert>
-
-    <v-row class="my-4">
-      <v-col
-        cols="12"
-        sm="6"
+      <v-alert
+        outlined
+        type="warning"
+        border="left"
       >
-        <v-card>
-          <a
-            href="https://twitter.com/nislab_sato"
-            target="_blank"
-          >
-            <v-img src="/sns/twitter01.png" />
-          </a>
-          <v-card-title>
-            Twitter (<a
+        コンテンツは随時更新する予定ですが、ぶっちゃけた話はオープンラボ当日にお話しできるかと思います！<br>みなさんの研究室選びのお役に立てるよう情報発信します！
+      </v-alert>
+
+      <v-row class="my-4">
+        <v-col
+          cols="12"
+          sm="6"
+        >
+          <v-card height="100%">
+            <a
               href="https://twitter.com/nislab_sato"
               target="_blank"
-            >@nislab_sato</a>) やってます！
-          </v-card-title>
-          <v-card-subtitle>研究室の情報発信を中心に、質問箱でいただいた質問にもお答えしています！</v-card-subtitle>
-        </v-card>
-      </v-col>
-      <v-col
-        cols="12"
-        sm="6"
-      >
-        <v-card>
-          <a
-            href="https://nislab.doshisha.ac.jp"
-            target="_blank"
-          >
-            <v-img src="/sns/website01.png" />
-          </a>
-          <v-card-title>研究室サイト運営してます！</v-card-title>
-          <v-card-subtitle>研究発表についての報告などもしています。<br>近日、リニューアル予定！</v-card-subtitle>
-        </v-card>
-      </v-col>
-    </v-row>
+            >
+              <v-img src="/sns/twitter01.png" />
+            </a>
+            <v-card-title>
+              Twitter (<a
+                href="https://twitter.com/nislab_sato"
+                target="_blank"
+              >@nislab_sato</a>) やってます！
+            </v-card-title>
+            <v-card-subtitle>研究室の情報発信を中心に、質問箱でいただいた質問にもお答えしています！</v-card-subtitle>
+          </v-card>
+        </v-col>
+        <v-col
+          cols="12"
+          sm="6"
+        >
+          <v-card>
+            <a
+              href="https://nislab.doshisha.ac.jp"
+              target="_blank"
+            >
+              <v-img src="/sns/website01.png" />
+            </a>
+            <v-card-title>研究室サイト運営してます！</v-card-title>
+            <v-card-subtitle>研究発表についての報告などもしています。<br>近日、リニューアル予定！</v-card-subtitle>
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
 
-    <h1 class="heading--main">
-      よくある質問に答えます！
-    </h1>
-    <h2 class="heading--accent">
-      質問箱でいただいた質問や例年よくいただく質問に対して、佐藤研究室の学生が回答します！<br>オープンラボではよりぶっちゃけた話をさせていただきます！
-    </h2>
-    <v-row class="my-4">
-      <v-col>
-        <v-expansion-panels accordion>
-          <v-expansion-panel
-            v-for="(item, i) in questions"
-            :key="i"
-          >
-            <v-expansion-panel-header>{{ item.q }}</v-expansion-panel-header>
-            <v-expansion-panel-content>{{ item.ans }}</v-expansion-panel-content>
-          </v-expansion-panel>
-        </v-expansion-panels>
-      </v-col>
-    </v-row>
+    <section aria-label="よくある質問とそれに対する回答一覧">
+      <h1 class="heading--main">
+        よくある質問に答えます！
+      </h1>
+      <h2 class="heading--accent">
+        質問箱でいただいた質問や例年よくいただく質問に対して、佐藤研究室の学生が回答します！<br>オープンラボではよりぶっちゃけた話をさせていただきます！
+      </h2>
+      <v-row class="my-4">
+        <v-col>
+          <v-expansion-panels accordion>
+            <v-expansion-panel
+              v-for="(item, i) in questions"
+              :key="i"
+            >
+              <v-expansion-panel-header>{{ item.q }}</v-expansion-panel-header>
+              <v-expansion-panel-content>{{ item.ans }}</v-expansion-panel-content>
+            </v-expansion-panel>
+          </v-expansion-panels>
+        </v-col>
+      </v-row>
+    </section>
 
-    <h1 class="heading--main">
-      写真を一部公開！
-    </h1>
-    <v-row>
-      <v-col
-        v-for="image in images"
-        :key="image"
-        class="d-flex child-flex"
-        md="3"
-        sm="4"
-        cols="6"
-      >
-        <v-card>
-          <v-img :src="image" />
-        </v-card>
-      </v-col>
-    </v-row>
-  </div>
+    <section
+      aria-label="写真ギャラリー"
+      class="mb-16"
+    >
+      <h1 class="heading--main">
+        写真を一部公開！
+      </h1>
+      <v-row>
+        <v-col
+          v-for="image in images"
+          :key="image"
+          class="d-flex child-flex"
+          md="3"
+          sm="4"
+          cols="6"
+        >
+          <v-card>
+            <v-img :src="image" />
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
+  </article>
 </template>
 
 <script>
diff --git a/src/views/Contact/Contact.vue b/src/views/Contact/Contact.vue
index cb572f4..59e6d71 100644
--- a/src/views/Contact/Contact.vue
+++ b/src/views/Contact/Contact.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="contactMe">
+  <article aria-label="問い合わせページ">
     <h1 class="heading--main">
       問い合わせ
     </h1>
@@ -36,12 +36,13 @@
         問い合わせする
       </v-btn>
     </v-form>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
 import WelcomeUser from '@/components/WelcomeUser.vue'
+
 export default {
   name: 'Contact',
   components: {
diff --git a/src/views/Contact/ContactConfirm.vue b/src/views/Contact/ContactConfirm.vue
index d144b46..c5c5c5f 100644
--- a/src/views/Contact/ContactConfirm.vue
+++ b/src/views/Contact/ContactConfirm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="openlabReserveConfirm">
+  <article aria-label="問い合わせ内容確認ページ">
     <h1 class="heading--main">
       以下の内容で問い合わせしますか？
     </h1>
@@ -11,35 +11,7 @@
       まだ問い合わせは完了していません。
     </v-alert>
 
-    <v-row
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ contactForm.name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ contactForm.studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ contactForm.email }}</td>
-              </tr>
-              <tr>
-                <td>問い合わせ内容</td>
-                <td>{{ contactForm.message }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
+    <ContactTable :contact-form="contactForm" />
 
     <v-btn
       class="mx-6"
@@ -53,14 +25,17 @@
     >
       予約する
     </v-btn>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+import ContactTable from '@/components/ContactTable.vue'
+
 export default {
   name: 'ConfirmContact',
   components: {
+    ContactTable
   },
   data () {
     return {
diff --git a/src/views/Contact/ContactVerification.vue b/src/views/Contact/ContactVerification.vue
index dc28016..7bcbfd1 100644
--- a/src/views/Contact/ContactVerification.vue
+++ b/src/views/Contact/ContactVerification.vue
@@ -1,9 +1,10 @@
 <template>
-  <div class="openlabReserveConfirm">
+  <article aria-label="問い合わせ完了ページ">
     <h1 class="heading--main">
       問い合わせ完了
     </h1>
     <WelcomeUser />
+
     <h2 class="heading--sub">
       問い合わせが完了しました。
     </h2>
@@ -11,44 +12,19 @@
       後ほど、メールにてご回答させていただきます。
     </p>
 
-    <v-row
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ contactForm.name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ contactForm.studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ contactForm.email }}</td>
-              </tr>
-              <tr>
-                <td>問い合わせ内容</td>
-                <td>{{ contactForm.message }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
-  </div>
+    <ContactTable :contact-form="contactForm" />
+  </article>
 </template>
 
 <script>
 import WelcomeUser from '@/components/WelcomeUser.vue'
+import ContactTable from '@/components/ContactTable.vue'
+
 export default {
   name: 'ContactVerification',
   components: {
-    WelcomeUser
+    WelcomeUser,
+    ContactTable
   },
   data () {
     return {
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d009033..0a7ca9c 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -1,228 +1,234 @@
 <template>
-  <div class="home">
-    <h1 class="heading--main">
-      2021年2月15日(月) NISLAB オープンラボ 開催！
-    </h1>
-    <WelcomeUser />
+  <article aria-label="トップページ">
+    <section aria-label="オープンラボの概要">
+      <h1 class="heading--main">
+        <time datetime="2021-02-15">2021年2月15日(月)</time> NISLAB オープンラボ 開催！
+      </h1>
+      <WelcomeUser />
 
-    <v-row class="my-6">
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <v-card>
-          <v-img :src="image" />
-        </v-card>
-      </v-col>
-      <v-col
-        cols="12"
-        md="6"
-        align-self="center"
-      >
-        <p>こんにちは！<br>ネットワーク情報システム研究室（<b>NISLAB</b>） 佐藤研究室です。</p>
-        <p>学部3年生を中心とした（1・2年生も大歓迎！）在学生の皆さんに向けた<span class="accent--text">オープンラボを2021年2月15日(月)に開催します</span>。</p>
-        <p>当日は、zoomを用いたオンライン開催と現地でのオフライン開催のハイブリッド開催を予定しています。</p>
-        <p>当日は十分な予防対策を行うことはもちろんのこと、事前の状況を見てプログラムの変更も想定しています。</p>
-      </v-col>
-    </v-row>
-
-    <v-row>
-      <v-col cols="12">
-        <v-alert
-          border="right"
-          colored-border
-          type="error"
-          elevation="2"
+      <v-row class="my-6">
+        <v-col
+          cols="12"
+          md="6"
         >
-          オフラインでの研究室訪問を希望される方は<router-link to="/openlab/reserve">
-            予約が必要
-          </router-link>です。必ずご確認ください。
-        </v-alert>
-      </v-col>
-    </v-row>
-
-    <v-row v-show="!uid">
-      <v-col cols="12">
-        <v-alert
-          border="right"
-          colored-border
-          type="warning"
-          elevation="2"
+          <v-card>
+            <v-img :src="image" />
+          </v-card>
+        </v-col>
+        <v-col
+          cols="12"
+          md="6"
+          align-self="center"
         >
-          質問や相談等の<router-link to="/contact">
-            お問い合わせ
-          </router-link>は、ログインしていただくことでご利用いただけます。
-        </v-alert>
-      </v-col>
-    </v-row>
+          <p>こんにちは！<br>ネットワーク情報システム研究室（<span class="text--bold">NISLAB</span>） 佐藤研究室です。</p>
+          <p>学部3年生を中心とした（1・2年生も大歓迎！）在学生の皆さんに向けた<span class="accent--text">オープンラボを<time datetime="2021-02-15">2021年2月15日(月)</time>に開催します</span>。</p>
+          <p>当日は、zoomを用いたオンライン開催と現地でのオフライン開催のハイブリッド開催を予定しています。</p>
+          <p>当日は十分な予防対策を行うことはもちろんのこと、事前の状況を見てプログラムの変更も想定しています。</p>
+        </v-col>
+      </v-row>
 
-    <h1 class="heading--main">
-      タイムスケジュール
-    </h1>
-    <v-row justify="center">
-      <v-col
-        cols="12"
-        sm="10"
-        md="8"
-      >
-        <v-timeline dense>
-          <v-timeline-item
-            v-for="(time, i) in times"
-            :key="i"
-            color="primary"
-            small
+      <v-row>
+        <v-col cols="12">
+          <v-alert
+            border="right"
+            colored-border
+            type="error"
+            elevation="2"
           >
-            <v-card>
-              <v-card-title>{{ time.time }}</v-card-title>
-              <v-card-subtitle class="font-weight-bold accent--text">
-                {{ time.place }}
-              </v-card-subtitle>
-              <v-card-text>{{ time.message }}</v-card-text>
-            </v-card>
-          </v-timeline-item>
-        </v-timeline>
-      </v-col>
-    </v-row>
+            オフラインでの研究室訪問を希望される方は<router-link to="/openlab/reserve">
+              予約が必要
+            </router-link>です。必ずご確認ください。
+          </v-alert>
+        </v-col>
+      </v-row>
 
-    <h1 class="heading--main">
-      オープンラボ要領
-    </h1>
-    <h2 class="heading--accent">
-      今年度のオープンラボはオンライン/オフラインのハイブリッド開催をします
-    </h2>
-    <p class="heading--min mx-2 my-2">
-      それぞれ時間が異なりますので、両方参加していただくことも可能です。<br>3年生だけでなく、1/2年生も大歓迎ですので是非ご参加ください！
-    </p>
+      <v-row v-show="!uid">
+        <v-col cols="12">
+          <v-alert
+            border="right"
+            colored-border
+            type="warning"
+            elevation="2"
+          >
+            質問や相談等の<router-link to="/contact">
+              お問い合わせ
+            </router-link>は、ログインしていただくことでご利用いただけます。
+          </v-alert>
+        </v-col>
+      </v-row>
+    </section>
 
-    <v-row class="my-6">
-      <!-- オンライン開催 -->
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <v-card>
-          <v-card-title><b>オンライン開催</b></v-card-title>
-          <v-card-subtitle>zoomを利用して開催します。<br>どなたでも気軽に参加いただけます。</v-card-subtitle>
-          <v-divider class="mx-3" />
-          <v-card-title>プログラム</v-card-title>
-          <v-card-subtitle>研究室紹介や例年よく出る質問などを紹介し、参加してくださるみなさんの質問等にもお答えします。<br>希望者には、ブレイクアウトルームを用いた相談会なども開催予定です。</v-card-subtitle>
-          <v-card-text>
-            <ul>
-              <li>研究室紹介</li>
-              <ul>
-                <li>研究内容や学ぶ内容について</li>
-                <li>研究室での生活について</li>
-                <li>先輩がどうやって研究室を選んだのか</li>
-              </ul>
-              <li>質疑応答</li>
+    <section aria-label="当日のタイムスケジュールについて">
+      <h1 class="heading--main">
+        タイムスケジュール
+      </h1>
+      <v-row justify="center">
+        <v-col
+          cols="12"
+          sm="10"
+          md="8"
+        >
+          <v-timeline dense>
+            <v-timeline-item
+              v-for="(time, i) in times"
+              :key="i"
+              color="primary"
+              small
+            >
+              <v-card>
+                <v-card-title>{{ time.time }}</v-card-title>
+                <v-card-subtitle class="font-weight-bold accent--text">
+                  {{ time.place }}
+                </v-card-subtitle>
+                <v-card-text>{{ time.message }}</v-card-text>
+              </v-card>
+            </v-timeline-item>
+          </v-timeline>
+        </v-col>
+      </v-row>
+    </section>
+
+    <section aria-label="オープンラボの開催にあたってオンライン/オフラインの要領">
+      <h1 class="heading--main">
+        オープンラボ要領
+      </h1>
+      <h2 class="heading--accent">
+        今年度のオープンラボはオンライン/オフラインのハイブリッド開催をします
+      </h2>
+      <p class="heading--min mx-2 my-2">
+        それぞれ時間が異なりますので、両方参加していただくことも可能です。<br>3年生だけでなく、1/2年生も大歓迎ですので是非ご参加ください！
+      </p>
+
+      <v-row class="my-6">
+        <!-- オンライン開催 -->
+        <v-col
+          cols="12"
+          md="6"
+        >
+          <v-card>
+            <v-card-title><b>オンライン開催</b></v-card-title>
+            <v-card-subtitle>zoomを利用して開催します。<br>どなたでも気軽に参加いただけます。</v-card-subtitle>
+            <v-divider class="mx-3" />
+            <v-card-title>プログラム</v-card-title>
+            <v-card-subtitle>研究室紹介や例年よく出る質問などを紹介し、参加してくださるみなさんの質問等にもお答えします。<br>希望者には、ブレイクアウトルームを用いた相談会なども開催予定です。</v-card-subtitle>
+            <v-card-text>
               <ul>
-                <li>例年よくでる質問</li>
-                <li>皆さんからの質問対応</li>
+                <li>研究室紹介</li>
+                <ul>
+                  <li>研究内容や学ぶ内容について</li>
+                  <li>研究室での生活について</li>
+                  <li>先輩がどうやって研究室を選んだのか</li>
+                </ul>
+                <li>質疑応答</li>
+                <ul>
+                  <li>例年よくでる質問</li>
+                  <li>皆さんからの質問対応</li>
+                </ul>
+                <li>相談会</li>
               </ul>
-              <li>相談会</li>
-            </ul>
-          </v-card-text>
-          <v-card-title>開催時間</v-card-title>
-          <v-card-subtitle><b>13:00</b>と<b>15:00</b>の2回開催します。<br>50分程度を予定していますが、途中参加/退出も大歓迎です！<br>zoomはビデオをオンにする必要はありません。<br>聞くだけでも大歓迎ですのでぜひご参加ください。</v-card-subtitle>
-          <v-card-title>参加方法</v-card-title>
-          <v-card-subtitle>前日までにzoomの参加URLを下記に記載しますのでそちらから参加ください。</v-card-subtitle>
-          <v-card-text>
-            <v-card class="pa-2 text-center">
-              <v-simple-table dense>
-                <template #default>
-                  <tbody>
-                    <tr>
-                      <th
-                        colspan="2"
-                        class="text-center"
-                      >
-                        [ 13:00 - 14:00 ]
-                      </th>
-                    </tr>
-                    <tr>
-                      <td>Zoom ID</td>
-                      <td />
-                    </tr>
-                    <tr>
-                      <td>Password</td>
-                      <td />
-                    </tr>
-                  </tbody>
-                </template>
-              </v-simple-table>
-            </v-card>
-          </v-card-text>
-          <v-card-text>
-            <v-card class="pa-2 text-center">
-              <v-simple-table dense>
-                <template #default>
-                  <tbody>
-                    <tr>
-                      <th
-                        colspan="2"
-                        class="text-center"
-                      >
-                        [ 15:00 - 16:00 ]
-                      </th>
-                    </tr>
-                    <tr>
-                      <td>Zoom ID</td>
-                      <td />
-                    </tr>
-                    <tr>
-                      <td>Password</td>
-                      <td />
-                    </tr>
-                  </tbody>
-                </template>
-              </v-simple-table>
-            </v-card>
-          </v-card-text>
-        </v-card>
-      </v-col>
+            </v-card-text>
+            <v-card-title>開催時間</v-card-title>
+            <v-card-subtitle><b>13:00</b>と<b>15:00</b>の2回開催します。<br>50分程度を予定していますが、途中参加/退出も大歓迎です！<br>zoomはビデオをオンにする必要はありません。<br>聞くだけでも大歓迎ですのでぜひご参加ください。</v-card-subtitle>
+            <v-card-title>参加方法</v-card-title>
+            <v-card-subtitle>前日までにzoomの参加URLを下記に記載しますのでそちらから参加ください。</v-card-subtitle>
+            <v-card-text>
+              <v-card class="pa-2 text-center">
+                <v-simple-table dense>
+                  <template #default>
+                    <tbody>
+                      <tr>
+                        <th
+                          colspan="2"
+                          class="text-center"
+                        >
+                          [ 13:00 - 14:00 ]
+                        </th>
+                      </tr>
+                      <tr>
+                        <td>Zoom ID</td>
+                        <td />
+                      </tr>
+                      <tr>
+                        <td>Password</td>
+                        <td />
+                      </tr>
+                    </tbody>
+                  </template>
+                </v-simple-table>
+              </v-card>
+            </v-card-text>
+            <v-card-text>
+              <v-card class="pa-2 text-center">
+                <v-simple-table dense>
+                  <template #default>
+                    <tbody>
+                      <tr>
+                        <th
+                          colspan="2"
+                          class="text-center"
+                        >
+                          [ 15:00 - 16:00 ]
+                        </th>
+                      </tr>
+                      <tr>
+                        <td>Zoom ID</td>
+                        <td />
+                      </tr>
+                      <tr>
+                        <td>Password</td>
+                        <td />
+                      </tr>
+                    </tbody>
+                  </template>
+                </v-simple-table>
+              </v-card>
+            </v-card-text>
+          </v-card>
+        </v-col>
 
-      <!-- オフライン開催 -->
-      <v-col
-        cols="12"
-        md="6"
-      >
-        <v-card height="100%">
-          <v-card-title><b>オフライン開催</b></v-card-title>
-          <v-card-subtitle>研究室に直接訪問し、雰囲気等を味わっていただけます。<br>感染対策を十分に行った上で実施します。</v-card-subtitle>
-          <v-divider class="mx-3" />
-          <v-card-title>プログラム</v-card-title>
-          <v-card-subtitle>訪問してくださる皆さんとの会話を大切にし、皆さんの研究室配属（それ以外の内容も大歓迎！）に関する相談などを受け付けます。<br>簡単な研究室紹介や例年よく出る質問などを紹介し、参加してくださるみなさんの質問等にもお答えします。</v-card-subtitle>
-          <v-card-text>
-            <ul>
-              <li>相談会</li>
-              <li>質疑応答</li>
-              <li>研究室紹介</li>
+        <!-- オフライン開催 -->
+        <v-col
+          cols="12"
+          md="6"
+        >
+          <v-card height="100%">
+            <v-card-title><b>オフライン開催</b></v-card-title>
+            <v-card-subtitle>研究室に直接訪問し、雰囲気等を味わっていただけます。<br>感染対策を十分に行った上で実施します。</v-card-subtitle>
+            <v-divider class="mx-3" />
+            <v-card-title>プログラム</v-card-title>
+            <v-card-subtitle>訪問してくださる皆さんとの会話を大切にし、皆さんの研究室配属（それ以外の内容も大歓迎！）に関する相談などを受け付けます。<br>簡単な研究室紹介や例年よく出る質問などを紹介し、参加してくださるみなさんの質問等にもお答えします。</v-card-subtitle>
+            <v-card-text>
               <ul>
-                <li>研究室の様子や過ごし方について</li>
-                <li>先輩がどうやって研究室を選んだのか</li>
-                <li>就職活動の進め方</li>
+                <li>相談会</li>
+                <li>質疑応答</li>
+                <li>研究室紹介</li>
+                <ul>
+                  <li>研究室の様子や過ごし方について</li>
+                  <li>先輩がどうやって研究室を選んだのか</li>
+                  <li>就職活動の進め方</li>
+                </ul>
               </ul>
-            </ul>
-          </v-card-text>
-          <v-card-title>開催時間</v-card-title>
-          <v-card-subtitle><b>11:00</b>・<b>11:30</b>・<b>14:15</b>・<b>16:00</b>・<b>16:30</b>の5回に分けて開催します。<br>感染対策として、各回の定員を6名とさせていただき<u>完全予約制</u>にて実施させていただきます。<br>実際に研究室生活を送ることになる部屋の様子や雰囲気を知ってもらうだけでなく、様々なお話をしたいと思っています。<br>「ちょっと話を聞いてみたいだけなんだけど…」という方もぜひご予約ください！</v-card-subtitle>
-          <v-card-title>開催場所</v-card-title>
-          <v-card-subtitle>
-            同志社大学 京田辺キャンパス 恵喜館115号室 (KE-115)<br><a
-              href="https://www.doshisha.ac.jp/information/campus/kyotanabe/kyotanabe.html"
-              target="_blank"
-            >キャンパスマップ</a>：紫苑館食堂の奥の建物です。
-          </v-card-subtitle>
-          <v-card-title>参加方法</v-card-title>
-          <v-card-subtitle>
-            2日前までに<router-link to="/openlab/reserve">
-              こちら(ログインが必要です)
-            </router-link>から参加を希望する時間の予約を行ってください。<br>各回の定員を6名とさせていただいておりますので、ご希望の方はお早めにご予約ください。
-          </v-card-subtitle>
-        </v-card>
-      </v-col>
-    </v-row>
-  </div>
+            </v-card-text>
+            <v-card-title>開催時間</v-card-title>
+            <v-card-subtitle><b>11:00</b>・<b>11:30</b>・<b>14:15</b>・<b>16:00</b>・<b>16:30</b>の5回に分けて開催します。<br>感染対策として、各回の定員を6名とさせていただき<u>完全予約制</u>にて実施させていただきます。<br>実際に研究室生活を送ることになる部屋の様子や雰囲気を知ってもらうだけでなく、様々なお話をしたいと思っています。<br>「ちょっと話を聞いてみたいだけなんだけど…」という方もぜひご予約ください！</v-card-subtitle>
+            <v-card-title>開催場所</v-card-title>
+            <v-card-subtitle>
+              同志社大学 京田辺キャンパス 恵喜館115号室 (KE-115)<br><a
+                href="https://www.doshisha.ac.jp/information/campus/kyotanabe/kyotanabe.html"
+                target="_blank"
+              >キャンパスマップ</a>：紫苑館食堂の奥の建物です。
+            </v-card-subtitle>
+            <v-card-title>参加方法</v-card-title>
+            <v-card-subtitle>
+              2日前までに<router-link to="/openlab/reserve">
+                こちら(ログインが必要です)
+              </router-link>から参加を希望する時間の予約を行ってください。<br>各回の定員を6名とさせていただいておりますので、ご希望の方はお早めにご予約ください。
+            </v-card-subtitle>
+          </v-card>
+        </v-col>
+      </v-row>
+    </section>
+  </article>
 </template>
 
 <script>
diff --git a/src/views/MyPage.vue b/src/views/MyPage.vue
index aaf0793..1fd0728 100644
--- a/src/views/MyPage.vue
+++ b/src/views/MyPage.vue
@@ -1,80 +1,49 @@
 <template>
-  <div class="mypage">
-    <h1 class="heading--main">
-      マイページ
-    </h1>
-    <WelcomeUser />
+  <article aria-label="マイページ">
+    <section aria-label="予約の確認・キャンセルが可能">
+      <h1 class="heading--main">
+        マイページ
+      </h1>
+      <WelcomeUser />
 
-    <h2
-      v-show="titleMessage"
-      class="heading--sub my-6"
-    >
-      {{ titleMessage }}
-    </h2>
-    <p class="heading--accent">
-      予約は3日前までキャンセルできます。それ以降は直接お問い合わせください。
-    </p>
+      <h2
+        v-show="titleMessage"
+        class="heading--sub my-6"
+      >
+        {{ titleMessage }}
+      </h2>
+      <p class="heading--accent">
+        予約は3日前までキャンセルできます。それ以降は直接お問い合わせください。
+      </p>
 
-    <v-row
-      v-for="openlabReservation in myOpenlabReservation"
-      :key="openlabReservation.id"
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ openlabReservation.name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ openlabReservation.studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ openlabReservation.email }}</td>
-              </tr>
-              <tr>
-                <td>予約日</td>
-                <td>{{ openlabReservation.date }}</td>
-              </tr>
-              <tr>
-                <td>予約時間</td>
-                <td>{{ openlabReservation.time }}</td>
-              </tr>
-              <tr>
-                <td>補足事項</td>
-                <td>{{ openlabReservation.message }}</td>
-              </tr>
-              <tr>
-                <td colspan="2">
-                  <v-btn
-                    v-show="isThreeDaysBefore(openlabReservation.date)"
-                    @click="deleteOpenlabReservation(openlabReservation)"
-                  >
-                    この予約をキャンセルする
-                  </v-btn>
-                </td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
-  </div>
+      <ReserveTable
+        v-for="openlabReservation in myOpenlabReservation"
+        :key="`first-${openlabReservation.id}`"
+        :reserve-form="openlabReservation"
+      />
+      <v-btn
+        v-for="openlabReservation in myOpenlabReservation"
+        v-show="isThreeDaysBefore(openlabReservation.date)"
+        :key="`second-${openlabReservation.id}`"
+        class="mb-6 ml-6"
+        @click="deleteOpenlabReservation(openlabReservation)"
+      >
+        この予約をキャンセルする
+      </v-btn>
+    </section>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
 import WelcomeUser from '@/components/WelcomeUser.vue'
+import ReserveTable from '@/components/ReserveTable.vue'
 
 export default {
   name: 'Mypage',
   components: {
-    WelcomeUser
+    WelcomeUser,
+    ReserveTable
   },
   data () {
     return {
@@ -120,13 +89,11 @@ export default {
       const year1 = day1.getFullYear()
       const month1 = day1.getMonth()
       const date1 = day1.getDate()
-      // console.log(year1, month1, date1);
 
       const day2 = new Date()
       const year2 = day2.getFullYear()
       const month2 = day2.getMonth() + 1
       const date2 = day2.getDate() + 2
-      // console.log(year2, month2, date2);
 
       if (year1 === year2) {
         if (month1 === month2) {
diff --git a/src/views/NotFound.vue b/src/views/NotFound.vue
index 7a5f7b1..fd17037 100644
--- a/src/views/NotFound.vue
+++ b/src/views/NotFound.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="notFound">
+  <article aria-label="ページが見つかりません">
     <h1 class="heading--main">
       Sorry, Not Found.
     </h1>
@@ -8,7 +8,7 @@
         ホームに戻る
       </router-link>
     </h2>
-  </div>
+  </article>
 </template>
 
 <script>
diff --git a/src/views/Openlab/OpenlabReserve.vue b/src/views/Openlab/OpenlabReserve.vue
index ec4ac18..4694d1a 100644
--- a/src/views/Openlab/OpenlabReserve.vue
+++ b/src/views/Openlab/OpenlabReserve.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="openlabReserve">
+  <article aria-label="訪問予約ページ">
     <h1 class="heading--main">
       オープンラボ訪問予約
     </h1>
@@ -49,7 +49,7 @@
         </tbody>
       </template>
     </v-simple-table>
-  </div>
+  </article>
 </template>
 
 <script>
diff --git a/src/views/Openlab/OpenlabReserve/OpenlabDelete.vue b/src/views/Openlab/OpenlabReserve/OpenlabDelete.vue
index cd2fe0d..5b0388c 100644
--- a/src/views/Openlab/OpenlabReserve/OpenlabDelete.vue
+++ b/src/views/Openlab/OpenlabReserve/OpenlabDelete.vue
@@ -1,46 +1,10 @@
 <template>
-  <div class="confirmOpenlabDelete">
+  <article aria-label="予約キャンセルページ">
     <h1 class="heading--main">
       以下の予約をキャンセルしますか？
     </h1>
 
-    <v-row
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ reservation.name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ reservation.studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ reservation.email }}</td>
-              </tr>
-              <tr>
-                <td>予約日</td>
-                <td>{{ reservation.date }}</td>
-              </tr>
-              <tr>
-                <td>予約時間</td>
-                <td>{{ reservation.time }}</td>
-              </tr>
-              <tr>
-                <td>補足事項</td>
-                <td>{{ reservation.message }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
+    <ReserveTable :reserve-form="reservation" />
 
     <v-btn
       class="mx-6"
@@ -54,15 +18,17 @@
     >
       キャンセルする
     </v-btn>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+import ReserveTable from '@/components/ReserveTable.vue'
 
 export default {
   name: 'ConfirmOpenlabDelete',
   components: {
+    ReserveTable
   },
   data () {
     return {
diff --git a/src/views/Openlab/OpenlabReserve/OpenlabReserveConfirm.vue b/src/views/Openlab/OpenlabReserve/OpenlabReserveConfirm.vue
index cca2a1c..0fe99e3 100644
--- a/src/views/Openlab/OpenlabReserve/OpenlabReserveConfirm.vue
+++ b/src/views/Openlab/OpenlabReserve/OpenlabReserveConfirm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="openlabReserveConfirm">
+  <article aria-label="予約確認ページ">
     <h1 class="heading--main">
       以下の日時・情報で予約しますか？
     </h1>
@@ -11,43 +11,7 @@
       まだ予約は完了していません。
     </v-alert>
 
-    <v-row
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ reserveForm.name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ reserveForm.studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ reserveForm.email }}</td>
-              </tr>
-              <tr>
-                <td>予約日</td>
-                <td>{{ reserveForm.date }}</td>
-              </tr>
-              <tr>
-                <td>予約時間</td>
-                <td>{{ reserveForm.time }}</td>
-              </tr>
-              <tr>
-                <td>補足事項</td>
-                <td>{{ reserveForm.message }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
+    <ReserveTable :reserve-form="reserveForm" />
 
     <v-btn
       class="mx-6"
@@ -61,15 +25,17 @@
     >
       予約する
     </v-btn>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+import ReserveTable from '@/components/ReserveTable.vue'
 
 export default {
   name: 'ConfirmReserve',
   components: {
+    ReserveTable
   },
   data () {
     return {
diff --git a/src/views/Openlab/OpenlabReserve/OpenlabReserveForm.vue b/src/views/Openlab/OpenlabReserve/OpenlabReserveForm.vue
index 2b7d894..3ea1015 100644
--- a/src/views/Openlab/OpenlabReserve/OpenlabReserveForm.vue
+++ b/src/views/Openlab/OpenlabReserve/OpenlabReserveForm.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="openlabReserveForm">
+  <article aria-label="予約情報入力ページ">
     <h1 class="heading--main">
       オープンラボ訪問予約
     </h1>
@@ -7,7 +7,7 @@
 
     <v-form ref="reserveVisitForm">
       <h2 class="heading--sub">
-        2021年2月15日 {{ time }} で予約します。
+        <time datetime="2021-02-15">2021年2月15日</time> {{ time }} で予約します。
       </h2>
 
       <p
@@ -56,7 +56,7 @@
         予約確認
       </v-btn>
     </v-form>
-  </div>
+  </article>
 </template>
 
 <script>
diff --git a/src/views/Openlab/OpenlabReserve/OpenlabReserveVerification.vue b/src/views/Openlab/OpenlabReserve/OpenlabReserveVerification.vue
index 8a7f7fa..8b3ca4b 100644
--- a/src/views/Openlab/OpenlabReserve/OpenlabReserveVerification.vue
+++ b/src/views/Openlab/OpenlabReserve/OpenlabReserveVerification.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="openlabReserveVerification">
+  <article aria-label="予約完了ページ">
     <h1 class="heading--main">
       予約完了
     </h1>
@@ -12,81 +12,49 @@
       後ほど、詳細に関する案内のメールを送信させていただきます。
     </p>
 
-    <v-row
-      class="my-6"
-      justify="center"
-    >
-      <v-col cols="12">
-        <v-simple-table>
-          <template #default>
-            <tbody>
-              <tr>
-                <td>お名前</td>
-                <td>{{ name }}</td>
-              </tr>
-              <tr>
-                <td>学籍番号</td>
-                <td>{{ studentId }}</td>
-              </tr>
-              <tr>
-                <td>メールアドレス</td>
-                <td>{{ email }}</td>
-              </tr>
-              <tr>
-                <td>予約日</td>
-                <td>{{ date }}</td>
-              </tr>
-              <tr>
-                <td>予約時間</td>
-                <td>{{ time }}</td>
-              </tr>
-              <tr>
-                <td>補足事項</td>
-                <td>{{ message }}</td>
-              </tr>
-            </tbody>
-          </template>
-        </v-simple-table>
-      </v-col>
-    </v-row>
-  </div>
+    <ReserveTable :reserve-form="reserveForm" />
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
 import WelcomeUser from '@/components/WelcomeUser.vue'
+import ReserveTable from '@/components/ReserveTable.vue'
 
 export default {
   name: 'VerificateReserve',
   components: {
-    WelcomeUser
+    WelcomeUser,
+    ReserveTable
   },
   data () {
     return {
-      uid: '',
-      email: '',
-      date: '',
-      time: '',
-      name: '',
-      studentId: '',
-      message: ''
+      reserveForm: {
+        uid: '',
+        email: '',
+        date: '',
+        time: '',
+        name: '',
+        studentId: '',
+        message: ''
+      }
     }
   },
   created () {
     firebase.auth().onAuthStateChanged((user) => {
       if (user) {
-        this.uid = user.uid
+        this.reserveForm.uid = user.uid
       } else {
-        this.uid = null
+        this.reserveForm.uid = null
       }
     })
 
-    this.email = this.$route.query.email
-    this.date = this.$route.query.date
-    this.time = this.$route.query.time
-    this.name = this.$route.query.name
-    this.studentId = this.$route.query.studentId
-    this.message = this.$route.query.message
+    this.reserveForm.email = this.$route.query.email
+    this.reserveForm.date = this.$route.query.date
+    this.reserveForm.time = this.$route.query.time
+    this.reserveForm.name = this.$route.query.name
+    this.reserveForm.studentId = this.$route.query.studentId
+    this.reserveForm.message = this.$route.query.message
   },
   methods: {
   }
diff --git a/src/views/ResetPassword.vue b/src/views/ResetPassword.vue
index f051f50..27c7542 100644
--- a/src/views/ResetPassword.vue
+++ b/src/views/ResetPassword.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="resetPassword">
+  <article aria-label="パスワード再設定ページ">
     <h1 class="heading--main">
       パスワード再設定
     </h1>
@@ -21,7 +21,7 @@
         再設定メールを送信する
       </v-btn>
     </v-form>
-  </div>
+  </article>
 </template>
 
 <script>
diff --git a/src/views/SignIn.vue b/src/views/SignIn.vue
index 8121ce1..34f8a62 100644
--- a/src/views/SignIn.vue
+++ b/src/views/SignIn.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="signin">
+  <article aria-label="サインインページ">
     <h1 class="heading--main">
       ログイン
     </h1>
@@ -38,13 +38,14 @@
         </router-link>
       </p>
     </v-row>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+
 export default {
-  name: 'Signin',
+  name: 'SignIn',
   components: {
   },
   data () {
diff --git a/src/views/SignOut.vue b/src/views/SignOut.vue
index 263b2d8..c006050 100644
--- a/src/views/SignOut.vue
+++ b/src/views/SignOut.vue
@@ -1,18 +1,19 @@
 <template>
-  <div class="signout">
+  <article aria-label="サインアウトページ">
     <h1 class="heading--main">
       ログアウト
     </h1>
     <v-btn @click="singout">
       ログアウト
     </v-btn>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+
 export default {
-  name: 'Signout',
+  name: 'SignOut',
   components: {
   },
   methods: {
diff --git a/src/views/SignUp.vue b/src/views/SignUp.vue
index 6f3875c..9f087ce 100644
--- a/src/views/SignUp.vue
+++ b/src/views/SignUp.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="signup">
+  <article aria-label="アカウント作成ページ">
     <h1 class="heading--main">
       アカウント作成
     </h1>
@@ -35,13 +35,14 @@
         アカウントを作成する
       </v-btn>
     </v-form>
-  </div>
+  </article>
 </template>
 
 <script>
 import firebase from '@/firebase.js'
+
 export default {
-  name: 'Signup',
+  name: 'SignUp',
   components: {
   },
   data () {