#author("2026-07-16T12:22:11+09:00","default:member","member") #author("2026-07-16T12:23:28+09:00","default:member","member") *映画『沈黙の檻』公式サイト制作 AI画像を使った架空のサスペンス映画のwebサイト制作 #image(main.jpg) -[[ 映画サイト>https://wawawawa-wawawawa.github.io/ori/]] -[[概要集>https://ksumail-my.sharepoint.com/:b:/g/personal/k24as021_st_kyusan-u_ac_jp/IQDHxf3DhhbLRqySkjy_RQQRAdKEEe3dCPht_dfV7fFS2GA?e=8q2hGI]] -''中尾桃瀬'' -'''Keywords：映画, AI,webサイト''' //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ AI画像を使った架空のサスペンス映画のwebサイト制作 ~ ***背景と目的 以前から映画を見る前後にその映画の公式サイトを見るようにしていて、だんだんと見ていくうちに映画によってアニメーションやデザインが大きく違っていて面白いと思った。そのため映画サイトにおけるアニメーションの役割や構成の方法が作品の世界観にどう影響してくるのか研究してみたいと思った。 また、以前から映画業界に興味があったので、架空の映画サイトを作ることでさらに映画というジャンルを楽しめるのではないかと思った。 また、近年AIを使った画像や動画が多く流通しており、企画から制作までAIの力を借りることで、webサイト全体にどんな効果をもたらすのか調査したいと思った。 ~ ***コンセプト 全体的に、サスペンス映画の雰囲気にあった、不気味で緊張感を感じさせる暗いトーンでサイトを制作した。 サイトの背景は白から黒へと変化するグラデーションにし、スクロールしていくうちに物語の深層に入っっていくような構成にした。また、それぞれのセクションには濃い赤やグレーなどを使い、恐怖、緊張、不気味さといった感情を表現した。 また、使用する画像はchatGPTを使い,あらすじに合った画像になるよう指示して生成したことで、コンセプトは守りつつ個性もあるwebサイトを実現した。 ~ ***成果物の仕様 [[ webサイト>https://wawawawa-wawawawa.github.io/ori/]] ~ ***制作ツール Visual Studio Code ~ ***プロジェクトの期間 三年前期 ~ ***まとめ 今回の制作を通して、Webサイトにおけるデザインやアニメーションは単なる飾りではなく、作品の世界観や感情を伝える重要な要素であると改めて実感した。特に映画のサイトは、見た人が情報を得るだけでなく、サイト自体を通して作品の雰囲気を体験することができることが重要であると感じた。 また、同じ構成であっても色や動きの違いによって印象が大きく変化することが分かった。さらにAIを活用したことにによって伝えたいことを分かりやすく表示でき、表現の可能性が広がることも分かった。 今後はよりストーリー性を持った工夫を取り入れることで、映画の世界観をさらに深く表現できるようなサイトを作っていきたい。 ~ ~ **調査 ***現状調査 主に邦画のwebサイトを調査した。 アニメーションがたくさん使われた仕掛けのあるwebサイトが多く、視覚的なインパクトや没入感が重視された設計が多く見られた。 構成はどのサイトもそんなに大差はなく、トップページ、あらすじ、キャスト紹介、スタッフ紹介、ニュースといった構成を１ページにまとめるのが一般的であることがわかった。 しかしアニメーションの使い方で受ける印象が大きく変わると感じた。例えばスクロールに合わせて要素がゆっくりとフェードインする演出は余韻を感じさせ、映画の雰囲気を繊細に伝える効果がある。一方で、急な動きや強いトランジションを用いた演出は、緊張感やスピード感を強調し、サスペンスやアクション作品との相性が良いと考えられる。 また、グラデーションが多く使われたデザインは柔らかく儚い印象を与え、視覚的にも感情的にも余白のある世界観を表現しやすいのに対して、セクションごとの区切りが明確でコントラストの強いデザインは、情報の整理がしやすく、構造的で硬い印象を与える傾向があるとわかった。 さらに、タイポグラフィや余白の取り方によってもサイト全体の雰囲気は大きく変化し、同じ情報量であっても「映画らしさ」や「物語性」の感じ方に違いが生まれることが分かった。 ~ ***先行事例 -[[映画サイト一覧>https://designnokoto.com/category/movie]] --[[秒速５センチメートル>https://5cm-movie.jp/]] ←シンプル、動画差し込みの参考 --[[なのに、千輝くんが甘すぎる。>https://movies.shochiku.co.jp/chigirakun-movie/]] ←かわいい --[[終点のあの子>https://endof-theline.com/]] ←シンプル、王道？ --[[炎上>https://enjou-movie.jp/]]←アニメーション、サイト構成参考 --[[佐藤さんと佐藤さん>https://www.sato-sato.com/]]←アニメーション参考 -[[アナウンサーたちの戦争>https://thevoices-at-war-movie.com/#]]←アニメーション参考、コンセプトにも合う ~ ***技法・技術情報 特になし ~ ~ **プロジェクト管理 ***スケジュール -[[Excel>https://ksumail-my.sharepoint.com/:x:/g/personal/k24as021_st_kyusan-u_ac_jp/IQBXOn_CKUzgSpwV5Di-AJQWAeTPv9joGM1BXc3JeIGxA2M?e=l1mqpF]] #image(schedule.png) ~ ***ToDo -%%選考事例調査%% -%%サイトマップ制作%% -%%ワイヤーフレーム制作%% -%%webサイト制作%% -ブラッシュアップ //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' #hr ~ ~ **2026.07.16 ***最終審査 -アニメーション方法による感じ方の違い -サスペンス映画に合うアニメーション▶️静かで緊張感のある演出 --タイトルがゆっくり浮かび上がる --暗闇から人物が浮き上がる 1) コンセプト 全体的に、サスペンス映画の雰囲気にあった、不気味で緊 張感を感じさせるくらいトーンでサイトを制作した。 サイトの背景は白から黒へと変化するグラデーションに し、スクロールしていくうちに物語の深層に入っっていくよ うな構成にした。また、それぞれのセクションには濃い赤や グレーなどを使い、恐怖、緊張、不気味さといった感情を表 現した。 また、使用する画像は chatGPT を使い , あらすじに合っ た画像になるよう指示して生成したことで、コンセプトは守 りつつ個性もある web サイトを実現した。 (2) ワイヤーフレーム Figma を使用し制作した。 上からトップ画像、あらすじ、キャスト、スタッフ、ニュー 右ページ1段落 スの順に配置した。最も強調させたい映画の世界観や概要を 約27文字 x 48行 上部に配置することで、自然に作品へと入り込めるように意 識した。 (3)Web サイト 一番上に置いたキービジュアルは、縦と横の二種類制作し、 スマホでも見やすいような構造にした(図 4)。 あらすじはタイプライターのようなアニメーションをつ け、文字が徐々に表示されることで物語が少しずつ明かされ ていくような印象を演出した(図5)。 その下にキャスト一覧を表示させた。人物にカーソルを合 わせると暗闇から浮き上がってくるようなアニメーションを 図 5 あらすじ つけ、不気味さを演出した(図6)。 スタッフのセクションはキャストより目立たなくするため に、背景はグレーにして、アニメーションも最小限にし、全 体的にコンパクトに収まるようにした。 ニュースは黒っぽい背景に対し深い赤にすることでコント ラストで目立たせつつ、横に三つずつ置くことで見やすくし た。 またあらすじやキャスト紹介、ニュースなどの文章は全て AI に生成してもらったことで、より AI の世界観を引き出す ことができた。 どういうふうに作ったのか過程を描く ***ブラッシュアップ -相関図が暗くて見にくい▶️マウスが触れなくても明るく見えるように変更 - ~ ~ **2026.07.09 ***サイト制作 -あらすじ部分の文字サイズ変更 ~ ~ **2026.07.02 ~ ~ **2026.06.25 ***サイト制作 -アニメーションつける -文字の大きさや位置などの細かい変更 -ハンバーガーメニューつける ~ ~ **2026.06.18 ***サイト制作 -アニメーションつける(浮き出てくるような) -タイプライターのようなアニメーションを追加 -スマホ版でも情報が正確に表示できるようにした ~ ~ **2026.06.11 ***サイト制作 -アニメーションつける -スマホ用のメインビジュアル生成 ~ ~ **2026.06.04 ***サイト制作 -アニメーションつける -写真入れ込み ~ ~ **2026.05.21 ***中間審査 ***サイト制作 -AI画像生成 -それぞれのセクションに文章を書いた ~ ~ **2026.05.14 ***中間審査(発表) -コンセプトに合ったアニメーションを使う ***webサイト制作中 ~ ~ **2026.05.07 ***中間審査 ***サイト制作 -枠組み完成 ~ ~ **2026.04.30 ***ワイヤーフレーム制作 #image(wireframe.jpg,center,50%) ~ ~ **2026.04.23 ***サイトマップ制作 -入れる内容 --トップページ --ストーリー --キャスト --スタッフ、監督 --相関図 --ニュース --予告 ~ ***サイトマップ（Canvaで作成）↓ #image(sitemap.jpg) ~ ***映画の内容(GPT作成) -ジャンル➡️サスペンス（変える可能性有） -あらすじ #image(arasuzi.png) ~ -キャスト --主人公 神崎 遼（かんざき りょう）｜32歳｜フリーライター ---過去にある“誤報事件”で信用を失った元新聞記者 ---失踪事件を独自に追う ---真実を求めているが、「事実を歪めた過去」がある --ヒロイン 相沢 美咲（あいざわ みさき）｜28歳｜失踪者の妹 ---姉の失踪事件を追い続けている ---表向きは被害者家族だが、何かを隠している ---神崎に協力するが、時折不可解な言動 --刑事 黒田 恒一（くろだ こういち）｜45歳｜刑事 ---事件の担当刑事 ---神崎の過去を知っており、信用していない ---捜査情報を隠している様子 --失踪者 相沢 恒一（あいざわ けいこ）｜享年34歳（失踪時） ---美咲の姉 ---失踪前、ある施設に関わっていた ---日記の一部だけが見つかる --医師 瀬川 恒一（せがわ しゅん）｜40歳｜精神科医 ---失踪前の慶子の担当医 ---患者の守秘義務を理由に多くを語らない ---神崎に対して妙に協力的 --謎の男 「X」｜年齢不詳 ---監視カメラに何度も映り込む人物 ---複数の証言に登場するが正体不明 ---存在自体が曖昧 ~ ***次回やること -ワイヤーフレーム制作(Figma) ~ ~ **2026.04.16 ***制作イメージ -興味のあるジャンル▶️恋愛、青春、サスペンス -儚い、シンプル、無彩色、可愛い ~ ***制作例 -[[映画サイト一覧>https://designnokoto.com/category/movie]] --[[秒速５センチメートル>https://5cm-movie.jp/]] ←シンプル、動画差し込みの参考 --[[なのに、千輝くんが甘すぎる。>https://movies.shochiku.co.jp/chigirakun-movie/]] ←かわいい --[[終点のあの子>https://endof-theline.com/]] ←シンプル、王道？ --[[炎上>https://enjou-movie.jp/]]←アニメーション、サイト構成参考 --[[佐藤さんと佐藤さん>https://www.sato-sato.com/]]←アニメーション参考 --[[アナウンサーたちの戦争>https://thevoices-at-war-movie.com/#]]←アニメーション参考、コンセプトにも合う ~ ***制作方法 -サイトに入れる画像、映像→AI ~ ***次回やること -サイトマップ、ワイヤーフレーム制作 ~ ~ **2026.04.09 ***テーマ案 -__架空の邦画Webサイト__◀️ｺﾚ -映画パンフレットの研究 -企業ロゴがもたらす効果 ~ ~