ログイン画面をおしゃれにするCSSスニペット16選。サインアップフォーム切り替えも！
ログインフォーム、サインアップ画面(Login & Sign-Up Form)のCSSサンプルをまとめました。
デザインが美しいウェブサイトやサービスが増えています。フォーム周りのデザインも趣向を凝らしたものが多く見受けられるようになりました。特にログイン画面はユーザが最初に触れる画面。目を引くデザインのログインフォームは利用者の興味を引き付けます。
ログイン画面はシンプルなデザインのものが好まれますが、ちょっとした遊び心は必要。楽しいデザインの画面だと煩わしいログイン作業も少しは心軽くなるでしょう。本記事ではフォームの中でも「ログイン画面」「サインイン画面」に焦点を当て、おしゃれなCSSスニペットを一覧にしてみました。
シンプルなログインフォームのCSSデザイン例。迷ったら簡素で見やすいものにしよう。
フラットデザインのシンプルログイン画面。
非常にシンプルで、動きや奇抜な色使いはありませんが、使いやすいフラットデザインのログイン画面です。
入力部分の色分けやplaceholderなど、ログイン画面の基本は抑えてます。
入力欄が凹みになったシンプルログイン画面。
ホバーやマウスオーバー時の動きが多少実装されてますが、基本はシンプルなログインフォームです。
暗めの画面ですが、配色を変えればどんなサイトにも対応できそう。
吹き出しタイプのシンプルログイン画面。
こちらもシンプルなフラットデザインのログインフォームですが、吹き出しの形になっているのが少し遊び心があって良いですね。
通常のログイン画面として表示しても良いですが、ベースの画面が背景にある状態で重ねるように表示されるログイン機能を実装したい場合に参考になるデザインサンプルです。
マテリアルデザイン用のシンプルログイン画面
入力時にプレースホルダーが移動したりの動きは実装されていますが、デザイン自体は非常にシンプル。入力欄が背景に溶け込んでいる感じも良いですね。
ウェブサイトの中にブロック部品としてログインフォームを実装したい場合に向いているデザインです。
コンパクトでスマホでも使いやすいシンプルログイン画面①
非常にコンパクトなログイン画面です。ヘッダー部分のデザインも良いですね。スマホ表示で見やすそうですし、ボタンもタップしやすそうです。
スライドで画面遷移するようなログインフォームを作りたい場合も、こういうデザインは使えます。とても良いデザインのサンプルですね。
コンパクトでスマホでも使いやすいシンプルログイン画面②
黒い背景に白い入力欄のコントラストで、コンパクトで使い勝手が良さそうなログインフォームです。
黒だけでなく、彩度が高い背景色のウェブサイトでも使えそう。
奇抜でおしゃれ！ちょっと凝った遊び心のあるログインフォームのCSSデザイン例。
ログインマークが表示される画面。
派手な背景画像の上に浮かぶログインマーク。マークをクリックするとログイン画面が現れます。
ログイン画面表示までに利用者に1ステップ追加を強いるデザインなので使いどころが難しいですが、デザインの洗練さは素晴らしいですね。
背景画像に溶け込んだログイン画面。
ログインフォーム自体はシンプルなのですが、透過色を上手く使って背景に溶け込むようにログイン機能が実装されています。
画像多めの女性向けサイトなどで親和性が高そうなデザインですね。
3段ブロックの奇抜なログイン画面。
３つのブロックが並んだあまり見ないデザインのログインフォームです。これは目立つかも。
パスワードなどの部分が入力できることが分かりにくいのが弱点ですが、非常に面白いデザインですね。
ぱんだログインフォーム。
パンダがログイン画面を握っているような感じのデザイン。可愛いですね。
マウス移動をパンダが目で追ってきます。パスワード入力時にはパンダが画面を持ち上げてくれます。遊び心が素晴らしい！
SNSログイン付きサインインフォーム。
こちらは通常のメールアドレスログインだけでなく、フェイスブックやツイッターログインのボタンも付いてます。
デザイン自体は非常にシンプルなので、複数のログイン方法を実装しているシステムなどの場合は、このデザインは基本系として参考になると思います。
サインアップ(登録フォーム)機能付きログイン画面のCSSデザイン例。切り替えが美しい！
シンプルなサインアップ＋ログインフォーム①
シンプルなログインフォームですが、上部のボタンでサインアップ画面と切り替えられるようになっています。
ログイン画面と新規登録画面を共存させたい場合に参考になる基本デザインサンプルですね。
シンプルなサインアップ＋ログインフォーム②
こちらもシンプルなデザインのログイン画面です。右上のボタンで登録画面とログイン画面が切り替えられます。
ボタンクリックでスライドするように画面が切り替わるのが非常にスタイリッシュですね。切り替えボタンが少しわかりにくいのが難点なので、もう少し大きくするかアイコンでなくてテキストに変えた方がよいかもですが。
スライダー切り替えできるログイン＆新規登録画面①
スライダー切り替えでログイン画面と新規登録画面が切り替わります。２つの画面が交換するようなアニメーション動作が素敵ですね。
このような切り替え動作をするログインフォームは増えていますので、似たようなデザインのサイトを作りたい場合は参考になると思います。
スライダー切り替えできるログイン＆新規登録画面②
こちらもスライダータイプのログイン画面。背景画像と白色背景のスライダーを上手く使っています。
非常にスタイリッシュで美しい！
回転アニメーションで切り替えできるログイン＆新規登録画面。
こちらは背景画像に溶け込むようなデザインのログイン画面です。上部のリンクの部分をクリックすると、ログイン画面と新規登録画面がクルっと回転するアニメーションで切り替わります。
全体的にまとまったデザインで良いですね。
ウェブサイトのフォームをおしゃれにするCSSスニペットシリーズ記事一覧
フォームの各入力要素のスニペットはシリーズ記事化していますので、こちらの記事も参考にしてください。
https://kodocode.net/design-css-textbox/
