ターミナル風サイバーなログイン

黒背景・ネオンの発光文字・モノスペースフォントで構成したサイバーパンク調のログイン画面。Web3・開発者ツール・ハッカー向けSaaSのオンボーディングに世界観を付ける。

更新日: 2026年4月23日

プレビューを開く

概要

サイバーパンク・ログインは、「単なる入力画面」を「世界観の入り口」に変えるデザイン。黒背景・ネオン色・モノスペース書体の三点で、訪問者に「これは普通のSaaSじゃない」という第一印象を瞬時に渡す。

なぜ効くのか

認証画面は本来、視覚的な楽しさより速度と信頼が優先される場所。ただしプロダクトの世界観が強く主張すべきカテゴリ（Web3、セキュリティ、DevTool、配信・ゲーミングプラットフォーム）では、ログイン画面が「このプロダクトは自分の仲間だ」というシグナルになる。退屈な白地のフォームでは、その機会を失う。

構造

session indicator: 緑ドット＋「SESSION · OK」の擬似システム表記。ユーザー側の操作前から「動いている感」を出す
blinking cursor H1: ターミナルのプロンプトを意識した点滅カーソル付き見出し
labeled inputs: ラベルを大文字スペーシングにし、「›」記号で前置き。機能的装飾
gradient CTA: シアン→マゼンタで視線を終着点に誘導
OAuth row: 2列固定、モノトーンの境界線だけでまとめる（色を増やすと主役ボタンの存在感が落ちる）
CRT scanlines + grid: repeating-linear-gradient と radial-gradient で背景を質感化。JS不要

使いどころ

Web3・DeFi・開発者向けツールのログインで世界観を統一したいとき
セキュリティ製品のオンボーディングで「本気感」を出したいとき
ゲーミングSaaSや配信プラットフォームの認証フロー

適した技術スタック

カテゴリ: ログイン
スタイル: サイバー / ダーク / ネオン / SaaS
想定用途: SaaS向け
SPA: No
Hosting: any
Notes: 純粋なHTML/CSSで動く。JSが必要なのはフォーム送信とOAuthの実際の処理側だけ。

AIへの指示文

Build a cyberpunk-style login card for a developer-facing SaaS.
Visual system:
- Near-black background (#05060a) with faint CRT scanlines and a subtle
  grid that fades out from the center (radial mask).
- Two radial accent glows: magenta top-right (#ff4bcf) and cyan bottom-left (#6ef3ff).
- Monospace typography throughout (JetBrains Mono / Fira Code / ui-monospace).
- Muted gray text (#6b7a9e) for labels, bright cyan-to-magenta gradient
  for the primary CTA.
Card:
- Max-width 440px, dark panel (#0a0c14) with a thin border (#1a1f2e),
  3px radius, heavy shadow + inset glow.
- Top-left: a small uppercase "SESSION · OK" indicator with a pulsing green dot.
- Heading "sign in" with a blinking terminal cursor after it.
- 1 sentence lede with inline <code> highlighting.
- Two inputs (username, password), each with an uppercase label
  prefixed by a cyan "›" character.
- Row with "remember me" checkbox and a cyan "forgot?" link.
- Primary submit button: cyan→magenta gradient, uppercase, "> authenticate".
- Divider "— or —", then a 2-column OAuth row: GitHub and WebAuthn buttons
  with dotted bullet prefixes.
- Footer: "new here? create an account" with dashed underline on the link.
- Absolute brand mark at top-left of the page: "0x NIGHT/STACK" in muted
  uppercase, magenta "0x".
No JavaScript required for the visuals. Fully responsive down to 360px.

バリエーション

ライトモード版

Same structural system, reversed palette:
- Page background #f4f6fb; card background white with 1px #e0e4f0 border.
- Cyan and magenta stay vivid, but grid/scanlines get very faint.
- Cursor blink becomes a muted black.

WebAuthn優先版

Replace the password input with a single "Use passkey" primary CTA:
- Large cyan-gradient button labeled "› USE PASSKEY" with a fingerprint icon.
- Keep username field for passkey discovery.
- Move email/password combo behind a collapsed disclosure labeled
  "Sign in with password instead".

よくある質問

どのOAuthプロバイダでも使える？

UI側は完全にプロバイダ非依存。GitHub/Google/Apple/Discord/WebAuthnなど、好きなOAuthボタンを左右に並べればよい。ボタンのラベルとアイコンだけ差し替える。

モノスペースフォントは何を読み込む？

このプロンプトは`ui-monospace`系を優先するので、システムに入っているものが使われる。もしプロジェクト側でJetBrains MonoやFira Codeを`@fontsource`等でロードしているなら、そのまま採用される。

アクセシビリティは大丈夫？

全inputに`<label>`を関連付け、コントラスト比は暗背景×明テキストで4.5:1以上を保っている。点滅カーソルは`prefers-reduced-motion`メディアクエリでOFFにできる（実装例として追加可能）。