Bootstrap-ログイン-フォーム

簡単!Bootstrapを使ったログインフォームのテンプレートデザイン3種

Bootstrapを使ったたログインフォームを作成しました。
サイトの目的に合わせてログインフォームのレイアウトはことなります。

今回は良くあるパターンを3つ用意致しました。

 

グーグル風ログインフォーム

google風のログインフォームを作成しました。

gmail、カレンダー、youtubeなど一日に何回も使うサービスのログインフォームで重要な点は、無駄な要素を排除した分かりやすさが重要だと推測されます。
またアバター画像(プロフィール画像)をフォームの上に置くことで、自分のIDでログインしようとしているのだという事が直感で分かるようになっています。

ライトプラン 詳細はこちら

⇒サンプル確認はこちら

bootstrap login form

 

ネットショップ風ログインフォーム

ネットショップのログインフォームで良く見るパターンを作成しました。

例えば、楽天ではログインフォームの横に、会員登録の案内を用意されています。
会員登録すると、こんなメリットがあるとアピールすれば、新規登録者の数も増えるでしょう。
会員数を増やす目的のサイトではこの方法は効果的です。

ライトプラン 詳細はこちら

⇒サンプル確認はこちら

bootstrap login form

 

ポータルサイト風ログインフォーム

ポータルサイトのログインフォームで良く見るパターンを作成しました。

例えばYAHOO!のログインフォームはフォームの背面に大きな広告バナーを入れています。
一日に何回もアクセスのあるログインページに広告を置くことは、非常に効果があると思います。
広告費で稼ぐサイトでは、ログインフォームにバナーを置くことは効果的でしょう。

ライトプラン 詳細はこちら

⇒サンプル確認はこちら

login3

 

参考になりましたでしょうか?

これらのパターン以外の方法はあると思うので、
サイトの目的に合わせてログインフォームのデザインを考え、目的に合ったログインフォームを設置しましょう。

 

人気記事ランキング

投稿者:

kishiken

【プロフ】企業務めのWEBデザイナーです。デザイン、コーディング、CMS構築と広く浅く活動中。過去にバンド活動を経験。神奈川出身。川崎市在住。【資格】html5プロフェッショナル認定試験 レベル1【趣味】音楽(ポストロック、エモ、USインディ、JPインディ)、DIY住宅リノベーション