これまで手がけたWebサイト・Webサービスの事例をご紹介します。
Nintendo Switch・iPhone・PC・家電の修理情報をYouTubeから自動収集し、修理手順・必要工具をまとめて提供するメディアサイトです。
| レイヤー | 技術 | 役割 |
|---|---|---|
| フロント | Nuxt 4 + Vue 3 + TypeScript | SSR、SEO、UI |
| スタイル | Tailwind CSS + @nuxt/ui | コンポーネント・デザイン |
| データ API | Nitro API | MongoDB 接続・検索・チャット |
| DB | MongoDB Atlas | 動画・修理ガイド・ランキング等 |
| AI | OpenAI（Embeddings + Chat） | 意味検索・修理チャット |
| ホスティング | Cloudflare Pages（フロント） | Nuxt SSR |
| API 公開 | Docker + セキュアトンネル | API の安全な外部公開 |
| その他 | Wrangler、GitHub Actions（lint CI） | CF プレビュー・品質チェック |
YouTube動画をAIで分析し、要約・ポイント整理・見出し生成を行うAI動画要約サービスです。
| レイヤー | 技術 | 役割 |
|---|---|---|
| フロント | Nuxt 3 + Vue 3 + TypeScript | ダッシュボード、SEO、認証 UI |
| スタイル | 独自 CSS（figma-ui.css） | Figma ベースの UI |
| API エッジ | API Gateway（FastAPI） | 認証・ルーティング・レート制限 |
| 認証 | Firebase Auth + 認証 API | Google サインイン・セッション管理 |
| 解析 API | 解析サービス（FastAPI） | YouTube 要約パイプライン（ジョブ・同期両対応） |
| DB | MongoDB Atlas | ユーザー、解析ジョブ、レート制限、利用ログ |
| AI | faster-whisper + OpenAI | 音声文字起こし・要約・キーワード抽出 |
| インフラ | Docker Compose + GPU | バックエンドサービスの一括起動・運用 |
| ホスティング | Cloudflare Pages | Nuxt ビルド成果物の配信 |
| API 公開 | Docker コンテナ | API Gateway 経由で公開 |
| その他 | OpenAPI 3、mise、Google Analytics | API 仕様、Node バージョン管理、利用計測 |
初心者向け・低山中心の登山サークル向けサイト。活動内容やスケジュール、参加方法をわかりやすく紹介するサークルサイトです。
| レイヤー | 技術 | 役割 |
|---|---|---|
| フロント | Nuxt 4 + Vue 3 + TypeScript | ランディングページ、SSR、SEO |
| スタイル | Tailwind CSS 4 + @nuxt/ui | コンポーネント・デザイン |
| アイコン | lucide-vue-next | ヘッダー・UI アイコン |
| データ API | 外部 REST API | お問い合わせフォーム送信 |
| DB | なし | フロントエンド主体・API は外部連携 |
| AI | なし | — |
| ホスティング | Cloudflare | 静的サイトの本番公開 |
| SEO | useSiteSeo、OG タグ、Schema.org、sitemap / robots | 検索エンジン・SNS 向けメタ情報 |
| その他 | Node.js、Unsplash（画像） | 実行環境・ヒーロー画像 |