架空の企業を想定した自主制作のコンセプトサイトです。受注案件ではなく、ここで紹介している企業は実在しません。
清水酒造 (SHIMIZU SAKAGURA)
創業156年の新潟の酒蔵のためのサイト。銘柄、蔵の歴史、蔵見学を紹介し、手書きのCSSによるデザインシステムで組んだ。
清水酒造は、明治元年に創業した新潟県長岡市の日本酒蔵だ。サイトには156年の歴史を載せつつ、銘柄を見て回り、蔵見学を申し込み、地元の水が酒をどう形づくるかを理解しやすくする必要があった。構築にはNext.jsを使った。
直面した
課題
日本酒をオンラインで売ると、手触りと歴史のある商品を無機質なウェブストアに押し込むことになりがちだ。その溝を埋めることが課題だった。
156年の酒造りの歴史、新潟の雪解け水、杜氏の仕事を、実際に読まれる物語にする。
吟醸や大吟醸といった酒の種類と料理との合わせ方を、銘柄を見ている人を圧倒せずに説明する。
週に数枠しかない蔵見学を蔵のスタッフが手作業で調整する前提で、申し込みの流れを設計する。
前提と
制約
このビルドが答えようとしたことと、意図的に止めた場所。
- ブリーフ
- 創業156年という設定の架空の酒蔵のための自主制作。ルールはユーティリティフレームワークを使わないことだけで、ページ上のすべての値が名前付きのトークンから来る。
- スコープ
- 静的書き出しの11ページで、CSS Modulesで組んだ自前のデザインシステムと、パレットに合わせて色調整した写真を使う。写真がデザインを支え、ページの重さのほとんども占めていて、それはモバイルのスコアに表れている。
- 未接続
- ショップは店構えだけで、カートは0のまま決済もない。蔵見学の予約も枠を押さえず、申し込みを送るだけだ。実在の蔵なら、どちらの地点でも自前のシステムをつなぐことになる。
導いた
解決策
余白をたっぷり取り、文字組みを丁寧にし、良い酒の澄んだ印象を思わせる大きな写真を使った、抑えたNext.jsのサイトを作った。デザインは静かなまま、各ページを蔵の物語と銘柄に任せている。
名前付きのトークン（kuro、sumi、beni、kome）で組んだ暗いパレットで、ユーティリティフレームワークは使っていない。書体はしっぽり明朝、Playfair Display、Noto Serif JP、DM Monoを組み合わせ、伝統的な書体と現代的な書体を同じページに並べている。
静的HTMLに書き出したNext.js App Routerのサイトで、スタイルはユーティリティフレームワークではなくCSS Modulesで書いている。銘柄、歴史、見学のページを含むすべてのページを事前生成し、スクロールでの表示はIntersectionObserverで実装した。
サイト
ウォークスルー
サイトは年齢確認から始まるので、訪問者が最初にするのは質問に答えることだ。その先のヒーローは、暗がりで肖像のように照らされた一本の瓶で、雪山も樽のモンタージュもない。
ホームには全カタログを載せず、季節限定と通年の2銘柄だけを並べる。それぞれ甘辛と濃淡を目盛りで示して税込価格まで書き、残りのラインナップは一つ先のリンクにある。
沿革は、156年、6代、12種、47都道府県という四つの数字に集約され、長い話はリンクの先にある。蔵の年月は資格のようなものなので、確かめやすいほうがいい。
見学の情報と申し込みフォームが一画面に収まり、左に場所、時間、料金、長岡駅からのバス、右に四つの入力欄がある。フォームは予約を確定せず、申し込みを送るだけだ。土曜に3枠しかない蔵が、手作業で返事をするからだ。
得られた
成果
サイトは手書きのCSS Modulesと、アートディレクションした大きな画像レイヤーを持つ静的書き出しだ。デスクトップのスコアにはCSSの軽さが、モバイルのスコアには画像の重さが表れていて、このビルドで直す価値が最もはっきり残っているのは画像だ。
、公開中のサイトを Lighthouse 13.0.3（各プリセット3回計測の中央値）で実測した値です。
最後の
振り返り
清水酒造では、伝統的な商品のサイトを抑制がどこまで支えられるかを試した。デザインは静かに保って酒の造り方に焦点を当て、CSSは手で書いて、すべての値を名前付きのトークンから取るようにした。ショップと見学フォームは、本物の店や予約システムの手前で止めている。実在の蔵なら自前のシステムをつなぐからだ。うまくいかなかったのは写真で、サイトの空気感を生む一方で、モバイル版を遅くしている。
こんなサイトを作りたいですか？
中小企業のためのウェブサイトを、日本語と英語で設計・制作しています。プロジェクトについてお聞かせください。24時間以内にご返信します。