つくり方の全容。

初稿は iOS 天気アプリの作法をそのまま借りた構造で作りました。実天気を Open-Meteo から取得して、上部に大きな気温と「今夜から雨予報」のような処方ヘッドライン、その下に時刻別タイムライン、10日予報、処方カード(=服装/タープ/焚き火/星空/水温/鏡面/朝霧/夜の散策…)。動作はします。実天気が取れて、6つの表情の背景切替も動いて、「今この瞬間の青木湖」が見える。でも一見して「これじゃただの天気アプリだ」と感じた。処方カードはどの天気アプリでも言える内容で、キャンプ場のサイトである必要がない。処方止まりだと、サイトの固有性が消える。

出した指示これじゃただの天気アプリで、キャンプ場のサイトである必要がない。データ表示中心の処方カードは撤去して、サイトの固有性が出る形に作り直してほしい。

処方カード(=「服装」「タープ」のような実用情報) を捨てて、体験カードに置き換えました。「焚き火を囲む」「桟橋でコーヒーを飲む」「カヤックで湖を渡る」「霧の中を歩く」「蛍を待つ夜」「湖畔に椅子を出して、空を見る」。体験を主語にすると、ここでしかできないことが前に出てくる。天気データは下に小さく根拠として残す。「夕方雨予報。湖畔の屋根付きスペースで焚き火を」のように、データから体験への翻訳を一行で。これだけで、サイトのキャラクターが立ち上がりました。

出した指示処方カードを撤去して、体験カードに置き換えてください。「焚き火を囲む」「桟橋でコーヒー」のような体験を主役に、天気データは根拠として下に小さく置く。

iOS 天気アプリの作法をもうひとつ取り入れました。写真を画面の背景に固定して、その上にコンテンツを半透明のガラスカードに入れて重ねる。スクロールすると、写真は動かず、カードだけが流れていく。背景が朝霧→正午→夕焼け→星空と変わっても、ガラスカードは同じ落ち着いた表情を保ち続ける。写真は変数、カードは定数の構造ができたことで、1サイトで6つの表情を出しても破綻しないデザインになりました。背景写真は1枚だけ Unsplash から選び、時間帯ごとに色合いを加工して、月や星を上に重ねる仕組みです。

出した指示iOS 天気アプリのUIのように、背景に画像を固定表示して、その上にすりガラスのボックスでコンテンツを並べる形にしてほしい。シーンが変わっても写真は動かず、カードだけが流れていく構造に。

体験カードを縦に6枚並べた状態は、スクロール疲れが出ていました。横スクロールに変更して、時系列に並べ直し、各カードの下に時刻ラベル(=「今日 18:00」「明日 5:00」)、その時刻目盛の現在時刻にあたる位置に「いま」を示す琥珀色のマークを置きました。読み手は「いま→これから→今夜→明朝→明日」と自然に時間を移動する感覚で見られる。「いま、できる」体験には琥珀色の縁と「いま、できる」バッジで強調。スクロールバーは下に出していますが、初期位置は現在時刻に該当するカードを左端に置いています。カレンダー的な情報を時間軸で見せる汎用パターンとして、スケジュール表・イベント一覧・施設の予約状況など他業種にも応用が効きそうです。

出した指示「今夜・明朝、ここでできること」のセクションは縦に長すぎる。横スクロールに変更して、上か下に時刻の目盛を入れてほしい。目盛も一緒にスクロールし、現在時刻が目盛上にハイライト表示されるように。

雨表現はうまくいきませんでした。最初は均等な平行ストライプで表現 → 何かのバグみたいに見えるので却下。次に「カメラのレンズに付いた水滴」風に丸い水滴を画面に散らす実装 → シャボン玉とか別のものに見えるのでまた却下。3案目で正解にたどり着いた。個別の短い線が、それぞれバラバラの位置・速度・長さで落下するのが、本物の雨にいちばん近い見え方。実装は 110 本ほどの細かい雨筋を作って、それぞれの雨筋の長さ・透明度・落下速度・始まるタイミング・落ちる位置をすべてバラバラに設定し、斜め下に流れ続ける動きを与えるだけ。雨の動きを見せる必要があるときは、静止した装飾では絶対に伝わらない、という学びでした。

出した指示雨表現を作ってほしい。1案目の均等な平行ストライプは何かのバグに見えるので却下。2案目のカメラレンズに付いた水滴風はシャボン玉や汚れに見えるので却下。3案目として、個別の雨筋を 100 本以上作って、それぞれの位置・速度・長さをバラバラにして落下させる方式で。