おともだち
オリジナル脱出ホラーゲームを紹介するWebサイトの開発
概要
これは何？
1年生の時にチームで制作したゲームを紹介し、多くの人に興味を持って遊んでもらえるようなサイト
背景と目的
- 背景
１年生の頃にチームでオリジナルゲームを制作したが、それを紹介するためのサイトがなかったためこれを機にwebサイトを制作しようと思った
- 目的
- ゲームの雰囲気が伝わるようなサイトに仕上げ、制作したゲームに興味を持ってもらうようにする
- 不気味さを演出できるようなwebサイトになるように、配色やUI、文章構成を研究する
コンセプト
- ゲームの雰囲気に合う配色や構成にする
- 閲覧者が読みやすいように簡潔にわかりやすい文章にする
成果物の仕様（現時点）
制作ツール
- ハードウェア
- サービス
- Adobe Illustrator 2023
- Adobe Photoshop 2023
- ibisPaint X
プロジェクトの期間
2023.04.11 -
まとめ
細かい配色はまだ決まっていないが、全体的な雰囲気として暗めの色にしようというイメージで制作した。今のところは縦スクロールのみだが、最終的には別ページに飛べるようにしていきたい。今後は全体の配色やUIを決めてHTMLを組んでいきたい。またwebサイトからアプリをダウンロードして遊べるように設定していきたい。
調査
現状調査
ゲーム自体は一通りプレイできるようにはなっているが、それを紹介するwebサイトがない
先行事例
技法・技術情報
プロジェクト管理
スケジュール
スケジュール表
ToDo
- 計画を立てる
先行事例を調査サイトマップ制作ワイヤーフレーム制作- HTML
- 文章を考える
進捗記録
2023.06.06
進捗
github : https://github.com/miiir-nishiym/otomodachi
2023.05.30
進捗
github : https://github.com/miiir-nishiym/otomodachi
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アニメーション
入れたいものメモ
- キャラクター紹介
- 大まかなストーリー紹介
- 紹介動画
- 制作スタッフ紹介
- ゲームのリンク
コンセプト
- ぱっと見でどんなサイトか分かるようにしたい
- 作ったゲームの面白さを伝えたい
