diff --git a/_config.yml b/_config.yml
index 79473b9..f726821 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,4 +1,5 @@
 title: ruby-jp
+description: ruby-jp.slack.com
 
 lang: ja
 timezone: Asia/Tokyo
@@ -13,3 +14,5 @@ exclude:
 theme: jekyll-theme-cayman
 
 github_username: ruby-jp
+
+slack_invite_link: https://join.slack.com/t/ruby-jp/shared_invite/enQtNzE1NDg1ODE2MDM2LTE1NTc2Y2M0ZThlNzdmOWEyZjYwZjdhZDAwNjNhMGE0NDJiODcwMTNkZWRjOTgyMzNkZjEyMmQ1ZWYyNzkzYzk
diff --git a/_layouts/default.html b/_layouts/default.html
new file mode 100644
index 0000000..e0d25c7
--- /dev/null
+++ b/_layouts/default.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang | default: "en-US" }}">
+  <head>
+
+    {% if site.google_analytics %}
+      <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
+      <script>
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+        gtag('config', '{{ site.google_analytics }}');
+      </script>
+    {% endif %}
+    <meta charset="UTF-8">
+
+{% seo %}
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="theme-color" content="#157878">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <link rel="stylesheet" href="{{ '/assets/css/style.css?v=' | append: site.github.build_revision | relative_url }}">
+  </head>
+  <body>
+    <header class="page-header" role="banner">
+      <h1 class="project-name">{{ page.title | default: site.title | default: site.github.repository_name }}</h1>
+      <h2 class="project-tagline">{{ page.description | default: site.description | default: site.github.project_tagline }}</h2>
+      <a href="{{ site.slack_invite_link }}" class="btn">Join to Slack</a>
+    </header>
+
+    <main id="content" class="main-content" role="main">
+      {{ content }}
+
+      <footer class="site-footer">
+        {% if site.github.is_project_page %}
+          <span class="site-footer-owner"><a href="{{ site.github.repository_url }}">{{ site.github.repository_name }}</a> is maintained by <a href="{{ site.github.owner_url }}">{{ site.github.owner_name }}</a>.</span>
+        {% endif %}
+        <span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a>.</span>
+      </footer>
+    </main>
+  </body>
+</html>
diff --git a/assets/css/style.scss b/assets/css/style.scss
new file mode 100644
index 0000000..728f834
--- /dev/null
+++ b/assets/css/style.scss
@@ -0,0 +1,7 @@
+---
+---
+@import "{{ site.theme }}";
+
+.page-header {
+  background-image: linear-gradient(120deg, #f26a6a, #A61401)
+}
diff --git a/index.md b/index.md
index 29f4568..94789b2 100644
--- a/index.md
+++ b/index.md
@@ -6,5 +6,33 @@ ruby-jpは**Rubyプログラマーの交流のためのコミュニティ**で
 
 ---
 
-Slackへの参加は[こちら](https://join.slack.com/t/ruby-jp/shared_invite/enQtNzE1NDg1ODE2MDM2LTE1NTc2Y2M0ZThlNzdmOWEyZjYwZjdhZDAwNjNhMGE0NDJiODcwMTNkZWRjOTgyMzNkZjEyMmQ1ZWYyNzkzYzk)のリンクからご自由にどうぞ！
+## 🔰初心者の方へ
 
+- `#general` - 入門者〜上級者が喋るチャンネルです
+- `#newbie` - Ruby初学者用のチャンネルです。Railsチュートリアルなどの疑問もこちらでどうぞ
+- `#regional_rb` - 各地域にあるRubyコミュニティの情報が集まったチャンネルです
+- `#book` - おすすめの技術書の話をしています
+
+## 💘慣れている方へ
+
+- RubyistはNiceですよね。 *入門者にやさしく* 接してください✨
+- チャンネルはいろいろあります。`#container`, `#grpc`, `#frontend` など好きなテーマのチャンネルを見つけて、コミュニケーションしてみてください
+- 必要なチャンネルがなければ作成してください（チャンネル作成時は`#general`で呼びかけてくれると嬉しいです）
+
+## 📣自己紹介について
+
+- `#general` で自己紹介すると以後発言しやすくなるかもですがしなくてもよいです。
+- **プロフィール画像を設定** しましょう。それで認知されることはあります
+
+## 👨‍💻 ログについて
+
+- Freeプランなので **過去ログは閲覧できなく**なります
+- Slack上にデータは残ります。
+
+## 💊 使い方（用法用量）について
+
+- 1000名以上が参加しているワークスペースなので量・流れが速いです
+- 自分のペースで参加し、その時にいるメンバーで相談・雑談をしてください
+- **過去ログ読んでないと参加できない…という雰囲気ではないので安心してください**
+
+🌱企業などの垣根を超えて技術交流できる場が提供できたらと思います。ぜひ大事に育ててください🌱
