イカすあのゲーム


お疲れさまです。山本です。

きたる明日9月9日、皆さんは何の日かご存じでしょうか。

そう、あの大人気ゲーム『スプラトゥーン』シリーズ最新作の発売日です！
個人的に大好きなタイトルなので楽しみで楽しみで、日夜事前情報を眺め続ける日々を過ごしておりました。

そんな中やはり職業柄、特に公式サイトは隅々まで見てしまいます。
折角なので今回は、その公式サイトのイケてるポイントをご紹介したいと思います！

画像引用元：スプラトゥーン3 | Nintendo Switch | 任天堂
https://www.nintendo.co.jp/switch/av5ja/index.html

モチーフ、カラーリングの統一

全体を通してかなり要素が多く情報量もモリモリで、ページとしては密度が高いです。
しかしその中でも、インク・イカのモチーフとイエローとブルーの2色を一貫して使用されているので雑多にはならず、統一感もありスタイリッシュです。
どこを見てもイカかインクがシルエットやアイコン、背景などあらゆる手段で盛り込んであります。

yam_00
スライドの操作アイコンがすべてイカになっており、前後のコントロールはちゃんと矢印としても機能しているのがかなり最高ポイントですね。
「MOVIE」のグリッチ的な表現も今風でカッコイイです。

動きのある配置

画面に対してまっすぐ配置されたものの方が少ないのでは？というレベルですべての要素に角度がついています。
このセクションでは、タイトル含めた帯と本文、埋め込み動画のフレーム、キャラクター画像、背景のステッカー風あしらいそれぞれに別の角度が付いています。

yam_01
（動画のフレームすらインク型！）
通常、文章や情報をただ傾けると読みにくさや不自然さが気になってくるものですが、
このサイトではむしろ傾けることでリズムが出ていて、なんだかテンポよく要素が目に入ってきます。
ただなんとなく角度をつけているのではなく、視線の動き、各要素の関係性などをふまえて徹底的に計算された「カッコイイ傾き」なのではないかと思うと、感嘆のため息を漏らさずにはいられません。

背景画像の工夫

1a5ff4fbd095a71339f56e68c80a0d69（「舞台は混沌の～」から「プレイヤーが集まる場所」のタイトル、ジグザグの配置やサイズの強弱の付け方が良すぎていつかマネしてみたいポイントNo1です）

本作の舞台を紹介する埋め込み動画がありますが、フレームがただの長方形ではなくラフにテープで貼り付けたような表現になっています。
ちょっとしたことですが、これだけでも「THE 埋め込んだだけの動画」感が薄れ、世界観の一部に感じられていい感じです。
また、背景にたくさんのステッカーを貼った表現ですが、色数は多いものの意外と明度や彩度が低く、一番強いイエローは手前の見て欲しい部分に絞って使用してあるので決して情報の邪魔にはならず、単純にめちゃくちゃカワイイです。

そして、左下のオレンジのネオンと、右上の電飾がチカチカ点滅しているのにお気づきでしょうか…。
静止画ではなくランダムにチカチカ点灯していることで、「きらびやかな新品の電飾」ではなく、「退廃した街のちょっとボロい電飾」っぽさがグッと増している気がして、個人的に一番好きなポイントです。

「イカ」っぽいモーション

フヨフヨと泳いでいるような動きのページャーや、「ページトップに戻る」をクリックした際の動きなども徹底的に工夫されています。
2a32157037465d159c46bf4f61cc10aa（左下が少しめくれたステッカー風の表現ももれなくカワイイです）
実際のゲームの動きに近いものをwebのUIとして最適化しつつ取り込まれているのが最高です。

購入はこちら！

そして最後に、控えめながら常に右下に追従する「予約」のボタンと、ページ下部にコンパクトにまとまった製品情報。
世界観の邪魔をすることなく、製品への導線も確保しており完璧です。

また、公式サイトとは別に初心者向けのページも公開されており、 https://www.nintendo.co.jp/software/feature/splatoon/index.html
こちらは対照的にシンプル・明解！といった印象で、
分かりやすさに振り切ったテイストになっています。
公式サイトとはハッキリ役割が違うことが一目で分かり、目的に合わせたデザインテイストの検討って大事だな～と改めて思いました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

紹介しきれていない最高ポイントがまだまだあるのですが、
キリが無くなってしまうのでこの辺りで…。

なんだか色々と書きましたが、要はこのページを初めて見た時の
「カッ、カッコイイ～～～～…！」な気持ちを共有したい一心の記事でした。

ゲーム本編は明日、9月9日発売です。

switchをお持ちの方、オンライン対戦ゲームが好きな方、サイトのデザインが好みの方。
オススメです。

次回のブログはSS部の福田さんです！
よろしくお願いいたします。

+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+
ブログを見ていいね！したくなった方はこちら…
－ジオブレインfacebook－
http://www.facebook.com/GeoBrainCorporation

もっとジオブレインの仕事内容を知りたくなった方はこちら…
－ジオブレインHP－
https://www.geo-brain.com/
+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-:+:-+:-+:-+:-+:-+