夏祭りイベントLP制作（架空案件）

何を作ったか

河川敷で開かれる夏祭りの特設ページです。いちばんの見せ場は最初の1画面。会場を見下ろしたイラストの地図に、屋台横丁・ステージ・観覧芝生・駅・駐車場などのピンを重ね、「どこに何があるか」がひと目で分かる会場マップにしました。

右上のスイッチで昼と夜の会場を切り替えられ、夜は川の上に花火が打ち上がります。その下のセクションは見せ方の違う2本を仕上げました（下で紹介しています）。

同じ構図の昼の絵と夜の絵を用意して、スイッチでふわっと切り替えます。夜は提灯と街の明かりが灯り、花火が上がります。

ピンは絵に描き込まず、HTMLで重ねています。文字がにじまず、場所や名前は後から直せます。押すと各セクションへ移動します。
花火はブラウザ上で描いて打ち上げています。画像を点滅させる作りではなく、菊・牡丹・柳など数種類がランダムに開きます。「地図は2Dの絵でも、花火はリアルな光で」と、イラスト寄りの表現と見比べて決めました。
動きを減らす設定の方には、花火は開いた形の1枚絵で表示します。

最初の1画面を先に作る。会場の俯瞰イラストを昼・夜の同じ構図で2枚用意し、ピンはHTMLで重ねる（画像に焼き込まないので、場所や名前を後から直せる）。花火はブラウザ上で描いて打ち上げる。
その下のセクションを3案で作る。日時・出店者・タイムテーブル・アクセス・よくある質問・締めの原稿は共通にして、見せ方だけを変える。
見比べて2本に絞る。方向がはっきり違い、どちらも良かった2案を残す。
会場マップ型：絵と写真を内容で使い分ける。出店者10店は料理のイラストを添えたカードに、タイムテーブルは開会式から抽選会まで6場面を人物入りの写真に。すべてイラストだとくどくなるため。
夜の演出型：料理写真を夜の屋台の雰囲気で見せる。出店者のセクションには、のれんが上へ抜けると屋台料理が現れる演出を加えた。
iPhone実機で確認して手直し。花火を動かしても重くならないことを実機で確かめ、スマホのスクロール量や文字の大きさを調整。

最初の1画面と原稿は共通で、その下の見せ方が違う2本です。明るく情報が分かりやすい「会場マップ型」と、夜の雰囲気で見せる「夜の演出型」。方向が違いすぎて1本に混ぜると両方の良さが消えるため、2本とも残しました。左が会場マップ型の出店者まわり、右が夜の演出型の出店者セクションです。

2本とも実物のLPを見られます。スクロールして動きも確かめてみてください。