Ideaxis

https://github.com/Ryomachi/Ideaxis

Next.js

TypeScript

React

AWS

PostgreSQL

AIを駆使しながらアイディアの収束、発散を助けるアプリ。

中町俊介

a a

enari_K

推しアイデア

miroのような自由に複数人で編集できるキャンバスに様々なAI機能を搭載!付箋の整理から画像生成、そしてチャット型のAIを使ってアイディアを負担なく形にできる!

作った背景

既存の、アイディアを整理するアプリではアイディアを自由に書き出すことはできるが、pdfや画像から文字情報をアップロードするインプット機能や、画像や動画を生成するアウトプットに不足を感じていた。

推し技術

WebSocket(同時編集機能) , 3JS(3Dアバター) , Hono

プロジェクト詳細

どんなアプリ?

🤔 こんなお悩み、ありませんか?

  • アイディアをたくさん思いついても、整理が追いつかない...
  • チャットAIは便利だけど、過去の内容を探し直すのが面倒...
  • 議事録が溜まっていて、次のアクションが見えてこない…

💡 そんなときに、Ideaxis!

チャット × キャンバスを一つにまとめた、アイディア整理アプリです。 話しかけながら使えて、情報を視覚的に整理できます。


このアプリの強み

1. とっつきやすい、かゆいところに届く設計

直感的なチャット機能に加え、投稿内容を自動で分類・整理。 何も難しい操作は必要ありません。

2. アイディアを、みんなで形に

キャンバス機能は一人でも使えるのはもちろん、複数人での同時編集も可能!

「見るのはOKだけど編集されたくない...」という場合は、閲覧権限の設定で対応できます。

3. 多様なインプットに対応

Word・PDF・画像などのファイルをそのままAIに読み込ませるだけで、自動で文字起こし&分類。手間なくナレッジが蓄積されます。

4. アイディアをそのまま形に

プレゼン用の画像・動画も、アプリに組み込まれているので直接生成できます。 わざわざ別のタブで生成AIを開く必要はありません!

5. 使い込むほど、自分仕様に

慣れてきたらカスタムプロンプトやテンプレートを活用して、より精度の高い整理・生成が可能に。

  • 付箋一枚単位で画像生成のプロンプトを指定
  • カスタムプロンプトで、AIの出力精度をさらに向上
  • 要件定義書の項目ごとに出力をコントロール
  • チャットのコマンド機能で、AIへの指示をさらに細かく

技術スタックとアーキテクチャ

image

技術スタック

Frontend

技術バージョン用途
Next.js16Reactフレームワーク (App Router)
React19UIライブラリ
Konva / react-konva10 / 192Dキャンバス描画エンジン
Zustand5状態管理
Tailwind CSS4スタイリング
Framer Motion12アニメーション
Three.js / @pixiv/three-vrm0.170 / 3.33Dアバター表示(バーテンダー)
Socket.IO Client4.8リアルタイム通信
Lucide React0.563アイコン
TypeScript5型安全

Backend

技術バージョン用途
Hono4.11HTTPフレームワーク
Prisma6.0ORM / マイグレーション
PostgreSQL16データベース
Socket.IO4.8リアルタイム通信(WebSocket)
Anthropic SDK0.74Claude API クライアント(直接)
Anthropic Bedrock SDK0.26Claude API クライアント(Bedrock経由)
AWS SDK (S3, Bedrock Runtime)3.99xAWSサービス連携
Google GenAI SDK1.42Gemini API クライアント
Mammoth1.11Word文書テキスト抽出
Zod4.3バリデーション
aws-jwt-verify5.1Cognito JWT検証
TypeScript5.9型安全

AI Engine (現在停止中)

技術用途
FastAPIHTTPフレームワーク
Anthropic SDKClaude API クライアント
LangGraph / LangChainAIワークフロー
VoiceVox音声合成
Boto3AWS SDK

インフラ

技術用途
TerraformIaC(インフラのコード管理)
Docker / Docker Composeコンテナ化 / ローカル開発
GitHub ActionsCI/CD(OIDC認証でAWSにデプロイ)

AWSアーキテクチャ

使用サービス一覧

