アークシステムワークス株式会社様の案件『テクノス ザ・ワールド くにおくん & アーケードコレクション』公式サイトのWeb制作では、レトロゲームの世界観(レトロサイバー)と現代的なデザインを意識しながら、デザイン・構築・実装までトータルで担当させていただきました。
この記事では、制作の裏側や工夫した点を少し紹介します。
アークシステムワークス株式会社様の案件『テクノス ザ・ワールド くにおくん & アーケードコレクション』公式サイトのWeb制作では、レトロゲームの世界観(レトロサイバー)と現代的なデザインを意識しながら、デザイン・構築・実装までトータルで担当させていただきました。
この記事では、制作の裏側や工夫した点を少し紹介します。
制作事例の裏側
「くにおくん」シリーズは多くのファンに愛されるレトロアクションゲーム。
その世界観やブランド力を損なうことなく、現代のWebユーザーに分かりやすく・楽しんでもらえる情報サイトを目指しました。
制作者も子供の頃ゲームボーイやファミコンで「くにおくん」をプレイした人間でもあります。
懐かしさを感じながら制作に携わらせていただきました。
夢双合同会社では以下を担当しました:
情報設計(UI/UX構成)
デザイン(Web&アニメーション)
フロントエンド開発(HTML/CSS/JS)
更新管理
「懐かしさ」と「わかりやすさ」を同時に表現するため、ドット絵やレトロなタイポグラフィを用いながら、画面全体のレイアウトや動きはモダンに構築。
特に意識した点:
レスポンシブ対応:スマホでも快適に閲覧可能
セクションごとの視認性:見たい情報にすぐアクセスできるよう設計
キャラクターの世界観:スクロールなどのアニメーション演出(激しくならない様に)
視覚的にアニメーション演出を与え過ぎないことを重視しました。
スクロール連動アニメーション
キャラが現れるインタラクション
ユーザーが煩わしさを持たずに閲覧できることを想定してあります。
ゲームの世界観を崩さない事を意識しつつ、レトロサイバー感あるデザインというご要望でした。
追加コンテンツにも柔軟に対応できるhtml構造
複数言語化にも対応しており、どの言語でも表示崩れしない設計
同一デザインを保ちながらも、日本語・英語・韓国語・中国語(簡体字・繁体字)の5言語に対応。
文字数や行間の違いによって表示崩れやバランスの崩壊が起きやすいため、各言語ごとにレイアウトや余白を微調整。
言語切替後も美しく自然に表示されるよう細部まで配慮しました。
この制作で重視したのは、「世界観の再現」と「ファンとのつながり」です。
古き良きアーケード時代を知る人にとっても、新しくシリーズに触れる人にとっても、心地よく使える設計を心がけました。
「熱血硬派くにおくん TECHNOS WORLD」は、ゲームファンが自然に情報へアクセスし、楽しめる場となるようデザイン・開発しています。
夢双合同会社では、こうしたブランド性の高いWebサイト構築や、今回は使用していませんがコンテンツ運用を前提としたCMS構築を得意としています。
「レトロとモダンの融合」「更新しやすさ」「アニメーション演出」などに興味がある方は、ぜひお気軽にお問い合わせください。