Style · ダーク
ダークWebデザインの参考例とAIプロンプト
黒・濃灰を背景にしたダークテーマのAIプロンプト集。SaaS管理画面・音楽・ゲームなどに。
ダークについて
黒・濃灰を背景にしたトーン。目の疲れを減らし、情報のコントラストを高め、プロフェッショナル感を出せる設計です。開発者ツール、SaaS管理画面、音楽アプリ、ゲーム、クリエイティブツールで定番化しました。暗い地では細字が沈みます。白背景と同じウェイトをそのまま持ってくると、和文は特に読めなくなるので最低400を保つこと。奥行きは影ではなく明度差で作ります。純黒と純白の組み合わせは眩しすぎるため、どちらも少し寄せた値を使うのが実務です。
ダークの視覚パラメータ
- #0B0B0D 地
- #141417 面
- #E7E7EA 文字
- #7C9BFF アクセント
- 書体
- サンセリフ。細字は避け、最低400を保つ
- 形
- 角丸8〜12px。影より明度差で層を作る
- 動き
- 150〜200ms。発光は使わない
よく使われる場面
- 開発者向けSaaS管理画面
- 音楽・映像・ゲーム系プロダクト
- クリエイティブツール（Figma, Linear）
- ダッシュボード・アナリティクス
- プロフェッショナル向けツール
成功のポイント
- 純黒より5-10%明るい黒を基調に
- テキストは純白より90-94%明度に
- 影より light-border で階層を作る
- アクセント色の彩度は抑えめに
- 広告・ADSENSE と相性を事前確認
このスタイルのデザイン
1画面を大きく見せる資産管理アプリの紹介
端末を1台だけ大きく置き、周囲にUIの断片を浮かせるアプリ紹介セクション。数字そのものを主役にする構図で、家計簿・投資・ヘルスケアなど「自分の数値」を扱うアプリに向く設計。
アイソメトリック倉庫の在庫ダッシュボード
倉庫のラックを45度の立体で並べ、高さで在庫量、色で充填率を同時に読ませる管理画面。表とグラフでは伝わらない「どこが詰まっているか」を一目で示します。
ベントーグリッドの写真ギャラリー
大小のタイルが噛み合うベントーグリッドで、作品の格を差でつける写真ギャラリー。主役を大きく、脇役を小さく——並べた瞬間に見る順番が決まるレイアウトです。
空港パタパタ式発車案内板風のダッシュボード
空港・駅の split-flap（パタパタ式）発車案内板を再構築したオペレーションダッシュボード。タイル状の数字ボード・色分けステータス・LIVE 表示で「業務の流れが見える」OPS 体験を作る尖った設計。
星座図・天体図風のサイトナビゲーション
夜空の星座と天体観測カタログを再構築したサイトナビゲーション。各ページを「恒星」、カテゴリを「星座」として配置し、現在地を北極星（Polaris）の脈動で示す、神秘的で詩的な尖った設計。
Discord/Slack風の3ペイン・チャットインターフェイス
Discord・Slack のチャットUIを再構築した3ペインインターフェイス。サーバーリスト＋チャンネル＋メッセージスレッド＋リアクション・スレッドの定番構成を CSS だけで網羅する尖った設計。
アイソメトリック投影の機能紹介セクション
30度傾斜の擬似3DでUIカードを浮かべる、未来感のあるアイソメトリック機能紹介。Stripe・Linear・Vercel系のモダンSaaSの定番表現を CSS だけで再現する尖った設計。
完全 CLI ターミナル風のダッシュボード
GUI を排し、すべてを ASCII テーブル・モノスペース・コマンドプロンプトで構築するターミナル風ダッシュボード。開発者向けインフラ管理ツール・サーバーモニタリング・ハッカー文化を取り込んだプロダクトに。
ヴェイパーウェイヴの夕焼けレトログリッド・ヒーロー
マゼンタ・パープルの夕焼けに地平線まで伸びるレトログリッド、大理石像、ローマン書体の日本語タイポを重ねるヴェイパーウェイヴ系ヒーロー。80s ノスタルジーとインターネット黎明期の美学が融合した尖った表現。
ネオン発光のナイトライフ系ポートフォリオ
暗背景にホットピンクとシアンの発光色を重ねるネオン系ポートフォリオ。ナイトクラブ・音楽・ゲーム・メタバースの世界観を Web に持ち込む、夜の街の空気を持つ作品集。
グラスモーフィズムのログインモーダル
半透明のすりガラス風パネルを背景に重ねるログインモーダル。SSO 3 種 + メール認証を中心に、視覚的に邪魔しない柔らかい認証フローを構築するための設計。
鮮やかなメッシュグラデーションのSaaSヒーロー
Stripe/Linear系のモダンなSaaSサイトで主流の、暗背景にカラフルなメッシュグラデーションを敷くヒーローセクション。CSSの conic-gradient + blur で画像を使わずに鮮やかに仕上げる構成。
ピクセルアート調の404ページ
深紫の宇宙を背景に、点滅する星・浮遊するピクセルキャラクター・グリッチするタイトルを組み合わせたレトロゲーム風の404ページ。冷たいエラー画面の代わりに、離脱の瞬間を小さな温度に変える。
タイル型グリッドの機能紹介
大小が異なるタイルを組み合わせて 6 機能を並べる、暗背景のベントーグリッド (タイル型レイアウト) の機能紹介セクション。主役の機能を大きく、補助機能を小さく配置することで、説明文を読まなくても重みづけが伝わる設計。
サイバー調のダッシュボード画面
黒背景にネオンの発光色、モノスペースフォントを組み合わせたサイバーパンク調の管理画面。KPI・ライブチャート・ログテーブル・リージョン別レイテンシを 1 画面にまとめた、開発者向けSaaSの観測系ダッシュボード。