ハッカソンに参加してみて気付いたAIと向き合う面白さ

2026/04/03 AILT会 - vol.1

Transcript

1. ハッカソンに参加してみて 気付いたAIと向き合う面白さ 2026.4.3 AILT会 - vol.1
2. 自己紹介 らむ ・もこもこWeb エンジニア ・最近してたこと 　・⽣成した画像をX に投稿するサービス開発 　・CyberAgent 主催のWeb Speed Hackathon 参加
3. Web Speed Hackathon 概要 予め準備してあるWeb アプリケーションのパフォーマンスを改善すること でスコアを競うハッカソン。 Web アプリケーションにデグレが発生しているとレギュレーション違反と 判定される。 （テスト88 項目を通過する必要がある） https://github.com/CyberAgentHack/web-speed-hackathon-2026
4. パフォーマンスチューニング Claude Code とCodex をつかってパフォーマンス改善を実施。X で他の参加者 もポストされていた通り、特定した原因について時間内に対応はできた。 焦点はAI を活用しながらデグレを起こさない改善の部分だった。 ・チューニング例 　・サーバーサイドレンダリング 　・API のインデックスやページネーション 　・画像の遅延読み込み
5. Web Speed Hackathon 感想 発想力やプレゼン力が求められるよくあるハッカソンと違って、審査基準 が明確で実務に役立つ内容なので他の人におすすめしやすい。 （毎年開催） ・本題 　・表⽰速度改善とAI による⽣成ワークフローの速度と精度の改善 　  ・似たような体感があった 　  ・AI ⽣成の方が時間がかかるのでSSE しないといけない
6. 出力のいい設計をする 数十秒単位で期待する表⽰速度と異なる場合は設計から改善した方がいい。 SSR のようなレンダリング手法切り替えと生成ワークフロー内のステップの 精査はどちらも根本的な改善。 ・複数シーンを別々に生成して合成するのとセクショ ンを指定して一括で画像⽣成するのは表現⼒が違う ・画像生成内で日本語テキストも生成するか空白のセ クションを用意してそこにテキストを後から合成する かで安定性が違う
7. 外れ値を引かない 大幅に表⽰速度や精度を損なう可能性がある事象の対応は必要。 API のページネーションとプロンプトチューニングはどちらも想定しない動 きを起こさない対応。 ・線画のような描写を指定するとスケッチブックや鉛 筆が生成した画像に表⽰されてしまうことがある ・指定の言い回しを工夫したり、禁止リストに追加す るなどの対応をする
8. ユーザー体験をよくする レスポンスがないとユーザーは不安になるので表示速度やローディングや SSE 表示などシステムが動作していることを伝えないといけない。 遅延読み込みとSSE はどちらもユーザーへの配慮。 ・はやく処理できるに越したことはないものの、 AI による生成には時間を要することが多いので進 捗状況を可視化する
9. まとめ 設計→調整→ユーザー体験の順で対応していくのはAI 開発でも一緒 精度の上がらなさに苦悩してからがスタート どうしてもロジックで実装するものと比べて開発に時間はかかる