AFURI BREWING / 阿夫利ブルーイング

1. 01

   ヘッダー

   左に山のアイコン、右に BEER & GOODS・ABOUT・CART〔0〕の3つだけ。SPでは山のアイコンとカートだけを残す。

2. 02

   ヒーロー

   山並みと青空の写真の上に、青い背景で撮った缶とグラスの写真を重ねる。左に「AFURIらしいやり方で、ビールをつくってみたいと思った。」、左下に大きな「AFURI BREWING」と「阿夫利ブルーイング」、右下に SCROLL DOWN。

3. 03

   ステートメント

   「バランスと、驚きを。」の見出しのもと、海の日の出や夕焼けの岩場とサーフボードの写真を大きく置き、右に詩のような短い文章を添える。

4. 04

   商品一覧

   YUZU MEXICAN LAGER など4商品を、グレー背景の缶写真、香り・苦味・ボディの目盛り、説明文、価格のカードで横に並べる。

5. 05

   商品ストーリー

   「#13｜太陽の下で、爽快な一杯」など各商品の記事を、山を背にした缶とグラスの写真カードで並べる。

6. 06

   すべてのビール

   色違いの缶を横一列に並べ、「私たちのつくったすべてのビール」と BEER & GOODS への導線を置く。

7. 07

   ABOUT

   タップルームのイラストと「阿夫利山のふもと、水、風、人が集まる、みんなの谷」、兄弟醸造家の写真と「自然を愛する、兄弟醸造家」を2カラムで紹介する。

8. 08

   クロージング・フッター

   山の写真に「まっすぐにつくろう。遊ぶようにつくろう。」を重ね、ナビとカート、缶の写真を置いたフッターで締める。

• キャプチャではステートメントの見出し周辺が空白になっており、スクロールで文字や写真がフェードインする演出と思われる。IntersectionObserver でクラスを付け、opacity と transform をトランジションさせると再現可能
• ヒーローは背景の風景写真と前面の商品写真の2層構成。スクロールで前面の写真だけ速度を変えるパララックスにすると同じ奥行きが出る
• Shopify のストアとして構築され、ヘッダーのカート数やBEER & GOODSの一覧がEC機能と直結している

スクロールのコマ撮り200–1400ms

検出された技術:Shopify

• 01ベースは白地と黒い細罫に絞り、色は写真と缶のラベルに任せる
• 02商品カードは缶写真・味の目盛り・説明・価格の順に揃え、4列で比較しやすくする
• 03ヘッダーのナビは3項目とカートだけにし、ブランドサイトでも購入の入口を常に見せる
• 04風景写真は空・海・山など同じ土地の自然に絞り、商品写真とは背景の青で色を合わせる

1---
2title: "AFURI BREWING / 阿夫利ブルーイング 再現用デザイン仕様書"
3source: https://afuribrewing.com/
4katapick: https://katapick.com/sites/afuri-brewing
5category: ブランド
6region: 国内 (JP)
7tags: [写真主体, ライト, 余白, ブルー基調, グリッド]
8launched: 2026-07
9verified: 2026-09-26
10measured: 2026-09-26 (Chromium 1440x900)
11difficulty: 2/5
12estimated_hours: 20
13generator: Katapick
14---
15 
16# AFURI BREWING / 阿夫利ブルーイング — 再現用デザイン仕様書
17 
18> ラーメン屋発のビールを、空と海の写真で売ってる。AFURI BREWING（阿夫利ブルーイング）の公式サイト兼ストアは、大山の空や海の写真と白い余白で商品棚を包み、缶の「阿夫利」ロゴを主役に立たせている。
19 
20このファイルは Katapick（https://katapick.com）が作成した、デザインを学び・参考にするための仕様書です。
21数値は推測ではなく、実ブラウザで描画した状態から計測した実測値です（2026-09-26 計測）。そのまま Claude Code / Cursor / v0 などのAIコーディングツールに渡せます。
22