■背景・課題

「vaultroom」は、東京・渋谷に2拠点、福岡に1拠点を構えるゲームコミュニティーです。枠にとらわれない新しい未来のゲームの可能性を探っています。

コミュニティといっても「完全招待制」という形態で運営しており、ゲームストリーマーだけでなく著名なアーティストやアイドルなど、さまざまな業界のゲーム好きが集まっています。ファッションアイテムの販売も行っており、リリースした当日にはすぐ完売しています。

ゲームのオンライン配信やアパレル販売などのこれらの取り組みは、WebメディアやSNSで大いに盛り上がりをみせていて、ブランディングを主軸にした広告手法で急激に認知を広げています。

そんな、特別な価値観を築いているvaultroomのブランドサイトとなるため、ビジュアルデザイン・フォトディレクション・インタラクションなどのルック＆フィールに影響するすべての要素が、vaultroomブランドの世界観を形成するものでなければならないと考えました。

■コンセプト

eスポーツでトップに君臨しているプロゲーマーは世界各国に存在しています。vaultroomは日本に拠点を置いたコミュニティですが、世界のトップコミュニティと比べても肩を並べられる存在感を出さなければならないと考えました。

また、ゲームに年齢は関係ないので、実際のところは全世代のゲーム・ファッション好きが視聴対象となりますが、ムーブメントを起こしているのは明らかにZ世代の人たちです。

そのため、ターゲットとなる国外を含めたZ世代に対して、新しい価値観を取り入れた前衛的で遊び心のある仕掛けをたくさん盛り込むことでデザイン的なアプローチができないかと考えました。

■手法、特徴

〇カラーリング

このサイトを見て最初に感じるのはカラーリングの独特さではないでしょうか。クライアントは当初からオレンジを主体とした配色を希望していましたが、オレンジが主体となるデザインはとても難しく、どのような配色バランスになればベストな印象になるのか試行錯誤が必要でした。最終的には希望どおり、オレンジを中心に添えた攻めたバランスの配色設計になりましたが、そこにいたるまでにはあらゆる情緒的なキーワードに基づいた17パターンもの配色を検証しています。

〇フォトディレクション

キービジュアルや各セクションのアイキャッチになっている写真は、サイトのためだけにvaultroom現地にて撮り下ろしています。ファッショナブルな印象やコミュニティの楽しげな印象、また独特な構図によってストリーミングを想起させる印象のものなど、さまざまなシーンを同じトーンのライティングにし、完全招待制の非現実な世界観を表現しています。

〇タイポグラフィ

テキストにマウスを当てるとビットマップに変化したようなインタラクションが発生します。これは2種類のWebフォントを使用していて、マウスを当てるとビットマップの書体に一瞬のうちに差し替わるような処理を施しています。

また、ウェイトがシームレスに変化するアニメーションも取り入れており、これはLightやBoldといった固定値で指定するものではなく、300から700までの一桁単位でウェイトを指定できるバリアブルフォントという次世代のフォント技術が採用されたWebフォントを使用しています。

〇モバイルデザイン

このサイトのターゲットの接点としては、PCよりもスマートフォンのほうが多いはずです。そこでモバイルファーストにレイアウトをリデザインしつつもPCと同等の印象になるよう心がけています。例えばメニューを開いた画面では、縦型のスクリーンでベストなレイアウトデザインを検討しました。

スマホ画面。右写真はメニューを開いたときの見え方

デザインに込めたこれらの意図や技術は、もしかすると風変わりだと感じ、共感できない人も多いかもしれません。ただ、デザインを届けたい相手は自分よりも若い世代。その世代が数年経って自分と同じような年齢になったときには、これらのような意図や技術は当たり前になっているかもしれない。そんなことを考えながら近未来の世界観を自分なりに形にしてみました。いまは前衛的と思われるかもしれませんが、長く親しまれるブランドサイトになることを願っています。