ASURA WORKS. 作品一覧へ

ウェブサイト / 農園・産地直送

雪代農園

畑の風景から、
食卓へつながるサイト。

山形の架空の農園を題材にした、産地直送のウェブサイトです。畑の四季と育てる人の物語を入口に、旬の野菜や定期便を選ぶところまで、一つの流れとして設計しました。

作品を開く

架空の事業者を題材にした自主制作です。

誰が、どんな土地で
育てているのか。

野菜の価格や品目だけでなく、農園の空気まで伝えることを目指しました。冒頭ではスクロールに合わせて映像と短い言葉が切り替わり、ふたりの就農と季節の移ろいをたどります。

その先に産地の風土、栽培のこだわり、商品を配置。農園を知ってから選べる順序にしています。

土の手触りと、
読みやすさを両立する。

深い緑と生成りを基調に、見出しには明朝体を使用。畑の大景、収穫の手元、野菜の接写を使い分け、土地と食べものの距離を近づけています。

写真を大きく見せる場所と、条件を落ち着いて読む場所に緩急をつけました。商品紹介では、内容例の写真とサイズ・価格を並べています。

選んだ内容と、
支払う金額が見える。

購入画面では、商品・数量・配送地域に応じて合計を更新。PCでは入力欄の右側に注文内容を置き、送料や追加料金も確認できる構成です。

定期便の休止や日付変更も試せます。実際の注文・決済・発送は行わないデモです。

小さな画面でも、
物語を読み進められる。

画面幅に合わせて写真と文章を縦に配置。スマートフォンでは映像とコピーを分け、文字の読みやすさを確保しています。

制作情報

種別
自主制作・架空サイト
制作範囲
構成・文章・デザイン・実装
使用技術
HTML / CSS / JavaScript
Vite / GSAP
対応画面
PC・タブレット・スマートフォン