お問い合わせはこちら

BLOG

コアフレームのスタッフブログ

2022.11.22WEB制作の現場から! 魅せるゲームタイトルWEBサイト制作のポイント

WEB制作の現場から! 魅せるゲームタイトルWEBサイト制作のポイント

by 冨田明里

コアフレームでディレクターをしている冨田です、設立当初からエンタメ業界のお仕事をさせて頂く機会に恵まれました。この10年でゲームサイトは50タイトル以上、音楽アーティスト系では10組以上のファンクラブサイトのサポートをしています。
そんな訳でゲームタイトルのWEBサイトを制作する上で気を付けているPOINTを少しだけご紹介できればと思います。

【ゲームタイトルLP制作時に注意すべき7つのPOINT】
言うまでもなく、ゲームタイトルWEBサイトの一番の目的は「タイトルに興味を持ち、遊びたくなるようにその魅力を伝える」事です。基本としてゲームの世界観を活かしたサイトデザイン、ゲームのテーマを損なわないサイトづくりを心がけるようにしています。

(1)スピーディーで柔軟な対応

いきなり制作進行の話なのですが、ゲームの開発状況によってWEBサイトの制作スケジュールはかなり大幅に変更されます。コンシューマー、ソーシャルゲームなど媒体に関わらずギリギリまで開発を行っていますので、WEBサイトデザイン確定後のキャラ画像差し替え、朝令暮改のごときテキスト修正、開発遅延における半年間のリリース延期etc、様々な事が起こります。
サイト公開後も、タイトルの発売までに雑誌やイベントでの発表、各種プロモーションに 合わせた時間単位での段階的サイト公開や情報更新などが都度発生し、小回りと社内の密な連絡、柔軟な対応がとても重要になってきます。
納期比較表

(2)キャラクター登場ページは最重要ページのうちのひとつ

ゲーム系サイトの初回公開時は、ゲームの細かいシステムよりも先にキャラクターやビジュアルが先行して公開されることがほとんどです。よって登場人物のページはトップページと並んでWEBサイトの中で最重要とも言えます。キャラクターを存分に“魅せる”にはどうするべきかを常に意識しています。
例えば、クライアントから支給される素材は、そのキャラクターの見せたい部分、隠してはいけない部分に注意しながらレイアウトします。またこの人物はどんな性格なのか、どんな色が似合うか、他のキャラクターと並べたときのサイズ感等、キャラクターデザイナーの意図にも十分配慮してデザインします。同時にいかに重たいページにせずに快適に閲覧できるかといった全体のバランスにも心がけています。
▼参考サイト
『モンスターを倒して強い剣や鎧を手にしなさい。死んでも諦めずに強くなりなさい。勇者隊が魔王を倒すその日を信じています。』公式サイト
ゲームのキャラクター紹介画面

(3)専門用語、独自用語への理解

どこの業界にも言える事ではあるのですが、ゲーム業界は特に専門用語が多く、打ち合わせ中に置いてきぼりになる時がしばしばあります。

「今回はCOOP型のゲームです」
「この○○っていうのはソシャゲで言う“石”みたいなものです」
「メインターゲットはハクスラ好きのユーザーです」

初めて打ち合わせに参加したSTAFFはもうちんぷんかんぷんです。
もちろん内容や用語のすべてを理解していなくてもWEBサイトの制作は可能なのですが、販売会社や開発会社、ユーザーへの理解がよりよいサイトにつながると思いますので、
トレンドはウォッチするようにしています。
SNSでフォローしているゲームニュースサイトで公開される開発者のインタビュー読むとか、騒がれているゲームタイトルを調べてWEBサイトをチェックしたり体験版を実際にプレイするなど、趣味が高じて今の仕事につながっています。
※COOP型:「Cooperative」の略で、複数人で協力するゲームの事
※ハクスラ:ハックスラッシュの略。戦闘が主体となっているゲームジャンルの事。

(4)多種多様なゲームのジャンルの実績がデザインの幅を広げる

