UI Style
オーロラUI（Aurora UI）
発光する多色グラデーションとぼかしで、未来感や先進性を強く演出するスタイルです。
暗い面に多色の光を重ね、先進的なLPヒーローを表します。
30秒でわかる要点
発光する多色グラデーションとぼかしで、未来感や先進性を強く演出するスタイルです。
視覚的特徴
- ・多色グラデーション
- ・発光とぼかし
- ・暗い背景との強い対比
メリット
- ・第一印象が強い
- ・テック感や先進性を出しやすい
- ・LPやヒーローに向く
デメリット
- ・飽和しやすい
- ・アニメーションを足すと重くなりやすい
- ・本文UIには向きにくい
向いている用途
- ・AI系LP
- ・プロダクトヒーロー
- ・イベントサイト
避けた方がよい用途
- ・日常的に使う管理画面
- ・長文コンテンツ
- ・公共UI
関連コンポーネント
ボタン（Button）ボタン（Button）は、ユーザーがアクションを実行するためのクリック可能な要素。バリアント（プライマリ・セカンダリ・ゴーストなど）やサイズのバリエーションを持つ。
カード（Card）カード（Card）は、関連する情報をまとめて表示するコンテナコンポーネント。画像・タイトル・説明文・アクションを組み合わせて使う。
ナビゲーション（Navigation）ナビゲーション（Navigation）は、サイトやアプリ内の主要な画面遷移を提供するナビゲーションバー。水平・垂直・サイドバー型などのレイアウトバリエーションを持つ。
バッジ（Badge）バッジ（Badge）は、数量・ステータス・ラベルを小さいサイズで表示するコンポーネント。通知数や状態の強調表示に使用される。
関連画面
関連デザインシステム
AI実装プロンプト
React + Tailwind CSS
React + Tailwind CSSでオーロラUI風のプロダクトヒーローを作成してください。暗い背景、多色グラデーション、ぼかした発光、読みやすい白文字、明確なCTAを含めてください。
運営・更新・参照元
- 著者 / 運営
- Component Gallery 編集部
- 最終更新日
- 2026-07-20
- レビュー状態
- 未レビュー
参照元
- W3C Web Content Accessibility Guidelines (WCAG)参照確認日: 2026-07-20
- WAI-ARIA Authoring Practices Guide参照確認日: 2026-07-20
- MDN Web Docs - Accessibility参照確認日: 2026-07-20
FAQ
オーロラUIはどこに使うべきですか？
LPのファーストビューや印象づけたい短いセクションに向いています。日常操作画面全体に使うと、視覚負荷が高くなりやすいです。