#author("2023-07-18T09:25:50+09:00;2023-07-18T09:22:04+09:00","default:member","member") #author("2023-07-18T09:28:30+09:00;2023-07-18T09:22:04+09:00","default:member","member") *おともだち オリジナルホラー脱出ゲームを紹介するWebサイトの開発 #image(taitoru1.jpg) -''西山 実伶'' -'''Keywords：game, web design, html''' -http://miiir-nishiym.github.io/otomodachi/ //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 1年生の時にチームで制作したゲームを紹介し、多くの人に興味を持って遊んでもらえるようなサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; -背景 １年生の頃にチームでオリジナルゲームを制作したが、それを紹介するためのサイトがなかったためこれを機にwebサイトを制作しようと思った //--HTMLとCSSを使って一からサイトを作り上げたいと思った -目的 --ゲームの雰囲気が伝わるようなサイトに仕上げ、制作したゲームに興味を持ってもらうようにする --不気味さを演出できるようなwebサイトになるように、配色やUI、文章構成を研究する //--HTMLとCSSの扱いに慣れる ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; -ゲームの雰囲気に合う配色や構成にする -閲覧者が読みやすいように簡潔にわかりやすい文章にする ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; -[[webサイト>https://miiir-nishiym.github.io/otomodachi/]] -[[画像>https://drive.google.com/drive/folders/1c2GNVTOHnp9AN9WbLLo41uZHYbM2AXIR?usp=drive_link]] -[[動画>https://youtu.be/8qxqlXGfT-I]] #youtube(8qxqlXGfT-I) -[[サイトマップ>https://drive.google.com/file/d/1DwwDbe7ZGXVUXloSiT1PoKxXYMyKguJz/view?usp=drive_link]] #image(sitemap20230716.jpg) -[[ワイヤーフレーム（PC版・スマホ版）>https://drive.google.com/drive/folders/12RriEFm-5KZkY8UJ9PO_z6klT9HgOn0o?usp=drive_link]] |#image(20230716a.jpg,80%)|#image(20230716b.jpg,50%)| ~ //***メンバー //&color(red){共同プロジェクトの場合のみ｜メンバーと役割分担を明記}; ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; -ハードウェア --MacBook Air -サービス --Adobe Illustrator 2023 --Adobe Photoshop 2023 --ibisPaint X --Visual Studio Code ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間｜20XX.XX.XX - 20XX.XX.XX }; 2023.04.11 - 2023.04.11 - 2023.07.18 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; //細かい配色はまだ決まっていないが、全体的な雰囲気として暗めの色にしようというイメージで制作した。今のところは縦スクロールのみだが、最終的には別ページに飛べるようにしていきたい。今後は全体の配色やUIを決めてHTMLを組んでいきたい。またwebサイトからアプリをダウンロードして遊べるように設定していきたい。 今回はオリジナルゲームのwebサイトを制作するにあたって、どのようにしてゲーム内の雰囲気をweb上に反映させ、閲覧者に興味を持たせるかを研究していった。工夫した点は3つある。1つめは、一番最初のメニューの項目をあらすじにすることである。主人公の状況やどのようにしてゲームが進行していくのかを閲覧者に把握してもらうことで、ゲームへの興味を持ってもらおうとした。2つ目は、Webサイト内の配色である。ゲーム内の雰囲気は全体的に暗めで、多少ホラー要素がある。また、ゲームの進行はは全てお金持ちが住んでそうな屋敷で繰り広げられる。これらの要素から、webサイト内では全体的に明度と彩度を低めに設定し、使用する図形は角張ったものにすることで少し豪華で怪しい雰囲気を表現した。色はメインビジュアルに載せているイラストに合わせて青色にし、統一感を出した。3つ目は、ゲーム内の雰囲気を入れ込んだPVである。PVでは、ゲーム開始画面に流れてくる音楽を使用し、その曲の雰囲気に合わせて場面を構成した。それによって、ゲーム内の各場面の雰囲気がよりわかりやすく感じられるようになった。まだ自身のスキルが及ばず、webサイトの形が崩れていたり手を加えたりできるところが多々あるが、配色や文章構成を考え、ゲームの雰囲気をwebサイトに反映させるように制作するという目標は達成できたのではないかと考える。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; ゲーム自体は一通りプレイできるようにはなっているが、それを紹介するwebサイトがない ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -フリーゲームのサイト --[[殺戮の天使 ゲームマガジン>https://www.gamemaga.jp/satsuriku/]] --[[魔女の家>https://majonoie.karou.jp]] --[[ib>https://kouri.kuchinawa.com/game_01.html]] -参考にしたいサイト --[[TWISTED WONDERLAND>https://twisted-wonderland.aniplex.co.jp]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; -HTML --[[ホームページをHTMLで作成する手順をゼロから解説>https://pr.toriaez.jp/navi/column/2511.html]] --[[【はじめてのHTML】ホームページの作り方・公開までの手順を解説>https://www.xserver.ne.jp/bizhp/homepage-creation-by-html/]] ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; [[スケジュール表>https://docs.google.com/spreadsheets/d/1sgSETikcq7R2CKV71-s3wGEAxDiTyt1H68laK5m3gPE/edit?usp=sharing]] ~ //***Webサイト制作のながれ //1.プロジェクトの企画 調査 コンセプトを確定(目標とゴール設定) //2.取材、撮影。 //3.Webサイト全体の構成作成(サイトマップ作成) //4.Webページの情報設計(ワイヤーフレーム) //5.デザイン作成(イラレでのビジュアル制作) //6.コーディング・システム開発 //7.テスト //8.リリース ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -%%計画を立てる%% -%%先行事例を調査%% -%%サイトマップ制作%% -%%ワイヤーフレーム制作%% -%%HTML%% -%%文章を考える%% //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2023.07.11 ***進捗 -スマホ版のインフォメーション部分の配置を調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ※下の画像には写っていませんが、インフォメーションの部分に動画を埋め込んでいます |#image(20230711a.jpg)|#image(20230711b.jpg)| ~ ~ **2023.07.04 ***進捗 -Youtubeをスマホ版とPC版でサイズが切り替わるように設定した -PC版のインフォメーション部分の配置を調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ~ **2023.06.27 ***進捗 -画像の大きさの調整 -インフォメーション部分の配置を調整（なぜか反映されなかったため、その原因を調べた） -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ~ **2023.06.20 ***進捗 -PVを制作した -Youtubeを埋め込む -webの配置を調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ #youtube(8qxqlXGfT-I) ~ |#image(20230620a.jpg,90%)|#image(20230620b.jpg,70%)| ~ ~ **2023.06.13 ***進捗 -ストーリー、キャラクターの画像を入れた -メインビジュアルの下部分にグラデーションを入れた -絵コンテ・字コンテを考えた -[[絵コンテ・字コンテ>https://drive.google.com/drive/folders/1-1x3Sxq0GrnqRDhi1mIwoylXGt8HaGjO?usp=drive_link]] ~ ***やること -スマホ版の画像を作成 -スマホ版のメニューを縦並べにする -フッターにメニューとロゴを入れる -bodyの画像サイズを調整する ~ #YouTube(Wv604Jy2sag) ~ #image(20230613.jpg,50%) ~ ~ **2023.06.06 ***進捗 -完成したメニュー画像を埋め込み、サイズを調整 -ホラーっぽい怪しさを醸し出すために背景をもう少し暗めに変更 -body部分の画像の大きさを調整 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -PC版の画像を作成 -スマホ版の画像を作成 -スマホ版のメニューを縦並べにする ~ #image(20230606.jpg,50%) ~ ~ **2023.05.30 ***進捗 -webに埋め込む画像を作成中 -ストーリー部分の文章を考えた -フォントサイズの調整 -メニューのフォントサイズと色を変更 -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -PC版の画像を作成 -スマホ版の画像を作成 -スマホ版のメニューを縦並べにする ~ #image(20230530.jpg,50%) ~ ~ **2023.05.23 ***進捗 -スマホ版のメインビジュアルを作成 -メインビジュアルの画像の大きさを調整 -スマホで見た時のヘッダー画像（ラフ）を入れた -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -スマホ版のメニュー部分を縦に並べるように調整したい -スマホ版の画像を準備する -画像のサイズ調整 ~ |#image(20230523a.jpg,80%)|#image(20230523b.jpg,70%)| ~ ~ **2023.05.16 ***進捗 -右側に空いていたスペースをなくすことに成功した -ナビゲーションの文字の位置を中央揃えにした -各メニューに仮画像を入れ込んでみ配置してみた -github : http://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -メインビジュアルの画像サイズを次回までに調整したい ~ #image(20230516.jpg,50%) ~ ~ **2023.05.09 ***進捗 -背景の色を入れてみた -htmlのbody部分を編集 -試しに仮画像を入れてみた -github : https://github.com/miiir-nishiym/otomodachi -webサイト : http://miiir-nishiym.github.io/otomodachi/ ~ ***やること -色の構成や内容はまだ決まっていないため決めていきたい -右側に謎のスペースができたため、その原因を探った。次回までに修正したい。 ~ #image(SD20230510.jpg,50%) ~ ~ **2023.05.02 ***進捗 #image(SD20230502.jpg) -htmlで画像を表示させた -ナビゲーションを追加した ~ ~ **2023.04.25 ***サイトマップ（4月25日時点） #image(sitemap20230425.jpg) ~ ***ワイヤーフレーム（4月25日時点） #image(wireframe20230425.jpg,50%) ~ ~ **2023.04.18 ***テーマのアイデア -つくったオリジナルゲームを多くの人に興味を持って遊んでもらえるようにwebサイトを制作する &color(red){←決定}; -3DCGを使ったアニメーション -見た人がクスッと笑えるような面白合成写真集 ~ ***現状調査 -ゲーム自体は一通りプレイできるようにはなっているが、それを紹介するwebサイトがない ~ ***先行事例 -フリーゲームのサイト --[[殺戮の天使 ゲームマガジン>https://www.gamemaga.jp/satsuriku/]] --[[魔女の家>https://majonoie.karou.jp]] --[[ib>https://kouri.kuchinawa.com/game_01.html]] //-[[原神>https://genshin.hoyoverse.com/ja]] //-[[Sky 星を紡ぐ子どもたち>https://www.thatskygame.com/ja/]] -参考にしたいサイト --[[TWISTED WONDERLAND>https://twisted-wonderland.aniplex.co.jp]] ~ ***技法・技術情報 -HTML --[[ホームページをHTMLで作成する手順をゼロから解説>https://pr.toriaez.jp/navi/column/2511.html]] --[[【はじめてのHTML】ホームページの作り方・公開までの手順を解説>https://www.xserver.ne.jp/bizhp/homepage-creation-by-html/]] ~ //***背景や動機 //-ゲームを作ろうラボの活動でオリジナルゲームを制作したため、そのゲームに関するwebサイトを作ろうと考えたから ~ ***研究の流れメモ -参考【[[牧野友紀/情報デザイン研究I]]】 1.プロジェクトの企画 調査 コンセプトを確定(目標とゴール設定) 2.取材、撮影。 3.Webサイト全体の構成作成(サイトマップ作成) 4.Webページの情報設計(ワイヤーフレーム) 5.デザイン作成(イラレでのビジュアル制作) 6.コーディング・システム開発 7.テスト 8.リリース ~ //***XXX //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ ~ ~ **2023.04.11 ***研究内容案 -オリジナルゲームのwebサイト制作 &color(red){←候補}; --HTMLで制作 -3DCGアニメーション --blenderを活用 ~ ***入れたいものメモ -キャラクター紹介 -大まかなストーリー紹介 -紹介動画 -制作スタッフ紹介 -ゲームのリンク ~ ***コンセプト -ぱっと見でどんなサイトか分かるようにしたい -作ったゲームの面白さを伝えたい ~ ~ //**20XX.XX.XX //***XXXXXX //-◯◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯ //-◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯ ~ //***XXX //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ ~ ~ ~