4作目として、架空の夏フェス特設サイトを制作しました。2024年春に大好評だった「ジゴロックフェス」の夏開催を想定し、コアなロックファンからファミリー層まで、幅広い層に向けて情報発信し、チケット販売を促進し、フェスの認知度向上を目指しました。スマートフォンでの閲覧に最適化することで、いつでもどこでも手軽に情報にアクセスできる環境を整えました。
URL
https://adjustacademy.com/0335/d240913-040335/site03/index.html
作成ページ
担当
企画・情報収集・ペルソナ設定（5時間）
ワイヤーフレーム作成（9時間）
画像収集（6時間）
デザインカンプ作成（9時間）
ロゴ作成（2時間）
タイムテーブ作成（4時間）
コーディング・jQuery（35時間）
使用ソフト
Googleスプレッドシート
Gemini
Figma
Adobe Firefly
Photoshop
Illustrator
Visual Studio Code
制作期間
2024年12月24日～1月10日
サイトの目的
情報発信、チケット購入サイトへ誘導、グッズ購入促進ブランドイメージ向上、SNS連携
ターゲット
コアなロックファン層、 ファミリー層、地元住民層
使用カラー
#0D0D0D
#CE1919
#FFD138
制作過程
サイトマップを作成し、サイトの構成を整理して進めました。また、共通するデザインをあらかじめ定めてコーディングを進めました。（Figma使用）
ECサイト「Verdena」とフェスサイト「SHASHICA ROCK 2025」を同時進行で制作したので、簡単な進行管理表をスプレッドシートで作成し作業を整理しました。上図は2025年1月7日時点のものです。1日ごとの作業に使える時間を先に3週間分書き出し、目標の完成日から逆算して作業予定を割り振りました。予定通りに作業が終われば緑色で完了を示し、遅れているところはピンク色で示し、その他の作業を早めに進めるようにしています。
ワイヤーフレームの時点でテキストはすべて挿入し、ディレクターからデザイナーに渡す想定で細かくサイト構成を考えました。
デザインについて
ロックフェスらしいクールな雰囲気と、家族で楽しめる温かい雰囲気の両方を表現するため、黒と赤を基調としつつ、黄色でアクセントを加えたデザインを採用しました。大分県の魅力を伝えるため、下層ページのトップ画像に別府の地獄めぐりの写真を使い、地域性を強調。土曜日は青色、日曜日は赤色と、曜日ごとの区別を明確にすることで、来場者がイベントの流れを把握しやすいよう工夫しました。
Illustrator未経験からスタートし、1ヶ月の学習期間で、デザインツールの基本操作を習得し、イベントのロゴやタイムテーブルなど、多岐にわたるデザイン制作に対応できるようになりました。特にタイムテーブルは、1時間ごとの線を引くことで、来場者がイベントの流れを把握しやすく、計画的に楽しめるよう設計しました。
コーディングについて
イベント当日までの高揚感を高めるため、ファーストビューにカウントダウンタイマーを導入し、秒読みが進むにつれて期待感を煽る演出を施しました。視覚的に楽しい黄色を基調とし、数字が刻々と変化する様子は、まるでカウントダウン番組のようなワクワク感を演出します。（jQueryプラグイン：flip）
また、ページ内では、スクロールに合わせてコンテンツがフェードインするアニメーション（jQueryプラグイン：inview）や、jQueryプラグイン「slick」を用いたスムーズなスライドショーを実装。視覚的な動きでユーザーの興味を引きつけながら、イベント情報を分かりやすく伝達します。
特に、地域住民の方々にも配慮し、タブレット端末での閲覧も快適に行えるよう、様々な画面サイズに対応するレスポンシブデザイン設計となっています。また、フォントの太さや文字間を調整することで、読者に伝えたい情報を効果的に強調し、視認性を高めています。
