はじめに
ハッカソン「学生限定 少年ジャンプ＋ HACKATHON 2025」に参加し、チーム「努力カ」として開発したプロジェクトを紹介します。本記事では、開発の経緯や技術的な工夫、ユーザー体験の設計、そして最終的な成果物の特徴までをまとめています。
今回のハッカソンのテーマは「ジャンプ＋にあったらいい機能」。私たちは、読者がキャラクターを思い出せずに漫画体験が途切れることを防ぐ機能として、「私は誰？アイコン」と「キャラクター詳細ページ」を企画・実装しました。短期間での開発ながら、既存のジャンプ＋UIに違和感なく組み込み、ユーザー体験を向上させることを目指しています。
結果として、最優秀賞（兼少年ジャンプ＋賞） を受賞することができました。
今回のハッカソン開催にあたり、主催者やスポンサーの皆様のサポートに感謝します。特に会場環境や設備、提供いただいたリソースが開発をスムーズに進める大きな助けとなりました。
目次
チーム結成の経緯
最初に服部裕汰朗さんと高木祐輔さんがチームの設計を行い、人数不足を補うために僕（菱川芯太）と森田福登がサークル経由で参加しました。各メンバーがそれぞれの専門性を活かし、チームに必要な技術を補完する形で役割分担を行いました。
メンバーと役割
- 服部裕汰朗：プレゼン資料作成・全体統括
- 高木祐輔：初期企画担当・チームの足りない技術の補完
- 菱川芯太（筆者）：機械学習試行・キャラクターデータ作成
- 森田福登：フロントエンド・バックエンド実装全般
開発の方針と工夫
既存UIの尊重
- 本家ジャンプ＋のUIに極力手を加えず、違和感なく新機能を追加
- シークバー上に「私は誰？アイコン」を追加
- ページ番号を画像の中央に移動
読者体験を意識した設計
- コメントや情報を活かし、キャラクター詳細ページの注目ポイントを整理
- 最新話から漫画を読み、序盤のキャラクター再登場時に自然に使用できる設計
チームでの意思決定
- 極力全員で相談し、UIや機能範囲を決定
アドバイス時間
- 会場には常に現役技術者がおり、開発中いつでも相談可能
- 形式上のアドバイス時間に縛られることはありませんでした
最終成果物
「私は誰？アイコン」機能
- シークバー上にページごとのキャラクターアイコンを表示
- アイコンをタップするとキャラクター詳細ページへ遷移
- 最新話から漫画を読み、序盤のキャラ再登場時に自然に使用
キャラクター詳細ページ
3つのセクションで構成されています：
- プロフィール：作者や編集が伝えたいキャラクター情報を短文で表示
- 注目シーン：読者コメント等から抽出した人気エピソードを表示
- 登場話一覧：該当キャラクターが登場する話だけを抜粋
| メインUI | ページUI |
|---|---|
 |
 |
技術と開発経緯
使用技術スタック
- フロントエンド：Next.js、React
- バックエンド：Supabase（データベース・認証）
- デプロイ：Vercel
- デザイン・プロトタイピング：Figma
キャラクター認識の試行と課題
当初は機械学習による自動キャラクター認識を目指しましたが、いくつかの課題に直面しました：
- UniversNetを試みるも学習データ不足で失敗
- その後HuggingFaceやPixAIを試行したが精度が不十分
- Google Colaboratory上で実施するもメモリ制限や学習データ不足で断念
学び：ハッカソンという限られた時間の中で、完璧な自動化を目指すよりも、手作業でも確実に動作する実装を優先することが重要だと実感しました。
最終的に手作業でキャラクターデータを作成し、Supabaseのデータベースに登録する方針に切り替えました。この判断により、デモでは確実に動作する機能を提供できました。
五反田会場での開発環境とチーム作業
- 1部屋に2チーム程度が収まる会議室で作業
- 大型モニターが1台ずつ設置
- お菓子・飲み物は自由に取り放題、スポンサー提供の「ZONE」も飲み放題
- 各チーム、昼夜問わず集中して作業
審査員からのフィードバックと受賞理由
コメント活用の設計
- 読者の反応や情報を活用した設計が評価されました
完成度の高さ
- 既存UIを尊重しつつ、情報提供機能を自然に追加
これらの点が評価され、最優秀賞（兼少年ジャンプ＋賞） を受賞しました。
学びとまとめ
今回の成果は、テーマである 「ジャンプ＋にあったらいい機能」 を具体化できた点にあります。読者が漫画をより深く楽しめる仕組みを提供しつつ、既存UIとの親和性も意識した設計は、短期間でのチーム開発における大きな学びとなりました。
特に以下の点が重要だったと感じています：
- ユーザー視点の重要性：読者の実際の課題（キャラクターを思い出せない）を解決する機能設計
- 既存UIとの親和性：新機能を追加する際も、既存のデザインを尊重することで違和感のない体験を実現
- チームでの意思決定：全員で相談しながら進めることで、より良い方向性を見出せた
- 技術的チャレンジと現実的な判断：機械学習による自動化を試みたが、精度の問題から手作業でのデータ作成に切り替えた柔軟性
コード・実装の確認
GitHubリポジトリ
フロントエンドの主要コンポーネントや機能追加部分はGitHubで公開しています。詳細な実装や補助関数も確認可能です。
デモサイト
実際に動作を確認できるデモサイトを公開しています。ぜひお試しください。
おわりに
今回のハッカソンを通じて、短期間でもチームで協力しながら技術課題をクリアし、ユーザー体験を意識した設計の重要性を改めて実感しました。今後もユーザー視点を中心に据えた機能開発を追求していきたいと考えています。
改めて、主催者およびスポンサーの皆様に感謝申し上げます。皆様のサポートがあってこそ、チーム一同全力で開発に集中でき、今回の成果に繋がりました。
補足：本プロジェクトで使用した漫画について
本プロジェクトでは「ブラックジャックによろしく」の漫画コンテンツを二次利用させていただいております。利用規約に基づき、ご報告いたします。
- 使用内容：ハッカソンで作成した漫画ビューワーのデモ版として、漫画の閲覧機能およびキャラクター情報表示機能を実装
利用規約に従い、クレジット表記「ブラックジャックによろしく 佐藤秀峰」を適切に表示しております。
クレジット表記の「詳細」ボタンをクリックすると、利用規約の詳細ページ（https://densho810.com/free/）に遷移するよう実装しております。
本プロジェクトについて、利用規約に基づき権利者である佐藤漫画製作所にご報告し、確認いただきました。
利用規約の詳細は佐藤漫画製作所の公式サイトをご確認ください。
ご報告・お問い合わせ先：info@densho810.com