こんにちは、すっかり寒くなってきて衣替えがまだ間に合ってない編集です。

さて今回取り扱うテーマはエンタメ系サイト内での「ナビゲーション演出」と、何ともニッチなテーマに取り組んでみたいと思います。
エンタメ系のサイトでは、いわゆるビジネス系のそれらとは違い、作品やタイトル,アーティストが持つ「世界観」を表現することに力点を置くことが多いため、ナビゲーション周りのデザインや実装などもさぞかし凝ったものがあるかな….と思いきや、割とあっさりとした形のものが多かったりします。

基本的に「使い勝手」にプライオリティが置かれるパーツのため、シンプルに作られることが多い中そんな場所にちょっとしたひと手間やこだわりを持って作られているナビゲーションを見かけると作り手のこだわりを感じますね。
サイト巡回している中で見かけたちょっとした演出を今回はいくつかご紹介したいと思います！

劇場のエッセンスを加えるひと手間

出典：https://www.warahibi.com/

サンリオさん初のお笑い芸人をモチーフにしたキャラクターを描く「warahibi」。
6組12人のお笑い芸人キャラクターが実際にネタも披露する次世代お笑いエンタメ企画。のサイトです。

こちらのサイトのグローバルナビゲーションは一見するとごくごく普通の横型ナビゲーションで特に変わった部分はないのですが、メニューをクリックしページ遷移しようとすると…劇場の緞帳のような効果が左右から入り、あたかも幕の1幕が変わったような演出が入ります。

決して派手な演出ではありませんが、こうしたちょっとした一手間でお笑い小屋・劇場の雰囲気をサイトに漂わせる、「粋」を感じます。いいですね！

ゲームのメインテーマをナビゲーションにも盛り込んでる

出典：https://mahoyaku.com/

魔法使いと人間が共存する世界を舞台に21人の魔法使い達と共に、月が及ぼす「大いなる厄災」に立ち向かう、魔法使い育成ファンタジーゲーム「魔法使いの約束」の公式サイト。

惑星や天体を思わせるような”円”をデザインに取り入れたり、惑星の公転を思わせるようなアニメーション演出がサイトのここそこに取り入れられたりと、とても丁寧に作り込まれた素敵なサイトです。

そんな中においてのグローバルナビゲーション。ですが、メニュー部分をクリックすると…まるで月光のような光がサイトに差し込みます！
本作のテーマである「月」のエッセンスをちょっとした工夫でナビゲーション内にも盛り込んでいるあたりが素敵であり、その月明かり効果はそのままメニューテキストの可読性を上げたりもしているのでにくいです。
テーマや世界観を表現しつつナビゲーションとしての機能性もあげる、ととてもGOODなナビゲーションだと思いました。

スペースを無駄にしない工夫

PCビューにおいてハンバガーメニューなどでメニューウィ格納しておくパターンも多いかと思います。
その場合、メニューを開いた際にできたスペースをどう活かすか、まで配慮できるとサイトの雰囲気もグッと良くなると思います。

八月のシンデレラ

出典：https://hachinai.com/

サイトに入るとセミの鳴き声が響き渡り、学生時代のどこか懐かしいそんな雰囲気が漂うサイトです。
展開したナビゲーションエリアではコンテンツエリアにマウスオンすると学校生活の一コマを想起させる背景イラストが表示されます。夏の日の青春をふっとよぎらせるような効果がゲームの世界観の一端を表現していて良いですね。

スペースチャンネル5 VR あらかた★ダンシングショー

出典：https://sc5-vr.com/

セガの人気のダンスゲーム、スペースチャンネル5 VR あらかた★ダンシングショー
宇宙人達からダンスで地球を守るという世界観のゲームですが、ナビゲーションの表示アニメーションでスペイシー感がましています。

ナビゲーションスペースのサイトを埋める形でありながら、各コンテンツのコンセプトにあった表現を取り入れていてとても良いと思います。

まとめ

いかがでしたでしょうか？
ナビゲーションの中でもちょっとしたひと手間や工夫で、作品の世界観やテーマサイトの雰囲気などを一段上げることができるのではないでしょうか？ こういった部分でどこまで手をかけるかがとても大事ですね。