おともだち
オリジナル脱出ホラーゲームのWebサイト ・・・・・・・・・・・・・・・・
概要
これは何?
1年生の時にチームで制作したゲームを紹介し、多くの人に興味を持って遊んでもらえるようなサイト
背景と目的
- 背景
- 1年生の頃にチームでオリジナルゲームを制作したが、それを紹介するためのサイトがなかったためこれを機にwebサイトを制作しようと思った
- HTMLとCSSを使って一からサイトを作り上げたいと思った
- 目的
- ゲームの雰囲気が伝わるようなサイトに仕上げ、閲覧者にゲームを遊んでもらえるようする
- 不気味さを演出できるようなwebサイトになるように、配色やUI、文章構成を研究する
- HTMLとCSSの扱いに慣れる
コンセプト
- ゲームの雰囲気に合う配色や構成にする
- 閲覧者が読みやすいように簡潔にわかりやすい文章にする
成果物の仕様(現時点)
制作ツール
- ハードウェア
- サービス
- Adobe Illustrator 2023
- Adobe Photoshop 2023
- ibisPaint X
プロジェクトの期間
2023.04.11 -
調査
現状調査
ゲーム自体は一通りプレイできるようにはなっているが、それを紹介するwebサイトがない
先行事例
技法・技術情報
プロジェクト管理
スケジュール
スケジュール表
ToDo
- 計画を立てる
先行事例を調査
サイトマップ制作
ワイヤーフレーム制作
- HTML
- 文章を考える
進捗記録
2023.05.23
進捗
ヘッダーの画像の大きさを調整しました。スマホで見た時のヘッダー画像(ラフ)を入れました。
github : https://github.com/miiir-nishiym/otomodachi
2023.05.16
進捗
ナビゲーションの文字の位置を中央揃えにし、各メニューに画像を入れ込んでみました。
github : https://github.com/miiir-nishiym/otomodachi
2023.05.09
進捗
大まかに配置してみました。色の構成や内容はまだ決まっていないので決めていきたいです。右側に謎のスペースができたので後でそこを修正していきます。
2023.05.02
進捗
画像を表示させました。
2023.04.25
サイトマップ(4月25日時点)
ワイヤーフレーム(4月25日時点)
2023.04.18
テーマのアイデア
- つくったオリジナルゲームを多くの人に興味を持って遊んでもらえるようにwebサイトを制作する ←決定
- 3DCGを使ったアニメーション
- 見た人がクスッと笑えるような面白合成写真集
現状調査
- ゲーム自体は一通りプレイできるようにはなっているが、それを紹介するwebサイトがない
先行事例
技法・技術情報
研究の流れメモ
- 参考【牧野友紀/情報デザイン研究I】
1.プロジェクトの企画 調査 コンセプトを確定(目標とゴール設定)
2.取材、撮影。
3.Webサイト全体の構成作成(サイトマップ作成)
4.Webページの情報設計(ワイヤーフレーム)
5.デザイン作成(イラレでのビジュアル制作)
6.コーディング・システム開発
7.テスト
8.リリース
2023.04.11
研究内容案
- オリジナルゲームのwebサイト制作 ←候補
- 3DCGアニメーション
入れたいものメモ
- キャラクター紹介
- 大まかなストーリー紹介
- 紹介動画
- 制作スタッフ紹介
- ゲームのリンク
コンセプト
- ぱっと見でどんなサイトか分かるようにしたい
- 作ったゲームの面白さを伝えたい