Case
SkyDuel
公式サイト制作と
AI連携による更新運用
ブラウザゲーム「SkyDuel」の公式サイト。作品の世界観を伝えるビジュアルと、遊び方を理解してプレイへ進む導線を設計しました。YouTubeの公開情報やアップデート情報の反映にはAIを活用し、更新・検証から承認後のデプロイまでを進める運用フローも整えています。
プロジェクト概要
| プロジェクト | SkyDuel（ブラウザゲーム） |
|---|---|
| 制作内容 | 公式サイト制作・AI連携による更新運用の設計 |
| 取り組み | 情報設計・UIデザイン・Web実装・3D表示・動画とお知らせの掲載設計・更新／検証／公開フローの整備 |
| 公開サイト | SkyDuel公式サイトを見る（別タブ） |
生成AIで方向性を探り、世界観に合う表現を選ぶ
制作の初期には、生成AIで複数のラフを作り、空や機体をリアルに描く方向、コックピットを思わせる方向などを比較しました。完成形を決める前に、表現の幅を目に見える形にして検討しています。
比較する中で、代表は、リアルな表現に寄せすぎるとゲーム本来の世界観とのつながりが弱くなると判断しました。そこで、ファーストビューにはゲームの導入画面に近いキャラクター表現を採用。親しみやすさと、サイトからゲームへ進んだときに印象がつながることを重視しました。
AIで出した案を比較材料にし、作品に合うかどうかを人が判断する。この役割分担を、ビジュアルの方向性を決める段階から取り入れています。
世界観を伝え、遊び始めるまでをつなぐ
SkyDuelは、ブラウザから遊べる3Dフライトシューティングゲームです。公式サイトには、作品に興味を持ってもらうことと、初めての人が遊び方を理解してプレイへ進めること、その両方が求められます。
そこで、キャラクターや機体で作品の印象を伝えた後に、公式動画、モード紹介、機体・ステージ、対応端末の案内へ進む構成にしました。各コンテンツの役割を分け、興味のある情報を見ながら「PLAY NOW」へ進める導線を設けています。
モード紹介では、操作を練習する、リングをくぐる、スコアを競うといった遊び方を、画像と短い説明で比較できます。ゲームに詳しくない人にも、最初に何を楽しめるかが伝わる見せ方です。
機体の魅力と特徴を、見て理解できるUIに
ビジュアルは濃紺を基調に、シアンの線や文字、黄色のアクションボタンを組み合わせています。機体の分析画面を思わせる枠や英字の見出しで世界観をそろえながら、説明文は日本語で読みやすく整理しました。
機体紹介では、回転して眺められる3D表示に、機体の特徴を示す短いコピーと能力グラフを組み合わせました。形のかっこよさと、操作性などの違いを一つの画面で確認できます。ステージ紹介にも3D表示を使い、実際に飛ぶ空間をイメージできるようにしています。
遊び方の動画と、新着情報を使い分ける
動画は、初めての人が全体像をつかむ入口として設計しました。トップページには「SkyDuelとは？」「RING RUN」「SUPPORT BIT」の紹介動画を配置。初めて遊ぶときに知っておきたい情報へ、順番にアクセスできます。
継続して訪れる人には、アップデートや新しい公式動画をInformationから案内します。トップの新着、カテゴリで絞り込める一覧、変更内容を説明する個別記事を分けることで、最新情報の確認と過去の履歴をたどる用途に対応しました。
初心者向けの動画は基本の案内として保ち、新しい動画は新着や関連する更新記事へ掲載します。動画を一律に新しい順へ置き換えるのではなく、読む人の目的に合わせて掲載先を使い分けています。
AI連携で、更新からデプロイまで
サイトの制作に加え、公開後の情報更新にもAIを組み込んでいます。確定したアップデート内容や公開済みのYouTube動画をもとに、掲載内容の整理、ページ更新、表示・リンクの検証までをAIが支援します。
代表が内容と見せ方、公開可否を確認し、承認した内容をAIがデプロイする流れです。掲載場所ごとの更新とチェックを一連の作業として扱い、公開後の表示確認までを運用に含めています。
代表が更新内容を確定
リリース内容や公開済み動画の情報を確認し、サイトに掲載する内容を決めます。
AIが更新・検証
原稿と関連リンクを整理。新着・一覧・必要な記事を更新し、プレビューで検証します。
代表が確認・承認
内容や見せ方を確認し、修正の要否と公開してよいかを判断します。
AIが公開・確認
承認された内容をデプロイし、公開先の表示とリンクを確認します。
この図は、AIとの協働による更新作業の流れを示しています。公開前には人の確認・承認を挟みます。
実際の運用では、2026年9月4日の公式動画公開に合わせて、トップの新着、Information一覧、関連する更新記事の動画掲載を更新しました。プレビューで検証した後に公開し、反映後の状態も確認しています。
作った後も、情報を育てられるサイトへ
この取り組みでは、Webサイトの表現、情報の置き方、更新の進め方を一緒に設計しました。世界観を伝える画面だけでなく、動画やお知らせが増えても、必要な場所へ反映し、確認して公開できる運用を整えています。
事業サイトでも、商品・サービスの魅力を見せることと、新しい情報を届け続けることはつながっています。商品紹介と解説動画、イベントの告知、サービス改善のお知らせなどにも、情報の役割を分けて掲載し、AIと人で更新作業を分担する考え方を応用できます。
TOMLABでは、事業に合った見せ方の設計から、公開後に使い続けられる更新方法まで、一緒に整理しています。
関連サービス
近い課題の実例を見ながら、
ご相談いただけます
「うちの場合はどうなるか」を、制作実績や近い事例をもとに一緒に整理できます。掲載していない事例もあるため、ご相談内容に近い実例があれば、背景や進め方も含めてお話しします。