西山実伶/情報デザイン研究I

おともだち

オリジナルホラー脱出ゲームを紹介するWebサイトの開発

• 西山　実伶
• Keywords：game, web design, html
• http://miiir-nishiym.github.io/otomodachi/

概要

これは何？

1年生の時にチームで制作したゲームを紹介し、多くの人に興味を持って遊んでもらえるようなサイト

背景と目的

• 背景
  １年生の頃にチームでオリジナルゲームを制作したが、それを紹介するためのサイトがなかったためこれを機にwebサイトを制作しようと思った
• 目的
  • ゲームの雰囲気が伝わるようなサイトに仕上げ、制作したゲームに興味を持ってもらうようにする
  • 不気味さを演出できるようなwebサイトになるように、配色やUI、文章構成を研究する
    
    

コンセプト

• ゲームの雰囲気に合う配色や構成にする
• 閲覧者が読みやすいように簡潔にわかりやすい文章にする
  
  

成果物の仕様

• webサイト
• 画像
• 動画
• サイトマップ
  
• ワイヤーフレーム（PC版・スマホ版）
  
  

制作ツール

• ハードウェア
  • MacBook Air
• サービス
  • Adobe Illustrator 2023
  • Adobe Photoshop 2023
  • ibisPaint X
  • Visual Studio Code
    
    

プロジェクトの期間

2023.04.11 - 2023.07.18

まとめ

今回はオリジナルゲームのwebサイトを制作するにあたって、どのようにしてゲーム内の雰囲気をweb上に反映させ、閲覧者に興味を持たせるかを研究していった。工夫した点は3つある。1つめは、一番最初のメニューの項目をあらすじにすることである。主人公の状況やどのようにしてゲームが進行していくのかを閲覧者に把握してもらうことで、ゲームへの興味を持ってもらおうとした。2つ目は、Webサイト内の配色である。ゲーム内の雰囲気は全体的に暗めで、多少ホラー要素がある。また、ゲームの進行はは全てお金持ちが住んでそうな屋敷で繰り広げられる。これらの要素から、webサイト内では全体的に明度と彩度を低めに設定し、使用する図形は角張ったものにすることで少し豪華で怪しい雰囲気を表現した。色はメインビジュアルに載せているイラストに合わせて青色にし、統一感を出した。3つ目は、ゲーム内の雰囲気を入れ込んだPVである。PVでは、ゲーム開始画面に流れてくる音楽を使用し、その曲の雰囲気に合わせて場面を構成した。それによって、ゲーム内の各場面の雰囲気がよりわかりやすく感じられるようになった。まだ自身のスキルが及ばず、webサイトの形が崩れていたり手を加えたりできるところが多々あるが、配色や文章構成を考え、ゲームの雰囲気をwebサイトに反映させるように制作するという目標は達成できたのではないかと考える。

調査

現状調査

ゲーム自体は一通りプレイできるようにはなっているが、それを紹介するwebサイトがない

先行事例

• フリーゲームのサイト
  • 殺戮の天使 ゲームマガジン
  • 魔女の家
  • ib

• 参考にしたいサイト
  • TWISTED WONDERLAND
    
    

技法・技術情報

• HTML
  • ホームページをHTMLで作成する手順をゼロから解説
  • 【はじめてのHTML】ホームページの作り方・公開までの手順を解説

プロジェクト管理

スケジュール

スケジュール表

ToDo

• 計画を立てる
• 先行事例を調査
• サイトマップ制作
• ワイヤーフレーム制作
• HTML
• 文章を考える

2023.07.11

進捗

• スマホ版のインフォメーション部分の配置を調整
• github : http://github.com/miiir-nishiym/otomodachi
• webサイト : http://miiir-nishiym.github.io/otomodachi/
  
  
  ※下の画像には写っていませんが、インフォメーションの部分に動画を埋め込んでいます

2023.07.04

進捗

• Youtubeをスマホ版とPC版でサイズが切り替わるように設定した
• PC版のインフォメーション部分の配置を調整
• github : http://github.com/miiir-nishiym/otomodachi
• webサイト : http://miiir-nishiym.github.io/otomodachi/
  
  
  
  

2023.06.27

進捗

• 画像の大きさの調整
• インフォメーション部分の配置を調整（なぜか反映されなかったため、その原因を調べた）
• github : http://github.com/miiir-nishiym/otomodachi
• webサイト : http://miiir-nishiym.github.io/otomodachi/
  
  
  
  

2023.06.20

進捗

• PVを制作した
• Youtubeを埋め込む
• webの配置を調整
• github : http://github.com/miiir-nishiym/otomodachi
• webサイト : http://miiir-nishiym.github.io/otomodachi/
  
  

