# WEB_SEC-1425 第4回メルマガキャンペーン（塩分チャージ）｜コーディング
プレビュー：https://rheb.f.msgs.jp/webapp/form/20479_rheb_61/pv/index.do
本番：https://rheb.f.msgs.jp/webapp/form/20479_rheb_61/index.do
# 担当者凡例
<font color="olivedrab">●</font>：吹越
<font color="orange">●</font>：松隈さん
<font color="plum">●</font>：水野さん
# フェーズ
1.系：フォーム
2.系：LP
3.系：確認、完了、終了
## 7/3 最終：優先度低まとめ
★がんばってやってみる
- [x] 規約の閉じるボタンを押したときの挙動
👉セボンスターのフォームを参考にできそう。
- [x] フリーテキスト入力エリアもろもろ。以前の確認で未対応のものを確認。
👉 原因が思い当たらないけど、違和感のあるUIのため、調べて対応してみる。

**▼ 挙動が不安定なので、今回はあきらめる次回課題として持ち越し**
~~- [ ] 「今すぐ応募」消えるタイミングが早い…~~

**▼ 原因特定に時間を要しそうなため次回課題として持ち越し**
~~- [ ] 住所自動入力エリアの白枠（Chrome）~~
~~- [ ] 生年月日エリア（WindowsIEの）~~

## 2.3（LP）
- [x] <font color="plum">●</font> SPの「今すぐ応募」の位置を変更したい。また消えるタイミングが遅い…（優先度：高）
- [x] <font color="plum">●</font> SPのinput、MV上に余白がほしいです。。（確認と完了はよいのですが。。。なぜ違うのだろうか。。。）
## 3.2（確認、完了、終了）
- [x] <font color="plum">●</font> 確認、完了、終了の背景色あわせてください
## 2.2（LP）
- [x] <font color="plum">●</font> 今すぐ応募 のサイズと位置が変…
- [x] <font color="orange">●</font> 今すぐ応募 に影つけてください
- [x] <font color="plum">●</font> ホバー効果つけてください
- [x] <font color="plum">●</font> PCの余白調整してください
## 2.1（LP）
- [x] <font color="plum">●</font>　SPの見出し上、余白が高すぎます。30pxくらいにしてください。逆に、下部は狭すぎます。60pxくらいあけてください。

- [x] <font color="plum">●</font>　申し訳ございません。LP部分の背景色ですが、ちょっと検証する時間がないので、デザイン通り`#c9edf9`でお願いします。（フォーム部分が白くなったことにより見えづらさは解消したため）

## 3.1（終了）
- [x] 遷移先：https://www.kabaya-ohayo.com/contact/

※ なお別タブでお願いします。（ドメインが異なるので。）
- [x] 別タブにしてください。（ドメインが異なるので。）

## 3.0（確認、完了）
- [x] PC，SPともに確認画面と完了画面のpadding-topが高すぎます。10~20px以内でじゅうぶんですので修正お願いします。
（このビジュアルを見せたいのではなく、このキャンペーンに応募している、というのを忘れないように視界に入っていればいい、くらいの要素のため。）
- [x] 完了画面のテキストの最後に「！」をつけてほしいです。こうしたい→`キャンペーンへのご応募ありがとうございました！`
## 2.0（LP）チェック（吹越）
~~- [x] 背景色の青が強くて見づらさを感じました。なるべくグレイに近いものにしたいので、`#ddf3f9` に変更してみていただけますか？~~
- [ ] <font color="plum">●</font>「今すぐ応募」の出現タイミングを変更したいです。詳しいタイミングはお電話にてお伝えさせてください。（優先度：高）
- [x] <font color="orange">●</font> → <font color="plum">●</font>「今すぐ応募」が埋もれて見えなくなるときがあるので、さりげなく影をつけたいです。（優先度：高）
<font color="orange">[松隈]画像修正しました。[こちら](https://www.dropbox.com/s/pcw7e1jfco0dgyt/btn_oubo%402x.png?dl=0)に入ってますので、差し替えお願いします。</font>
<font color="olivedrab">[吹越]7/2 14:11 すみません。デザインのときに確認すればよかったのですが意図が伝わっていなかったので再度修正お願いしたいです。</font>
- [x] <font color="orange">●</font> → <font color="plum">●</font>PC見出し画像が粗い…（優先度：低）
<font color="orange">[松隈]画像修正しました。[こちら](https://www.dropbox.com/sh/47w5n7nl59ff9wu/AAB3-WmrgLTzRfDJ1XdpdZO1a?dl=0)に入ってますので、差し替えお願いします。</font>
- [x] <font color="orange">●</font> → <font color="plum">●</font>SPのステップバーの3.完了の色が黒い…（優先度：高）
<font color="orange">[松隈]画像修正しました。[こちら](https://www.dropbox.com/sh/47w5n7nl59ff9wu/AAB3-WmrgLTzRfDJ1XdpdZO1a?dl=0)に入ってますので、差し替えお願いします。</font>
- [x] <font color="tomato">どっち？</font>：SPの見出しが小さい…（優先度：高）
<font color="orange">[松隈]画像のサイズは余裕があるので、CSSの指定が小さいようです。PCと同じ比率での配置になってるみたいなので、メディアクエリで分けて、以下のようにするとよいかもしれません。</font>

.inner .secHeading img {
    display: block;
    margin: auto;
    width: 75%;

↓

.inner .secHeading img {
    display: block;
    margin: auto;
    width: 90%;

- [x] <font color="plum">●</font> フォーム部分の背景色を白にしたい。（優先度：高）
## 1.1チェック（吹越）
- [x] 「入力内容を確認する」ボタンですが、チェックをしたらアクティブになる、が効かなくなりました…。（優先度：高）

- [x] 気付くのが遅くなりましたが、Q1、Q2と番号を振ってほしいです。（優先度：高）
（※Q1ではいと答えた方に〜〜〜とあるので、Q1を明示しておく必要があります。）

- [ ] PC版、角丸にはなりました。が、プレスホルダの文字と入力枠が近いです…。（優先度：低）

- [ ] 枠の大きさや横幅が異なるのがきになりました。（優先度：低）
- [ ] ① 選択肢エリア自体が小さい。
- [ ] ② ①が原因なのかわからないのですが、その他の入力エリア幅が違うのが気になる。

- [ ] Q5とQ7の自由入力エリアをアクティブにしたときの見え方が、他と異なる。（優先度：低）

## 1.0（フォーム）チェック（吹越）
- [x] 応募要項｜♥トリ、見出し色を`#122C82`に変更

- [x] フォーム｜回答選択肢を、以下のように１カラムで並べられますか？
（Z型より縦に配列されているほうが入力しやすいため）
○はい
○いいえ
○覚えていない・わからない

- [x] フォーム｜応募規約 に下線が入っているのと、リンクカラーが意図した色じゃなくなっているので修正したいです。（希望、下線なし、リンクカラー#007FFF）
- [x] SPでみたときのQ5とQ7の自由回答のエリアですが、非アクティブの状態では枠が角丸になっていますが、入力しようとタップ、アクティブな状態になると、紺色で四角に変化してしまいます。アクティブ化しても角丸にしたいです。
- [x] 👆に関連するのですが、同じ箇所、PC版だと非アクティブのとき角丸にすらならないので、他フォーム枠同様角丸にしたいです。と同じく、プレスホルダのpadding-left、10pxほどほしいです…。