AI画像を使った架空のサスペンス映画のwebサイト制作
https://wawawawa-wawawawa.github.io/ori/
AI画像を使った架空のサスペンス映画のwebサイト制作
以前から映画を見る前後にその映画の公式サイトを見るようにしていて、だんだんと見ていくうちに映画によってアニメーションやデザインが大きく違っていて面白いと思った。そのため映画サイトにおけるアニメーションの役割や構成の方法が作品の世界観にどう影響してくるのか研究してみたいと思った。
また、以前から映画業界に興味があったので、架空の映画サイトを作ることでさらに映画というジャンルを楽しめるのではないかと思った。
また、近年AIを使った画像や動画が多く流通しており、企画から制作までAIの力を借りることで、webサイト全体にどんな効果をもたらすのか調査したいと思った。
全体的に、サスペンス映画の雰囲気にあった、不気味で緊張感を感じさせる暗いトーンでサイトを制作した。
サイトの背景は白から黒へと変化するグラデーションにし、スクロールしていくうちに物語の深層に入っっていくような構成にした。また、それぞれのセクションには濃い赤やグレーなどを使い、恐怖、緊張、不気味さといった感情を表現した。
また、使用する画像はchatGPTを使い,あらすじに合った画像になるよう指示して生成したことで、コンセプトは守りつつ個性もあるwebサイトを実現した。
webサイト
Visual Studio Code
三年前期
今回の制作を通して、Webサイトにおけるデザインやアニメーションは単なる飾りではなく、作品の世界観や感情を伝える重要な要素であると改めて実感した。特に映画のサイトは、見た人が情報を得るだけでなく、サイト自体を通して作品の雰囲気を体験することができることが重要であると感じた。
また、同じ構成であっても色や動きの違いによって印象が大きく変化することが分かった。さらにAIを活用したことにによって伝えたいことを分かりやすく表示でき、表現の可能性が広がることも分かった。
今後はよりストーリー性を持った工夫を取り入れることで、映画の世界観をさらに深く表現できるようなサイトを作っていきたい。
主に邦画のwebサイトを調査した。
アニメーションがたくさん使われた仕掛けのあるwebサイトが多く、視覚的なインパクトや没入感が重視された設計が多く見られた。
構成はどのサイトもそんなに大差はなく、トップページ、あらすじ、キャスト紹介、スタッフ紹介、ニュースといった構成を１ページにまとめるのが一般的であることがわかった。
しかしアニメーションの使い方で受ける印象が大きく変わると感じた。例えばスクロールに合わせて要素がゆっくりとフェードインする演出は余韻を感じさせ、映画の雰囲気を繊細に伝える効果がある。一方で、急な動きや強いトランジションを用いた演出は、緊張感やスピード感を強調し、サスペンスやアクション作品との相性が良いと考えられる。
また、グラデーションが多く使われたデザインは柔らかく儚い印象を与え、視覚的にも感情的にも余白のある世界観を表現しやすいのに対して、セクションごとの区切りが明確でコントラストの強いデザインは、情報の整理がしやすく、構造的で硬い印象を与える傾向があるとわかった。
さらに、タイポグラフィや余白の取り方によってもサイト全体の雰囲気は大きく変化し、同じ情報量であっても「映画らしさ」や「物語性」の感じ方に違いが生まれることが分かった。
特になし
