LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@vibecoding

AIツール開発のUX設計思想

Posted at

はじめに

OSS開発において、「使いやすさ」と「保守しやすさ」はしばしば相反する要求です。今回は、Prompt Schedulerの開発を通じて学んだ、AIツールにおけるUX設計の思想と実装について詳しく解説します。

免責事項

本記事で紹介するPrompt Schedulerは、私が個人的に開発したオープンソースツールです。Anthropic社のClaude、Claude Codeとは一切関係のない独立した個人開発プロジェクトであることを明記します。

UX設計の3つの核心原則

1. 認知負荷の最小化

課題: AIツールは複雑な概念を扱うため、ユーザーの認知負荷が高くなりがち

解決アプローチ:

# 複雑な設定を覚える必要がない
npm run run      # シンプルで直感的
npm run next     # 意味が明確
npm run status   # 状態確認も簡単

設計判断:

  • コマンド名は動詞で統一（run, next, reset）
  • 引数よりもnpmスクリプトを優先
  • ヘルプはnpm run helpで即座に確認可能

2. 段階的複雑性（Progressive Complexity）

基本レベル: npmスクリプト

npm run run      # 最もシンプル
npm run status   # 状況確認

中級レベル: 基本オプション

tsx src/claude-schedule.ts run --stop-at 5pm
tsx src/claude-schedule.ts run --hours 3

上級レベル: 全オプション組み合わせ

tsx src/claude-schedule.ts run \
  --prompt-file ~/custom/prompts.jsonl \
  --mode sequential \
  --ignore-approaching-limit \
  --hours 6

3. 失敗に対する寛容性（Fault Tolerance）

エラーメッセージの人間性:

if (!existsSync(promptFile)) {
  console.log(colors.error(`❌ Error: ${promptFile} not found`));
  process.exit(1);
}

復旧可能性の提供:

npm run reset    # いつでも初期状態に戻せる
npm run status   # 現在の状況を把握できる

ワンライナーインストールの実装思想

技術的チャレンジ

従来の問題:

# 複雑すぎる手順
git clone https://github.com/prompt-scheduler/cli.git
cd cli
npm install
cp prompts/prompts.jsonl.sample prompts/prompts.jsonl
# セットアップ手順が多すぎる...

解決策:

# ワンライナーで完結
curl -fsSL https://raw.githubusercontent.com/prompt-scheduler/cli/main/install.sh | bash

install.shの設計哲学

#!/bin/bash
# エラーハンドリング
set -e

# 明確な進捗表示
echo "🚀 Installing Prompt Scheduler..."

# 依存関係チェック
check_requirements() {
  # Node.js, git, tmuxの存在確認
  # バージョン要件の確認
}

# 既存インストールの検知と更新
handle_existing_installation() {
  if [ -d "$INSTALL_DIR" ]; then
    echo "📦 Existing installation found, upgrading..."
    # 既存設定の保持
  fi
}

UX設計のポイント:

  • 進捗の可視化: 絵文字と明確なメッセージ
  • エラーの親切な説明: 何が問題で、どう解決すべきか
  • 既存環境の尊重: 設定ファイルの保持

コマンドライン設計の美学

一貫性のあるインターフェース

# 全て同じパターンで統一
tsx src/claude-schedule.ts [command] [options]

# コマンド部分
run     # 実行
next    # 次を実行  
status  # 状況確認
reset   # リセット
help    # ヘルプ

# オプション部分
--stop-at TIME
--hours NUMBER
--prompt-file PATH
--mode MODE
--ignore-approaching-limit

直感的なオプション命名

# ❌ 覚えにくい
--stop-time
--duration
--file
--execution-mode

# ✅ 直感的
--stop-at 5pm
--hours 3
--prompt-file ~/my-prompts.jsonl
--mode sequential

エラーハンドリングの人間工学

段階的エラー情報

// レベル1: 問題の要約
console.log(colors.error(`❌ Error: Invalid prompt index ${index}`));

