# AFURI BREWING / 阿夫利ブルーイング｜ブランドのWebデザイン参考

> ラーメン屋発のビールを、空と海の写真で売ってる。AFURI BREWING（阿夫利ブルーイング）の公式サイト兼ストアは、大山の空や海の写真と白い余白で商品棚を包み、缶の「阿夫利」ロゴを主役に立たせている。

- URL: https://afuribrewing.com/
- 解説ページ: https://katapick.com/sites/afuri-brewing
- カテゴリ: ブランド / 地域: 国内（JP）/ 業種: クラフトビール
- テイスト: 写真主体、ライト、余白、ブルー基調、グリッド
- 公開・リニューアル: 2026-07 / Katapick掲載: 2026-09-26 / 最終確認: 2026-09-26
- 再現難易度: 2/5（目安 20 時間）

## 編集部のひとこと（Bruno）
商品一覧のあとに、商品ストーリー、タップルーム、兄弟醸造家と“買う理由”を後から足していく順番なんだよね。しかもヘッダーは3項目とカートだけ。迷わせない。これはうまい。

## デザインの見どころ
- FVは山並みの青空に、青い背景で撮った缶とグラスを重ねる二重の青。味より先に、爽快さが届く
- 商品カードに香り・苦味・ボディの目盛りを並べる。味の違いを、説明を読む前に見比べられる
- 色違いの缶を横一列に並べるだけ。「阿夫利」のラベルそのものが、商品一覧の看板になっている

## 配色
- #36b3f6 Oyama Sky（ヒーローの空・メインの青）
- #82d3fe Glass Blue（商品写真の背景）
- #044b69 Mountain Shade（山並みの影・写真の締め色）
- #ffffff White（背景 / ヒーローの文字）
- #1d1d1d Ink（テキスト / 罫線）
- #dcb81c Yuzu Yellow（缶のラベルの差し色）

## フォント
- 和文見出し・本文・強調: MFW-YuGoPr6N（游ゴシック Pr6N B・M）（代替: Zen Kaku Gothic New）
- 英字ナビ・商品名・価格: Helvetica Now Text（代替: Inter）

## よくある質問
### AFURI BREWINGのサイトで使われているフォントは？
和文に Morisawa Fonts の游ゴシック Pr6N（B・M）、英字に Helvetica Now Text が使われています。無料で近づけるなら Zen Kaku Gothic New と Inter の組み合わせがおすすめです。

### AFURI BREWINGのサイトは何で作られている？
Shopify で構築されています。ブランドの写真や読み物と、商品一覧・カートを同じサイトの中に置き、ブランドサイトとオンラインストアを一体にしています。

### どんな業種の参考になる？
クラフトビールやワイナリー、コーヒーなどの飲料ブランド、飲食店が手がける物販ブランドなど、土地や作り手の物語と商品購入を1つのサイトで両立させたいD2Cブランドの参考になります。

---
セクション別の構成・モーションの実装方法・AI実装プロンプトを含む「再現用Markdown」は https://katapick.com/sites/afuri-brewing からダウンロードできます。
出典: Katapick（https://katapick.com）