カテゴリサービス用途
ネットワークVPCネットワーク基盤 (10.0.0.0/16)
Public Subnet × 2ALB, NAT Gateway配置
Private Subnet × 2ECS, RDS配置
Internet Gatewayインターネット接続
NAT Gateway + EIPPrivate Subnetからの外部通信
コンピュートECS Fargateコンテナ実行 (Frontend, Backend, Engine)
ECRコンテナイメージレジストリ (3リポジトリ)
ロードバランシングALBパスベースルーティング
CDNCloudFrontHTTPS終端、静的アセットキャッシュ
データベースRDS PostgreSQL 16アプリケーションデータ
ストレージS3アップロードファイル、生成画像/動画
認証Cognitoユーザー認証 (OAuth, SRP)
AI/MLBedrock (us-east-1)Claude Sonnet 4.6, Claude 3.5 Haiku
Transcribe音声認識(ストリーミング)
シークレットSecrets ManagerDB接続情報
SSM Parameter StoreAnthropic API Key
監視CloudWatch Logsコンテナログ (30日保持)
SSLACMSSL/TLS証明書
CI/CDIAM OIDC ProviderGitHub Actions認証

ハッカソン開発記録まとめ

2/8 キックオフ

MVP:「3Dアバターを活用した要件定義書の作成」

  • 3Dアバターをメインインターフェースとし、背後でカンバンボードを表示する構成
  • 技術スタック:Next.js(フロント)/ TypeScript・Python(バック)/ AWS + Terraform
  • インフラ:CloudFront → ALB → ECS(3コンテナ: フロント/バック/エンジン)→ RDS(PostgreSQL)
  • LangChain を会話制御に採用

2/10 インフラ設計詰め

  • 静的ホスティング(S3)ではなく ECS 配信を採用(共同編集のリアルタイム性が理由)
  • NAT Gateway を廃止し VPC エンドポイントへ置換(コスト削減)
  • CI/CD を先行して整備し、インフラ基盤を固めてから機能開発を進める方針を確定

2/11 メンバー追加(えなり・磯野が参加)

  • コンテナ構成を見直し、バックエンドとエンジンを統合(2コンテナ構成へ変更)

2/14 精度改善フェーズへ移行

  • 基本実装は完了。LLM出力を箇条書き・配列形式に構造化し付箋化するワークフローを確定
  • 付箋 → 抽象化 → ネクストアクション → 要件定義書、という自動生成フローを設計
  • イベント当日までに基本機能を完了し、メンターのアドバイスをもとに拡張機能を実装する計画

2/18 MVP仕上げ・オフライン開発日

  • PDF・画像の入力対応は完了。DOCS形式を追加予定
  • 3Dアバターはほぼ完成(近未来系の女性アバターを暫定採用)
  • 新規キャンバス作成時に「用途モード選択」を導入(要件定義書作成 / 資料まとめ等)
  • 入力対応と要件定義書アウトプットが接続されれば MVP完成 の見込み

2/22 ⚠️ 方針転換(メンターのアドバイスによる)

変更前: タスク管理の実装を進めていた
変更後: 「何を押し出したいか」を先に定義することを最優先に切り替え

  • 具体的なユースケースを改めてチームで議論
  • チャット機能がサブ機能になっていた問題を認識 → 「壁打ち」としてのチャットをコア機能に再定義
    • コンテクストを保持した対話(チャットでしかできない価値)を充実させる
    • 将来的にメンバー間で会話履歴を共有できる機能も検討

主要な方針変遷サマリー

時期変更内容理由
2/10S3 → ECS 配信に変更共同編集のリアルタイム性
2/11コンテナ3構成 → 2構成に統合構成の簡略化
2/22タスク管理優先 → ユースケース定義優先に転換メンターのアドバイス
2/22チャットをサブ機能 → コア機能に再定義差別化の観点から

チーム開発で工夫したこと

・それぞれの人が強みを持っているので、その強みを活かせるような役割分担をしました。

・同じ機能を複数人でいじると、コンフリクトが生じてしまうので、できる限り機能が被らないように工夫しました。また、データベースの設計は全体設計に関わる重要なところなので、スキーマの設定をした後にはコミット&プッシュをして確認をするなど工夫しました。

・口頭で伝えるだけだと、認識の齟齬が生じてしまう可能性があるため、できる限り文字で情報を共有するように心がけました。

今後の拡張方針

・チャット部分

・音声の入力機能を追加する


画面遷移

image

中町俊介

@d75ef1cdf71e9e13