光の残響 — LIGHT ECHO

想定した制作上の課題

実在イベントの改修事例ではなく、展示会サイトで起こりやすい情報設計と演出上の課題を想定しています。

• 作品世界の印象と、展示内容・参加作家・開催情報を同じページで伝える必要がある。
• 大きな動きや奥行き表現が、文章の読みやすさや通常のスクロール操作を妨げないようにする必要がある。
• 架空イベントであることが曖昧だと、実在する催しやチケット販売と誤認される可能性がある。

対応方針

• ヒーロー、コンセプト、3作品、作家、来場案内、チケットデモを6つの場面として縦の物語にまとめる。
• パララックス、Canvasの光粒、作品画像の奥行き表現を場面ごとに使い分け、スクロール量に応じて段階的に見せる。
• スマートフォンと動きを減らす設定では演出量を抑え、情報の読みやすさと操作しやすさを優先する。
• ページ全体とチケットUI付近に架空イベント表示を置き、購入・予約・決済・外部送信を行わないデモ仕様にする。

公開画面

制作範囲

• イベント設定と情報設計
• 日本語コピー作成
• 光・残像・波形を軸にしたアートディレクション
• Astro / CSS / JavaScriptによる1ページ実装
• Canvas 2Dによる光粒表現
• スクロール連動のパララックス演出
• PC・スマートフォン対応
• reduced-motionとキーボード操作への配慮
• 外部送信を行わないチケットUIデモ
• 自主制作デモ・架空イベント告知

確認した内容

• PCとスマートフォンで主要見出し、作品、作家、来場情報を読める。
• ページ内ナビゲーションとチケットデモを操作できる。
• スクロール中に横方向のはみ出しや操作を妨げるスクロール固定がない。
• 動きを減らす設定では主要な演出が抑制され、内容を読み進められる。
• チケット操作から購入・予約・決済・個人情報保存・外部送信が発生しない。
• 公開画面でコンソールエラーが発生しない。