中尾桃瀬/情報デザイン研究I をテンプレートにして作成

開始行:
*映画『沈黙の檻』公式サイト制作 AI画像を使った架空のサスペンス映画のwebサイト制作 #image(main.jpg) -[[ 映画サイト>https://wawawawa-wawawawa.github.io/ori/]] -[[概要集>https://ksumail-my.sharepoint.com/:b:/g/persona... -''中尾桃瀬'' -'''Keywords：映画, AI,webサイト''' //-__[[相互評価シート>https://www.example.com]]__ ← ここ... //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ AI画像を使った架空のサスペンス映画のwebサイト制作 ~ ***背景と目的 　以前から映画を見る前後にその映画の公式サイトを見るよう... 　また、以前から映画業界に興味があったので、架空の映画サ... 　また、近年AIを使った画像や動画が多く流通しており、企画... ~ ***コンセプト 　全体的に、サスペンス映画の雰囲気にあった、不気味で緊張... 　サイトの背景は白から黒へと変化するグラデーションにし、... 　また、使用する画像はchatGPTを使い,あらすじに合った画像... ~ ***成果物の仕様 [[ webサイト>https://wawawawa-wawawawa.github.io/ori/]] ~ ***制作ツール Visual Studio Code ~ ***プロジェクトの期間 三年前期 ~ ***まとめ 　今回の制作を通して、Webサイトにおけるデザインやアニメー... 　また、同じ構成であっても色や動きの違いによって印象が大... 今後はよりストーリー性を持った工夫を取り入れることで、映... ~ ~ **調査 ***現状調査 　主に邦画のwebサイトを調査した。 　アニメーションがたくさん使われた仕掛けのあるwebサイトが... 　構成はどのサイトもそんなに大差はなく、トップページ、あ... 　しかしアニメーションの使い方で受ける印象が大きく変わる... 　また、グラデーションが多く使われたデザインは柔らかく儚... 　さらに、タイポグラフィや余白の取り方によってもサイト全... ~ ***先行事例 -[[映画サイト一覧>https://designnokoto.com/category/movie]] --[[秒速５センチメートル>https://5cm-movie.jp/]]　←シンプ... --[[なのに、千輝くんが甘すぎる。>https://movies.shochiku.... --[[終点のあの子>https://endof-theline.com/]]　←シンプル... --[[炎上>https://enjou-movie.jp/]]←アニメーション、サイト... --[[佐藤さんと佐藤さん>https://www.sato-sato.com/]]←アニ... -[[アナウンサーたちの戦争>https://thevoices-at-war-movie.... ~ ***技法・技術情報 特になし ~ ~ **プロジェクト管理 ***スケジュール -[[Excel>https://ksumail-my.sharepoint.com/:x:/g/personal... #image(schedule.png) ~ ***ToDo -%%選考事例調査%% -%%サイトマップ制作%% -%%ワイヤーフレーム制作%% -%%webサイト制作%% -ブラッシュアップ //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしな... //&color(red){例：10人以上の会議には出ない。苦手なことは... ~ ~ #hr CENTER:''進捗記録'' #hr ~ ~ **2026.07.16 ***最終審査 -アニメーション方法による感じ方の違い -サスペンス映画に合うアニメーション▶️静かで緊張感のある演出 --タイトルがゆっくり浮かび上がる --暗闇から人物が浮き上がる 1) コンセプト 全体的に、サスペンス映画の雰囲気にあった、... また、使用する画像は chatGPT を使い , あらすじに合っ た... (2) ワイヤーフレーム Figma を使用し制作した。 上からトップ画像、あらすじ、キ... 右ページ1段落 スの順に配置した。最も強調させたい映画の世界観や概要を 約27文字 x 48行 上部に配置することで、自然に作品へと入り込めるように意 識した。 (3)Web サイト 一番上に置いたキービジュアルは、縦と横の二種類制作し、 スマホでも見やすいような構造にした(図 4)。 あらすじはタイプライターのようなアニメーションをつ け、文字が徐々に表示されることで物語が少しずつ明かされ ていくような印象を演出した(図5)。 その下にキャスト一覧を表示させた。人物にカーソルを合 わせると暗闇から浮き上がってくるようなアニメーションを 図 5 あらすじ つけ、不気味さを演出した(図6)。 スタッフのセクションはキ... どういうふうに作ったのか過程を描く ***ブラッシュアップ -相関図が暗くて見にくい▶️マウスが触れなくても明るく見える... - ~ ~ **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.... --[[終点のあの子>https://endof-theline.com/]]　←シンプル... --[[炎上>https://enjou-movie.jp/]]←アニメーション、サイト... --[[佐藤さんと佐藤さん>https://www.sato-sato.com/]]←アニ... --[[アナウンサーたちの戦争>https://thevoices-at-war-movie... ~ ***制作方法 -サイトに入れる画像、映像→AI ~ ***次回やること -サイトマップ、ワイヤーフレーム制作 ~ ~ **2026.04.09 ***テーマ案 -__架空の邦画Webサイト__◀️ｺﾚ -映画パンフレットの研究 -企業ロゴがもたらす効果 ~ ~

