opening.mp4
Webアプリは以下からアクセスできます。
「OUTPUT QUEST 叡智の継承者」は、Zennで記事を投稿し、勇者を成長させていくRPG風学習支援Webアプリです。ゲーミフィケーション要素がアウトプットという行為を「学びの冒険」という体験に変え、学習の継続をサポートします。学ぶ楽しさと理解が深まる達成感をユーザーに届け、"人生の幸福度を高める体験価値" を提供したい。そんな想いを込めて開発しました。
Next.js + Tailwind CSS + TypeScriptで開発し、Vercelにデプロイしています。
-
アウトプットを "学びの冒険" へ
Zennで技術記事を書くと、あなたの分身である勇者がレベルアップします。「称号」や「アイテム」の獲得、「仲間」との出会い...。数々のゲーミフィケーション要素が、日々の地道なアウトプットをワクワクする "学びの冒険" へと変えます。楽しみながら学習を継続し、知識と理解を深める壮大な旅へとあなたを導きます。
-
成長の可視化
あなたが積み重ねてきた学びの軌跡を、"冒険ログ" として自動で記録します。過去の自分が歩んできた道筋を振り返ることは、確かな成長の実感と自信に繋がり、次なる挑戦への原動力となります。
-
次の学びの冒険へ
AIが仲間の賢者として、あなたのZennの過去の投稿を分析し、次に書く記事に最適なテーマを提案します。賢者（AI）はあなたの成長に最適な "学びのタネ" を見つけ出し、新たな知的好奇心を刺激します。何を書くか迷った時、賢者はきっとあなたの道標となってくれるでしょう。
サブタイトルの「叡智の継承者」は、先人の知識を受け継ぎ、自らの言葉で新たな価値を生み出す学習者の姿を表しています。「一人一人のアウトプットが誰かの道しるべとなり、やがて時代を超える叡智として継承されていく...」そんな願いと、全ての学習者への敬意を込めております。
# 1. 早速、冒険をはじめよう！
ゲストユーザーは、開発者のZennアカウント「@aoyamadev」と連携済みの状態で利用できるため、すぐに OUTPUT QUEST の世界を体験できます！# 1. Clerkによるログイン
連携ページ（/connection）にて、ログインを実行。
# 2. Zennのアカウントと連携
ログイン完了後、連携したい自分のZennアカウントのユーザー名を入力して、連携。
# 3. 冒険をはじめよう！
ログインとZennアカウントの連携が完了したら、早速冒険をはじめよう！「OUTPUT QUEST 叡智の継承者」の各ページの機能について紹介します。
ゲームやアニメのオープニングを彷彿とさせる演出により、"冒険の始まり" を視覚的に表現しております。
opening.mp4
学びの冒険の拠点となるダッシュボード。 現在の勇者のレベルやZennの投稿数、これまでに集めたアイテムや仲間たちを一目で確認でき、Xへシェアすることも可能です。
Zennで投稿した記事が一覧表示され、学びの記録として振り返ることができます。記事はカード型UIで表示され、クリックすることでZennの記事ページにアクセスできます。
ボタン一つでAI（賢者）があなたのZennの過去記事を解析し、次に執筆すべきおすすめのテーマや方向性を提案します。提案されたアイデアは次のアウトプットの構想を練る強力なヒントになるはずです。
※記事探索機能には、「Gemini 3 Flash Preview（無料枠）」をAPIとして利用しています。
Gemini 3 Flash Preview（無料枠）の採用理由は以下の2点です。
- OUTPUT QUESTは、あくまで「ポートフォリオ用に開発したWebアプリ」であり、想定利用者は面接官や自分自身に限定されるため無料枠で十分と判断
- 執筆や文字数を出すコンテンツ制作（記事探索機能） において、Geminiの「1Mコンテキストウィンドウ」が非常に役立つため
Gemini 3 Flash Preview（無料枠）のレートリミット
| 指標 | 説明 | 制限値 |
|---|---|---|
| RPM | 1分あたりのリクエスト数 | 5 |
| TPM | 1分あたりのトークン数（入力） | 250,000 |
| RPD | 1日あたりのリクエスト数 | 100 |
勇者の現在のステータスを確認できます。勇者の現在のレベルや獲得した「称号」、これまでの成長過程が刻まれた「冒険ログ」を見返すことができます。
これまでの学びの軌跡を時系列で確認できます。
勇者がレベルアップ報酬で獲得した称号を一覧で確認できます。
勇者の仲間に加わったキャラクターを確認できます。一人一人のキャラクターの詳細情報も確認できます。
勇者がレベルアップ報酬で入手したアイテムを確認できます。一つ一つのアイテムの詳細情報も確認できます。
Clerk認証によるログイン、Zennのアカウント連携を管理できます。ログインとZenn連携をすることで、Zennの投稿データがアプリ内のUIに反映されます。アプリはログイン無し（ゲストユーザー）でも一部の機能を体験できます。
Zenn連携をしてアプリの全機能を活用するメリットや、ゲストユーザーとしてアプリを手軽に体験する方法について解説します。自分に合った方法でOUTPUT QUESTの世界を体験できます。
OUTPUT QUESTの世界観と使い方、アウトプットを通じて成長する「RPG風学習支援Webアプリ」の始め方を解説します。アプリの概要、コンセプト、主要機能について紹介しております。
OUTPUT QUESTの利用規約を確認できます。
OUTPUT QUESTのプライバシーポリシーを確認できます。
- Next.js(App Router)：v16.1.1
- React：v19.2.3
- TypeScript：v5.9.3
- Tailwind CSS：v4.1.18
- shadcn/ui
- Motion：v12.25.0
- Howler.js：v2.2.4
- zod：v4.3.5
- Vercel AI SDK：v6.0.24（TypeScript Toolkit）
- AI SDK Core：v3.0.6（LLM：Gemini(gemini-2.5-pro)）
- AI SDK UI：v3.0.25（UI）
- react-markdown：v10.1.0
パフォーマンスとユーザー体験の最適化
- データフェッチ（拡張fetch＋RSC）により、キャッシュ制御・static rendering/dynamic renderingの切替・即時反映を最適化
- キャッシュ戦略（Data Cache/Router Cache/Full Route Cache）とPrefetchにより、初回表示・ページ遷移・再訪問を高速化し、UXを向上
- 複数のレンダリングモデル（SSG/ISR/Streaming SSR/PPR）で用途別に最適化
- Image/Font最適化、メタデータAPI、動的OGP生成によるSEO強化
Tailwind CSS
- ユーティリティでレイアウト・余白・レスポンシブを高速化し、一貫性を維持
- shadcn/ui と親和性が高く、コンポーネント拡張が容易
CSS Modules
- ローカルスコープでクラス競合を防ぎ、BEM不要で保守性を確保
- Grid/カスタムプロパティ/状態クラスなど複雑なスタイルを明確に分離・管理
- スタイル量の多い箇所はCSSを分離し、可読性・再利用性を向上
型安全性と開発効率の向上
- 静的型付けでエラーを早期発見し、バグを削減
- 型駆動リファクタリングと強力な補完で開発速度を向上
- Prisma/zodと併用し、API・DB・UI間の型整合性を担保
Next.jsとの最適な統合
- Next.js開発元によるサポートあり。VercelはNext.jsをホスティングする環境として開発されており、Next.jsのサーバーサイド機能を特別なセットアップなしに利用可能
- ゼロコンフィグでGitHubリポジトリと連携をするだけで簡単にデプロイ環境を構築可能
- プルリク単位で自動でプレビュー環境を利用可能
- JavaScriptやCSSファイルを自動で圧縮してCDN環境で配信
主要ライブラリ選定理由
- Clerk：安全な認証基盤とUIキットで実装を迅速化、ミドルウェア連携も容易
- Supabase + Prisma：型安全ORM＋Postgres運用、RLSやリアルタイムを活用可能
- shadcn/ui：Tailwind親和のヘッドレス/実装例で、拡張しやすくデザイン整合も保てる
- Motion：宣言的アニメーションと良好なパフォーマンスで演出/インタラクションを強化
- Vercel AI SDK：LLM呼び出しとストリーミングUIを簡素化、型安全な呼び出しが可能
- zod：サーバ/クライアントで同一スキーマを共有し、バリデーションと型を一元化
- Lucide React：軽量で揃ったスタイルのアイコン群、ツリーシェイキングで配信最適化
開発構成図はHTMLインフォグラフィックで表現しました。
outputquest/
├── .clerk/ # Clerk 認証設定
├── .claude/ # Claude Code設定
├── .cursor/ # Cursor Rules
├── .serena/ # Serena MCP
├── .vscode/ # VS Code 設定
├── .next/ # Next.jsビルド・キャッシュファイル
├── prisma/ # データベース関連ファイル
│ └── migrations/ # マイグレーションファイル
├── public/ # 静的ファイル
│ ├── audio/ # 音声ファイル
│ ├── gifs/ # アニメーション画像ファイル
│ ├── images/ # 画像ファイル
│ │ ├── arrow/ # 矢印画像
│ │ ├── button/ # ボタン画像
│ │ ├── card/ # カード画像
│ │ ├── common/ # 共通画像
│ │ ├── connection/ # Zenn連携情報用画像
│ │ ├── crown/ # 王冠画像
│ │ ├── hero/ # 勇者画像
│ │ ├── icon/ # アイコン類
│ │ ├── items-page/ # アイテムページ用画像
│ │ ├── nav-icon/ # ナビゲーションアイコン
│ │ ├── opengraph/ # OGP用画像
│ │ ├── party-page/ # なかまページ用画像
│ │ ├── plate/ # プレート画像
│ │ ├── readme/ # README用画像
│ │ ├── sns/ # SNSアイコン用画像
│ │ └── top-bg/ # トップページ背景用画像
│ └── videos/ # 動画ファイル
├── src/
│ ├── app/ # ルートディレクトリ（ルーティング管理）
│ │ ├── (main)/ # メイン（Route Groups）
│ │ │ ├── about/ # アバウトページ
│ │ │ ├── connection/ # Clerk認証・Zenn連携ページ
│ │ │ ├── connection-detail/ # Clerk認証・Zenn連携の解説ページ
│ │ │ ├── dashboard/ # ダッシュボードページ
│ │ │ ├── explore/ # 記事探索ページ
│ │ │ ├── items/ # アイテムページ
│ │ │ ├── logs/ # ログページ
│ │ │ ├── party/ # なかまページ
│ │ │ ├── posts/ # 投稿ページ
│ │ │ ├── privacy/ # プライバシーポリシーページ
│ │ │ ├── strength/ # つよさページ
│ │ │ ├── terms/ # 利用規約ページ
│ │ │ ├── title/ # 称号ページ
│ │ │ ├── layout.tsx # メイン（Route Groups）用レイアウトコンポーネント
│ │ │ └── MainLayout.module.css # メイン（Route Groups）用CSS Modules
│ │ ├── api/ # API Routes
│ │ │ ├── ai/ # AI(LLM)関連API
│ │ │ ├── user/ # ユーザー関連API
│ │ │ ├── webhooks/ # Webhook
│ │ │ └── zenn/ # Zenn連携API
│ │ ├── favicon.ico # ファビコン
│ │ ├── Home.module.css # トップページ用CSS Modules
│ │ ├── layout.tsx # アプリケーション全体のルートレイアウトコンポーネント
│ │ ├── page.tsx # ルートページ（トップページ）
│ │ ├── robots.ts # 検索エンジン向けrobots.txt生成
│ │ └── sitemap.ts # サイトマップ生成ファイル
│ ├── components/ # 再利用可能なUIコンポーネント
│ │ ├── auth/ # 認証関連コンポーネント
│ │ ├── common/ # 共通コンポーネント
│ │ ├── elements/ # 基本的なUI要素
│ │ ├── layout/ # レイアウトコンポーネント
│ │ └── ui/ # shadcn/ui コンポーネント
│ ├── config/ # 環境・挙動を制御する設定 (環境変数, サービス URL, 機能フラグ等) ※環境ごとに値が変わる可能性あり
│ ├── consts/ # 不変定数 (enum, アイコン/色/文言マッピング, サイト情報, ページサイズなど) ※全環境共通
│ ├── contexts/ # React Context・グローバル状態管理
│ ├── features/ # componentsでは共通化が難しい、特定の機能やドメイン固有のコンポーネントを管理するディレクトリ
│ │ ├── about/ # Aboutページ機能
│ │ ├── connection/ # Clerk認証・Zenn連携ページ機能
│ │ ├── connection-detail/ # Clerk認証・Zenn連携の解説ページ機能
│ │ ├── dashboard/ # ダッシュボード機能
│ │ ├── explore/ # 記事探索ページ機能
│ │ ├── gnav/ # グローバルナビゲーション機能
│ │ ├── hero/ # ヒーローセクション機能
│ │ ├── home/ # ホームページ機能
│ │ ├── item-detail/ # アイテム詳細機能
│ │ ├── items/ # アイテム機能
│ │ ├── logs/ # ログ機能
│ │ ├── main/ # メイン機能
│ │ ├── navigation/ # ナビゲーション機能
│ │ ├── party/ # なかま機能
│ │ ├── party-member/ # なかま詳細機能
│ │ ├── posts/ # 投稿機能
│ │ ├── strength/ # つよさ機能
│ │ ├── title/ # 称号機能
│ │ ├── user/ # ユーザー機能
│ │ └── zenn/ # Zenn機能
│ ├── generated/ # Prisma Clientなど自動生成されるファイル
│ ├── hooks/ # カスタムフック
│ ├── lib/ # ライブラリ・ユーティリティ
│ ├── shared/ # 共有データ
│ ├── styles/ # スタイルファイル(globals.css)
│ ├── types/ # TypeScript型定義
│ ├── utils/ # ユーティリティ関数
│ └── proxy.ts # ミドルウェアロジック
├── .depcheckrc.json # 依存関係チェックツール depcheck の設定ファイル
├── .env # 環境変数の設定ファイル
├── .env.example # 環境変数のテンプレートファイル
├── .gitignore # GitHubの差分に含まないものを格納
├── .mcp.json # MCP設定ファイル
├── .npmrc # pnpmの設定ファイル
├── .prettierrc.json # Prettierの設定ファイル
├── components.json # shadcn/ui設定ファイル
├── eslint.config.mjs # ESLint設定ファイル
├── next-env.d.ts # Next.js の型定義補完ファイル（自動生成）
├── next.config.ts # Next.js設定ファイル
├── package.json # プロジェクトの依存関係・スクリプト定義
├── pnpm-lock.yaml # pnpmの依存関係ロックファイル
├── postcss.config.mjs # PostCSS設定ファイル
├── README.md # プロジェクトの説明ドキュメント
└── tsconfig.json # TypeScript設定ファイル
- Node.js 20.9.0 以上
- pnpm
- Git
git clone https://github.com/camoneart/output-quest.git
cd output-quest$ pnpm install# `.env.example`を参考に`.env`ファイルを作成し、必要な環境変数を設定してください。
$ cp .env.example .env# Prismaクライアントの生成
npx prisma generate
# マイグレーションの実行
npx prisma migrate dev$ pnpm dev下記のローカル環境にアクセスして、アプリケーションの起動が確認できれば OK です。
http://localhost:3000/
- LLMのモデル変更（現在：gemini-3-flash-preview）
- モデルの回答生成時の口調の変更（現在：老賢者）
- 表示ログの種類を拡張
- 新アイテム、新称号、新キャラ（なかま）の追加
- 現在の上限：Lv99
- 現在は勇者のみ（変更不可）
- 主人公に設定できるキャラを、「勇者のなかま」から選択できるように