- 概要
-
訓練校でのグループ制作の課題制作として制作したのは「カレーの松田」というランディングページです。
該当商品のカレーを購入して、パッケージにあるシリアルコードを入力してもらう事により、架空のアーティストによる
ファミリーライブチケットが当たるという構成にしました。 - ターゲット
-
ペルソナには訓練校の先生（50代男性）をターゲットにしました。
聞き取った趣味、好物、生活スタイルなどの内容から、カレーが好きで自炊もよくする。
ライブやコンサートに関心があり、娘さんとライブに行くなど家族中も良好な点から、ランディングページを構築していきました。 - サイト構成
-
・画面に動きを付けてにぎやかさを演出するとともに導線や視線誘導をなるべくわかりやすくしました。
・PC版は左右でセクションを分けてトップ画面を左側に固定することで、キャンペーンの内容が目に入りやすいよう工夫しました。 - 製作期間
- 15日 ( デザイン:5日 / コーディング： 9日 / 修正： 1日)
- 使用ツール
- Visual Studio Code / PhotoShop / Figma
- 工夫したところ
-
・画面に動きを付けてにぎやかさを演出するとともに導線や視線誘導をなるべくわかりやすくしました。
・希望したシェフの写真が見つからなかった為、AI生成サイトを使ってシェフの画像を作りました。
・イラストや企業ロゴはiPadを使用して描き、PhotoShopで適宜調整をしました。
・バナーはチーム内でコンペを開きそれぞれの良いところを取り入れて1つのバナーを制作しようとしたが、
せっかくの機会なので全員のバナーを乗せることにしました。 - 苦労したところ
-
・jQueryのscriptが重複してしまい、上手くサイトが動いてくれませんでした。「三人寄れば文殊の知恵」ではありませんが、
チームの協力し合い解決することができました。
・レスポンシブでデザインを調節する際に、各々担当セクションを割り当て、作成したものを合算した時に、
それぞれコーディングの癖があるので、そこを読み解き、合わせることが苦労しました。
・一番最初にモバイルファーストから制作するか、デスクトップファーストで制作するか皆でしっかりと決めておかないと後々面倒。
もし、途中で変更するなら早い段階で編集しておくべきだと感じました。 - 自分が担当したセクション
-
・figmaを使用してチームメイトが考えたサイトデザインをまとめ、コーディングしやすいようにワイヤーフレームを作成しました。
・PC版は左右のセクションを分け、キャンペーンの趣旨が目立つよう、構成を立案・制作しました。
・シェフのセクションを担当し、AIでシェフの画像を生成しました。
・カレーのセクションでカレーが左右交互にスライドしてくるJavascriptを担当しました。 - まとめ
-
グループ制作を通じて3人のチームメイトの得意分野を知り、役割分担したことで制作の効率化につながったと感じました。
一人の力ではわからないこともを皆で協力し、サイトを制作することができ、達成感を感じました。
また、自分の知らなかったの知識やPhotoShopの技術などの勉強にもなり、チームから刺激をもらい、モチベーションアップにつながりました。
実際にお仕事をすることになったら、こんな風にチームで制作をするイメージが湧いてきて、今回とてもよい経験になったと感じました。