Bootstrapを使ったたログインフォームを作成しました。
サイトの目的に合わせてログインフォームのレイアウトはことなります。
今回は良くあるパターンを3つ用意致しました。
グーグル風ログインフォーム
google風のログインフォームを作成しました。
gmail、カレンダー、youtubeなど一日に何回も使うサービスのログインフォームで重要な点は、無駄な要素を排除した分かりやすさが重要だと推測されます。
またアバター画像(プロフィール画像)をフォームの上に置くことで、自分のIDでログインしようとしているのだという事が直感で分かるようになっています。
ネットショップ風ログインフォーム
ネットショップのログインフォームで良く見るパターンを作成しました。
例えば、楽天ではログインフォームの横に、会員登録の案内を用意されています。
会員登録すると、こんなメリットがあるとアピールすれば、新規登録者の数も増えるでしょう。
会員数を増やす目的のサイトではこの方法は効果的です。
ポータルサイト風ログインフォーム
ポータルサイトのログインフォームで良く見るパターンを作成しました。
例えばYAHOO!のログインフォームはフォームの背面に大きな広告バナーを入れています。
一日に何回もアクセスのあるログインページに広告を置くことは、非常に効果があると思います。
広告費で稼ぐサイトでは、ログインフォームにバナーを置くことは効果的でしょう。
参考になりましたでしょうか?
これらのパターン以外の方法はあると思うので、
サイトの目的に合わせてログインフォームのデザインを考え、目的に合ったログインフォームを設置しましょう。