プロンプトテンプレート

KPIカードとグラフを備えたデスクトップ向けSaaS運用ダッシュボードのモックアップ

このプロンプトは、HELIX OPSという架空の運用プラットフォームのデスクトップ向けダッシュボード画面をまるごと描写します。左のサイドバー、上部のフィルターバー、KPIカードの列、折れ線グラフ、データテーブル、アラートパネルを、スレート、コバルト、ティール、白の寒色系の配色で、きっちりとしたグリッドに配置します。作例では、ラベルが読みやすく、各KPIカードにスパークライン、資産の健全性を示すドーナツグラフ、拠点ごとの棒グラフ、アクティブなアラートの一覧を備えた、実在しそうな運用ダッシュボードが生成されました。デザイン作業を始める前に製品のイメージをつかむ、ランディングページやピッチ資料にリアルな画面を載せる、社内ツールのレイアウトや配色を検討する、といった用途に使えます。製品名、配色、パネルの構成を差し替えて、ご自身の製品に合わせてください。

アスペクト比 16:9参照画像は不要です
HELIX OPSという名前のデスクトップ運用ダッシュボード。暗いサイドバー、4枚のKPIカード、折れ線グラフ、ドーナツグラフ、棒グラフ、資産テーブル、アラート一覧があります
Nano Banana Pro で GPT Image 2 を使って作成した例です。入力内容や設定によって結果は変わります。

テンプレートのプロンプト

プロンプトを画像ジェネレーターにコピーし、角かっこ内の内容を自分のものに置き換えてください。

Create a high-end desktop SaaS analytics dashboard mockup for a fictional platform named HELIX OPS, displayed on a 16:10 monitor canvas. Use a cool palette of slate, cobalt blue, teal, pale gray, and white, with tight grid alignment. Include a left sidebar, top filter bar, KPI cards, line charts, data table, alert panel, crisp typography, realistic labels, and production-ready spacing.

プロンプトのアイデア:github.com 元の投稿を見る

こんな用途に向いています

  • 実際のUIができる前のSaaSランディングページ用ヒーロー画像や機能紹介画像
  • 製品の完成イメージを示すピッチ資料のスライド
  • 社内向け運用ツールの初期段階でのレイアウトや配色の検討
  • Figmaでダッシュボードを作り始めるデザイナー向けの参考画面

プロンプトのコツ

  • HELIX OPSをご自身の製品名に置き換えてください。ロゴの文字をきれいに保つため、短い名前がおすすめです
  • 必要なパネルを並べたい順に列挙し、生成された画面でパネル名とレイアウトが指定どおりか確認してください
  • 配色は16進コードではなく、スレート、コバルト、ティールのような色名で指定してください
  • 数値、日付、ラベルは公開前に確認してください。いずれも架空のもので、計算が合わない場合があります
  • 生成された画面は画像であり、動作するコードではありません。レイアウトはデザインツールで作り直してください