WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

映画の世界観を再現!サイトもスタイリッシュな「スパイダーマン:スパイダーバース」

   

2019年3月8日の金曜日に公開された「スパイダーマン:スパイダーバース」!
今週の木曜日にやっと見ることが出来ました!とにかく全てがスタイリッシュでカッコいい映画でした…様々な世界線のスパイダーマン・スパイダーウーマンが1つの世界に集結し力を合わせて元の世界に帰るため奮闘するお話になっています。
スパイダーマンが糸を出すたびに「THWIP!」と出たりコマ割りのように映像が切り替わったりと、漫画をそのまま映像化したような見せ方でとってもオシャレです。
ただ情報量が多くて1度見ただけでは全て理解できなかったのが悔しいところでした…それでも最初から最後まで興奮しっぱなしの映画でした!

このサイトはピンクと水色のグラデーションを使用した特徴的な色使いのデザインになっています。スパイダーグウェンの着ているスーツの色合いを連想させますね!(彼女の靴が今回トゥーシューズになっているのが最高に可愛い!)
キャラクターの配置や背景の切り方なども漫画っぽく切り取られていてとってもオシャレなファーストビューになっています。

 

こちらは「INTRODUCTION」のページですが、主人公のマイルズがニューヨークの街に吸い込まれるようなイラストが全面に配置されています。
カーソルを動かすとマイルズや背景のニューヨークの街並みも合わせて動く仕組みになっていて、より遠近感・そして躍動感のあるページになっています。
このイラストに要素があまり重ならないよう、サブページはメニューがしまわれている状態なのもいいですね!
最大の見せ場の1つであるシーンを使用することで見たあとでも楽しめるサイトになっているのですね…感動的です…
(公式のTwitterでは映画を制作するにあたってのメイキング映像や解説なども掲載しているので、映画を見た人は必見です!)

 - イベント系サイト, 色で表現 , , ,

  関連記事

車の世界観に合わせたデザインがグッとくる!「Make Your own RENOCA」のサイト

トヨタのランドクルーザーとハイエースの専門店を全国展開する「フレックス」が、リノ …

細いフォントでスマートな感じを出す

    青色を使ったサイトです。アニメーションを用いたボタン …

コンテンツの背景に京都の写真を使ったサイトのデザインが大胆でおしゃれ!

京都府京都市にある「株式会社らくたび -洛を旅するらくたび-」のホームページです …

女性やカップルでも親しみやすいように、イラストを使ったデザインにした特別展サイト

2017年4月11日の火曜日から6月4日の日曜日まで東京国立博物館で開催される「 …

背景にテクスチャをかけ、画面を引き締める

  石油関連事業を行っている会社のホームページです。ロゴのカラーである …

「木」のイメージを大切にした注文住宅建築

愛知県津島市にある輸入住宅・注文住宅を建築している「STYLE COMPANY」 …

学校の「楽しそう!」な雰囲気が伝わってくる専門学校

愛知県名古屋市にある、医療系や販売・ITや観光系などのビジネス専門学校「あいちビ …

ヘッダー・コンテンツ・フッターで背景を分けメリハリを付けたデザインに

千葉県野田市にある美容室「mimpi」のホームページです。 ヘッダー・コンテンツ …

落ち着いた和の雰囲気と、黒を基調とした色合いで50年という歴史を感じる渋いデザイン

島根県松江市にある塗装会社「ポインテリア」のホームページです。 落ち着いた和の雰 …

後ろのアイコンが流れるのに対し、赤十字マークと中央の文字は動かさずに立体感をだす。

島根県日本赤十字社「益田赤十字病院」のホームページです。 トップページの赤い色が …