ウェブサイト / 農園・産地直送
雪代農園
畑の風景から、
食卓へつながるサイト。
山形の架空の農園を題材にした、産地直送のウェブサイトです。畑の四季と育てる人の物語を入口に、旬の野菜や定期便を選ぶところまで、一つの流れとして設計しました。
作品を開く架空の事業者を題材にした自主制作です。
誰が、どんな土地で
育てているのか。
野菜の価格や品目だけでなく、農園の空気まで伝えることを目指しました。冒頭ではスクロールに合わせて映像と短い言葉が切り替わり、ふたりの就農と季節の移ろいをたどります。
その先に産地の風土、栽培のこだわり、商品を配置。農園を知ってから選べる順序にしています。
土の手触りと、
読みやすさを両立する。
深い緑と生成りを基調に、見出しには明朝体を使用。畑の大景、収穫の手元、野菜の接写を使い分け、土地と食べものの距離を近づけています。
写真を大きく見せる場所と、条件を落ち着いて読む場所に緩急をつけました。商品紹介では、内容例の写真とサイズ・価格を並べています。
選んだ内容と、
支払う金額が見える。
購入画面では、商品・数量・配送地域に応じて合計を更新。PCでは入力欄の右側に注文内容を置き、送料や追加料金も確認できる構成です。
定期便の休止や日付変更も試せます。実際の注文・決済・発送は行わないデモです。
小さな画面でも、
物語を読み進められる。
画面幅に合わせて写真と文章を縦に配置。スマートフォンでは映像とコピーを分け、文字の読みやすさを確保しています。
制作情報
- 種別
- 自主制作・架空サイト
- 制作範囲
- 構成・文章・デザイン・実装
- 使用技術
- HTML / CSS / JavaScript
Vite / GSAP - 対応画面
- PC・タブレット・スマートフォン