AI SaaS 設計ガイド -- "Neural Terminal"
AI SaaS のインターフェースは「魔法のような体験」を提供するという使命を帯びている。ユーザーはプロンプトを投げ、AIが応答する。そのインタラクションをシンプルかつ神秘的に演出するのが、このカテゴリのUI設計の核心だ。ChatGPT の会話の自然さと Midjourney の創造的エネルギーを融合させたアプローチを、ここでは「Neural Terminal」と名付けた。
核心となる設計思想
魔法のような体験。AIの力を感じさせるUI。#0f0f0f の暗闘の中で、#10a37f のグリーンがAIの知性を象徴し、ストリーミングテキストが一文字ずつ画面に浮かび上がる。
1. デザイン哲学 -- 「未来のターミナル」
AIとの対話空間
このテンプレートの根底にあるのは「未来のコマンドセンター」だ。
暗い空間の中でターミナルのようなインターフェースがグリーンの光を放つ。AIの応答がリアルタイムでストリーミングされ、一文字ずつ画面に浮かび上がる。#0f0f0f のピュアブラック背景にユーザーメッセージの #2a2a2a バブルが浮き、AIの応答は背景なしのクリーンなテキストとして表示される。
AIチャット プレビュー
以下はこのテンプレートを適用したAIチャットインターフェースの実例だ。
2. カラーパレット
背景色の階層
Base
#0f0f0f
Sidebar
#1a1a1a
Input
#212121
User Bubble
#2a2a2a
アクセントカラー
AI Green
#10a37f
Creative
#7c3aed
3. コンポーネント詳細
チャットバブル
ユーザーとAIのメッセージは視覚的に明確に区別される。
- ユーザー: 右寄せ、#2a2a2a背景、角丸 18px（左下のみ4px）
- AI: 左寄せ、背景なし、28pxグラデーションアバター付き
- メッセージ幅: max-width 80%
- 行間: 1.7 で長文を読みやすく
コードブロック
AI応答内のコード表示は専用コンポーネントで処理。
- 背景: #1a1a1a
- ヘッダー: #2a2a2a、言語名 + コピーボタン
- フォント: Monospace 14px
- ボーダー: 1px solid rgba(255,255,255,0.05)
入力バー
画面下部に固定されたメッセージ入力エリア。
- 背景: #212121
- 角丸: 16px
- フォーカス: accent-ai グロー (0 0 0 2px rgba(16,163,127,0.20))
- 送信ボタン: 右端、32px、accent-ai gradient (active)
4. レスポンシブ戦略
| 画面サイズ | サイドバー | チャット幅 | 入力バー |
|---|---|---|---|
| Desktop (>1024px) | 260px 表示 | max 768px 中央 | max 768px 中央 |
| Tablet (640-1024px) | 折りたたみ可能 | max 768px | max 768px |
| Mobile (<640px) | オーバーレイドロワー | フルワイド | フルワイド |
5. 実装チェックリスト
- [ ] 3層背景 (#0f0f0f / #1a1a1a / #212121)
- [ ] サイドバー (260px, 会話履歴, 日付グループ)
- [ ] チャットバブル (ユーザー右/AI左, max 80%)
- [ ] AIアバター (28px, #10a37f gradient)
- [ ] コードブロック (言語名 + コピー + シンタックス)
- [ ] 入力バー (角丸16px, フォーカスグロー)
- [ ] モデルセレクター (ドロップダウン)
- [ ] ストリーミングカーソル (blink animation)