CSSで作る、デザインがおしゃれな応募フロー(ステップ)5パターン コーディング

CSSで作る、デザインがおしゃれな応募フロー(ステップ)5パターン

募集要項ページによくある「応募フロー」。
サイトのユーザーにとって、フローの見やすさはとても重要です。

シンプルに<table>で組む場合が多いかもしれません。
ここをおしゃれに&見やすくすればコンバージョン率も上がる可能性も。

今回はおしゃれな応募フローのデザインを5パターン用意しました。
いずれもコピペで利用できます。

応募フローのみならず、ステップ系のレイアウトには大体流用できると思います。

スポンサーリンク

1カラム構成

1カラム構成のフロー。

ステップ同士を点線で繋ぐデザインで、パッと見でわかりやすくしています。
かわいい・ポップ系のデザインに使えます。

スポンサーリンク

2カラム構成

2カラム構成のフロー。

1カラムと比べて高さをとらないので、ステップ数が多い場合にはこちらの方が使いやすいです。
スタイリッシュ・シンプル系のデザインに使えます。

スポンサーリンク

枠線を使ったデザイン

フロー全体を枠線で囲ったデザイン。

線の太さ、色を変えるだけでスタイリッシュ系~ポップ系のデザインまで、オールマイティに使えます。

スポンサーリンク

スタイリッシュなデザイン

デザインに変化をつけたい時はこちら。
今までの型とは外れていますが、視覚的にもわかりやすいデザインになっています。

スタイリッシュなデザインに使えます。

スポンサーリンク

ポップなデザイン

ステップの数字を吹き出しにしています。
2行以上になるとわかりづらくなってしまうので、横に並べて1行で収まる場合に使いたいです。

ポップ系のデザインに使えます。

スポンサーリンク

まとめ

採用サイトの制作時には特に使えると思います。
フローを直観でわかりやすく見せて、他サイトと差別化しましょう。