Style · ダーク
ダークWebデザインの参考例とAIプロンプト
黒・濃灰を背景にしたダークテーマのAIプロンプト集。SaaS管理画面・音楽・ゲームなどに。
このスタイルのデザイン
霧の風景ヒーロー
藍色の山と霧の生成背景に、日本語の見出しと淡い緑のボタンを重ねたヒーロー。PCは横長、スマホは縦長の画像に切り替え、暗いグラデーションで文字を読みやすくする。画像入りのHTMLも無料で配布。
透明ボディの90年代ヒーロー
青い透明樹脂の音楽プレーヤーを主役に、暗い背景と黄緑のボタンを組み合わせた製品紹介。90年代の小さなウィンドウ枠と生成画像の質感を使い、商品を見る操作と仕様を読む操作を分ける。
ネオン看板の夜景写真ギャラリー
黒に近い紺の地に、ネオン管のように光る見出しと、縦に詰めて並ぶ夜景写真のギャラリー。撮影地で絞り込めるボタンを付け、写真ごとに看板の色で縁を光らせる。光らせる場所を見出しと選択中の要素に絞り、写真を主役に保つ。
寒色グラデーションのAIツール機能紹介
紺の地に水色から藍色へのグラデーションを重ねた、AI議事録ツールの機能紹介セクション。見出しの一部だけを文字の幅で塗り、大きなカード1枚と小さなカード3枚で「何がどれだけ減るか」を数字と帯の長さで見せる。
放送終了のカラーバーで迎える404ページ
テレビの放送が終わった後のカラーバーを背景にした404ページ。画像を使わずグラデーションだけで描いたカラーバーに、チャンネル表示と時刻、「このページの放送は終了しました」の案内、検索窓と番組表（サイトマップ）への導線を重ねる。
未保存の変更を見失わせないSaaS設定画面
左に節の目次、各節は左に説明・右に入力の2列で組むダークテーマのSaaS設定画面。変更した項目の数を数える未保存バー、役割を選べるメンバー一覧、名前を打ち込むまで押せない削除ボタンまでを備え、設定を触る人の不安を順に潰していく。
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 に持ち込む、夜の街の空気を持つ作品集。
グラスモーフィズムのログインモーダル
半透明のすりガラス風パネルを背景に重ねるログインモーダル。外部認証3種のボタンとメール入力を配置。開閉・Escape・フォーカス復帰、入力条件の確認を試せる見本です。
鮮やかなメッシュグラデーションのSaaSヒーロー
Stripe/Linear系のモダンなSaaSサイトで主流の、暗背景にカラフルなメッシュグラデーションを敷くヒーローセクション。CSSの conic-gradient + blur で画像を使わずに鮮やかに仕上げる構成。
ピクセルアート調の404ページ
深紫の宇宙を背景に、点滅する星・浮遊するピクセルキャラクター・グリッチするタイトルを組み合わせたレトロゲーム風の404ページ。冷たいエラー画面の代わりに、離脱の瞬間を小さな温度に変える。
タイル型グリッドの機能紹介
大小が異なるタイルを組み合わせて 6 機能を並べる、暗背景のベントーグリッド (タイル型レイアウト) の機能紹介セクション。主役の機能を大きく、補助機能を小さく配置することで、説明文を読まなくても重みづけが伝わる設計。
サイバー調のダッシュボード画面
黒背景にネオンの発光色、モノスペースフォントを組み合わせたサイバーパンク調の管理画面。KPI・ライブチャート・ログテーブル・リージョン別レイテンシを 1 画面にまとめた、開発者向けSaaSの観測系ダッシュボード。
ダークについて
黒・濃灰を背景にしたトーン。目の疲れを減らし、情報のコントラストを高め、プロフェッショナル感を出せる設計です。開発者ツール、SaaS管理画面、音楽アプリ、ゲーム、クリエイティブツールで定番化しました。暗い地では細字が沈みます。白背景と同じウェイトをそのまま持ってくると、和文は特に読めなくなるので最低400を保つこと。奥行きは影ではなく明度差で作ります。純黒と純白の組み合わせは眩しすぎるため、どちらも少し寄せた値を使うのが実務です。
「ダーク」でプロンプトを組み立てるダークの視覚パラメータ
- #0B0B0D 地
- #141417 面
- #E7E7EA 文字
- #7C9BFF アクセント
- 書体
- サンセリフ。細字は避け、最低400を保つ
- 形
- 角丸8〜12px。影より明度差で層を作る
- 動き
- 150〜200ms。発光は使わない
よく使われる場面
- 開発者向けSaaS管理画面
- 音楽・映像・ゲーム系プロダクト
- クリエイティブツール（Figma, Linear）
- ダッシュボード・アナリティクス
- プロフェッショナル向けツール
成功のポイント
- 純黒より5-10%明るい黒を基調に
- テキストは純白より90-94%明度に
- 影より light-border で階層を作る
- アクセント色の彩度は抑えめに
- 広告・ADSENSE と相性を事前確認