【125naroom】おといあわせページを、送りやすくしました
125naroom の おといあわせページ を、新しくしました。
入力・確認・完了の画面と、入力に不足があったときの画面、それからプライバシーポリシーのページです。
おといあわせのページは、目立たないけれど大事なところです。
送る人が迷わないことを、いちばんに考えました。
いまどこにいるか、分かるように
見出しの下に、「入力・確認・完了」の3つのまるを並べました。
いまの画面のまるが黄色になります。
あと何回ボタンを押せば送れるのかが分かると、ちょっと安心できます。
入力欄は、大きく、やさしく
入力欄は高さをしっかりとって、文字を 16px にしました。
iPhone で入力欄をタップしたときに、画面が勝手に拡大されないようにするためです。
選んでいる欄は、枠が墨色になり、まわりにうすい黄色の影がつきます。
「必須」は黄色、「任意」は線だけのバッジで、見分けられるようにしました。
ご用件の選択は、ラジオボタンをカードの形にしています。
指でも押しやすい大きさです。
内容の欄に、ひとこと
内容の欄の上に、こんなひとことを入れました。
ご依頼の場合は、つくりたいもの・ご予算・ご希望の時期がわかる範囲で書いていただけると、お返事がスムーズです。
何を書けばいいのか迷ったときの、目安になればと思っています。
うまく送れなかったときも
入力に不足があったときは、フォームの上に「◯件の項目をご確認ください」と出します。
項目の名前を押すと、その欄まで移動します。
該当する欄は、枠と面が赤くなり、すぐ下に理由が出ます。
「メールアドレスの形式をご確認ください（例：hanako@example.com）」のように、どう直せばいいかも書いています。
じつは、これまでこの画面の見出しが「確認画面」になっていました。
今回、「おといあわせ」に直しています。
確認して、送信
確認画面では、入力した内容を一覧で見られます。
書かなかった項目は「（未入力）」と出します。
ボタンは「入力画面にもどる」と「この内容で送信する」の2つです。
スマートフォンでは、送信のボタンを上に置いています。
送ったあとに、メールが届きます
送信が終わると、完了の画面にロゴと同じ ●○ が出ます。
あわせて、info@125naroom.com から自動でお返事のメールが届くようにしました。
このメールにそのまま返信しても、ちゃんと届きます。
送りっぱなしの不安が、少しでもなくなればうれしいです。
プライバシーポリシーも
プライバシーポリシーのページも、同じ見た目にそろえました。
目次を2列で置いて、読みたいところにすぐ移動できます。
さいごに
ご依頼でも、ご感想でも、ちょっとした質問でも大丈夫です。
コーヒーでも飲みながら、のんびりお返事します。
デザコトauthor
あ、いいな、と思うWebデザインを紹介しています。デザインの参考に。やさしいデザインが多いです。Webデザインギャラリー『デザインのこと - Web design gallery』を運営しています。