RPG、DRPG、2D/3Dアクション、FPS、ホラー、格闘ゲーム、乙女ゲーム、恋愛/育成シミュレーションなどジャンルが異なれば、当然遊ぶ層も異なってきます。
サイトデザインでは各ターゲットに合ったデザインづくりが必要になってくるのですが、一方でレイアウトや素材、世界観と合わせた色使いなどはジャンルを超えて踏襲できる場合があります。同じ古紙の見せ方でもRPG系とホラー系で加工を変える事で、全く違う雰囲気になります。このように組み合わせを工夫する事で新しい見せ方を絶えず創出するようなデザインを心がけています。
▼参考サイト
上:“心霊ホラー”シリーズポータルWEBサイト
下:『モンスターを倒して強い剣や鎧を手にしなさい。死んでも諦めずに強くなりなさい。勇者隊が魔王を倒すその日を信じています。』公式サイト
ジャンルを超えたデザインの踏襲

(5)動きを意識したサイト作り

ゲーム系とエンタメ系にも共通して言える事なのですが、動きあるコンテンツとゲームタイトルLPは切っても切り離せない関係です。
PV(プロモーション動画)、プレイ中の切り抜き動画、ゲーム実況動画の埋め込み等とパララックスとしてのパーツ演出をどのように組み合わせてサイト全体で表現していくか、かなり気を付けているPOINTです。
一つ間違えるとごちゃごちゃしますし、単に埋め込むだけだと整然としてつまらなくなります。支給された動画素材をプチ編集しながら、JavaScriptで再生のタイミングを制御する等、テクニカルな要素を取り入れながらのデザインを意識しています。

(6)きれいなソースコードを心がける

立ち上げ時に他の制作会社が作ったというLPを引き継ぐ事がこの業界はよくあります。
お引き受け後ソースコードを見ると、動き/表現が多いWEBサイトだった場合にはかなり複雑な構造となっており、更新/改修に苦労した経験があります。逆の場合の事も考えて、特にJavaScriptの記述には意識して気を付けるようにしています。

・大文字、小文字、アンダースコアなど変数の名付けルールの統一
・宣言の重複がないか
・インデント、改行によるコード整形
・不要プラグインの削除
・コメントアウトでの補足
・必要に応じてのコード圧縮
等、基本的な事ですが、改めて意識しています。

(7)短期間でのブランドキャンペーン

WEBプロモーションにおいては発売前までの更新が頻繁ですが、発売後のプロモーションも欠かせません。特にソシャゲはスタートダッシュのつかみが肝心なので、LP上でも立て続けにイベントやキャンペーンの情報発信を行っています。
また、昔はアニバーサリーページも5周年の周期だったのが、3周年ページ、1周年ページ、今や0.5周年ハーフアニバーサリーなど作っています。
ですのでサイト構築の設計時から上記を見越すようにしています。導線を追加する領域の想定および確保、外部ツールをうまく組み込んで容易な情報更新と低コスト化の実現etc
やはり、ご縁があって携わったタイトルには長く続けてほしいと思ってしまいますね。
▼導線追加の例(『モンスターを倒して強い剣や鎧を手にしなさい。死んでも諦めずに強くなりなさい。勇者隊が魔王を倒すその日を信じています。』公式サイトより)
導線追加の例

おまけ リメイク作品

最近は過去発売されたタイトルリメイク版サイトを作りたいというご依頼もよくあります。
これはこれで昔の良さを活かしつつ、一定の制限がありながら現在風に新しくサイトを作りますので、やりがいがあります。
昔の素材を取り入れる等して世界観を大事にしながら、新旧見やすいサイトを作っています。近々実績でまたご紹介させていただきます。今後もリメイクゲーム増えるかもしれませんね。


REVIVAL SERVICE

放置しっぱなしのホームページをリニューアルしてうまく活用すれば、広報・リクルート・営業・販売等、社員の一員として働いてくれます。
「自社製の"自慢の一品"を知ってもらえるチャンス」を掴みませんか。

3年以上ホームページを放置している中小企業 約21.2% 今すぐ覚醒へ! ホームページリバイバルサービス 3年以上ホームページを放置している中小企業 約21.2% 今すぐ覚醒へ! ホームページリバイバルサービス