広告の限界を超える|セールス
広告の限界を超える|セールス
2019.01.23
#37
デザインのトレンド

ゲームの世界と一心同体!ゲームの世界観が伝わるサイト〜2018年ベスト版〜

ヴィクトリア

こんにちは、ヴィクトリアです。

最近ご縁があって、ゲームのサイトをみる機会がよくあります!

いろいろ見ているうちに素敵なサイトをたくさん発見できたのでご紹介します!

ゲームの世界観をWebで再現してる素敵サイト

ペルソナ5


P5 – ペルソナ5 – 公式サイト

視線の導線は赤いラインを強制的に追わされます。

スクロールしていくとアニメーションが起きて情報が追加されていく、ワクワクが絶えないページです!

背景にずっと動画が動きつつ、上にのっているコンテンツがいい感じに余白を保っているので、見づらくも読みづらくもない絶妙なバランスですね!

Faeria


Faeria · Dogstudio

ベルギーのゲーム紹介サイトです!

ここまでゲームの世界を忠実に再現できたら気持ちがいいでしょう。

ゲームの中で使っている素材をWeb用に変換して使えたらいいんだろうなと思いました。

FINAL FANTASY XV ROYAL EDITION


ファイナルファンタジーXV ロイヤルギャラリー | SQUARE ENIX

はじめてこのページを見たとき、衝撃をうけました。

破片、どうなってるの……?

Webサイトの表現ってほんと無限大ですね。

細いラインや動きのイージングがぜんぶ揃っていてとても綺麗です!

女神にキスを!~Goddess Kiss~


女神にキスを!(メガキス) – 公式 – DMM GAMES

要素がシンプルでキレイで読みやすいサイトです!

デザインされてるけど文字が読みやすくて内容が入ってきやすいなと感じました。

文字サイズ・文字量が適切なのだと思います!

素敵です!

OVERHIT


OVERHIT(オーバーヒット)|公式サイト

MVの動画がかっこよくて圧倒されます!

ゲームの素材がすごくきれいなので切り取っても絵になって素敵ですね!

スマホでサイトを見るとジャイロセンサーが使われていておもしろい感じで動きます!

いけてる!

マギアレコード 魔法少女まどか☆マギア外伝


「マギアレコード 魔法少女まどか☆マギカ外伝」公式サイト

この本サイトの前にティザーサイトもあって、謎がたくさんあって魅力的でした!

Twitterのタイムラインの文字が飛んで行ってしまったり、アニメーションの仕掛けがたくさんありました!

画像のサムネイルの縁だったり細かい装飾が手が込んでいてとてもかわいいです!

消滅都市2


消滅都市0. 公式サイト

シンプルできれいに整っていて素敵です。

余白感にすごくゆとりがあり、トーンも落ち着いていてゲームのサイトっぽくないオシャレさです!

DArK Rebellion


ダークリベリオン -DArk Rebellion-公式サイト | ダークファンタジーRPG

オープニングのアニメーションからワクワク感が高まりますね!

闇っぽい表現で統一されていて細部にまで動きがあって、いたるところにデザイナーとフロントエンジニアのこだわりを感じます!

さて……なにを隠そう、このサイトを作ったのは弊社LIGです! 笑

最近実績サイトにも載せてもらったのでぜひご覧ください!!

DArkRebellion制作実績ページ

番外編:先輩デザイナーのもーりーさんレコメンド!!

この記事を書くにあたり、もーりーさんと社内でお話ししていたところ、おすすめのサイトを教えてくださったので一緒にご紹介したいと思います!

ico もーりーさん
社内のLT会や勉強会に出没する名司会者芸人。全社の集合写真でたいてい目立っている。
>>もーりーさんをもっとよく知る

GRAVITY DAZE 2

GRAVITY DAZE 2
GRAVITY DAZE 2 | プレイステーション® オフィシャルサイト

ゲームのコンセプトである”重力”を演出で見事に再現していますね!

マウスの軌道に合わせたパララックス効果が浮遊感にひと味加えています。

Nintendo Labo

Nintendo Labo
Nintendo Labo | Nintendo Switch | 任天堂

ダンボールのクラフト感をうまくデザインで再現していますね!

見ていてワクワクします。

マウスオーバーのアニメーションにもいちいちこだわりを感じます。

過去のブログ

2016年にタカアキさんが書かれたゲームサイトの記事もあるので、よろしければ一緒にご覧ください!

今見ても素晴らしいサイトたちですmm

LIGではゲームサイトの制作も承っています!