華やかさあふれるデザインを再現。
グループ制作
松山コレクション2026
学校行事のファッションショー「松山コレクション2026」のランディングページをグループで制作しました。主にコーディングを担当しました。制作進行上、デザインカンプの対応が難しい部分については、デザイン制作の補助も行いました。
https://2509.mdweb777.site/matuyamacollection_03/
Overview
制作概要
-
目的
学校行事「松山コレクション2026」の開催告知を行うため。また、イベントの認知度向上させ、来場につなげるため。
-
ターゲット
- 高校生
- 保護者の方
- ファッションショーに興味のある方
-
工夫したこと
初めてのグループ制作だったため、2人での分業に難しさを感じる場面もありました。そこで、担当箇所をあらかじめ決め、制作の進み具合や考えを定期的に共有しながら、認識のズレが生まれないよう意識して制作を進めました。
-
担当範囲
Design/Coding
-
制作期間
デザインカンプ 2週間
コーディング 1週間
-
使用ソフト
Figma/Visual Studio Code/Photoshop
Point
こだわったポイントをご紹介します。
１コーディング
タイトルのデザインをデザインカンプの通りに表現できるようにこだわりました。ぜひ見てほしいポイントです。
２コーディング
背景色と背景画像を重ねた表現にこだわりました。さらに、セクションごとに背景のグラデーションを切り替え、全体の雰囲気に変化を持たせられるよう工夫しています。
３デザイン
デザインでは、スケージュール表のデザインにこだわりました。時間が見やすくて理解しやすく、さらにコーディングがしやすいデザインを意識して制作しました。
