こんにちは。デザイナーの佐藤タカアキ（@sato_tkaaki）です。
私事ですが、先日WiiUの『スプラトゥーン』を買いました。
スプラトゥーンのゲームのデザインがイカしてる
スプラトゥーンとは
インクを撃ち合うアクションゲーム。主人公はヒトの姿に変身できる「インクリング」という名前のイカ。
ヒトの姿ではインクを撃って「ナワバリ」を広げることができる。イカの姿になるとインクに潜る。床でも垂直な壁でもインクが塗ってあればヒトのときより高速に、自由に泳ぐことができ、潜ったまま隠れていることもできる。同時にインクの残量とダメージがヒトの姿より早く回復する。ただし相手のインクには潜ることは出来ない。相手のインクを踏むとダメージを受ける上、足をとられて動きが鈍くなる。
Wii U GamePadの機能を活かしジャイロセンサーで直感的に狙いを定めることができ、またWii U GamePadの画面には常にマップが表示されており、リアルタイムに塗られた場所が更新されていくので戦況を瞬時に判断しながらプレイできる。
タイトルは「Splat（ピシャッという音）」と「Platoon（小隊）」を合わせた造語。
本作は発売から半年程無料でアップデートされ、新しいルール、ゲームモード、ブキなどが順次追加されていく予定。引用元：Wikipedia
https://ja.wikipedia.org/wiki/スプラトゥーン
スプラトゥーンって造語だったんですね。
まあ実際にプレイしてみるとめちゃくちゃおもしろくて、どっぷりハマってしまいました。
ストーリーや設定が良いのはもちろんのこと、一つ一つのアニメーションや色使いがすごく良かったんです。で、僕も一応デザイナーの端くれではありますので、そうなるとオフィシャルのWebサイトのデザインなんかも気になるわけです。
やっぱり、イカしてました。
ということで今回は、スプラトゥーンを始めとしたゲームのイカしてるWebサイトデザインをご紹介させていただきます。
【ゲーム版】デザインがイカしてるWebサイト7選
1. スプラトゥーン
https://www.nintendo.co.jp/wiiu/agmj/index.html
エキサイティングな音楽と共に背景に大きく表示される動画で、スプラトゥーンがどんなゲームなのかすぐにわかります。
ナビゲーションやアイテムのカレント、背景画像にもインクをイメージされたデザインが施されており、スプラトゥーンのコンセプトがストレートに表現されていていいなと思いました。
2. スーパーマリオメーカー
https://www.nintendo.co.jp/wiiu/amaj/index.html
これまではただプレイするだけだったスーパーマリオのステージを、プレイヤーの思うままにクリエイトできるという新しいスーパーマリオです。
サイトにアクセスすると、最初フッター部分でマリオが「よみこみ中」の隣りで走ってますね。背景動画とは別に細かい工夫を盛り込むことで、読込中の時間に飽きさせないというユーザーのことを第一に考えて作り込んだ制作者の方々の思いが垣間見えた気がします。
ステージ作りという要素が加わることで、良くも悪くもユーザーの個性（性格）がモロに出そうですね。個人的には今後の展開が楽しみなソフトです。
3. GRAVITY DAZE（グラビティデイズ）
http://www.jp.playstation.com/scej/title/gravitydaze/ps4/
トップのメインビジュアルはもちろん、コンテンツ部分のテキストやイメージ画像も綺麗なパララックスで表現されており、「GRAVITY DAZE」の文字通りテーマである重力感が存分に表れているかと思います。
各見出しとナビゲーションのスタイリッシュなフォント＆アニメーションもかっこいいです。サイトにアクセスして2秒で世界観が伝わってくるってすごいな。
4. ドンキーコング トロピカルフリーズ
https://www.nintendo.co.jp/wiiu/arkj/
幼い頃にゲームボーイでやっていたドンキーコングが、ゲーム自体の構成は昔の2Dのままで良さをキープしつつ、こうして臨場感たっぷりなグラフィックで進化してきているのが最高に嬉しい！という感じでソフトの素晴らしさもあるのですが。
このサイトを見てすごいなあと思ったのは、背景画像もステージによって多種多様でありごちゃごちゃしているのに、テキスト部分が見づらくも読みづらくもないこと。情報をきちんと整理して優先度をルール化したデザインすることによって、要素が多くてもユーザーの目線の導線を確保することが可能であることを改めて感じました。
5. The Wonderful 101
https://www.nintendo.co.jp/wiiu/acmj/
僕はこのゲームのことを全く知らなかったんですが、フルスクリーンに映し出される迫力ある動画と背景部分までとことんこだわられたグラフィックにがっつり心を掴まれてしまいました。
ナビゲーションの各メニューを選択して他ページへ遷移すると、ページごとに違った動画が用意されており、サイト全体でのストーリーの作りこみがすごいです。
トップページを含めどのページでもプレイ動画が使用されているので、サイトを見ればみるほど購入意欲が高まっていく、そんなデザインになっているのではないでしょうか。
（この記事が公開される頃には、僕はこのゲームを買っていることでしょう）
6. スーパーマリオ 3Dワールド
https://www.nintendo.co.jp/wiiu/ardj/
スーパーマリオのデザインが素晴らしいなんて「なにを今さら」という感じですが、今回は細かい部分でいいなと思った点をご紹介させていただきます。
1つ目はローディング画面ごとに登場するキャラクターが変わること、もう1つはページ下部に配置されている各ナビゲーションにマウスオーバーしたとき、ブロックを下から叩いたような動きをすること。これこそWebだからこそ可能なアニメーションであり、かつまったく無駄のないデザインだなと。
僕自身、新しく思い付いた表現や機能をついつい盛り込もうとしてしまうので、少し反省しました。無駄を削るって難しい。
7. あつめて！カービィ
https://www.nintendo.co.jp/ds/tadj/
いいですよね、カービィ。
小学生の頃ひたすら弟とやりこんだスーファミのスーパーDXが忘れられません。
このサイトを見てすぐにいいなと思ったのは、トップページ下部のナビゲーションのメニューで「操作」ボタンに読みがながふってあるところです。
そんなに難しくない漢字に読みがなをふる。当たり前ではあるのですが、しっかりターゲット層の年齢層を固めた上でサイト制作に入っていることが読み取れるシーンだと思います。（他ページでも「ふやす」「あつめる」「たすける」などがひらがなになっています）
小学生でも当たり前のようにインターネットに触れる時代になったからこそ、時代に合わせたデザインの手法も身につけなければならないと強く思ったサイトでした。
おわりに
いかがでしたか？
日頃からサイトデザインを見る時間を1日2時間ほど設けているのですが、振り返ってみるとその約90％が海外アワードのサイトデザインでした。たしかに現状では、日本国内のものよりも海外のサイトデザインの方が新進気鋭な表現やレイアウト、見るものを驚かせるアニメーションがふんだんに盛り込まれているものが多いように感じます。
一方で、海外のWebサイトからデザインの感性やセンスを学び、自身のものさしでもある基準点を上げていくことは縦の展開にとどまります。幅を広げるという意味では、UIやブランディング手法なども学ぶ必要があり、そういった表面に出づらい部分は国内のサイトが参考になることも多々あります。
最先端の技術や表現を学ぶときには海外のアワードサイト、日本ならではのUIノウハウを参考にしたいときは国内サイトなど、自分が必要な情報の住み分けをして、より効率的に為になる情報を取り入れていければと思います。
サイトデザインだけでなく、今後は日本が世界に誇るテレビゲームやアニメ、プロダクトのサイトを中心にまとめてみるのも面白いかもしれませんね。
【株式会社LIGについて】
わたしたちは年間150を超えるWebサイトをリリースしている、東京上野のWeb制作会社です。ゲームサイトの制作実績も！Webサイト制作のご相談はこちらより、お気軽にお問い合わせください。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
