本文へ移動
つまずき地図Vibe Dev Navigator
メニュー

AIでサービスをつくる、非エンジニアのための実践ガイド

Web全体デザイン

ダークミニマル

Dark minimal

暗い面と少ない差し色で、集中しやすく落ち着いた印象を作るデザインです。

危険度: 通常ダーク

今すぐ使う

見た目と印象をつかむ

見本の空気感が近いかを確かめてから、そのままAIへの依頼文へつなげられます。

10秒で分かる説明

真っ黒ではない暗い背景へ、明るさを抑えた文字と一色のアクセントを置きます。

受ける印象

  • 集中
  • 洗練
  • 落ち着き

AIへの依頼文

ダークミニマルへ整える依頼

危険度:通常

内容と対象をひと目確認してから使うと安心です。

分かる範囲で2か所だけ

自分の状況を入れる

空欄のままでもコピーできます。秘密情報は書かずにお試しください。

コピーされる依頼文を確認
目的:
暗い背景でも階層と操作が明快な、落ち着いたミニマル画面へ整える。

現在の状態:
【ここに、何をしたらどうなったかを書く】

今回依頼すること:
指定した画面をダークミニマルに整えてください。真っ黒ではない暗い背景、明るすぎない本文色、少ない差し色で階層を作ってください。状態や操作を色だけで伝えず、フォーカスと境界を明確にしてください。

変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】

変更しない範囲:
機能、本文、状態の意味、ブランドカラーの役割、ライト表示の設定は勝手に削除しない。

完了条件:
- 見出し、本文、補助情報の明るさが段階的である
- ボタンと入力欄の境界を見分けられる
- フォーカスとエラーが色以外でも分かる

実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する

実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点

使う前に確認
使った後に確認

確かめる

向いている場面を見分ける

好みだけで決めず、このサイトの目的と情報量に合うかを確認します。

向いている場面

  • 長時間使う制作・管理ツール
  • 写真や映像を主役として見せる

向いていない場面

  • 明るく親しみやすい印象を最優先する
  • 暗い面で文字や境界が見えにくくなる場合

理解する

特徴と作り方を知る

AIへ伝える名前と、見た目を崩さず実装するための確認点です。

見た目の特徴

  • 純黒を避け、濃い灰色で面を分ける
  • 文字の明るさを見出し・本文・補助で変える
  • 差し色を主要操作へ限定する

実装時の確認

  • OS設定に応じる場合はライト表示も確認する
  • 境界、フォーカス、エラーを色だけで伝えない