おともだち
オリジナルホラー脱出ゲームを紹介するWebサイトの開発
概要
これは何？
1年生の時にチームで制作したゲームを紹介し、多くの人に興味を持って遊んでもらえるようなサイト
背景と目的
- 背景
１年生の頃にチームでオリジナルゲームを制作したが、それを紹介するためのサイトがなかったためこれを機にwebサイトを制作しようと思った
- 目的
- ゲームの雰囲気が伝わるようなサイトに仕上げ、制作したゲームに興味を持ってもらうようにする
- 不気味さを演出できるようなwebサイトになるように、配色やUI、文章構成を研究する
コンセプト
- ゲームの雰囲気に合う配色や構成にする
- 閲覧者が読みやすいように簡潔にわかりやすい文章にする
成果物の仕様
制作ツール
- ハードウェア
- サービス
- Adobe Illustrator 2023
- Adobe Photoshop 2023
- ibisPaint X
- Visual Studio Code
プロジェクトの期間
2023.04.11 -
まとめ
今回はオリジナルゲームのwebサイトを制作するにあたって、どのようにしてゲーム内の雰囲気をweb上に反映させ、閲覧者に興味を持たせるかを研究していった。工夫した点は3つある。1つめは、一番最初のメニューの項目をあらすじにすることである。主人公の状況やどのようにしてゲームが進行していくのかを閲覧者に把握してもらうことで、ゲームへの興味を持ってもらおうとした。2つ目は、Webサイト内の配色である。ゲーム内の雰囲気は全体的に暗めで、多少ホラー要素がある。また、ゲームの進行はは全てお金持ちが住んでそうな屋敷で繰り広げられる。これらの要素から、webサイト内では全体的に明度と彩度を低めに設定し、使用する図形は角張ったものにすることで豪華で怪しい雰囲気を表現した。色はメインビジュアルに載せているイラストに合わせて青色にし、統一感を出した。3つ目は、ゲーム内の雰囲気を入れ込んだPVである。PVでは、ゲーム開始画面に流れてくる音楽を使用し、その曲の雰囲気に合わせて場面を構成した。それによって、ゲーム内の場面の雰囲気を曲の盛り上がりに合わせてわかりやすく感じられるようになった。まだ自身のスキルが及ばず、webサイトの形が崩れていたり手を加えたりできるところが多々あるが、配色や文章構成を考え、ゲームの雰囲気をwebサイトに反映させるように制作するという目標は達成できたのではないかと考える。
調査
現状調査
ゲーム自体は一通りプレイできるようにはなっているが、それを紹介するwebサイトがない
先行事例
技法・技術情報
プロジェクト管理
スケジュール
スケジュール表
ToDo
- 計画を立てる
先行事例を調査サイトマップ制作ワイヤーフレーム制作- HTML
- 文章を考える
進捗記録
2023.06.20
進捗
2023.06.13
進捗
- ストーリー、キャラクターの画像を入れました
- メインビジュアルにグラデーションを入れてみました
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
進捗
- htmlで画像を表示させた
- ナビゲーションを追加した
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アニメーション
入れたいものメモ
- キャラクター紹介
- 大まかなストーリー紹介
- 紹介動画
- 制作スタッフ紹介
- ゲームのリンク
コンセプト
- ぱっと見でどんなサイトか分かるようにしたい
- 作ったゲームの面白さを伝えたい
