ログイン画面をおしゃれにするCSSスニペット16選。サインアップフォーム切り替えも！
ログインフォーム、サインアップ画面(Login & Sign-Up Form)のCSSサンプルをまとめました。
デザインが美しいウェブサイトやサービスが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。特にログイン画面はユーザが最初に触れる画面。目を引くデザインのログインフォームは利用者の興味を引き付けます。
ログイン画面はシンプルなデザインのものが好まれますが、ちょっとした遊び心は必要。楽しいデザインの画面だと煩わしいログイン作業も少しは心軽くなるでしょう。本記事ではフォームの中でも「ログイン画面」「サインイン画面」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
シンプルなログインフォームのCSSデザイン例。迷ったら簡素で見やすいものにしよう。
フラットデザインのシンプルログイン画面。
See the Pen
Flat HTML5/CSS3 Login Form by Aigars Silkalns (@colorlib)
on CodePen.
非常にシンプルで、動きや奇抜な色使いはありませんが、使いやすいフラットデザインのログイン画面です。
入力部分の色分けやplaceholderなど、ログイン画面の基本は抑えてます。
入力欄が凹みになったシンプルログイン画面。
See the Pen
Login Form by Tyler Fry (@frytyler)
on CodePen.
ホバーやマウスオーバー時の動きが多少実装されてますが、基本はシンプルなログインフォームです。
暗めの画面ですが、配色を変えればどんなサイトにも対応できそう。
吹き出しタイプのシンプルログイン画面。
See the Pen
Login Form by Miro Karilahti (@miroot)
on CodePen.
こちらもシンプルなフラットデザインのログインフォームですが、吹き出しの形になっているのが少し遊び心があって良いですね。
通常のログイン画面として表示しても良いですが、ベースの画面が背景にある状態で重ねるように表示されるログイン機能を実装したい場合に参考になるデザインサンプルです。
マテリアルデザイン用のシンプルログイン画面
See the Pen
Material Design Login Form by Josh Adamous (@joshadamous)
on CodePen.
入力時にプレースホルダーが移動したりの動きは実装されていますが、デザイン自体は非常にシンプル。入力欄が背景に溶け込んでいる感じも良いですね。
ウェブサイトの中にブロック部品としてログインフォームを実装したい場合に向いているデザインです。
コンパクトでスマホでも使いやすいシンプルログイン画面①
See the Pen
Elegant Login Form by Victor Hugo Matias (@reidark)
on CodePen.
非常にコンパクトなログイン画面です。ヘッダー部分のデザインも良いですね。スマホ表示で見やすそうですし、ボタンもタップしやすそうです。
スライドで画面遷移するようなログインフォームを作りたい場合も、こういうデザインは使えます。とても良いデザインのサンプルですね。
コンパクトでスマホでも使いやすいシンプルログイン画面②
See the Pen
Sleek Login Form by emma (@boltaway)
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.
３つのブロックが並んだあまり見ないデザインのログインフォームです。これは目立つかも。
パスワードなどの部分が入力できることが分かりにくいのが弱点ですが、非常に面白いデザインですね。
ぱんだログインフォーム。
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.
スライダー切り替えでログイン画面と新規登録画面が切り替わります。２つの画面が交換するようなアニメーション動作が素敵ですね。
このような切り替え動作をするログインフォームは増えていますので、似たようなデザインのサイトを作りたい場合は参考になると思います。
スライダー切り替えできるログイン＆新規登録画面②
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スニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
