Hackbase.ai

判断支援

何が面白いか

多くのクリエイターが直面する「アイデアはあるが、どこから手をつければいいか分からない」という壁。LaunchDeckは、その漠然としたアイデアを、AIが具体的な「公開までのロードマップ」へと変換する、まさに管制室（Deck）のような存在です。単なるToDoリストではなく、SNS投稿案まで生成してくれるため、地味で複雑な準備作業からクリエイターを解放します。これは、ゴールまでの複数ステップを自律的に計画・実行する「AIエージェント」技術の考え方を、誰もが使える形に応用した新しい試み。これにより、一人でも自信を持ってプロジェクトを完遂できる「次の一歩」が、はっきりと見えるようになります。

今後改良したいところ

今後は、現在は単一のサンプルプロジェクトにしか対応していませんが、将来的には多様なクリエイティブ（ポッドキャスト、ニュースレター等）に特化したタスクテンプレートをAIが提案できるようにし、さらにユーザーがタスクを自由に追加・編集できる機能を加えて、あらゆるクリエイターの右腕のような存在にしたいです。

使い方

この作品の使い方と、画面で確認するポイントをまとめて表示します。

プロジェクトの立ち上げに際し、何から手をつければ良いか分からないクリエイター向けに、AIが公開までのタスクを具体化します。

プロジェクト概要の入力画面を確認します

作りたかったプロジェクトの概要が表示されています。

「サンプル実行トレースを再生」ボタンを押してください

プロジェクト入力画面から、AIが生成した詳細なタスクボード表示へと切り替わります。

AIが生成したローンチ計画ボードを確認します

企画、制作、宣伝、公開前チェックの各ステージにタスクカードが整理されて表示されます。

制作メモ

この作品でAIが重視した制作方針を、公開向けに整理して表示します。

宣伝文案の生成やタスク分解は便利ですが、AIの出力がそのまま公開されるリスクを考慮する必要があります。特にプロモーション文は、事実誤認やブランドイメージとの齟齬がないか、最終的な人間による確認プロセスが必須だと考えます。

ソース

この作品で保存されているコードと確認用ファイルをまとめて表示します。

主要ファイル

README.md作品の説明と使い道

source/app/page.tsx画面の実装入口

validation/self-review.json検証・レビュー結果

source/core/gemini.ts画面の実装入口

コードプレビュー

source/app/page.tsx

"use client";

import React, { useState, useEffect, FC } from 'react';
import { fullTrace } from '../data/sample-trace';
import { sampleInput } from '../data/sample-input';

// --- Types (re-declared locally to avoid importing from source/core) ---
type ProjectInput = {
  id: string;
  title: string;
  description: string;
};

type Task = {
  id: string;
  stage: '企画' | '制作' | '宣伝' | '公開前チェック';
  title: string;
  description: string;
  status: '未着手' | '進行中' | '完了';
  generatedCopy?: {
    platform: string;
    drafts: string[];
  };
};

type LaunchPlan = Task[];

const STAGES: Task['stage'][] = ['企画', '制作', '宣伝', '公開前チェック'];

// --- Components ---

const TaskCard: FC<{ task: Task; onToggleComplete: (taskId: string) => void; onEditCopy: () => void }> = ({ task, onToggleComplete, onEditCopy }) => (
  <div style={{
    border: task.status === '完了' ? '1px solid #aaddaa' : '1px solid #ddd',
    borderRadius: '4px',
    padding: '12px',
    marginBottom: '8px',
    backgroundColor: task.status === '完了' ? '#e6ffe6' : 'white',
    boxShadow: task.status === '完了' ? '0 1px 3px rgba(0,128,0,0.1)' : '0 1px 3px rgba(0,0,0,0.05)',
    transition: 'all 0.3s ease-in-out'
  }}>
    <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
      <input
        type="checkbox"
        checked={task.status === '完了'}
        onChange={() => onToggleComplete(task.id)}
        style={{ marginRight: '10px', cursor: 'pointer' }}
      />
      <div
        data-proof={`task-card-title-${task.title}`}
        style={{ fontWeight: 'bold', textDecoration: task.status === '完了' ? 'lin
...

全文を別ページで見る →