#author("2023-06-15T03:30:48+09:00;2023-06-12T14:36:42+09:00","default:member","member") *おともだち オリジナル脱出ホラーゲームを紹介するWebサイトの開発 #image(taitoru1.jpg) -''西山 実伶'' -'''Keywords:game, web design, html''' -https://miiir-nishiym.github.io/otomodachi/ //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 ~ **概要 ***これは何? //&color(red){これは何か・・を簡潔に}; 1年生の時にチームで制作したゲームを紹介し、多くの人に興味を持って遊んでもらえるようなサイト ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; -背景 1年生の頃にチームでオリジナルゲームを制作したが、それを紹介するためのサイトがなかったためこれを機に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/1PDQtTwWVEQKGAOBKW3Af6AFkaDnUhfss?usp=share_link]] -[[サイトマップ>https://drive.google.com/file/d/1R8bKrfhZotiSKbX7RtYapgajhK3sbqub/view?usp=share_link]] #image(sitemap20230425.jpg) -[[ワイヤーフレーム>https://drive.google.com/file/d/1Qdjlvvaw7uK6wonVT1Aq2Aa-TsOaAsOD/view?usp=share_link]] #image(wireframe20230425.jpg,50%) ~ //***メンバー //&color(red){共同プロジェクトの場合のみ|メンバーと役割分担を明記}; ~ ***制作ツール //&color(red){使用するツール|ハードウエア・ソフトウエア}; -ハードウェア --MacBook Air -サービス --Adobe Illustrator 2023 --Adobe Photoshop 2023 --ibisPaint X ~ ***プロジェクトの期間 //&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX }; 2023.04.11 - ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; 細かい配色はまだ決まっていないが、全体的な雰囲気として暗めの色にしようというイメージで制作した。今のところは縦スクロールのみだが、最終的には別ページに飛べるようにしていきたい。今後は全体の配色やUIを決めてHTMLを組んでいきたい。また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.06.13 ***進捗 -ストーリー、キャラクターの画像を入れました -メインビジュアルにグラデーションを入れてみました ~ #image(20230613.jpg,50%) ~ ~ **2023.06.06 ***進捗 github : https://github.com/miiir-nishiym/otomodachi -webサイト : https://miiir-nishiym.github.io/otomodachi/ ~ #image(20230606.jpg,50%) ~ ~ **2023.05.30 ***進捗 github : https://github.com/miiir-nishiym/otomodachi -webサイト : https://miiir-nishiym.github.io/otomodachi/ ~ #image(20230530.jpg,50%) ~ ~ **2023.05.23 ***進捗 ヘッダーの画像の大きさを調整しました。スマホで見た時のヘッダー画像(ラフ)を入れました。 ~ github : https://github.com/miiir-nishiym/otomodachi -webサイト : https://miiir-nishiym.github.io/otomodachi/ ~ #image(20230523a.jpg,50%) #image(20230523b.jpg,50%) ~ ~ **2023.05.16 ***進捗 ナビゲーションの文字の位置を中央揃えにし、各メニューに画像を入れ込んでみました。 ~ github : https://github.com/miiir-nishiym/otomodachi -webサイト : https://miiir-nishiym.github.io/otomodachi/ ~ #image(20230516.jpg,50%) ~ ~ **2023.05.09 ***進捗 大まかに配置してみました。色の構成や内容はまだ決まっていないので決めていきたいです。右側に謎のスペースができたので後でそこを修正していきます。 ~ -github : https://github.com/miiir-nishiym/otomodachi -webサイト : https://miiir-nishiym.github.io/otomodachi/ ~ #image(SD20230510.jpg,50%) ~ ~ **2023.05.02 ***進捗 #image(SD20230502.jpg) 画像を表示させました。 ~ ~ **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 //-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯ //-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯ ~ ~ ~