ログイン画面をおしゃれにするCSSスニペット16選。サインアップフォーム切り替えも!
ログインフォーム、サインアップ画面(Login & Sign-Up Form)のCSSサンプルをまとめました。
デザインが美しいウェブサイトやサービスが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。特にログイン画面はユーザが最初に触れる画面。目を引くデザインのログインフォームは利用者の興味を引き付けます。
ログイン画面はシンプルなデザインのものが好まれますが、ちょっとした遊び心は必要。楽しいデザインの画面だと煩わしいログイン作業も少しは心軽くなるでしょう。本記事ではフォームの中でも「ログイン画面」「サインイン画面」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
シンプルなログインフォームのCSSデザイン例。迷ったら簡素で見やすいものにしよう。
フラットデザインのシンプルログイン画面。
See the Pen
Flat HTML5/CSS3 Login Form by Aigars Silkalns (@colorlib)
on CodePen.
奇抜でおしゃれ!ちょっと凝った遊び心のあるログインフォームのCSSデザイン例。
ログインマークが表示される画面。
See the Pen
LogIn Form by Kamen Nedev (@nedev)
on CodePen.
派手な背景画像の上に浮かぶログインマーク。マークをクリックするとログイン画面が現れます。
ログイン画面表示までに利用者に1ステップ追加を強いるデザインなので使いどころが難しいですが、デザインの洗練さは素晴らしいですね。
背景画像に溶け込んだログイン画面。
See the Pen
Random Login Form by Lennart Hase (@motorlatitude)
on CodePen.
ログインフォーム自体はシンプルなのですが、透過色を上手く使って背景に溶け込むようにログイン機能が実装されています。
画像多めの女性向けサイトなどで親和性が高そうなデザインですね。
3段ブロックの奇抜なログイン画面。
See the Pen
Login Form 1 by Felix De Montis (@dervondenbergen)
on CodePen.
3つのブロックが並んだあまり見ないデザインのログインフォームです。これは目立つかも。
パスワードなどの部分が入力できることが分かりにくいのが弱点ですが、非常に面白いデザインですね。
ぱんだログインフォーム。
See the Pen
Panda Login by Vineeth.TR (@vineethtrv)
on CodePen.
パンダがログイン画面を握っているような感じのデザイン。可愛いですね。
マウス移動をパンダが目で追ってきます。パスワード入力時にはパンダが画面を持ち上げてくれます。遊び心が素晴らしい!
SNSログイン付きサインインフォーム。
See the Pen
Login to Everdwell by Kaushalya R. Mandaliya (@kman)
on CodePen.
こちらは通常のメールアドレスログインだけでなく、フェイスブックやツイッターログインのボタンも付いてます。
デザイン自体は非常にシンプルなので、複数のログイン方法を実装しているシステムなどの場合は、このデザインは基本系として参考になると思います。
サインアップ(登録フォーム)機能付きログイン画面のCSSデザイン例。切り替えが美しい!
シンプルなサインアップ+ログインフォーム①
See the Pen
Sign-Up/Login Form by Eric (@ehermanson)
on CodePen.
シンプルなログインフォームですが、上部のボタンでサインアップ画面と切り替えられるようになっています。
ログイン画面と新規登録画面を共存させたい場合に参考になる基本デザインサンプルですね。
シンプルなサインアップ+ログインフォーム②
See the Pen
Flat Login Form 3.0 by Andy Tran (@andytran)
on CodePen.
こちらもシンプルなデザインのログイン画面です。右上のボタンで登録画面とログイン画面が切り替えられます。
ボタンクリックでスライドするように画面が切り替わるのが非常にスタイリッシュですね。切り替えボタンが少しわかりにくいのが難点なので、もう少し大きくするかアイコンでなくてテキストに変えた方がよいかもですが。
スライダー切り替えできるログイン&新規登録画面①
See the Pen
Weekly Coding Challenge #1 – Double slider Sign in/up Form – Desktop Only by Florin Pop (@FlorinPop17)
on CodePen.
スライダー切り替えでログイン画面と新規登録画面が切り替わります。2つの画面が交換するようなアニメーション動作が素敵ですね。
このような切り替え動作をするログインフォームは増えていますので、似たようなデザインのサイトを作りたい場合は参考になると思います。
スライダー切り替えできるログイン&新規登録画面②
See the Pen
Login/Registration Form Transition by Nikolay Talanov (@suez)
on CodePen.
こちらもスライダータイプのログイン画面。背景画像と白色背景のスライダーを上手く使っています。
非常にスタイリッシュで美しい!
回転アニメーションで切り替えできるログイン&新規登録画面。
See the Pen
Day 001 Login Form by Mohan Khadka (@khadkamhn)
on CodePen.
こちらは背景画像に溶け込むようなデザインのログイン画面です。上部のリンクの部分をクリックすると、ログイン画面と新規登録画面がクルっと回転するアニメーションで切り替わります。
全体的にまとまったデザインで良いですね。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。