職業訓練のグループ制作課題として、架空のRPGゲームの公式サイトを作成しました。
メンバー5人でゲームのコンセプトやタイトル、シナリオ、システム等を話し合って決定した後、それぞれ担当箇所を分担し、最終的に1つのサイトにまとめ上げました。

使用言語
HTML5, CSS3, jQuery

使用ツール
Brackets, illustrator

制作期間
2週間

サイト概要

■商材
ポータブルゲーム機用ゲームソフト
■ゲームジャンル
RPG
■ゲームシステム
コマンド形式バトルゲーム
■ターゲット層
小学生～高校生

トップページはマウスホイールによってコンテンツが展開する横スクロール形式を採用し、背景の移り変わりと左下に歩くキャラクターを配置することで、サイトを閲覧しながら実際にゲームをプレイしているような世界観を味わえるよう工夫しました。

わたしが主に担当した部分は下記の4点です。

1. ゲームシナリオ

職業訓練校が横浜だったことから、馴染み深いみなとみらいを舞台に、海の生き物をモチーフにした敵キャラクターとのバトルRPGという体でシナリオのたたき台を作成しました。

2. グラフィックデザイン

ゲームのタイトルロゴ、サイトナビゲーション、各コンテンツのタイトル、ボタン等のビジュアルデザイン全般を担当しました。

ロゴやコンテンツタイトルは海や港のイメージを全面に出し、水面の模様や碇、白木の板を使ったデザインにしました。
ボタンはグラデーションを使ってつい押したくなるような立体感を出すことで、実際のゲーム画面のようなUIを目指しました。

3. キャラクターイラスト

敵キャラクターである「ビースト」のイラストはメンバー5人で手分けをして制作しました。わたしはペンギン、カメ、エイをモチーフにした3キャラクターを描きました。

4. キャラクター紹介ページ

トップページから遷移するサブページのうち、ゲームに登場する敵キャラクター「ビースト」の紹介ページのデザインおよびコーディングを担当しました。

全キャラクターが一望できるようにキャラクターアイコンをページに羅列し、クリックするとモーダルウィンドウで詳細が 表示されるようにしました。

また、ゲームサイトならではの遊び要素として、いくつかの質問に回答することで全14匹のビーストの中から自分に合うものがピックアップされる「キャラ診断チャート」を作成しました。

ページ背景は海中をイメージして水泡が下から上に浮かんでいくアニメーションをjQueryで実装し、ターゲットとする子供が見て楽しめるようなゲームらしいサイトを目指しました。