// レベル2: 具体的な解決策
console.log(colors.info(`Available indices: 1-${prompts.length}`));

// レベル3: 参考情報
console.log(colors.muted('Use "npm run status" to see all prompts'));

予防的UX設計

// ユーザーが間違いやすい部分を事前に検証
function validatePromptFile(file: string): void {
  if (!existsSync(file)) {
    console.log(colors.error(`❌ Prompt file not found: ${file}`));
    console.log(colors.info('💡 Try creating it from the sample:'));
    console.log(colors.accent('   cp prompts/prompts.jsonl.sample prompts/prompts.jsonl'));
    process.exit(1);
  }
}

フィードバックシステムの設計

リアルタイム進捗表示

// 実行中の視覚的フィードバック
console.log(colors.primary(`🎯 Executing prompt ${i + 1}:`), colors.accent(prompt.prompt));
console.log(colors.success(`✅ Prompt ${i + 1} completed`));
console.log(colors.info(`⏳ Waiting ${prompt.default_wait}...`));

状況把握の支援

📊 PROMPT STATUS

📄 Using prompt file: prompts/prompts.jsonl

1. ✅ SENT Create responsive login form (2024-01-15 14:30:25)
2. ✅ SENT Add error handling (2024-01-15 14:45:10)  
3. ⏳ PENDING Style with modern CSS (N/A)
4. ⏳ PENDING Add password strength indicator (N/A)

カラーパレットとタイポグラフィ

情報階層の視覚化

const colors = {
  primary: chalk.cyan,      // メインアクション
  success: chalk.green,     // 成功状態
  warning: chalk.yellow,    // 警告
  error: chalk.red,         // エラー
  info: chalk.blue,         // 情報
  muted: chalk.gray,        // 補助情報
  accent: chalk.magenta,    // 強調
  highlight: chalk.bgCyan.black  // ハイライト
};

情報密度の最適化

# ❌ 情報過多
[2024-01-15T14:30:25.123Z] INFO: Executing prompt number 1 of 8 total prompts: "Create a responsive login form with validation" (session: /tmp/tmux-1000/default, wait: 15m, mode: repeat)

# ✅ 適切な情報量
🎯 Executing prompt 1: Create responsive login form

設定管理のUX

ゼロコンフィグレーション原則

# 設定不要で即座に動作
npm run run

# 必要時のみカスタマイズ
tsx src/claude-schedule.ts run --prompt-file ~/my-prompts.jsonl

設定の段階的複雑化

{"prompt": "Simple task", "tmux_session": "/path/to/session", "sent": "false", "sent_timestamp": null, "default_wait": "5m"}

最低限の項目のみ:

  • prompt: やりたいこと
  • tmux_session: どこで実行するか
  • その他は自動管理

学習コストの最小化戦略

発見可能性（Discoverability）

# ヘルプが常にアクセスしやすい
npm run help
tsx src/claude-schedule.ts help

# 状況確認で次のアクションを示唆
npm run status
# → "Use 'npm run run' to execute pending prompts"

メンタルモデルの一致

# ユーザーの期待に合致
npm run run      # "実行する" → 全部実行
npm run next     # "次へ" → 1つだけ実行
npm run status   # "状況" → 現在の状態
npm run reset    # "リセット" → 初期状態に戻す

まとめ：AIツールUXの今後

重要な設計原則:

  1. 認知負荷の最小化 - 覚えることを減らす
  2. 段階的複雑性 - 必要に応じて高度な機能を提供
  3. 失敗への寛容性 - エラーから回復しやすく
  4. 直感的なインターフェース - ユーザーの期待に合致
  5. 即座のフィードバック - 何が起こっているかを明確に

AIツール開発において、技術的な複雑さをユーザーから隠し、直感的で使いやすいインターフェースを提供することが、ツールの成功を左右します。

次世代AIツールに向けて:

  • より自然な言語でのコマンド操作
  • 文脈を理解した自動設定
  • 予測的なエラー防止

GitHub: https://github.com/prompt-scheduler/cli

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?