トップページのデザインレビュー対応をした

README.md

@@ -1,6 +1,6 @@
 # GifTreat
 
-![GifTreatのロゴ](app/assets/images/logo-top-page.png)
+![GifTreatのロゴ](app/assets/images/logo-horizontal.png)
 
 ## 概要
 
@@ -17,51 +17,62 @@ GifTreat は自分にご褒美をあげたい人向けの、ご褒美設定サ
 - https://giftreat.jp/
 
 ## 使い方
+
 1. アカウント登録をする。
- <img width="40%" alt="アカウント登録" src="https://github.com/user-attachments/assets/f6dfe84a-4bdc-43f1-9b6c-4a8a3282d0f1">
+   <img width="40%" alt="アカウント登録" src="https://github.com/user-attachments/assets/f6dfe84a-4bdc-43f1-9b6c-4a8a3282d0f1">
 
 2. ご褒美と目標を登録する。
-  <img width="40%" alt="ご褒美と目標の新規登録" src="https://github.com/user-attachments/assets/cbdbc388-d441-41f1-a78e-c2dff7114af0">
+   <img width="40%" alt="ご褒美と目標の新規登録" src="https://github.com/user-attachments/assets/cbdbc388-d441-41f1-a78e-c2dff7114af0">
 
 3. 進捗率の更新をする。
+
    - 必要に応じてご褒美や目標の設定を変更することが可能です。
-  <img width="40%" alt="ご褒美と目標の詳細画面" src="https://github.com/user-attachments/assets/97dadd39-b744-4032-bc7d-fbd203a875b0">
+     <img width="40%" alt="ご褒美と目標の詳細画面" src="https://github.com/user-attachments/assets/97dadd39-b744-4032-bc7d-fbd203a875b0">
 
 4. 期日になったら忘れずに自分にご褒美をあげる。
+
    - 目標の達成・未達成に関わらず自分を褒めてあげましょう！
-  <img width="40%" alt="ご褒美と目標の詳細画面-完了" src="https://github.com/user-attachments/assets/a4004bfc-c04e-48cc-bec5-2c0dd35ec934">
+     <img width="40%" alt="ご褒美と目標の詳細画面-完了" src="https://github.com/user-attachments/assets/a4004bfc-c04e-48cc-bec5-2c0dd35ec934">
 
 5. 友人や家族を招待してご褒美を共有する。
    - 招待URLを共有することで友人や家族を共通のご褒美に招待することができます。
    - 各々の目標を設定し、共通のご褒美に向けて頑張りましょう！
-   <img width="40%" alt="ご褒美と目標の詳細画面-招待後" src="https://github.com/user-attachments/assets/050eb7a8-e9fa-4596-814c-ba6aadce6330">
-   <img width="40%" alt="ご褒美と目標の詳細画面-招待用画面" src="https://github.com/user-attachments/assets/50bbef80-8b46-440d-95a8-15ad4d2dd46d">
+     <img width="40%" alt="ご褒美と目標の詳細画面-招待後" src="https://github.com/user-attachments/assets/050eb7a8-e9fa-4596-814c-ba6aadce6330">
+     <img width="40%" alt="ご褒美と目標の詳細画面-招待用画面" src="https://github.com/user-attachments/assets/50bbef80-8b46-440d-95a8-15ad4d2dd46d">
 
 ## 開発環境
+
 - Ruby 3.4.1
 - Ruby on Rails 7.2.2.1
 - Hotwire
 - Bootstrap
 
 ## 環境構築
+
 - セットアップ
+
 ```
 $ git clone https://github.com/SuzukiShuntarou/GifTreat.git
 $ cd GifTreat
 $ bin/setup
 ```
 
 - 起動
+
 ```
 $ bin/dev
 ```
 
 ## Lint / Test
+
 - Lint
+
 ```
 $ bin/lint
 ```
+
 - Test
+
 ```
 $ bundle exec rails test test/
 ```

app/assets/stylesheets/_color_palette.sass

@@ -1,4 +1,5 @@
 $base-color: #FCFCFC
 $main-color: #f03861
-$warning-color: #ff5722
+$warning-color: #ff7f32
 $link-color: #4a6076
+$character-color: #324550

app/assets/stylesheets/application.bootstrap.scss

