募集要項ページによくある「応募フロー」。
サイトのユーザーにとって、フローの見やすさはとても重要です。
シンプルに<table>で組む場合が多いかもしれません。
ここをおしゃれに&見やすくすればコンバージョン率も上がる可能性も。
今回はおしゃれな応募フローのデザインを5パターン用意しました。
いずれもコピペで利用できます。
応募フローのみならず、ステップ系のレイアウトには大体流用できると思います。
1カラム構成
1カラム構成のフロー。
ステップ同士を点線で繋ぐデザインで、パッと見でわかりやすくしています。
かわいい・ポップ系のデザインに使えます。
2カラム構成
2カラム構成のフロー。
1カラムと比べて高さをとらないので、ステップ数が多い場合にはこちらの方が使いやすいです。
スタイリッシュ・シンプル系のデザインに使えます。
枠線を使ったデザイン
フロー全体を枠線で囲ったデザイン。
線の太さ、色を変えるだけでスタイリッシュ系～ポップ系のデザインまで、オールマイティに使えます。
スタイリッシュなデザイン
デザインに変化をつけたい時はこちら。
今までの型とは外れていますが、視覚的にもわかりやすいデザインになっています。
スタイリッシュなデザインに使えます。
ポップなデザイン
ステップの数字を吹き出しにしています。
2行以上になるとわかりづらくなってしまうので、横に並べて1行で収まる場合に使いたいです。
ポップ系のデザインに使えます。
まとめ
採用サイトの制作時には特に使えると思います。
フローを直観でわかりやすく見せて、他サイトと差別化しましょう。