映画館で食べる美味しいポップコーン(架空商品)のランディングページを制作しました。
サイトURL
https://adjustacademy.com/d230200/d230228-120692/three/
担当と所要時間
ワイヤーフレーム（5時間）/ デザイン（18時間）/ コーディング（45時間）
使用ツールと言語
Figma / HTML / CSS / JavaScript(jQuery)
ターゲット
家で映画を観る習慣のある10代～40代の男女
企業情報とコンセプト
映画館で食べる美味しいポップコーンがコンビニで200円ほどで購入できるというコンセプトの商品なので、映画をモチーフにしたあしらいを多く含むポップでキャッチ―なページにする
目標設定
- 商品の売り上げ増加
- 商品の認知拡大
- ポップコーンの美味しさを伝え、味のイメージができるようにする
デザインについて
昨今、スマートフォンでサイトを閲覧する人が増加傾向にある事から、モバイルファーストのデザインとしています。10代〜40代の男女がターゲットなので、全体的にはキャッチーさを意識しつつもレトロな雰囲気も残しました。
また、赤や黄色等の誘目性の高い配色なため、色の役割を決めたり少し落ち着いた色味を加える等デザインに統一感とメリハリをもたせる事を意識しました。例えば、キャンペーン情報部分はボタンも含めて赤色で統一させ、開発者のこだわりが記載されている部分は少し落ち着いた配色にしました。
ページ全体を通して、映画のモチーフやポップコーンの要素を散りばめており、商品のコンセプトが最大限伝わるよう、インパクトがあって見ていて楽しいランディングページになるように工夫しました。
コーディングについて
適切なマークアップやレスポンシブ対応はもちろんの事、あしらいに動きをつけるために今回は初めてCSSアニメーションに挑戦しました。ポップコーンが動き出す時間を個々に指定する等細かな部分の動きにもこだわり、不規則性を持たせることで、サイト閲覧者を最後まで飽きさせない工夫をしました。