【フロント】contactページデザイン

nina-fujioka commented 7 years ago

▼要件の受け入れ定義

/contact/ページとして表示が確認できる状態が条件。
入力-確認-サンクスまでの一連のページが準備できている。
ぱんくずが表示されている。(命名は下記のページurl名に記載)
サイドバーはtype1。

▼ページurl名

問い合わせ内容入力(/contact)
問い合わせ内容確認(/contact/confirm)
送信確定(/contact/confirm/thanks) ←ここのディレクトリ構成は相談させて！

▼条件を満たす項目と要素

ステータスバーを表示 (現在地と未来、過去の表示と差異を再現する)
お名前 (必須)
メールアドレス (必須)
お問い合わせ内容 (任意)

▼仕様

現在地を示す、ステータスバーをデザインとして組み込む。
htmlタグは既存html(/html/contact)のタグを使用してOK。
inputのtypeも既存でOK
プレースフォルダをセレクト時に、アクティブの表現を実装。
必須項目にはエラー文言の領域を準備する。

以上が洗い出し。懸念事項がある場合は随時きいてくださーい！

onishi-nina commented 7 years ago

着手します。編集予定ファイルは以下です。

/template_parts/p-form.php
/p-contact.php
site.yml
import.sql

onishi-nina commented 7 years ago

「MW WP Form」のプラグインを使用して、contactページに関連する３ページを作成。 ※管理画面からプラグインのインストールをお願いします。

▼以下URLでページを作成（問い合わせ内容確認・送信確定は直接リンクを叩くとトップページにリダイレクトされます）

・問い合わせ内容入力 http://nina.dev/input

・問い合わせ内容確認 http://nina.dev/confirm

・送信確定 http://nina.dev/thanks

▼今後のタスク

p-form.php内のcssを抜き出す
出力側で表示されるムダなHTMLタグを削除
ステータスバーのアクティブ実装
プレースフォルダをセレクト時のアクティブの表現を実装（エラー文言が表示する実装も含めます）

onishi-nina commented 7 years ago

contactページの一連の流れの以下ページを作成しました。

▼問い合わせ内容入力 http://nina.dev/input

▼問い合わせ内容確認 http://nina.dev/confirm

▼送信確定 http://nina.dev/thanks

onishi-nina commented 7 years ago

問い合わせの「入力-確認-送信確定」までの表示が確認できるページを揃えましたので、ご確認をお願い致します。

フォームとしての機能の実装に関しては別のタスクで、対応しますので着手して問題ないようでしたら、ご連絡ください。

▼確認したいことステータスバーに関しての仕様で

現在地を示す、ステータスバーをデザインとして組み込む。

となってますが、もっと作り込んだほうよかったですかね？現状はデザイン要素として組み込んでいます。

↑ありがとう、確認して正式にコメントを残します。

nina-fujioka commented 7 years ago

▼ステータスバーに関しての仕様
「デザイン」はこちらでつくるのでOK！ただ、、デザイン要素として--という言葉になるなら、confirm、contactのエリアでis-activeにならないのはなぜだろうか？？PSDなどでデザインファイルを提出する時にその状態でつくるだろうか。それとも機能面てやるってことかな？
これだと、contactの時に確認がactiveになってるデザインになるね。そういう評価になっちゃう。

▼フォームとしての機能の実装に関しては
これは、具体的になに？　微調整部分をざっくりでいいのでくださーい。

nina-fujioka commented 7 years ago

▼デザイン要素に関しての気になったところ

http://nina.dev/confirm

吐き出される要素を何らかのタグで括った方が、便利そう。
ボタンに関しても単数・複数問わず、表示した際に並列・中央寄せにできるスタイルの方が楽でいいのでは？？

onishi-nina commented 7 years ago

▼ステータスバーに関しての仕様各ページに対応したステータスバーのアクティブ表示は機能面で対応するつもりでした。「入力-確認-送信確定」の各ページごとの該当する箇所に「is-active」を追加します。「部分的に置いて…」とかのほうがよかったですかね？

↑要は完成させたいわけです。完成させるためのことをするとしたら、置いた方いいよね。

▼フォームとしての機能の実装に関してはこれは、具体的になに？　微調整部分をざっくりでいいのでくださーい。

想定していた機能の実装は以下になります。

完了画面に行った際に、宛先と管理者にメール送信ができる
入力項目ごとのエラー判定を追加する（お名前・メールアドレス）
ステータスバーの各ページのアクティブ表示などの処理を考えていました。

↑了解です、これで現状は問題ないす！

ご確認お願い致します。

↑！

onishi-nina commented 7 years ago

▼デザイン要素に関しての気になったところ

吐き出される要素を何らかのタグで括った方が、便利そう。

→確認画面ページで吐き出される項目はプラグイン側で出力してるので確認します。

↑見てないから不明だけど、吐き出されるTwigみたいなタグにpとかで括っちゃばいけそうなきがするなー

ボタンに関しても単数・複数問わず、表示した際に並列・中央寄せにできるスタイルの方が楽でいいのでは？？

→確かにボタンも並列のほうが使いやすいですね！css側で調整します。

↑おねがいします！

nina-fujioka commented 7 years ago

次のSprintに移動したので、急がずでOKです！

nina-dev / dev

【フロント】contactページデザイン #141