• HOME
  • WORKS
  • SERVICE
  • ABOUT
  • BLOG
  • NEWS
  • RECRUIT
  • CONTACT

エンタメ特化型、心を動かすWeb制作。
まずは無料で相談いたします!

公開日:2025/04/10

ゲーム案件の制作裏側を公開

アークシステムワークス株式会社様の案件『テクノス ザ・ワールド くにおくん & アーケードコレクション』公式サイトのWeb制作では、レトロゲームの世界観(レトロサイバー)と現代的なデザインを意識しながら、デザイン・構築・実装までトータルで担当させていただきました。

この記事では、制作の裏側や工夫した点を少し紹介します。

制作事例の裏側

制作の目的と役割

「くにおくん」シリーズは多くのファンに愛されるレトロアクションゲーム。

その世界観やブランド力を損なうことなく、現代のWebユーザーに分かりやすく・楽しんでもらえる情報サイトを目指しました。

制作者も子供の頃ゲームボーイやファミコンで「くにおくん」をプレイした人間でもあります。

懐かしさを感じながら制作に携わらせていただきました。

 

夢双合同会社では以下を担当しました:

  • 情報設計(UI/UX構成)

  • デザイン(Web&アニメーション)

  • フロントエンド開発(HTML/CSS/JS)

  • 更新管理

レトロとモダンの融合を意識したデザイン

「懐かしさ」と「わかりやすさ」を同時に表現するため、ドット絵やレトロなタイポグラフィを用いながら、画面全体のレイアウトや動きはモダンに構築。

 

特に意識した点:

  • レスポンシブ対応:スマホでも快適に閲覧可能

  • セクションごとの視認性:見たい情報にすぐアクセスできるよう設計

  • 5言語対応:言語切替後も美しく自然に表示されるよう細部まで配慮
  • キャラクターの世界観:スクロールなどのアニメーション演出(激しくならない様に)

アニメーション演出(JavaScript / css)

視覚的にアニメーション演出を与え過ぎないことを重視しました。

  • スクロール連動アニメーション

  • マウスの動きに合わせたアニメーション
  • キャラが現れるインタラクション

ユーザーが煩わしさを持たずに閲覧できることを想定してあります。

更新性と拡張性の両立

ゲームの世界観を崩さない事を意識しつつ、レトロサイバー感あるデザインというご要望でした。

  • 追加コンテンツにも柔軟に対応できるhtml構造

  • 複数言語化にも対応しており、どの言語でも表示崩れしない設計

 

5言語対応について

同一デザインを保ちながらも、日本語・英語・韓国語・中国語(簡体字・繁体字)の5言語に対応。

文字数や行間の違いによって表示崩れやバランスの崩壊が起きやすいため、各言語ごとにレイアウトや余白を微調整。

言語切替後も美しく自然に表示されるよう細部まで配慮しました。

制作を通じて大事にしたこと

この制作で重視したのは、「世界観の再現」と「ファンとのつながり」です。
古き良きアーケード時代を知る人にとっても、新しくシリーズに触れる人にとっても、心地よく使える設計を心がけました。

 

「熱血硬派くにおくん TECHNOS WORLD」は、ゲームファンが自然に情報へアクセスし、楽しめる場となるようデザイン・開発しています。

夢双合同会社では、こうしたブランド性の高いWebサイト構築や、今回は使用していませんがコンテンツ運用を前提としたCMS構築を得意としています。

「レトロとモダンの融合」「更新しやすさ」「アニメーション演出」などに興味がある方は、ぜひお気軽にお問い合わせください。

関連記事

  • 【ゲーム業界向け】Web制作なら夢双合同会社にお任せください|ゲームの世界観を魅せるサイトづくり
  • 【第1回/多言語の必要性】なぜ今、ゲーム業界に多言語サイトが必要なのか?〜エンタメ業界に寄り添う多言語対応の第一歩〜
  • ゲーム公式サイトにおける「世界観」と「キャラクター」の重要性
  • 【第1回/美少女ゲームWeb戦略】世界観ぶち壊し…古いWebサイトで損してない?美少女ゲーム開発会社が見直すべきこと
  • 最新版|2024〜2025年 ゲーム系公式サイトのデザインとCMSの潮流

Back to list

© 2019- MUSOU.