tips / javascript

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

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

モーダルウィンドウ

メニューボタンをタップすると画面全体にモーダルウィンドウが開き、ナビゲーションのメニュー項目が表示されます。レスポンシブサイトが多くなってきてからはデスクトップ用のサイトでも見られるようになりました。縦の長さに制限がないため、メニュー項目が多い場合にも対応することが可能です。ウィンドウ全面を使用できるため、デザインの自由度も高くなります。

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

モーダルウィンドウ例1
映画「Lady Bird」アメリカ公式サイト

モーダルウィンドウ例2
映画「否定と肯定」日本公式サイト

モーダルウィンドウ例3
映画「ポリーナ、私を踊る」日本公式サイト

ドロップダウン

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

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

ドロップダウンメニュー例1
映画「ロダン カミーユと永遠のアトリエ」日本公式サイト

dropdown 02
映画「ネルーダ」日本公式サイト

ドロップダウンメニュー例3
映画「スマーフ スマーフェットと秘密の大冒険」日本公式サイト

スライドメニュー

メニューボタンをタップすると画面の右または左からスライドしながら、画面の高さいっぱいのメニューが表示されます。メニューの幅はサイトによって様々で、メニュー項目が改行しない最低限の幅のサイトもあれば、モーダルのように画面幅いっぱいのサイトもあります。モーダルメニュー、ドロップダウンメニューに次いで、映画の公式サイトでよく見かけますが、日本の公式サイトよりも海外の公式サイトに多い印象です。

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

スライドメニュー例1
映画「Woodshock」アメリカ公式サイト

スライドメニュー例2
映画「Flatliners」アメリカ公式サイト

slidemenu 03
映画「The Circle」アメリカ公式サイト

ヘッダーメニュー

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

シンプルに横一列に並べる場合はCSSのみで実装可能です。縦に長いシングルページではJavaScriptを用いて、現在表示している位置を示すために該当のメニュー項目をアクティブにする形や、スクロール後も画面上部に固定される仕様なども見られます。

ヘッダーメニュー例1
映画「All the Money in the World」アメリカ公式サイト

ヘッダーメニュー例2
映画「American Pastoral」アメリカ公式サイト 紹介ページ

リストメニュー

メニュー項目をリスト形式で並べたナビゲーションです。初めから画面上にメニュー項目が見えているため、メニューを探して迷うということはなくなります。トップページのみリストメニューを設置し、下層ページは異なる仕様のメニューを設置しているサイトや、下層ページにもトップページと同じリストメニューを設置するサイトなど様々です。

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

リストメニュー例1
映画「gifted/ギフテッド」日本公式サイト

リストメニュー例2
映画「IT イット “それ”が見えたら、終わり。」日本公式サイト

リストメニュー例3
映画「ノクターナル・アニマルズ」日本公式サイト

リストメニュー例4
映画「ミックス。」日本公式サイト

View All