デザインサイトユーザビリティの根幹要素であるナビゲーションは常に変化を続けています。最近始まったわけではありませんが、フルスクリーンナビゲーションのサイトはまだまだトレンドといっても過言ではないほどよく見かけます。フルスクリーンナビゲーションと一言で言っても、サイトによって様々なアイデアで作られています。今回はフルスクリーンナビゲーションを採用している、制作の参考になるサイトをご紹介します。まとめフルスクリーンナビゲーションのメリット・デメリットやはりメリット・デメリットについては考えなくてなならないですね。フルスクリーンナビゲーションを採用した理由が「よく見かけておしゃれだから」では制作者としては残念です。「ウンチクなんかいらねーし」という方は実例まですっ飛ばしてください。メリット大胆、斬新なレイアウトが可能その名の通り、全画面をナビゲーションエリアとして使用するので、スプリットレイアウトを取り入れたり、背景画像を使用したリッチなナビゲーションを作ることができます。レスポンシブとして機能しやすいもともとスマホでは表示領域が狭いためフルスクリーンナビゲーションがほとんどです。モバイルファーストの流れの中で、スマホで主流だったフルスクリーンナビゲーションをPCでも採用するようになりました。PCでもフルスクリーンナビゲーションであるため、ブレイクポイントで小難しいレイアウト変更をあまりすることなくレスポンシブ表示の移行が可能です。これは制作者としては工数が削減され、より作業がスピーディーになるメリットがあります。デメリットナビゲーションの中身が見えないこの議論は以前からありますが、クリックするまで中身が見えないのはユーザビリティとしてはデメリットです。ナビゲーション開くボタンがわかりにくかったらもう終わりフルスクリーンナビゲーションを開くボタンとしては、ほとんどのサイトがハンバーガーメニューを使用しています。ハンバーガーメニューであれ、違うものであれ、その位置やサイズ、背景とのコントラストによってはとてもわかりにくいサイトがあります。なるとユーザーがサイトを回遊することなくさってしまうことは間違いありません。見る側にとっても制作側にとってもハードル高め大分主流になったのでハードルは下がっていますが、それでもまだまだ、上記のようにボタンを見つけられないこともあります。制作側としてもcssやjqueryの知識が必要であり、制作のハードルも高めです。自作でなくてもプラグインがたくさん出ているのでそちらを使うという手もあります。実際のサイトをパターンごとに見ていきましょう。シンプル特に難しいことはせずにナビゲーションをシンプルにレイアウトしているパターンです。縦・横それぞれのレイアウトがあります。縦レイアウトRoot王道のフルスクリーンナビゲーションです。背景を透過させる一手間がスタイリッシュです。no3レイアウトはシンプルですが、ナビゲーションにマウスオーバーしたときのラインアニメーションがおしゃれです。POGGこちらもレイアウト、背景はいたってシンプルですが、ナビゲーションを開くときのアニメーションがふわっと気持ちいいです。ドットがマウスを追いかけて来ます。HOMEPCでのファーストビューでは通常の横並びナビゲーション配置して、ある程度スクロールするとハンバーガーメニューに代わり、フルスクリーンナビゲーションになります。PCではこのパターンがもっとも有効だと私的には思っています。PCでは表示領域が広いので、こちらのように横並びのフルスクリーンナビゲーションにすることも可能です。スマホでは縦のレイアウトになっています。festivalサイトとフルスクリーンナビゲーションがキーカラー、ベースカラーが反転していて印象がガラッと変わります。サン・アドこちらも最初は通常のナビゲーションとハンバーガーメニュー両方を出しておいて、ハンバーガーだけがついてきます。ナビゲーションに縦書きになっていて横レイアウトとの相性もバッチリ!スプリットナビゲーションにスプリットレイアウトを使えるのもフルスクリーンだからこそです。左右の対比が面白いナビゲーションになります。ピッキオキービジュアルとナビゲーションの対比。monopoナビゲーションではないエリアにニュース、SNSボタンを表示しています。2019年度新卒採用サイト上のサイトと似ている印象ですが、こちらのサイトは開く際のアニメーションするタイルがさらに細かくなっています。背景画像フルスクリーンナビゲーション用に背景画像を表示するパターンです。イメージが変わり、リッチな印象を与えます。APPRIVOISER(アプリボアゼ)背景画像の上に斜めのレイヤーが重なるアニメーションが秀逸。オンラインショップグリッドフルスクリーンナビゲーションにグリッドレイアウトと取り入れているのもとても斬新だなと思いました。版画工房アーティーナビゲーションが9つのグリッドレイアウトになっています。ちなみにこちらも背景画像があり、開くたびに画像が変わるのも素敵です。スライダーこちらも面白いアイデアですね。ナビゲーションなら、スライダーを入れることもできちゃいます。有限会社エスティエイアールとてもシンプルなんですが、横のスライダーとのバランスが絶妙でとてもスタイリッシュかつ斬新。当サイトのgalleryで「フルスクリーンナビ」のサイト集めてますのでこちらも見てみてください。デザイン】おしゃれなデザインのサイトまとめ!のまとめ2018.07.04まとめフルスクリーンナビのサイト、いかがだったでしょう?制作の参考になる優れたアイデア、デザインのサイトばかりでした。フルスクリーンナビゲーションはやはり印象的なユーザーインターフェースにすることができます。制作するサイトによって向き不向きがあるので、そこはよくよく判断して制作する必要があります。このブラウザでは正常に見れるけどこっちのブラウザだと開かない、なんてサイトもちょいちょいありますのでクロスブラウザチェックも重要です。Day.GALLERYINSPIRATIONCONTACTTGIC。