若者をターゲットにしたモバイルファーストのサイトを制作致しました。
Figma URL
担当・作業時間
企画（1時間）・デザイン（5時間）・グラフィック制作（10時間）・コーディング（40時間）
使用ソフト
Visual Studio Code / Adobe Photoshop / Figma
仕様
PC (1920px × 1080px)、モバイル( 390px × 844px )
サイトの目的
イベントの認知と新規チケット購入者の獲得
ターゲット
10-30代の映画ファン、夏休みの学生、イベント好きの若者
デザインについて
顧客層やエンターテイメント性を考慮し、イメージ優先でサイトを作成致しました。
夏休みに海であるイベントのため丸みのあるフォントを使用し、リラックス感やホリデー感を演出しつつもダルトーンの少し落ち着いた色味を使用することで映画ファンである20代後半～30代の顧客も意識致しました。また、競合イベントサイトではダークカラー、ブルーがメインカラーの配色が多かったため、オレンジをメインカラーにし差別化を図りました。
映画、海という要素からアメリカンテイストにし、映画・海というメインテーマと結びつくようなデザインにしています。
コーディングについて
若者に向けたイベントのため、モバイルファーストでコーディングを行いました。
ユーザビリティを考慮しハンバーガーメニューをヒーローイメージ後の上部に固定。チケット購入ページのジャンプ率を上げるためチケット購入ボタンを右に固定しました。
また、単調な印象を和らげるためモバイル版ではドットが降ってくるようなアニメーション、PC版では波の映像をバックグラウンドに配置し動きをつけました。
イメージ優先での制作のため、PC版のメニューはイメージマップを使用し遊びを付けました。