LogoMark.png

西山実伶/情報デザイン研究I のバックアップソース(No.17)

#author("2023-06-12T14:37:57+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){プロジェクトの背景と目的};
-背景
１年生の頃にチームでオリジナルゲームを制作したが、それを紹介するためのサイトがなかったためこれを機に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.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
//-◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯
//-◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯、◯◯◯◯◯◯◯◯◯◯◯◯
~
~

~