アーケードメダルゲーム「ホリアテール 」の公式サイト制作

概要
アーケードメダルゲーム「ホリアテール 」の公式サイト制作のコーディングを担当しました。

制作期間
2022年2月～2022年6月

制作体制
3名／ディレクター1名、デザイナー1名、コーダー2名

役割
コーダー

担当内容
ページコーディング

使用ツール・言語
Adobe Photoshop
Adobe Illustrator
Visual Studio Code
Backlog
HTML5
CSS3
SCSS

制作のポイント
デザインは他部署の方が担当し、私はコーディングを担当しました。
デザインはスマホ版のサイズのみ頂きました。
PC版への展開はディレクターと話し合い、7～8割がスマホからのアクセスであること、また、PC版作成の工数を削減できることから、現在の左右に分割されているページを制作しました。

こだわったポイントはアニメーションです。
スクロールしていくと各要素が色々なパターンのアニメーションで登場します。

それぞれデザインに合わせて、上下左右からスライドインしてくるものや、ピョンっとズームインしてくるものなど、様々なアニメーションをつけ、にぎやかさを演出しました。

ゲームの流れの説明の部分もボールにアニメーションを付けることで、視覚的にわかりやすくなるよう工夫をしました。