出典：willo.farm ↗ 確認日 2026.10.31
Editor's note
編集部の視点
「どこで買えるか」をお知らせの帯・ヘッダー・ファーストビューの3か所で案内し、認証と数字で育て方の違いを伝えるアリゾナの垂直農園。
フェニックスの垂直農園 Willo Indoor Farms のサイト。最上部の黒い帯で「アリゾナ州のすべての Whole Foods Market で販売中」と伝え、ヘッダーには緑の「FIND US」、ファーストビューには「Arizona Grown · USDA Certified Organic」の小見出しと「The Purest Produce on the Planet」の見出し、「FIND A STORE」「OUR PRODUCE」の2つのボタンが並ぶ。続いて特長を流れる帯で見せ、主力のベビーリーフ4品、スコッツデールの1店舗だけで売るハーブ、水の使用量や面積あたりの収量の数字、お客様の声3件、取扱店の案内と続く。ヘッダーには表示を暗くする切り替えもある。
- 01 「どこで買えるか」を、お知らせの帯・ヘッダー・ファーストビュー・最後の案内の4か所で繰り返す
- 02 有機の認証と「農薬ゼロ」「洗わずに食べられる」を最初の画面で伝え、ほかの野菜との違いを示す
- 03 水の使用量99%減、面積あたり250倍の収量など、育て方の違いを数字で見せる
Conversion
集客の工夫
- 販売店への導線 （あり） 帯・ヘッダー・ファーストビュー・終盤の4か所
- お知らせの帯 （あり） 最上部に取扱店の広がりを告知
- 認証の表示 （あり） 「USDA Certified Organic」をファーストビューに
- 数字で示す強み （あり） 水の使用量99%減・面積あたり250倍
- お客様の声 （あり） 星5つと名前つきの3件
- 限定商品の案内 （あり） ハーブはスコッツデールの1店舗だけで販売
- レシピ （あり） ナビに Recipes
- 電話番号の掲載 （なし） トップにはなし（Contact Us ページへ）
「どこで買えるか」を、何度も案内する
Willo のサイトには商品を買うカートがありません。そのかわり、最上部の黒い帯で 「アリゾナ州のすべての Whole Foods Market で販売中」 と伝え、ヘッダーには緑の「FIND US」、ファーストビューには「FIND A STORE」、最後にも「FIND A STORE NEAR YOU」を置いています。店頭で売る商品にとって、サイトの役目は店へ案内することだと割り切った作りです。
違いを、最初の画面で言い切る
見出しの上の小さな文字は 「Arizona Grown · USDA Certified Organic」。地元産で有機の認証を受けていることを、見出しより先に伝えています。見出しの下では、フェニックスの垂直農園で育てていること、農薬を使わないこと、洗わずに食べられることを一文にまとめています。
育て方の違いを、数字で見せる
技術の紹介では、水の使用量を99%減らしていること、面積あたり250倍の量を育てられること、土を使わないこと、容器に再生プラスチックを使っていることを並べています。そのあとに星5つのお客様の声を3件置き、数字で示した違いを、食べた人の言葉で裏づけています。
チェック項目は 2026.10.31 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #FFFFFF 背景・ボタン
- #F9F7F2 淡い面
- #3D6142 「FIND US」などのボタン（深緑）
- #111111 お知らせの帯・見出し
- #4A4A4A 本文
- #E8A800 評価の星
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し | Halant | Halant |
| 本文・ナビ・ボタン | Figtree | Figtree |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 86px / 500 | 1.05 | 45px / 500 |
| h2 | 55px / 500 | 1.10 | 32px / 500 |
| h3 | 24px / 500 | 1.20 | 19px / 500 |
| 本文（p） | 14px / 700 | 1.60 | 12px / 700 |
実測値（PC 1440px・SP 375px、2026.10.31 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー 上に取扱店を知らせる黒い帯。ロゴ、商品・取扱店・レシピ・会社紹介のナビ、表示の切り替え、緑の「取扱店」ボタン。スクロールしても残る。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 料理の動画に、産地と認証の小見出し、大きな見出し、フェニックスの垂直農園で育てていることの一文、「店を探す」「商品を見る」の2ボタン。 ファーストビュー／全面動画＋コピー型
- 03 特長の帯 非遺伝子組み換えの種、農薬ゼロ、有機認証、洗わずに食べられる、など8つの言葉を流れる帯で。 信頼／ロゴ帯型
- 04 主力の4品 スプリングミックス、ベビーケール、ベビーチンゲンサイ、ベビー水菜。それぞれ味の説明と栄養素のタグ。 商品／グリッド型
- 05 新しいハーブ 5種類のハーブを、スコッツデールの1店舗だけで販売していることを店の住所つきで。 コンセプト／写真＋メッセージ型
- 06 育て方の技術 水の使用量99%減、面積あたり250倍、土を使わない、再生プラスチックの容器の4点。 機能・強み／左右交互型
- 07 お客様の声 星5つと名前つきの3件。 推薦／利用者の声型
- 08 取扱店の案内 アリゾナ州のすべての Whole Foods Market の青果売り場にあることと、「近くの店を探す」のボタン。 行動喚起／ボタン帯型
- 09 フッター 商品・会社紹介・レシピ・問い合わせのリンク、SNS。 フッター／ナビ＋会社情報型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 店頭で売る商品は、「どこで買えるか」をサイトの最初と最後の両方で案内する
- 02 認証や栽培方法など、他の商品との違いはファーストビューの小見出しで言い切る
- 03 技術や手間の違いは、形容詞ではなく数字で示す
- 04 1店舗だけで売る新商品は、店の名前と住所まで書いて足を運んでもらう
FAQ
よくある質問
Willo のサイトで使われているフォントは？
見出しに Halant、本文・ナビ・ボタンに Figtree を使っています。どちらも Google Fonts で無料で使えます。
直販をしていない生産者に、サイトは必要ですか？
スーパーや小売店で買える商品なら、「どの店で買えるか」を案内するだけでも十分に役に立ちます。Willo は購入ボタンのかわりに取扱店の案内を何度も置き、サイトを見た人が店で商品を探せるようにしています。
どんな業種の参考になりますか？
農園や食品メーカー、酒蔵など、商品をスーパーや取扱店で売っている生産者に向きます。認証や栽培方法の違いを伝えたい事業者の参考になります。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はWilloおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
