https://apply.tokyo-gas.co.jp/moving/preapply

◎視点
離脱者を減らし、かつわかりやすいフォームのデザインを勉強したく
特に複雑そうであり、利用者の多そうな東京ガスの引越しの際の手続きフォームを確認。

◎概要
東京ガスをこれまで利用してた方、これから利用する方、継続する人に応じてプランが異なる上、
ガス・電気・両方の料金プランも異なるという複雑なため、離脱者が増える可能性がある。
それを防ぐため様々な工夫を施す。

◎プログレスバー
今自分がどの段階にいるかを明確にしてくれることで、あとどれくらいで完了するのかを把握できる

◎最初の質問は２項目のみ。
→全部を一気に表示するとやる気をなくし離脱してしまう可能性があるため
→２項目めを選択すると、次の項目が表示される仕組み

◎選択肢をボタンにする場合はイラストをおくと一目でわかる

◎hoverだけで特典がわかる
→無駄なスペースの省略

◎選択肢によって、選択後に説明が表示される。

◎必須チェック欄は赤に近い色で囲み、目立つデザイン。

◎手続きの流れや、注意事項はアコーディオンで表示

◎未入力事項がある場合は次に進めない設定。
→入力を埋めると次へ進める

◎未入力エリアの表示
各項目にもエラーメッセージが出る。

◎個人・法人の区別
ラジオボタンで入力エリアを変更できるようになっている

◎入力欄は薄らグレーで背景をたし、かつ黒で囲む。
背景と混同しないよう、さりげない工夫

自分でもよく離脱してしまう入力フォーム。
東京ガスさんは、入力項目を最初は少なく見せたり、選択肢に応じて表示が変わるなど
たくさんの工夫が見られており感動しました！