SF映画
Avengers

○テーマ

jQuery等のライブラリ、フレームワークを使用せず、
CSSアニメーション、ネイティブJSのみで制作を行う。

1年間で得たスキルをご披露、また、定着を兼ね、jQuery等のライブラリ、フレームワークを敢えて使用せず、CSSアニメーション、ネイティブJSのみでアニメーション実装を行いました。

○内容

• 使用言語

  HTML、Sass、JavaScript、PHP、MySQL

• ターゲット

  19~22歳の、ワクワクする映画を探し中の男性

• デザインコンセプト

  当映画が持つ迫力とSF特有の未来感、舞台となる宇宙をイメージ。
  サイトを見る人にワクワクしてもらえるような“魅せる表現”を意識。

• 追加ポイント

  2回目以降トップページを訪れる際、ローディング画面を非表示
  PHPとMySQLによるカートシステムを追加

  

  

• 良かったこと
  制作を通じて得たこと

  意図あるデザインを発揮できたと感じる。
  学んできた言語の基礎理解を深める良い機会になった。

• 苦労したこと
  制作を通しての反省点

  グラフィック能力が乏しいと感じた。
  残り1年間の学生生活の中で積極的に練習していきたい。

○ストーリー

• ● 一目で雰囲気や世界観

  キャッチコピーが“ここに、最強が集結”であるように、あらゆるヒーローが集結するのが本映画の特徴であるため、集結シーンをメインビジュアルに置くことを考慮したが、シリーズを全て見終わった後、当画像を置いた意味が回収されるよう伏線の意味も込め、ファン界隈でダントツに盛り上がったラストシーンをメインビジュアルに採用。また、トップページをサーっと流し見してもらう中、舞台となる宇宙をイメージしていただけるよう、ふわふわ浮く無重力空間を演出。

  

  
• ● 次に知りたいことは？

  “映像の方がいち早く理解できる”、というユーザーが特定数いることを考え、人気作品3つの予告映像を紹介。映像により大体理解できたなら、作品の詳細やストーリーの全体像が知りたくなると考え、紹介ページを展開。映画内でも使用された、マスクからプロジェクションマッピングが放出される演出を使用。また、どういったキャラクターが登場するかを知ってもらうため、全キャラ集結画像を使用。

  

  

  
• ● 次に知りたいことは？

  映画を十分に理解できたなら、鑑賞に向かうと考える。ただ、作品が多く、全てを紹介しきれないので、各フェーズでキーポイントとなる作品を予告映像を見せながら紹介。作品購入ページにも繋げる。

  

  
• ● 次に知りたいことは？

  いくつかの作品を鑑賞できたなら、各キャラクターの出生等、詳細が気になると考える。未来感をイメージしていただけるよう、キャラクターがプリントアウトされていく演出を表現したかったが、スキル不足により断念。代わりに、ヒーロー側は、あるキャラクターの特徴的な登場シーンを表現。ヴィラン側については、敵っぽくゆっくりと登場する様を表現。

  

  

  
• ● 作品購入ページ