Webクリエーター養成所 Shubajukuのプロジェクト活動で制作したクリスマスの特設サイトになります。
オンラインサロンの方々と作業を分担し、一部コーディングを担当いたしました。
「クリスマスカード」「オリジナルグッズ」「ゲーム」の3つのセクションに分かれており、私はゲームチームのエンジニアとして参加いたしました。
実装では初めて GSAP / Swiper / Pug / GitHub を使用することになりました。そのため、日夜勉強しながら制作に取り組み、自分のスキルの幅を広げる貴重な経験となりました。また、オンライン上でも密にコミュニケーションを取りながら作業に取り組みました。その取り組み方から、技術習得だけでなく、チームでの連携や他のメンバーの方の実装を引き継ぐなど、チーム内での負荷を減らす柔軟な対応ができました。
サイトを作った目的
- 3か月という短い期間の中での制作でき、かつ「クリスマス」というイベントとマッチしたゲームを作りたかったため
- Shubajukuの活動をオンラインサロン外の方々に知ってもらうため
工夫したところ
- トップページのメインビジュアルのオーナメントや、スライダー内のボタンアニメーションのイージング・スピード設定
→流れ星やボタンの光彩が自然に目に留まるよう、アニメーションのスピードやタイミングにこだわりました。チームメンバーとも何度もすり合わせを行い、細かな調整を重ねました。
反省点
- Pugの記述に慣れておらず、実装に時間がかかってしまいました。
→不安なときはオンラインサロン内のPugの解説動画を見直し、エンジニアチームの方々に確認しながら作業を進めました。 - GitHubの使用時に分かりづらいコミットメッセージを送ってしまったことがありました。
→「なぜ（Why）」「どこを（Where）」「何を（What）修正したか」が一目で分かるメッセージを書くよう意識しました。 - コードの拡張性への配慮が足りず、後からクラス名の変更やJavaScriptの修正が多く発生してしまいました。
→他のページでの再利用も視野に入れたCSS設計をより意識していきたいです。
- 公開日
- 2022年12月25日
- 制作規模
- 5名
- 制作担当
- トップページ / ゲーム説明画面のスライド / ゲーム内のゲーム説明画面のスライド
- 制作期間
-
- コーディング : 約1ヵ月
- 制作時間
-
- 約137時間
- （1日あたり：平日 / 約4時間、休日 / 約9～10時間）
- 使用言語
- HTML / Scss / JavaScript / Pug
- 開発環境
- webpack
- 使用ツール
- Visual Studio Code / Figma / GitHub
