MELT DOWN TOKYO
Type : Design
Date : 2023.07
クライアント
株式会社 NIGHT GAMES（架空／ゲーム制作会社）
担当範囲
企画 / ライティング / Webデザイン
イラスト : あめのちはる様
制作期間
企画、ワイヤーフレーム : 1週間
デザイン : 1週間
使用ツール
Illustrator / Photoshop / Figma
概要
架空のソーシャルゲーム「MELT DOWN TOKYO」のオフィシャルサイトを制作いたしました。新規ユーザー向けのCVはゲームアプリのダウンロード、既存ユーザー向けのCVはSNS（主にTwitter）への誘導として情報設計しています。
背景
ターゲット① : 新しく始めるソーシャルゲームを探している10-30代の男女
ターゲット② : 「MELT DOWN TOKYO」をダウンロード済みで、イベントなどの関連情報を探しているユーザー
目的① : ゲームアプリをダウンロードしてもらう。
目的② : こまめに関連情報を更新、投稿できるTwitterのフォロー／公式生放送などの企画を行うYoutubeのチャンネル登録
現状課題
・面白そうなソーシャルゲームを探しているユーザーが閲覧するランキングページやWeb広告、TV広告から「MELT DOWN
TOKYO」に興味を持ってくれた際、世界観や魅力を伝えてDLしてもらうため、情報をまとめておくためのオフィシャルサイトが必要。
・キャンペーンやイベントの情報をより多くのユーザーに届けてサービスを盛り上げるため、ゲームのDL後はSNSもフォローしてもらいたい。
-
追従するCVエリア
FVの上左右3辺（SPの場合上と左2辺に変更）とアプリのDLを促すエリアは、ページをスクロールしても常に追従し、CVを促すイメージで制作しております。特にアプリのDLを促すエリアを追従させる手法は競合となるソーシャルゲームのWEBサイトでもよく見られ、本件にも有効であると判断いたしました。
-
更新性のあるコンテンツを上に
NEWSやCAMPAIGNといった更新性のあるコンテンツをページの上部に置いたのには、既存ユーザー/新規ユーザーのいずれにも「現在進行形で様々な催しが行われており、盛り上がっているゲームだ」という印象を与える狙いがあります。人気アニメとのコラボキャンペーン等は新規ユーザーの獲得の大きなチャンス。オフィシャルサイトにもセクションを設け、積極的なPRを図ります。
-
トレーラー映像への誘導
その後はゲームの世界観を伝えるようなMOVIE,STORY,CHARACTERのセクションが続きますが、その中でもMOVIEのセクションを一番上に置いています。ストーリーやキャラクターの情報も、よりユーザーがイメージしやすい形で（声や動きを伴って）伝えることができるのが、トレーラー映像だと思っているからです。
-
サイバー感のある色/加工
「MELT DOWN TOKYO」は架空のゲームですが、世界観をイメージするキーワードとして「夜」「融ける」「サイバー」の3つを挙げてライティングを行っています。アクセントにはネオンカラーのピンク、水色を使用。「Camera Raw」フィルターを用いてイラストの色味をサイバー風に調整。MVには「色収差」と呼ばれる加工を施してよりエモーショナルな世界観を演出しています。
-
ノイズgifを用いた背景
デザインカンプのみだと伝わりづらいですが、サイト全体の背景にはノイズ加工を加えた濃紺のgif（ループアニメーション）を使用しています。キラキラしたノイズの配置が0.2秒毎に入れ替わることで、単色べた塗りよりも夜の空のような雰囲気が出るのではないかと思い、作成しました。
-
融けるタイポグラフィ
ゲームタイトルのロゴや一部のセクションタイトルには、タイポグラフィが融け出しているような加工を加えています。特にゲームタイトルロゴではフォント「Didot」をベースに、パスのオフセットを使用して書体そのものが融けているような質感作りにもこだわりました。
EN font
Cormorant
NEWS PICK UP MOVIE STORY CHARACTER
JP font
Noto Serif JP
西暦2483年、東京。突如として空に現れた巨大な渦。
Noto Sans JP
500万ダウンロード突破記念キャンペーン
カラー
よかった点
ゲームそのものやキャンペーン、公式生放送のコンテンツ内容を考えたり、PR戦略を練ったりする際に、前職エンタメ業界制作進行管理での経験を活かせたことがよかった点です。また、今まで制作してきたWEBサイトとは全く異なるトーンでデザインを行うことができたのも、幅を広げる意味で大変勉強になりました。
反省点 / 今後の課題
初めて完全に架空のサイト制作を行ったのですが、ゲームの内容をある程度練ったりライティングを行ったり写真以外の素材を探したりと、サイト全体のイメージ像が湧くまでにかなり手間が掛かってしまいました。 イメージを掴んでからは比較的スムーズに制作できたため、架空のサイトを制作する際もワイヤーフレーム制作までのスピードを更に上げていきたいです。