終了行:
*映画『沈黙の檻』公式サイト制作 AI画像を使った架空のサスペンス映画のwebサイト制作 #image(main.jpg) -[[ 映画サイト>https://wawawawa-wawawawa.github.io/ori/]] -[[概要集>https://ksumail-my.sharepoint.com/:b:/g/persona... -''中尾桃瀬'' -'''Keywords：映画, AI,webサイト''' //-__[[相互評価シート>https://www.example.com]]__ ← ここ... //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ AI画像を使った架空のサスペンス映画のwebサイト制作 ~ ***背景と目的 　以前から映画を見る前後にその映画の公式サイトを見るよう... 　また、以前から映画業界に興味があったので、架空の映画サ... 　また、近年AIを使った画像や動画が多く流通しており、企画... ~ ***コンセプト 　全体的に、サスペンス映画の雰囲気にあった、不気味で緊張... 　サイトの背景は白から黒へと変化するグラデーションにし、... 　また、使用する画像はchatGPTを使い,あらすじに合った画像... ~ ***成果物の仕様 [[ webサイト>https://wawawawa-wawawawa.github.io/ori/]] ~ ***制作ツール Visual Studio Code ~ ***プロジェクトの期間 三年前期 ~ ***まとめ 　今回の制作を通して、Webサイトにおけるデザインやアニメー... 　また、同じ構成であっても色や動きの違いによって印象が大... 今後はよりストーリー性を持った工夫を取り入れることで、映... ~ ~ **調査 ***現状調査 　主に邦画のwebサイトを調査した。 　アニメーションがたくさん使われた仕掛けのあるwebサイトが... 　構成はどのサイトもそんなに大差はなく、トップページ、あ... 　しかしアニメーションの使い方で受ける印象が大きく変わる... 　また、グラデーションが多く使われたデザインは柔らかく儚... 　さらに、タイポグラフィや余白の取り方によってもサイト全... ~ ***先行事例 -[[映画サイト一覧>https://designnokoto.com/category/movie]] --[[秒速５センチメートル>https://5cm-movie.jp/]]　←シンプ... --[[なのに、千輝くんが甘すぎる。>https://movies.shochiku.... --[[終点のあの子>https://endof-theline.com/]]　←シンプル... --[[炎上>https://enjou-movie.jp/]]←アニメーション、サイト... --[[佐藤さんと佐藤さん>https://www.sato-sato.com/]]←アニ... -[[アナウンサーたちの戦争>https://thevoices-at-war-movie.... ~ ***技法・技術情報 特になし ~ ~ **プロジェクト管理 ***スケジュール -[[Excel>https://ksumail-my.sharepoint.com/:x:/g/personal... #image(schedule.png) ~ ***ToDo -%%選考事例調査%% -%%サイトマップ制作%% -%%ワイヤーフレーム制作%% -%%webサイト制作%% -ブラッシュアップ //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしな... //&color(red){例：10人以上の会議には出ない。苦手なことは... ~ ~ #hr CENTER:''進捗記録'' #hr ~ ~ **2026.07.16 ***最終審査 -アニメーション方法による感じ方の違い -サスペンス映画に合うアニメーション▶️静かで緊張感のある演出 --タイトルがゆっくり浮かび上がる --暗闇から人物が浮き上がる 1) コンセプト 全体的に、サスペンス映画の雰囲気にあった、... また、使用する画像は chatGPT を使い , あらすじに合っ た... (2) ワイヤーフレーム Figma を使用し制作した。 上からトップ画像、あらすじ、キ... 右ページ1段落 スの順に配置した。最も強調させたい映画の世界観や概要を 約27文字 x 48行 上部に配置することで、自然に作品へと入り込めるように意 識した。 (3)Web サイト 一番上に置いたキービジュアルは、縦と横の二種類制作し、 スマホでも見やすいような構造にした(図 4)。 あらすじはタイプライターのようなアニメーションをつ け、文字が徐々に表示されることで物語が少しずつ明かされ ていくような印象を演出した(図5)。 その下にキャスト一覧を表示させた。人物にカーソルを合 わせると暗闇から浮き上がってくるようなアニメーションを 図 5 あらすじ つけ、不気味さを演出した(図6)。 スタッフのセクションはキ... どういうふうに作ったのか過程を描く ***ブラッシュアップ -相関図が暗くて見にくい▶️マウスが触れなくても明るく見える... - ~ ~ **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.... --[[終点のあの子>https://endof-theline.com/]]　←シンプル... --[[炎上>https://enjou-movie.jp/]]←アニメーション、サイト... --[[佐藤さんと佐藤さん>https://www.sato-sato.com/]]←アニ... --[[アナウンサーたちの戦争>https://thevoices-at-war-movie... ~ ***制作方法 -サイトに入れる画像、映像→AI ~ ***次回やること -サイトマップ、ワイヤーフレーム制作 ~ ~ **2026.04.09 ***テーマ案 -__架空の邦画Webサイト__◀️ｺﾚ -映画パンフレットの研究 -企業ロゴがもたらす効果 ~ ~

ページ名: