Hackbase.ai

アイデア発想

何が面白いか

ハッカソンの成否を分けるのは、最初の1時間の混沌とした計画時間です。このツールは、その最も面倒な部分をAIで自動化する点に新規性があります。テーマを入力するだけで、アイデアの種、役割分担、タスクリストを盛り込んだ「作戦ボード」を一瞬で生成。単なるプロジェクト管理ツールと違い、創造的な「初動」を直接支援します。Geminiを用いたワークフロー生成技術により、漠然としたお題から具体的なアクションプランへと変換する体験を提供し、チームを即座に開発へと導きます。

今後改良したいところ

今後は、今は単一テーマの静的なデモですが、将来的には自由なテーマ入力に対応し、生成されたボードをチームでリアルタイムに共同編集・保存できる機能を追加したいです。そうなれば、単なるキックスターターから本格的なハッカソン協業ツールへと進化できると考えています。

使い方

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

ハッカソンの漠然としたテーマを、具体的なアクションプランへと変換するプロダクトです。

ハッカソンテーマを用意する

作戦ボードの基盤となるハッカソンテーマ文を用意します。例えば「地域の課題を解決するAIアプリ開発」のように、具体的なテーマを入力エリアに準備します。

AIが作戦ボードデータを生成

AIは「ハッカソンの企画を支援するAIアシスタント」として、テーマに基づき作戦ボードのデータをJSON形式で設計します。アイデア出し、技術選定、役割分担、提出物の各レーンに、創造的で遊び心のあるカードを生成するように設計されています。

作戦ボードの内容を確認

生成された作戦ボードは、各レーンに整理されたカード群として表示されます。例えば「アイデア出し」レーンには「高齢者の見守りアプリ」のような具体的な提案が含まれ、すぐに議論を始められます。

制作メモ

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

これは、一般的なプロジェクト管理ツールがタスク実行フェーズを支援するのに対し、テーマから「アイデアの種」まで引き出す初動のシミュレーションに近い役割ですね。ふわっとした企画段階から具体的な形が見えるのは、チームの方向性を合わせるのに役立ちそうです。

ソース

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

主要ファイル

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

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

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

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

コードプレビュー

source/app/page.tsx

/* eslint-disable @next/next/no-img-element */
'use client';

import { useState } from 'react';
import { sampleTrace } from '../data/sample-trace';

// NOTE: Core logic (source/core) is NOT imported to keep the demo self-contained and offline.
// Types are re-declared here for the UI.
type MissionCard = {
  id: string;
  type: 'idea' | 'tech' | 'role' | 'checklist';
  lane: 'アイデア出し' | '技術選定' | '役割分担' | '提出物';
  title: string;
  description: string;
};

type MissionBoard = {
  inputTheme: string;
  cards: MissionCard[];
};

const pipelineSteps = [
  { id: 'analyzeTheme', name: 'テーマ分析' },
  { id: 'generateMissionBoard', name: '作戦ボード生成' },
];

const cardColors = {
  idea: 'bg-blue-100 border-blue-300',
  tech: 'bg-green-100 border-green-300',
  role: 'bg-yellow-100 border-yellow-300',
  checklist: 'bg-purple-100 border-purple-300',
};

export default function HackathonOpsRoomPage() {
  const [board, setBoard] = useState<MissionBoard | null>(null);
  const [isRunning, setIsRunning] = useState(false);
  const [currentStep, setCurrentStep] = useState<string | null>(null);

  const handleReplayTrace = () => {
    if (isRunning) return;
    setIsRunning(true);
    setBoard(null);
    setCurrentStep(pipelineSteps[0].id);

    setTimeout(() => {
      setCurrentStep(pipelineSteps[1].id);
      setTimeout(() => {
        setBoard(sampleTrace.step_generateMissionBoard.output);
        setIsRunning(false);
        setCurrentStep(null);
      }, 800);
    }, 800);
  };

  const lanes: MissionCard['lane'][] = ['アイデア出し', '技術選定', '役割分担', '提出物'];

  return (
    <div style={{ fontFamily: 'sa
...

全文を別ページで見る →

ハッカソン作戦室

使い方