
映画の公式サイトで見かけたナビゲーションをスマートフォン限定で集めました。

## モーダルウィンドウ

メニューボタンをタップすると画面全体にモーダルウィンドウが開きます。縦の長さに制限がないため、メニュー項目が多い場合にも対応することが可能です。ウィンドウ全面を使用できるため、デザインの自由度も高くなります。

多くはJavaScriptやjQueryを用いて実装されますが、inputタグのcheckboxを利用してCSSのみで実装することも可能です。

![モーダルウィンドウ例1](/modal_01.png)  
映画「Lady Bird」アメリカ公式サイト

![モーダルウィンドウ例2](/modal_02.png)  
映画「否定と肯定」日本公式サイト

![モーダルウィンドウ例3](/modal_03.png)  
映画「ポリーナ、私を踊る」日本公式サイト

## ドロップダウン

メニューボタンをタップすると画面の上からスライドしながらメニューが表示されます。モーダルウィンドウと同じくらいの頻度で見かけることが多いメニューです。メニューの幅はサイトによって様々で、メニュー項目が改行しない最低限の幅のサイトもあれば、モーダルのように画面幅いっぱいのサイトもあります。

モーダルメニューと同様に、多くはJavaScriptやjQueryを用いて実装されることが多いメニューですが、inputタグのcheckboxを利用してCSSのみで実装することも可能です。

![ドロップダウンメニュー例1](/dropdown_01.png)  
[映画「ロダン　カミーユと永遠のアトリエ」日本公式サイト](http://rodin100.com/)

![](/dropdown_02.png)  
映画「ネルーダ」日本公式サイト

![ドロップダウンメニュー例3](/dropdown_03.png)  
[映画「スマーフ スマーフェットと秘密の大冒険」日本公式サイト](http://bd-dvd.sonypictures.jp/smurfsthelostvillage/)

## スライドメニュー

メニューボタンをタップすると画面の右または左からスライドしながら、画面の高さいっぱいのメニューが表示されます。モーダルメニュー、ドロップダウンメニューに次いで、映画の公式サイトでよく見かけます。

モーダルメニューと同様に、多くはJavaScriptやjQueryを用いて実装されることが多いメニューですが、inputタグのcheckboxを利用してCSSのみで実装することも可能です。

![スライドメニュー例1](/slidemenu_01.png)  
映画「Woodshock」アメリカ公式サイト

![スライドメニュー例2](/slidemenu_02.png)  
映画「Flatliners」アメリカ公式サイト

![](/slidemenu_03.png)  
映画「The Circle」アメリカ公式サイト

## ヘッダーメニュー

メニュー項目が画面上部に水平に一列に並ぶ形です。デスクトップやノートパソコンなどウィンドウ幅が広い場合によく用いられる形で、各コンテンツに容易にアクセスすることができます。ウィンドウ幅の狭いスマートフォンでこの形を用いるにはメニューの項目数に限界があります。映画の公式サイトでの利用は少ない印象です。

シンプルに横一列に並べる場合はCSSのみで実装可能です。

![ヘッダーメニュー例1](/headermenu_01.png)  
映画「All the Money in the World」アメリカ公式サイト

![ヘッダーメニュー例2](/headermenu_02.png)  
[映画「American Pastoral」アメリカ公式サイト 紹介ページ](/gallery/american-pastoral/)

## リストメニュー

メニュー項目をリスト形式で並べたナビゲーションです。初めから画面上にメニュー項目が見えているため、各ページへのアクセスは容易ですが、メニュー自体へのアクセスはボタンをタップして表示されるタイプと比べるとやや劣ります。

CSSのみで実装可能な一番シンプルなナビゲーションメニューです。

![リストメニュー例1](/listmenu_01.png)  
[映画「gifted／ギフテッド」日本公式サイト](http://www.foxmovies-jp.com/gifted/)

![リストメニュー例2](/listmenu_02.png)  
[映画「IT イット “それ”が見えたら、終わり。」日本公式サイト](http://wwws.warnerbros.co.jp/itthemovie/)

![リストメニュー例3](/listmenu_03.png)  
[映画「ノクターナル・アニマルズ」日本公式サイト](http://www.nocturnalanimals.jp/)

![リストメニュー例4](/listmenu_04.png)  
映画「ミックス。」日本公式サイト


映画公式サイトのスマホナビゲーションデザイン5種

Tags