出典：postevand.com ↗ 確認日 2026.10.30
Editor's note
編集部の視点
紙パックの水の環境負荷を数字と第三者の評価で示し、最後に「ネットで買う・店で買う・卸で扱う」の3つの入口に分けるデンマークの飲料メーカー。
デンマークの Postevand ApS が作る紙パック入りの水のサイト。ファーストビューは空に紙パックを掲げる写真に、画面幅いっぱいの「Postevand™」の文字と B Corp の認証マーク。スクロールすると「97% 植物由来の素材」「18% 低い気候への影響」の大きな数字と、その比較を行った第三者機関・準拠した ISO 規格の注記が続き、キャップ・紙・内側のフィルムの素材、売上の3%を気候対策に充てる約束、北デンマークの公共の水源の話へ進む。最後に「BUY ONLINE」「BUY IN-STORE」「BECOME A RESELLER」の3つの入口と、価格つきの商品5点。ヘッダーは SHOP・IMPACT・3% PLEDGE・WHOLESALE・BAG。
- 01 環境への配慮を「97%」「18%」の大きな数字で見せ、比較の相手・調査した機関・準拠した規格まで注記で添える
- 02 商品の部品（キャップ・紙・内側のフィルム）を1つずつ取り上げ、何でできているかを短く書く
- 03 ページの最後に「ネットで買う」「店で買う」「卸で扱う」の3つの入口を並べ、個人客と取引先を同じページで分ける
Conversion
集客の工夫
- 数字の根拠の明示 （あり） 比較の条件・調査機関・ISO 14040/14044 への準拠を注記
- 第三者の認証 （あり） ファーストビューに B Corp の認証マーク
- ECの導線 （あり） ヘッダーの SHOP と「Visit our shop」、価格つきの商品
- 卸・取引先の募集 （あり） ヘッダーの WHOLESALE と「BECOME A RESELLER」
- 電話番号の掲載 （あり） フッターに電話とメール
- メール登録 （あり） 毎月のニュースレターの登録欄
- 取扱店の案内 （なし） 「See stockists」のリンク先は確認時（2026-10-30）に404
- 言語の切り替え （なし） なし（英語のみ）
数字には、根拠を添える
スクロールすると 「97% 植物由来の素材」「18% 低い気候への影響」 の大きな数字が出てきます。そのすぐ下には、比べた相手が再生プラスチック100%のボトルであること、調査した第三者機関、準拠した ISO 14040・14044 の規格が注記されています。環境への配慮は言葉だけだと信じてもらいにくいため、数字と、その数字の出どころを一緒に置く作りです。
部品ごとに、何でできているかを書く
キャップ（製紙の副産物のパイン油が原料）、紙（FSC 認証の北欧の森などから）、内側の薄いプラスチックのフィルムと、商品の部品を1つずつ取り上げて短く説明しています。プラスチックを使っている部分も隠さずに書いています。ファーストビューには B Corp の認証マークがあり、売上の3%を気候対策に充てる約束にも1つのセクションを使っています。
最後に、個人客と取引先を分ける
ページの終わりには 「BUY ONLINE（ネットで買う）」「BUY IN-STORE（店で買う）」「BECOME A RESELLER（卸で扱う）」 の3つの入口が並び、そのあとに価格つきの商品が続きます。卸のページには、返信の目安（24時間以内）と電話の受付時間（月〜金の10時〜15時）が書かれています。一方で「See stockists（取扱店を見る）」のリンク先は確認時に404で、入口を置いたら先のページまで保つ必要があることも分かります。
チェック項目は 2026.10.30 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景・写真の上の文字
- #000000 見出し・本文・罫線
- #F0F1EF セクションの背景
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文（すべて） | Nimbus Sans D OT | Inter |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 12px / 400 | 1.40 | 12px / 400 |
| h3 | 56px / 400 | 1.20 | 20px / 400 |
| 本文（p） | 16px / 400 | 1.40 | 12px / 400 |
実測値（PC 1440px・SP 375px、2026.10.30 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー ロゴと、SHOP・IMPACT・3% PLEDGE・WHOLESALE・BAG。罫線で区切った枠のデザイン。上部に固定。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 空に紙パックを掲げる写真に、画面幅いっぱいの社名と B Corp の認証マーク。 ファーストビュー／全面写真＋コピー型
- 03 比較の結果 「97% 植物由来の素材」「18% 低い気候への影響」の大きな数字と、調査機関・規格の注記。 会社情報／スペック表型
- 04 素材の説明 キャップ・紙・内側のフィルムを1つずつ、何でできているかを短く。 機能・強み／左右交互型
- 05 3%の約束 「B Corp として、売上の3%を気候対策に」の大きな一文。 メッセージ／大きな一文型
- 06 水源 北デンマークの公共の水源から取水していること。 コンセプト／写真＋メッセージ型
- 07 3つの入口 ネットで買う・店で買う・卸で扱う。 一覧／カード並び型
- 08 商品 紙パック2種・炭酸水と、コラボ商品2点の計5点を、価格（DKK）つきで。 商品／グリッド型
- 09 フッター 購入・環境・会社・連絡先のリンク、電話とメール、ニュースレターの登録。 フッター／大きなフッター型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 環境や品質の取り組みは、大きな数字1つと「何と比べたか・誰が調べたか」の注記をセットで書く
- 02 商品の部品や原料を1つずつ取り上げ、それぞれ一文で説明する
- 03 ページの最後に「ネットで買う」「店で買う」「取引したい」の入口を並べ、個人客と取引先を分ける
- 04 取扱店の一覧など、入口から先のページが開けるかを定期的に確かめる
FAQ
よくある質問
Postevand のサイトで使われているフォントは？
見出しから本文まで Nimbus Sans D OT 1書体で組んでいます。有料書体なので、無料で近づけるなら Inter が候補です。
環境への配慮を、どう伝えれば信用されますか？
Postevand は「18% 低い」という数字のすぐ下に、比べた相手（再生プラスチック100%のボトル）・調査した機関・準拠した ISO 規格を注記しています。数字だけでなく、その数字がどこから来たかを書くことで、読む人が確かめられるようにしています。
どんな業種の参考になりますか？
食品・飲料・日用品のメーカーなど、個人向けの販売と、小売店や飲食店への卸の両方を行う製造業に向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はPostevandおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: siteInspire
