制作内容 / 作業内容
木津川市加茂町で開催された「かもであそぼう！こども夏祭り！~TSUMUGU2~」のランディングページを制作しました。
地域の子どもたちに向けた夏祭りイベントとして、開催概要・イベント内容・アクセス・よくある質問・お問い合わせ情報を整理し、来場前に必要な情報が分かりやすく伝わる構成を意識しています。
単なる告知ページではなく、ファーストビューから「夏祭りのにぎやかさ」「子どもたちのワクワク感」「地域イベントの温かさ」が伝わるLPを目指しました。
主な実装内容
HTML / CSS / JavaScript による静的ランディングページ制作
レスポンシブ対応によるスマートフォン表示の最適化
GSAPを活用したスクロールアニメーション・表示演出
イベント内容を伝えるカード型セクションの実装
FAQを開閉できるアコーディオンUIとして実装
ファビコンの作成・設定
画像生成AIを活用したイベントイメージ画像の制作
GitHub Pagesでの公開・運用を想定した構成調整
全体的なデザイン
デザインコンセプトは「子どもが主役の、明るく楽しい地域の夏祭り」。レゴランド風。
夏祭りらしい赤・黄色・青を中心に、提灯や屋台、夜祭りの雰囲気を感じられるビジュアルを取り入れました。子ども向けイベントとして、堅くなりすぎず、親しみやすく、楽しさが直感的に伝わるデザインを意識しています。
また、地域イベントとしての信頼感も大切にし、開催日時・会場・主催情報・FAQなどは読みやすく整理。楽しさと実用性のバランスを取りながら、来場を検討する保護者にも安心して情報が届く構成にしました。
1. 配色
夏祭りらしい元気な色合いを基調にしています。
ベース: 明るい生成り・白系
情報を読みやすくし、全体に親しみやすさを出すための背景色。
メイン: 祭りらしい赤・黄色
イベントの活気、にぎやかさ、子ども向けの楽しさを表現。
サブ: 深い青・夜空系カラー
夜祭りや提灯の雰囲気を演出し、全体を引き締める役割。
アクセント: ポップな装飾色
紙吹雪や縁日のようなワクワク感を加えるために使用。
2. タイポグラフィ
見出しには、イベントらしい力強さと楽しさが伝わる太めのフォントを使用。
本文はスマートフォンでも読みやすいよう、可読性を重視したフォントサイズ・行間に調整しました。
特にイベントLPでは、ユーザーが短時間で情報を拾えることが重要なため、見出し・本文・ボタン・FAQの視認性を意識しています。
3. アートディレクション
ファーストビューでは、子どもたち・夏祭り・提灯・屋台のにぎやかさが一目で伝わるビジュアル構成にしました。
また、職業体験・暗闇イベント・グルメ屋台など、具体的なコンテンツが伝わるように画像を配置。画像生成AIも活用しながら、実際のイベント内容を想像しやすいビジュアルに調整しています。
設計
情報設計とユーザー導線
LP全体は、来場者が自然に情報を理解できる流れを意識して設計しました。
ファーストビューでイベントの雰囲気を伝え、続いてイベントの概要、楽しみ方、開催情報、アクセス、FAQ、お問い合わせへと進む構成にしています。
特に保護者や地域の方がスマートフォンで確認することを想定し、情報量が多くても迷わず読めるよう、セクションごとに役割を明確にしました。
UI/UXの工夫
3つのポイントセクションでは、「知って楽しむ」「遊んで楽しむ」「味わって楽しむ」という切り口で、イベント内容を直感的に理解できるようにしました。
FAQは、質問だけを先に一覧で見られるアコーディオン形式にし、必要な情報だけを開いて確認できるようにしています。
また、Instagramやお問い合わせ情報も整理し、来場前の不安を減らす導線を意識しました。
Codex活用プロセス
本制作では、AI開発支援ツール「Codex」を活用しながら、デザイン調整・HTML/CSS/JavaScriptの編集・画像配置・GitHubへの反映までを進めました。
Phase 1: 既存LPの把握とローカル環境での編集
まずGitHub上のLPを確認し、ローカル環境でプレビューを立ち上げながら編集を開始しました。
ファイル構成や既存のデザインルールを把握したうえで、必要な箇所だけを段階的に修正しています。
Phase 2: ファーストビューとスマホ表示の調整
スマートフォン表示でキャラクターやタイトルが見切れないよう、ファーストビューの配置を細かく調整しました。
見た目のインパクトを保ちながら、主要な情報が画面内に収まるように、余白・重なり順・画像サイズを確認しながら改善しています。
Phase 3: コンテンツ追加と情報整理
イベントの魅力を伝える「3つのポイント」セクション、FAQ、主催・お問い合わせ情報を追加しました。
単に情報を並べるのではなく、来場者が知りたい順番で読めるように整理し、ボタンやカード、アコーディオンUIを使って見やすく構成しています。
Phase 4: 画像生成AIとビジュアル調整
職業体験や屋台グルメなど、イベント内容が伝わるイメージ画像を追加しました。
一部画像は生成AIを活用し、LP全体の雰囲気に合うように調整しています。
Phase 5: GitHub Pagesへの反映
ローカル環境で表示確認を行ったうえで、変更内容をGitHubへコミット・プッシュしました。
公開後も修正しやすいよう、静的サイトとして管理しやすい構成を維持しています。
