ASURA WORKS. 作品一覧へ

ウェブサイト / 酒蔵・日本酒

藤兵衛酒造

待つ仕事を、
人の手から伝える蔵。

新潟県南魚沼の架空の酒蔵を題材にした、老舗蔵のウェブサイトです。蔵人の仕事から水と米の話へ進み、銘柄ごとの数値や蔵見学の条件まで、訪ねる前に知りたいことを15ページにまとめました。

作品を開く

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

造る人から、
酒の話をはじめる。

想定したのは、地元で晩酌を続ける層と、精米歩合や酒米を読んで選ぶ愛好家、雪国の観光に合わせて蔵を訪ねる旅行者です。最初の画面は商品ではなく、蒸米に手を入れる蔵人から始めました。

そこから歴史、水・米・人の三つの柱、銘柄、季節の酒、蔵見学へと続きます。酒類を扱うため、メニューとフッターに「お酒は20歳になってから。」と添えています。

縦書きの段を、
右から左へ組む。

生成りと薄い茶を地色にし、見出しは明朝体にしました。ヘッダーは画面の右端に縦書きのナビを並べた細いレールにし、上端のロゴの札は、読み進めると家形の印だけの落款に畳まれます。

本文は節ごとに、縦書きの見出し、縦書きの本文、写真の順で右から左へ並べ、和紙の地と余白を大きく取りました。水・米・人は朱の枠に一文字ずつ収めています。一部の写真には水紋が広がり、カーソルの動きで波紋が立ちます。最初の画面のコピーは文字行ごとの不透明な帯に載せ、ボタンは深い赤に絞りました。

銘柄ごとに、
数値を読み比べる。

銘柄一覧では五つの酒を、ラベルを描いた瓶の図と縦書きの説明、使用米・精米歩合・日本酒度・酸度・アルコール分・火入れ・希望小売価格の表で並べました。季節のお酒のページは、言葉を入れると本文を含むものだけが残ります。

蔵見学の予約と問い合わせは、入力内容の確認画面まで進めます。よくあるご質問は開閉式です。実際の予約・送信は行わないデモです。

小さな画面では、
人と手元を残す。

スマートフォンでも蔵人の顔と手元を画面いっぱいに残し、コピーの帯を画面の下へ寄せます。左上にロゴの札、右上に縦書きの「メニュー」の札を置き、開くと全ページが縦書きで並びます。本文は読みやすさを優先して横組みにし、見出しだけを縦書きで右に置きました。

制作情報

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