新規登録後のフローを改善

app/assets/stylesheets/home.css.scss

@@ -32,37 +32,79 @@
   }
 }
 
-// bookmarklet
-#bookmarklet {
+// tutorial
+#tutorial {
   margin: 20px auto;
+  padding: 20px;
   width: $contents_width;
-  font-size: 16px;
+  line-height: 200%;
+  font-size: 13px;
+  color: #444;
+  background-color: #fff;
+  @include border-radius(2px);
+  @include single-box-shadow($color: #ccc, $hoff: 0px, $voff: 1px, $blur: 3px);
+}
 
-  p {
-    line-height: 130%;
-  }
+#tutorial h1 {
+  font-size: large;
+  font-weight: normal;
 }
 
-#bookmarklet h1 {
-  margin: 0 0 0.25em;
-  line-height: 150%;
-  font-size: xx-large;
+#tutorial ol {
+  counter-reset: li;
+}
+
+#tutorial li {
+  margin: 20px 0;
+  padding: 20px 0.5em 0;
+  border-top: 1px solid #eee;
 }
 
-#bookmarklet .well {
-  margin: 1em 0;
+#tutorial h2 {
+  font-size: x-large;
+  margin-bottom: 0.5em;
+}
+
+#tutorial h2:before {
+  display: inline-block;
+  counter-increment: li;
+  content: counter(li);
+  margin: .3em;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
   text-align: center;
-  font-size: xx-large;
-  font-family: $font_gothic;
-  letter-spacing: 3px;
   font-weight: bold;
+  color: #fff;
+  background: #f70;
+  position: relative;
+  left: -0.5em;
+  @include border-radius(2em);
+}
 
-  a {
-    color: #666;
+#tutorial a {
+  &, &:link, &:visited, &:hover, &:active {
+    font-weight: bold;
+    color: #f70;
+  }
+}
+
+// bookmarklet
+#bookmarklet {
+  @extend #tutorial;
+}
+
+#bookmarklet .button {
+  margin: 30px 0;
+  text-align: center;
 
-    &:hover {
-      text-decoration: none;
-    }
+  a {
+    @include btn-reclip;
+    width: 150px;
+    height: 60px;
+    line-height: 60px;
+    font-size: x-large;
+    font-weight: normal;
   }
 }
 

app/assets/stylesheets/scaffolds.css.scss

@@ -90,7 +90,7 @@ label {
 }
 
 h1 {
-  font-weight: bold !important;
+  font-weight: bold;
 }
 
 strong {

app/controllers/users/registrations_controller.rb

@@ -0,0 +1,8 @@
+class Users::RegistrationsController < Devise::RegistrationsController
+  protected
+
+  def after_sign_up_path_for(resource)
+    flash[:user_signup] = true
+    tutorial_path
+  end
+end

app/views/base/_header.html.slim

@@ -11,6 +11,7 @@
                   = label_tag :url, 'イラストを投稿:'
                   = text_field_tag :url, nil, placeholder: 'キーワード or http://ページURL'
               li = link_to 'ブックマークレットから投稿', bookmarklet_path
+              li = link_to 'チュートリアル', tutorial_path
               li.divider
               li = link_to 'まとめを作成', new_matome_path
         - if user_signed_in?

app/views/home/bookmarklet.html.slim

@@ -1,5 +1,13 @@
 #bookmarklet
   h1 ブックマークレット
-  p 「@clip」のリンクをブックマークバーにドラッグ＆ドロップすることで、様々なサイトから１クリックでクリップできるようになります。
-  p.well
+  p ブックマークレットをインストールすることで、いつでも、どんなサイトからでも、簡単に画像を集められるようになります。
+  p 「@clip」ボタンをブックマークバーにドラッグ＆ドロップするだけで、インストールは完了です。
+  p ほかのサイトを見ているときにインストールしたボタンをクリックしてください。
+  p.button
     = link_to '@clip', "javascript:(function(){location.href='http://clipclap.org/clips/new?url='+encodeURIComponent(location.href);})();"
+
+  hr
+
+  p
+    | そのほかの投稿方法については
+    = link_to 'こちら', tutorial_path

app/views/home/tutorial.html.slim

@@ -0,0 +1,20 @@
+#tutorial
+  h1 ほかのサイトからイラストを集める
+  p あなたのお気に入りのイラストを３つの方法で追加することができます。
+
+  ol
+    li
+      h2 キーワードで探す
+      p 画面左上の「＋投稿」ボタンをクリックすると入力フォームが表示されます。
+      p キーワードを送信すると、キーワードに関連したイラストが一覧表示されます。
+      p 「クリップ」ボタンから目的のイラストを投稿しましょう！
+    li
+      h2 URLから探す
+      p 画面左上の「＋投稿」ボタンをクリックすると入力フォームが表示されます。
+      p イラストURL、またはイラストを含むページURLを送信すると、イラストが一覧表示されます。
+      p 「クリップ」ボタンから目的のイラストを投稿しましょう！
+    li
+      h2 ブックマークレットを使う
+      p ブックマークレットをインストールすることで、いつでも、どんなサイトからでも、簡単に画像を集められるようになります。
+      p インストールもお手軽簡単！
+      p = link_to 'ブックマークレットをインストールする', bookmarklet_path

app/views/layouts/application.html.slim

@@ -19,3 +19,9 @@ html
           - if alert
             p#alert = alert
           == yield
+
+    - if flash[:user_signup]
+      javascript:
+        try {
+          _gaq.push([ '_trackPageview', '/user/sign_up_completed' ])
+        } catch(e) { }

config/routes.rb

@@ -5,7 +5,10 @@
   devise_for :admin_users
   mount RailsAdmin::Engine => '/admin', :as => 'rails_admin'
 
-  devise_for :user, :controllers => { :omniauth_callbacks => "users/omniauth_callbacks" }
+  devise_for :user, :controllers => {
+    :registrations => "users/registrations",
+    :omniauth_callbacks => "users/omniauth_callbacks"
+  }
 
   resources :clips, except: [ :edit, :update ] do
     member do
@@ -58,6 +61,7 @@
   end
 
   get 'bookmarklet' => 'home#bookmarklet', via: :get, as: :bookmarklet
+  get 'tutorial' => 'home#tutorial', via: :get, as: :tutorial
   get "home/index"
   root :to => "home#index"