メニューボタンをクリックすることで全画面のナビゲーション(フルスクリーンナビゲーション)を開くUIのまとめです。
当初はスマートフォン画面の省スペースを目的に使われはじめたUIかと思いますが、ユーザーに広く浸透した結果、デスクトップ画面でもよく使われるようになりました。
デスクトップ画面においては通常のグローバルナビゲーションとハンバーガーメニューボタンを併設することが多いです。グローバルナビゲーションには主要コンテンツを置き、フルスクリーンナビゲーションに全ページへのリンクを置くことでサイト内の回遊がとてもしやすいものとなっています。
今回は素敵なフルスクリーンナビゲーションの事例をまとめました。
参照させていただいているサイトへのリンクをキャプションにて掲載しています。
(最終更新日:2023年2月5日)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-15-1024x682.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-14-1024x684.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-13-1024x682.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-12-1024x683.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-11-1024x684.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-10-1024x682.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-09-1024x683.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-08-1024x680.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-07-1024x684.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-06-1024x682.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-05-1024x682.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-04-1024x684.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-03-1024x685.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-02-1024x683.png)
![](https://webdesigngarden.com/wp-content/uploads/2023/02/blog04_img_0205-01-1024x683.png)
![](https://webdesigngarden.com/wp-content/uploads/2022/09/blog04_img01-1024x803.png)
![](https://webdesigngarden.com/wp-content/uploads/2022/09/blog04_img02-1024x821.png)
![](https://webdesigngarden.com/wp-content/uploads/2022/09/blog04_img03-1024x690.png)
![](https://webdesigngarden.com/wp-content/uploads/2022/09/blog04_img04-1-1024x810.png)
![](https://webdesigngarden.com/wp-content/uploads/2022/09/blog04_img05.png)
![](https://webdesigngarden.com/wp-content/uploads/2022/09/blog04_img06-1024x812.png)
![](https://webdesigngarden.com/wp-content/uploads/2022/09/blog04_img07-1-1024x730.png)
![](https://webdesigngarden.com/wp-content/uploads/2022/09/blog04_img08-1024x658.png)
![](https://webdesigngarden.com/wp-content/uploads/2022/09/blog04_img09-1024x735.png)