2023.06.13

進捗

• ストーリー、キャラクターの画像を入れた
• メインビジュアルの下部分にグラデーションを入れた
• 絵コンテ・字コンテを考えた
• 絵コンテ・字コンテ

やること

• スマホ版の画像を作成
• スマホ版のメニューを縦並べにする
• フッターにメニューとロゴを入れる
• bodyの画像サイズを調整する
  
  

2023.06.06

進捗

• 完成したメニュー画像を埋め込み、サイズを調整
• ホラーっぽい怪しさを醸し出すために背景をもう少し暗めに変更
• body部分の画像の大きさを調整
• github : http://github.com/miiir-nishiym/otomodachi
• webサイト : http://miiir-nishiym.github.io/otomodachi/
  
  

やること

• PC版の画像を作成
• スマホ版の画像を作成
• スマホ版のメニューを縦並べにする
  
  

2023.05.30

進捗

• webに埋め込む画像を作成中
• ストーリー部分の文章を考えた
• フォントサイズの調整
• メニューのフォントサイズと色を変更
• github : http://github.com/miiir-nishiym/otomodachi
• webサイト : http://miiir-nishiym.github.io/otomodachi/
  
  

やること

• PC版の画像を作成
• スマホ版の画像を作成
• スマホ版のメニューを縦並べにする

2023.05.23

進捗

• スマホ版のメインビジュアルを作成
• メインビジュアルの画像の大きさを調整
• スマホで見た時のヘッダー画像（ラフ）を入れた
• github : http://github.com/miiir-nishiym/otomodachi
• webサイト : http://miiir-nishiym.github.io/otomodachi/
  
  

やること

• スマホ版のメニュー部分を縦に並べるように調整したい
• スマホ版の画像を準備する
• 画像のサイズ調整
  
  

2023.05.16

進捗

• 右側に空いていたスペースをなくすことに成功した
• ナビゲーションの文字の位置を中央揃えにした
• 各メニューに仮画像を入れ込んでみ配置してみた
• github : http://github.com/miiir-nishiym/otomodachi
• webサイト : http://miiir-nishiym.github.io/otomodachi/
  
  

やること

• メインビジュアルの画像サイズを次回までに調整したい
  
  

2023.05.09

進捗

• 背景の色を入れてみた
• htmlのbody部分を編集
• 試しに仮画像を入れてみた
• github : https://github.com/miiir-nishiym/otomodachi
• webサイト : http://miiir-nishiym.github.io/otomodachi/
  
  

やること

• 色の構成や内容はまだ決まっていないため決めていきたい
• 右側に謎のスペースができたため、その原因を探った。次回までに修正したい。

2023.05.02

進捗

• htmlで画像を表示させた
• ナビゲーションを追加した
  
  
  
  

2023.04.25

サイトマップ（4月25日時点）

ワイヤーフレーム（4月25日時点）

2023.04.18

テーマのアイデア

• つくったオリジナルゲームを多くの人に興味を持って遊んでもらえるようにwebサイトを制作する ←決定
• 3DCGを使ったアニメーション
• 見た人がクスッと笑えるような面白合成写真集
  
  

現状調査

• ゲーム自体は一通りプレイできるようにはなっているが、それを紹介するwebサイトがない
  
  

先行事例

• フリーゲームのサイト
  • 殺戮の天使 ゲームマガジン
  • 魔女の家
  • ib

• 参考にしたいサイト
  • TWISTED WONDERLAND
    
    

技法・技術情報

• HTML
  • ホームページをHTMLで作成する手順をゼロから解説
  • 【はじめてのHTML】ホームページの作り方・公開までの手順を解説
    
    

研究の流れメモ

• 参考【牧野友紀/情報デザイン研究I】
  1.プロジェクトの企画　調査　コンセプトを確定(目標とゴール設定)
  2.取材、撮影。
  3.Webサイト全体の構成作成(サイトマップ作成)
  4.Webページの情報設計(ワイヤーフレーム)
  5.デザイン作成(イラレでのビジュアル制作)
  6.コーディング・システム開発
  7.テスト
  8.リリース

2023.04.11

研究内容案

• オリジナルゲームのwebサイト制作 ←候補
  • HTMLで制作
• 3DCGアニメーション
  • blenderを活用

入れたいものメモ

• キャラクター紹介
• 大まかなストーリー紹介
• 紹介動画
• 制作スタッフ紹介
• ゲームのリンク

コンセプト

• ぱっと見でどんなサイトか分かるようにしたい
• 作ったゲームの面白さを伝えたい