AI画像を使った架空のサスペンス映画のwebサイト制作
AI画像を使った架空のサスペンス映画のwebサイト制作
以前から映画を見る前後にその映画の公式サイトを見るようにしていて、だんだんと見ていくうちに映画によってアニメーションやデザインが大きく違っていて面白いと思った。そのため映画サイトにおけるアニメーションの役割や構成の方法が作品の世界観にどう影響してくるのか研究してみたいと思った。
また、以前から映画業界に興味があったので、架空の映画サイトを作ることでさらに映画というジャンルを楽しめるのではないかと思った。
また、近年AIを使った画像や動画が多く流通しており、企画から制作までAIの力を借りることで、webサイト全体にどんな効果をもたらすのか調査したいと思った。
全体的に、サスペンス映画の雰囲気にあった、不気味で緊張感を感じさせる暗いトーンでサイトを制作した。
サイトの背景は白から黒へと変化するグラデーションにし、スクロールしていくうちに物語の深層に入っっていくような構成にした。また、それぞれのセクションには濃い赤やグレーなどを使い、恐怖、緊張、不気味さといった感情を表現した。
また、使用する画像はchatGPTを使い,あらすじに合った画像になるよう指示して生成したことで、コンセプトは守りつつ個性もあるwebサイトを実現した。
Visual Studio Code
三年前期
今回の制作を通して、Webサイトにおけるデザインやアニメーションは単なる飾りではなく、作品の世界観や感情を伝える重要な要素であると改めて実感した。特に映画のサイトは、見た人が情報を得るだけでなく、サイト自体を通して作品の雰囲気を体験することができることが重要であると感じた。
また、同じ構成であっても色や動きの違いによって印象が大きく変化することが分かった。さらにAIを活用したことにによって伝えたいことを分かりやすく表示でき、表現の可能性が広がることも分かった。
今後はよりストーリー性を持った工夫を取り入れることで、映画の世界観をさらに深く表現できるようなサイトを作っていきたい。
主に邦画のwebサイトを調査した。
アニメーションがたくさん使われた仕掛けのあるwebサイトが多く、視覚的なインパクトや没入感が重視された設計が多く見られた。
構成はどのサイトもそんなに大差はなく、トップページ、あらすじ、キャスト紹介、スタッフ紹介、ニュースといった構成を１ページにまとめるのが一般的であることがわかった。
しかしアニメーションの使い方で受ける印象が大きく変わると感じた。例えばスクロールに合わせて要素がゆっくりとフェードインする演出は余韻を感じさせ、映画の雰囲気を繊細に伝える効果がある。一方で、急な動きや強いトランジションを用いた演出は、緊張感やスピード感を強調し、サスペンスやアクション作品との相性が良いと考えられる。
また、グラデーションが多く使われたデザインは柔らかく儚い印象を与え、視覚的にも感情的にも余白のある世界観を表現しやすいのに対して、セクションごとの区切りが明確でコントラストの強いデザインは、情報の整理がしやすく、構造的で硬い印象を与える傾向があるとわかった。
さらに、タイポグラフィや余白の取り方によってもサイト全体の雰囲気は大きく変化し、同じ情報量であっても「映画らしさ」や「物語性」の感じ方に違いが生まれることが分かった。
特になし
1) コンセプト 全体的に、サスペンス映画の雰囲気にあった、不気味で緊 張感を感じさせるくらいトーンでサイトを制作した。 サイトの背景は白から黒へと変化するグラデーションに し、スクロールしていくうちに物語の深層に入っっていくよ うな構成にした。また、それぞれのセクションには濃い赤や グレーなどを使い、恐怖、緊張、不気味さといった感情を表 現した。
また、使用する画像は chatGPT を使い , あらすじに合っ た画像になるよう指示して生成したことで、コンセプトは守 りつつ個性もある web サイトを実現した。
(2) ワイヤーフレーム
Figma を使用し制作した。 上からトップ画像、あらすじ、キャスト、スタッフ、ニュー
右ページ1段落
スの順に配置した。最も強調させたい映画の世界観や概要を
約27文字 x 48行
上部に配置することで、自然に作品へと入り込めるように意
識した。
(3)Web サイト
一番上に置いたキービジュアルは、縦と横の二種類制作し、
スマホでも見やすいような構造にした(図 4)。
あらすじはタイプライターのようなアニメーションをつ
け、文字が徐々に表示されることで物語が少しずつ明かされ
ていくような印象を演出した(図5)。
その下にキャスト一覧を表示させた。人物にカーソルを合
わせると暗闇から浮き上がってくるようなアニメーションを
図 5 あらすじ
つけ、不気味さを演出した(図6)。 スタッフのセクションはキャストより目立たなくするため に、背景はグレーにして、アニメーションも最小限にし、全 体的にコンパクトに収まるようにした。 ニュースは黒っぽい背景に対し深い赤にすることでコント ラストで目立たせつつ、横に三つずつ置くことで見やすくし た。 またあらすじやキャスト紹介、ニュースなどの文章は全て AI に生成してもらったことで、より AI の世界観を引き出す ことができた。
どういうふうに作ったのか過程を描く
