ターゲット

ペルソナ

田中麗華 29歳 女性
出身：栃木県
居住地：東京都武蔵野市
物件：8畳1K一人暮らし
家族：独身・交際者有
職業：事務職
イベントに求めるもの：日々の疲れの癒し・彼氏との思い出作り

コロナ前は彼氏とよくデートに出かけていた。在宅勤務が増えたこともあり外出欲求が高まっており、フラストレーションが溜まっている。
一方、最近は仕事の責任が大きくなってきたことで疲れもたまっているので、あんまり騒がしい場所は避けたい。
年齢的にも今の彼氏との結婚を意識している。ちょっとムーディーな場所で、思い出を増やしたい。

素材提供元： ぱくたそ

カスタマージャーニー

ゴール

制作面

イベントの雰囲気を知ってもらい、参加の意識高揚に繋げる。
周辺商店街の情報を知ってもらい、イベント当日の利用・今後の認知に繋げる。

スキル面

デザイン：Web制作の一連の流れをシミュレーションする。Ps,Aiの使い方を学び、素材制作に応用する。
コーディング：BEM・SCSSとjQueryを導入し、使い方を学ぶ。

配色

写真を全面に押し出し、背景に溶け込ませるため、ベースは黒としました。
メインは暖色でありながら落ち着いた雰囲気を出すため、穏やかな橙としました。
アクセントはロウソクの炎をイメージさせる強い橙を選択し、ロゴ・地図・ボタンに差し入れました。

素材

イベントの雰囲気を伝えるため、写真をメインとし、彩度を上げ、背景に馴染むようPhotoshopで加工しました。
全体としては落ち着いた雰囲気を目指していましたが、併せてイベントとしての親しみやすさを演出するため、ロゴ・地図・ロウソクなどをIllustratorで作成し、配置しました。

素材提供元
写真：unsplash,自身が撮影した写真
自身が撮影した写真は、2019年の多摩川キャンドルナイト参加時のものです。個人情報が特定されないよう加工しています。
人物キャラクター：unDraw
地図中の建物・樹：イラストAC

カンプ

メインビジュアルは写真とロゴを全面に押し出す構成としました。
コンセプトセクションは写真にメッセージを添えるZ型とし、アクセスマップ以降は情報が伝わりやすいように直線的に配置しました。
あしらいは穏やかな雰囲気を目指し、線をメインとし、見出しにはスクリプト体（Stalemate）を背後に置きました。

コーディング

クラス命名規則をBEMにより整理し、SCSSを段階的に導入しました。
動きは雰囲気を乱さないようゆったりした速度で調整しました。
写真に意識が向くよう、jQueryでスクロールトリガーを実装しました。
レスポンシブに大苦戦しましたが、mixinを学んだことにより、作業後半の大幅な時間短縮に繋がりました。

制作経緯

前職の経験と自身のイベント体験などを組み合わせて課題設定しました。
初めてのオリジナルサイト制作で、作りながらターゲット分析や各デザインツール、SCSSなどを学んでいきました。
MENTA（メンターサービス）を活用し、カンプをレビューしていただいたり、コーディングなど質問しながら疑問点を一つ一つ解決し、制作しました。