UNDERTALE風webサイト制作#1
お疲れ様です。コーヒーです。
第8回からはHTML&CSSとWEBデザイン実践編です!
ここまで学んできた内容を活用して、WEBサイトの制作を行いたいと思います。
第2回 で勉強した制作の流れに沿って実際に作ります!
第2回:
実際に制作する前に、タイトルにある「UNDERTALE」について少し説明します!
UNDERTALEとは
UNDERTALEはToby Fox(トビー・フォックス)が開発したインディーズゲームです!制作はほぼ一人で開発されたにもかかわらず、100万本以上を売り上げている名作ゲームとなっています。個人的には音楽がとても神だと感じています!
概要としましては、プレイヤーはモンスターの住む地底世界に落ちてしまい、地上にかえるためモンスターたちと冒険をしていくお話になっています。まだ、プレーしたことない方はぜひネタバレを見ないで、初見で楽しんでほしいです!
UNDERTALE公式サイト:https://undertale.com/
個人的にとても好きなゲームのため、今回はこれを参考にデザインしていきます。
企画
初めに、WEBサイト制作の企画を立てました。WEBサイトの種類、メインゴールの設定、ターゲットユーザーの設定を行いました。実際に企画したものが以下になります。
サイトマップ制作
次にサイトマップの制作を行いました。ポートフォリオサイトなのでシンプルな構成にしました。
デザインカンプ
実際にWEBサイトに表示されるものと変わらない、デザインカンプを作成します。デザインカンプを作成することで、コーディング作業の効率が上がります。
今回使用したツールは「Aseprite」です。「Aseprite」はドット絵を作成することのできるツールになっています。作成したドット絵でアニメーションを作ることもでき、
ドット絵が好きな人にはおすすめです!
Aseprite公式サイト:https://www.aseprite.org/
今回はアンダーテール風のWEBサイトにしたかったため、「Aseprite」を採用しました。実際に作成したホーム画面のデザインカンプが以下になります!
(真ん中のキャラクターはUNDERTALEには登場しないキャラです。)
次回から実際にコーディングをしていきます!
最後まで読んでいただきありがとうございます。