共栄美装WEBサイト12月アップデート情報～専用メールフォームがパワーアップ～

皆さん、こんにちは。広報部1号です。専用メールフォームは、今年の3月からスタートしたショッピングカートに代わる簡単なお問い合わせ機能の一つです。
参照記事：3月中旬アップデート情報～専用メールフォームが登場～

イベントの目玉であるテントやステージは使用する物品数が多く、沢山の機材を複合的に組み合わせて1つの会場になります。だからこそ私たちはWEBサイトリニューアル時にいち早くセットプランに着手して情報発信を進めて参りましたが、手っ取り早くお問い合わせをしようにもショッピングカートに普段使い慣れていない方にとってはややストレスに感じられることも多いため、もっとサクッとメールが送信できる専用のフォームを別でご用意していました。

テントならテント、ステージならステージをご利用頂いている方のために、設問項目も変化させています。

今回の更新の目玉とは？

私たちは作っただけでそのまま終わりにせず、よりご活用いただきやすくする為に下記の3点に絞って専用メールフォームをパワーアップさせることにしました。

違和感のないデザインに

新しい機能を追加すればするほど全体的なデザインの統一感が失われたり、使用するテンプレート通りにしか組めなかったり、作った人でも意図しないところでぎこちない余白が生まれてしばうこともよくあります。「ここだけなんで浮いてるの？」と思われるような要素を省くために、細かな調整を施しました。

例えばテキストボックスは、基本的に左右に割った右側の列で1行まるまる揃えるようにしました。
プルダウンメニューは何の装飾も施されていない簡素なものでしたが、そのデザインをテキストボックスと統一しました。

杓子定規さを取っ払い、自然な使い心地に

文の始まりの余白がバラバラだと、たとえ動作上は問題なくても、なんとなく不揃いで違和感を感じるものです。
まずは列揃えをし、比較がしやすいように整列しました。

サイズについては「何を入力するのか」という目的ベースで設定しました。
たとえば郵便番号や名前入力欄の姓と名は短めにし、デッドスペースがあまり大きく出来ないようにしています。

逆に住所やメールアドレスはすごく長いこともありますから、こちらは横幅いっぱい設置しています。電話番号はもっと短くても良いのですが、よくメールアドレスと並べて表示されるものなので揃えて1行にしています。

枠線がなくてもレイアウトで秩序を担保

画像はテントの天幕と数量を入れる画面ですが、もしここの入力欄が左揃えだったら、キチンと整列はできていませんでした。
例えば[白:]と[赤/白:]では、1.5文字ぶんの差があります。直後に入力欄を儲けていたら列ズレを招いてしまいます。
かといって、表の中に更に表を入れ子していたら煩雑に見えてしまいがち。ここで、入力欄の横幅を同じにしたり整列させることでスッキリした見た目になりました。

入力時のストレスをとにかく減らすための改良

ここは操作性が大きく向上した箇所なので、今回のアップデートの中で一番恩恵を感じやすいかもしれません。ステージ設営のためのパンチカーペットが、画像を押すことで選択可能になりました。従来のメールフォームではセレクトボックスとサンプル画像を見比べので手間がかかっていましたが、プログラムコードを見直すことで画像をクリック(スマホの場合はタップ)からの入力もできるようになりました！