@@ -24,7 +24,7 @@
 
 @media (min-width: 601px) and (max-width: 1024px) {
   html {
-    font-size: 15px;
+    font-size: 14px;
   }
   .modal-dialog {
     max-width: 80%;
@@ -34,7 +34,7 @@
 
 @media (min-width: 1024px) {
   html {
-    font-size: 18px;
+    font-size: 16px;
   }
   .modal-dialog {
     max-width: 50rem;
@@ -84,13 +84,31 @@ header {
   color: $main-color;
 }
 
+.character-color {
+  color: $character-color;
+}
+
 a {
   color: $link-color;
   &:hover {
     opacity: 0.5;
   }
 }
 
+h2 {
+  font-size: 2rem !important;
+}
+
+h3 {
+  font-size: 1.75rem !important;
+}
+
+.btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 .btn-primary {
   background-color: $main-color !important;
   border-color: $main-color !important;
@@ -120,6 +138,14 @@ a {
   }
 }
 
+.btn-danger {
+  background-color: $warning-color !important;
+  border-color: $warning-color !important;
+  &:hover {
+    opacity: 0.5;
+  }
+}
+
 .btn-outline-danger {
   color: $warning-color;
   border-color: $warning-color;

app/controllers/welcome_controller.rb

@@ -3,6 +3,8 @@
 class WelcomeController < ApplicationController
   skip_before_action :authenticate_user!
 
+  def index; end
+
   def terms_service; end
 
   def privacy_policy; end

app/views/devise/passwords/edit.html.erb

@@ -4,7 +4,7 @@
 <div class="d-flex flex-column justify-content-center align-items-center gap-3 m-3">
   <h1 class="text-center">
     <%= link_to user_session_path do %>
-      <%= image_tag('logo-top-page.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %>
+      <%= image_tag('logo-horizontal.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %>
     <% end %>
   </h1>
   <h2><%= t('.change_your_password') %></h2>

app/views/devise/passwords/new.html.erb

@@ -4,7 +4,7 @@
 <div class="d-flex flex-column justify-content-center align-items-center gap-3 m-3">
   <h1 class="text-center">
     <%= link_to user_session_path do %>
-      <%= image_tag('logo-top-page.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %>
+      <%= image_tag('logo-horizontal.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %>
     <% end %>
   </h1>
   <h2><%= t('.forgot_your_password') %></h2>

app/views/devise/registrations/new.html.erb

@@ -4,7 +4,7 @@
 <div class="d-flex flex-column justify-content-center align-items-center gap-3 m-3">
   <h1 class="text-center">
     <%= link_to user_session_path do %>
-      <%= image_tag('logo-top-page.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %>
+      <%= image_tag('logo-horizontal.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %>
     <% end %>
   </h1>
   <h2><%= t('.sign_up') %></h2>

app/views/devise/sessions/new.html.erb

@@ -2,7 +2,7 @@
 <% set_meta_tags description: 'ログインページです。' %>
 
 <section class="d-flex flex-column justify-content-center align-items-center gap-3 m-3">
-  <h1 class="text-center"><%= image_tag('logo-top-page.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %></h1>
+  <h1 class="text-center"><%= image_tag('logo-horizontal.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %></h1>
   <h2 class="main-color">努力できた自分を褒めよう！</h2>
   <div class="fs-5" style="min-width: 25rem;">
     <%= bootstrap_form_with(model: @user, label_errors: true, url: session_path(resource_name), html: { method: :post }) do |f| %>

app/views/welcome/index.html.erb

@@ -0,0 +1,33 @@
+<% content_for(:title, '目標・ご褒美設定ツール') %>
+<div class="d-flex flex-column justify-content-center align-items-center text-center gap-4 m-3">
+  <h1 class="text-center"><%= image_tag('welcome/logo-vertical.png', alt: 'GifTreatのロゴ', style: 'max-width: 20rem;') %></h1>
+  <section class="d-flex flex-column justify-content-center align-items-center gap-2">
+    <h2 class="main-color">努力できた自分を褒めよう！</h2>
+    <div class="character-color">
+      GifTreatは<br>
+      努力できた自分を褒めてあげたい人向けの<br>
+      目標とご褒美の設定ツールです。
+    </div>
+    <%= link_to "無料でアカウント登録", new_user_registration_path, class: 'text-center btn btn-danger fs-5 my-2', style: 'width: 18rem; height: 3rem;' %>
+    <%= link_to "登録済の方はこちらから", user_session_path, class: 'btn btn-outline-primary fs-5', style: 'width: 18rem; height: 3rem;' %>
+  </section>
+  <section class="d-flex flex-column justify-content-center align-items-center gap-2">
+    <h3 class="main-color">目標+ご褒美</h2>
+    <div class="character-color">
+      ただの目標管理ツールではなく、<br>
+      目標と同時に達成後のご褒美も登録します。
+    </div>
+    <div class="d-flex">
+      <%= image_tag('welcome/goal-setting.png', alt: '目標を設定するイラスト', style: 'max-width: 10rem;') %>
+      <%= image_tag('welcome/reward-individual.png', alt: '個人でお祝いするイラスト', style: 'max-width: 10rem;') %>
+    </div>
+  </section>
+  <section class="d-flex flex-column justify-content-center align-items-center gap-2">
+    <h3 class="main-color">グループで共通のご褒美</h2>
+    <div class="character-color">
+      個人利用だけでなく、グループで共通のご褒美を設定でき、<br>
+      各々の目標の達成後に、皆でお祝いすることもできます。
+    </div>
+    <%= image_tag('welcome/reward-group.png', alt: '個人でお祝いするイラスト', style: 'max-width: 20rem;') %>
+  </section>
+</div>

app/views/welcome/privacy_policy.html.erb

@@ -5,7 +5,7 @@
   <% unless user_signed_in? %>
     <h1 class="text-center">
       <%= link_to user_session_path do %>
-        <%= image_tag('logo-top-page.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %>
+        <%= image_tag('logo-horizontal.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %>
       <% end %>
     </h1>
   <% end %>

app/views/welcome/terms_service.html.erb

@@ -5,7 +5,7 @@
   <% unless user_signed_in? %>
     <h1 class="text-center">
       <%= link_to user_session_path do %>
-        <%= image_tag('logo-top-page.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %>
+        <%= image_tag('logo-horizontal.png', class: 'w-50 h-25', alt: 'GifTreatのロゴ') %>
       <% end %>
     </h1>
   <% end %>

config/routes.rb

@@ -3,10 +3,6 @@
     root to: 'goals#index', as: :authenticated_root
   end
 
-  devise_scope :user do
-    root to: 'devise/sessions#new'
-  end
-
   devise_for :users, controllers: {
     registrations: "users/registrations"
   }
@@ -19,6 +15,8 @@
     resources :likings, only: [:create]
     resources :cheerings, only: [:create]
   end
+
+  root 'welcome#index'
   get 'terms_service', to: 'welcome#terms_service'
   get 'privacy_policy', to: 'welcome#privacy_policy'