ヘルプページの文章を追加

src/components/templates/Help.js

@@ -1,13 +1,28 @@
 import * as React from "react";
+import styled from "styled-components";
 import Text from "../atoms/Text";
+import Accordion from "../organisms/Accordion";
+import { style } from "../mediaQuery";
 import BasicPageWrapper from "../../BasicPageWrapper";
 
+import help from "../../help";
+
+const StyledHeader = styled(Text)`
+  ${style({
+    XL: `width: 900px`,
+    L: `width: 90%`,
+    M: `width: 90%`,
+    S: `width: 95%`
+  })};
+  margin-bottom: 30px;
+`;
 export default class Help extends React.Component {
   render() {
     return (
       <BasicPageWrapper>
-        <Text size="XL">Help</Text>
-
+        <Text size="XL">ヘルプページ</Text>
+        <StyledHeader>{help.Header}</StyledHeader>
+        <Accordion items={help.Body} />
       </BasicPageWrapper>
     );
   }

src/help.js

@@ -0,0 +1,36 @@
+/* eslint max-len: 0, no-irregular-whitespace: 0 */
+export default {
+  Header: `ヘルプ、お問い合わせ`,
+  Body: [
+    {
+      Header: "chrome extensionでVideoSocialBookmarkをより便利に",
+      Body: `https://github.com/enpitut2018/VideoSocialBookmarkChromeExtension を使うことによって、動画投稿サイトから直接動画をブックマークすることができます。`
+    },
+    {
+      Header: "コメントの仕方",
+      Body: `動画のページからコメント欄を埋め、コメントボタンを押すことによってコメントをすることができます。`
+    },
+    {
+      Header: "ユーザーページ",
+      Body: `自分のブックマークやプレイリストを見ることができます。
+      他のユーザーページではその人のブックマークやプレイリストをみることができます。`
+    },
+    {
+      Header: "プレイリスト",
+      Body: `プレイリストの作成
+動画の下の"プレイリストに追加"のボタンを押すことによって、動画をプレイリストに追加することができます。追加した動画はプレイリストページから連続再生を行うことができます。`
+    },
+    {
+      Header: "プレイベートプレイリスト",
+      Body: `他の人に見られたくないプレイリストを作ることができます。プレイリストの編集ボタンを押し、鍵アイコンを押すことによって他の人が見られなくなります。`
+    },
+    {
+      Header: "star機能",
+      Body: `エントリーページから動画に星をつけることができます。動画をブックマークした人に通知が行くことはありません。`
+    },
+    {
+      Header: "SNSに共有",
+      Body: `エントリーページの動画の下のTwitter,Facebook,Reddit　それぞれのアイコンから共有することができます。`
+    }
+  ]
+};