sounansa.net

Bootstrapを使ったログイン画面の無料テンプレート 10選 

スポンサーリンク

Pocket

WEBサービスを作るときにはどうしても必要になる管理画面ですが、あまり管理画面に手間をかけたくないのでBootstrapのようなデザインフレームワークを採用するすることも多いと思います。

レシポンシブな管理画面を作ったり、グリッドレイアウトにしたり、フォームまわりをこぎれいにするにはBootstrapは便利ですからね、やっぱり。

管理画面をBootstrapで作ったなら、フォームの統一感を考慮し、ログイン画面もBootstrapで作るのが普通かと思います。

でも、本家Bootstrapのサイトにあるサンプルのログインページでは物足りないと感じることも多いのではないでしょうか。

Bootstrapオフィシャルサイトのサンプルログインページ

bootstrap login

そこで、Bootstrapを使った無料のログインページテンプレートを集めてみました。

ログインページごときに手間をかけたくないので、コピペしてサクッと実装してみてはいかがでしょう。

Locked Login Page
ユーザーIDがロックされた状態のログインフォームのサンプルデザインです。ダークな色づかいにセンスを感じますね。
metronic

Red profile and login panel
赤が印象的なログインフォームです。
Red profile and login panel

login form layered
フォームの部分が重ねた紙を少しづつずらしたようなデザインです。シンプルですがちょっとしたアクセントをさりげなく使うだけでも十分おしゃれだと思います。
login form layered

Custom Login, Registration & Forgot Password
色が薄くて、ちょっとわかりにくいかもしれませんが、奇抜なデザインは好きです。ボタン部分の色をアレンジしてみるのも良いかも。
Custom Login, Registration & Forgot Password

Google style login extended
Googleのアカウントログインを模したデザインです。
Google style login extended

スポンサーリンク

Simple login form – Bootsnipp style colorgraph
カラフルなラインをアクセントにしたデザインです。
Simple login form - Bootsnipp style colorgraph

Login Form Panel
タブ形式で切り替え可能なログインフォームです。けっこうタブを使うこのタイプって使ってみると便利だったりします。
Login Form Panel

Bond Street Login
テキストボックスを幅いっぱいにしたデザインです。
Bond Street Login

Login Form MD
フェイスブック認証、ツイッター認証のボタンがあるログインフォームです。
Login Form MD

Wedding login form
ウェディング系のサービスにどうぞ。ダウンロードするにはページ下部の真ん中あたりのダウンロードボタンからです。
Wedding login form

過去の記事でもログイン画面のHTMLテンプレートを紹介したページがありますので、よろしければそちらもご覧ください。
オシャレなログイン画面の無料HTMLテンプレート 20選

スポンサーリンク

comments powered by Disqus