【Next.js】ログイン画面のデザインと作り方を Tailwind のコード付きで解説

import type { Metadata } from "next";
import { LoginForm } from "./LoginForm";

export const metadata: Metadata = { title: "ログイン" };

export default function LoginPage() {
  return (
    <main className="flex min-h-dvh items-center justify-center bg-zinc-50 px-4 py-12">
      <div className="w-full max-w-sm rounded-2xl border border-zinc-200 bg-white p-8 shadow-sm">
        <h1 className="text-2xl font-semibold text-zinc-900">ログイン</h1>
        <p className="mt-2 text-sm text-zinc-600">アカウントにログインして続けます。</p>
        <LoginForm />
      </div>
    </main>
  );
}

"use client";

import { useActionState } from "react";
import { login, type LoginState } from "./actions";
import { PasswordField } from "./PasswordField";

const initialState: LoginState = {};

export function LoginForm() {
  const [state, formAction, pending] = useActionState(login, initialState);

  return (
    <form action={formAction} className="mt-8 space-y-5">
      {state.error ? (
        <p role="alert" className="rounded-lg bg-red-50 px-4 py-3 text-sm text-red-700">
          {state.error}
        </p>
      ) : null}

      <div>
        <label htmlFor="email" className="block text-sm font-medium text-zinc-800">
          メールアドレス
        </label>
        <input
          id="email"
          name="email"
          type="email"
          autoComplete="username"
          required
          defaultValue={state.email}
          className="mt-2 block min-h-11 w-full rounded-lg border border-zinc-300 px-3 text-base focus:border-zinc-900 focus:outline-none focus:ring-2 focus:ring-zinc-900/20"
        />
      </div>

      <PasswordField />

      <button
        type="submit"
        disabled={pending}
        className="flex min-h-11 w-full items-center justify-center rounded-lg bg-zinc-900 text-sm font-medium text-white hover:bg-zinc-700 disabled:opacity-60"
      >
        {pending ? "ログインしています…" : "ログイン"}
      </button>
    </form>
  );
}

"use client";

import { useState } from "react";
import { Eye, EyeOff } from "lucide-react";

export function PasswordField() {
  const [visible, setVisible] = useState(false);

  return (
    <div>
      <label htmlFor="password" className="block text-sm font-medium text-zinc-800">
        パスワード
      </label>
      <div className="relative mt-2">
        <input
          id="password"
          name="password"
          type={visible ? "text" : "password"}
          autoComplete="current-password"
          required
          className="block min-h-11 w-full rounded-lg border border-zinc-300 pl-3 pr-12 text-base focus:border-zinc-900 focus:outline-none focus:ring-2 focus:ring-zinc-900/20"
        />
        <button
          type="button"
          onClick={() => setVisible((v) => !v)}
          aria-controls="password"
          aria-pressed={visible}
          className="absolute inset-y-0 right-0 flex w-11 items-center justify-center text-zinc-500 hover:text-zinc-900"
        >
          <span className="sr-only">パスワードを表示</span>
          {visible ? <EyeOff aria-hidden="true" className="size-5" /> : <Eye aria-hidden="true" className="size-5" />}
        </button>
      </div>
    </div>
  );
}

export function SocialLogin() {
  return (
    <div className="mt-8">
      <div className="flex items-center gap-3 text-xs text-zinc-500">
        <span aria-hidden="true" className="h-px flex-1 bg-zinc-200" />
        または
        <span aria-hidden="true" className="h-px flex-1 bg-zinc-200" />
      </div>
      <div className="mt-6 grid gap-3">
        {/* 押したときの処理は、使う認証ライブラリの方法に合わせて付ける */}
        <button
          type="button"
          className="flex min-h-11 items-center justify-center gap-3 rounded-lg border border-zinc-300 bg-white text-sm font-medium text-zinc-900 hover:bg-zinc-50"
        >
          {/* Google のロゴ（ガイドラインに沿った SVG） */}
          Google でログイン
        </button>
        <button
          type="button"
          className="flex min-h-11 items-center justify-center gap-3 rounded-lg bg-black text-sm font-medium text-white hover:bg-zinc-800"
        >
          {/* Apple のロゴ */}
          Apple でサインイン
        </button>
      </div>
    </div>
  );
}

import { LoginForm } from "./LoginForm";

export default function LoginPage() {
  return (
    <main
      className="relative flex min-h-dvh items-center justify-center bg-zinc-900 bg-cover bg-center px-4 py-12"
      style={{ backgroundImage: "url(/login-bg.jpg)" }}
    >
      {/* 写真を暗くして、白い文字のコントラストを保つ */}
      <div aria-hidden="true" className="absolute inset-0 bg-gradient-to-b from-black/50 via-black/30 to-black/60" />

      <div className="relative w-full max-w-sm rounded-3xl border border-white/20 bg-black/60 p-8 text-white shadow-2xl supports-[backdrop-filter]:bg-white/10 supports-[backdrop-filter]:backdrop-blur-xl">
        <h1 className="text-2xl font-semibold">ログイン</h1>
        <p className="mt-2 text-sm text-white/80">アカウントにログインして続けます。</p>
        <LoginForm />
      </div>
    </main>
  );
}