愛媛県愛南町で柑橘を育てるタカミ・ファームの公式サイトは、生成りの余白と明朝体の大きな見出しを軸に、産地の落ち着いた空気をそのまま画面へ移したようなデザインでまとまっています。果実を扱うサイトは色数が増えて賑やかになりがちですが、このサイトは背景を淡い生成りに保ち、オレンジを見出しのラベルとボタンに絞ることで、写真の中の実の色がいちばん鮮やかに見えるよう調整されています。
この記事では、ファーストビューの組み立てから品種紹介の横スクロール、旬を示す一覧表、問い合わせフォームまでを順に見ていきます。農産物や食品を扱うサイトを設計するときに参考にできる考え方として読んでいただければと思います。
配色とタイポグラフィが決めるサイト全体の印象
このサイトの印象を最も強く決めているのは、抑えた配色と書体の使い分けです。派手な装飾はほとんど使われておらず、色と文字の設計だけで農園らしい素朴さと丁寧さが表現されています。ここでは配色と書体を分けて確認していきます。
生成り・オレンジ・グリーンの三色で組み立てられた画面
ベースになっているのは、白よりわずかに温かみのある生成りです。その上に、柑橘の実を思わせるオレンジがアクセントとして置かれ、畑や山を思わせるやわらかなグリーンがセクションの背景として挟まれます。三色それぞれに役割が与えられているため、画面を下へ送っても色の意味がぶれません。
オレンジは英字の小さなラベル、ボタンの塗り、旬を示す表のセルといった限られた場所にだけ使われています。使う面積を絞っているぶん、押してほしい場所が自然に浮かび上がり、来訪者が次の操作を探して迷いにくくなっています。
明朝体の見出しとゴシック体の本文を役割で使い分ける
大きな見出しには明朝体が使われ、本文や説明文にはゴシック体が使われています。明朝体は縦画と横画の強弱があるため、和の食材や産地の話題と相性がよく、文字を大きくしても圧が強くなりすぎません。
さらに各セクションの上には、字間を広げた英字の小さな見出しが置かれています。「OUR COMMITMENT」「VARIETIES」「JOURNAL」といった短い英字が、その下の和文見出しとサイズでも色でも対比されるため、セクションの切り替わりが一目で分かります。和文だけで階層をつくるよりも情報が整理されて見える手法です。
ファーストビューが伝えている内容と視線の流れ
ファーストビューは、農園の立ち位置を短く伝えることと、次に進む先を選ばせることの二つを同時にこなす構成になっています。要素の並び順と余白の取り方に、明確な優先順位が設けられています。
ラベルから見出し、リード文、ボタンへと下りていく縦の設計
画面の左側には、上から順にオレンジの英字ラベル、明朝体の二行見出し、二行のリード文、そしてボタンが並びます。文字サイズが段階的に小さくなっていくため、視線が自然に上から下へ移動し、最後にボタンへ行き着きます。
右側には文字を置かず、ぼかした円形のグラデーションだけが広がっています。左に情報を寄せて右を空けるこの配置により、見出しの明朝体が読みやすく保たれ、画面全体には陽だまりのような温かさが残ります。
二種類のボタンで来訪者の目的を分ける
ボタンはオレンジで塗られたものと、線だけで縁取られたものの二つが並んでいます。塗られたほうは商品を選ぶ動きに、縁取りのほうは農園を知る動きにつながっており、優先したい行動が塗りの有無で表現されています。
その下には、産地や届け方を示す短いタグが小さな丸印付きで三つ並びます。長い説明を読まなくても、どこの何をどのように届ける農園なのかが一瞬で伝わる補助的な要素として機能しています。ヘッダーの右端で「BASEショップ」だけが塗りのボタンになっている点も、同じ考え方の延長にあります。
波形の区切りで次のセクションへつなぐ
ファーストビューの下端は直線ではなく、緑の丘を思わせるゆるやかな波形で区切られています。背景色が切り替わる境目に曲線を入れると、画面が硬く分断されず、スクロールがまだ続くことも同時に伝わります。
中央の下には細い縦線と小さな英字が添えられ、下へ読み進める操作が示されています。装飾を増やさずに動きを促す、控えめな案内になっています。
スクロールに沿って積み上げられる情報設計
ファーストビューの次からは、栽培への考え方、農園の成り立ち、品種、商品という順で情報が積み上がります。読み手が知りたくなる順番に沿って並んでいるため、途中で話が飛ぶ感覚がありません。
三枚のカードで栽培の姿勢を整理する
最初に現れるのは、中央揃えの見出しと三枚の白いカードで構成されたセクションです。各カードには角丸の淡い地色を敷いたアイコン、番号付きの英字ラベル、和文の小見出し、短い説明文という同じ順序で要素が並びます。
内容は、木を一本ずつ見て手を入れること、農薬や肥料に頼りきらず土と木がもともと持つ力を生かして無理のない栽培を続けること、収穫から選別と箱詰め、発送までを自分たちで行うことの三点です。番号が振られているため、育てるところから届けるところまでが一続きの流れとして読み取れます。
物語のセクションと作り手が見えるプロフィールカード
続くセクションは背景が淡いグリーンに変わり、左にテキスト、右に角丸の縦長写真という二分割になります。写真には柑橘が実る畑の列が写っており、文章で語られる内容と画面上で対応しています。
本文では、叔父の畑をきっかけに東京から愛南町へ移り、農業法人で学んだのち2025年に独立した経緯が語られます。文中の要点にはオレンジの色が差してあり、長い文章でも拾い読みができます。
その下には、丸く切り抜いた顔写真と氏名、屋号を収めた白いカードが置かれています。代表の大西武様の姿が見える形になっており、誰が育てているのかが伝わります。作り手の顔を小さなカードとして本文の流れに差し込む見せ方は、生産者のサイトで参考になる手法です。
商品と品種を見せるUIの工夫
このサイトで最も設計が作り込まれているのは、品種と商品を見せる部分です。扱う果実の種類が多く、それぞれ時期が違うという条件に対して、三つの異なる見せ方が用意されています。
横スクロールのカードと操作を予告する一文
品種の紹介は、横に並んだカードをドラッグやスワイプで送る形式になっています。見出しの右横には横方向へ動かせることを伝える短い案内と矢印が添えられており、初めて訪れた人でも操作に気づけます。横スクロールは見落とされやすい形式なので、この一文があるかどうかで使われ方が変わります。
カードの上半分は写真ですが、写真が用意されていない品種にはオレンジのグラデーションへ頭文字を丸で囲んだ図案が入ります。空白をつくらず並びの高さもそろうため、カルーセル全体の見た目が崩れません。下半分には品種名と読み、右上に旬の月の範囲、説明文、そして味わいの特徴を示す淡いオレンジのタグが並びます。
一年の旬を一枚で見渡せるカレンダー
品種の下には、縦に品種名、横に1月から12月を並べた表が置かれています。セルはオレンジの濃淡二段階で塗り分けられ、色が濃いところほど食べ頃であることが右下の凡例で示されます。文章で時期を並べるよりも、どの季節に何が届くのかがはるかに早く伝わります。
表には、いま表示している月の列を緑の枠線で縦に囲む仕組みも組み込まれています。訪れた時点を基準にして読めるため、自分に関係のある行を探す手間が減ります。複数の品種を一年を通して扱う農園にとって、応用しやすい表現です。
用途で選び分けられる商品カード
商品を紹介するセクションでは、四枚のカードが横一列に並びます。各カードには上部に写真、その上に用途を示す短いラベル、下に商品名と内容量、説明文、そしてオレンジのボタンという順序で要素が置かれています。
並んでいるのは河内晩柑の中玉や大玉、ご家庭用といった区分で、内容量も4kgと9kgのように明記されています。用途と量という二つの軸がどのカードでも同じ位置にあるため、並べて見比べる動作がしやすくなっています。写真が入るカードには実際の果実を写した画像が使われており、届く状態を想像しやすい構成です。
回遊と信頼を支える下部の構成
商品の下には、日々の様子を伝える領域と、連絡手段をまとめた領域が続きます。買う前に知りたくなる情報を後段へ配置することで、上部の流れを止めない構成になっています。
日々の様子を伝える写真と農園だより
Instagramの投稿は正方形の写真を横に並べた領域として置かれ、その下にアカウント名を添えた枠線のボタンがあります。畑の風景や犬たちの写真が並ぶため、農園の日常が構えることなく伝わります。
続く農園だよりでは、三枚のカードに写真、日付とカテゴリー、記事タイトル、抜粋が収められています。栽培記録や収穫レポートといった分類が日付の横に置かれているので、読みたい種類の記事を選びやすくなっています。
濃色に反転する問い合わせセクション
問い合わせの手前で、背景が濃いブラウンへ大きく反転します。ここでも境目には波形が使われ、色が切り替わる違和感が和らげられています。明るい生成りが続いたあとに濃色が来ることで、入力に集中させたい領域だと直感的に分かります。
フォームの項目名は英字の大文字で表示され、必須の項目にはオレンジの記号が添えられます。氏名とメールアドレスは横二列、電話番号から下は一列という配置で、入力量に応じて幅が変えられています。問い合わせの種別はプルダウンで選ぶ形式になっており、用件が最初に整理されます。個人情報の扱いに同意するチェックボックスとリンクが送信ボタンの直前に置かれている点も、順序として自然です。
フッターに整理された情報
フッターは問い合わせと同じ濃いブラウンで続き、左にロゴと屋号、所在地、短いタグラインが置かれます。右側は三つの見出しでリンクが分類され、農園や商品のページ、法令に関する表記や質問集、そして各サービスへの入口がそれぞれまとめられています。
分類の見出しをオレンジの英字にしているため、濃い背景でもリンクの塊が判別しやすくなっています。項目数が多いフッターでも情報が探しやすい、素直な整理の仕方です。
柑橘の通販サイトを考えるときに参考になる視点
ここからは、甘夏や河内晩柑をはじめとする柑橘を通販で探す読者の視点に立って、サイトに求められる情報を一般的な観点から整理します。作り手の側がページを用意するときの参考にもなります。
品種と時期が分かることの価値
柑橘は品種ごとに収穫の時期が異なり、同じ農園でも季節によって届くものが変わります。そのため、品種の一覧と時期の情報が結び付いた形で示されていると、読者は自分が食べたい時期に何を選べるのかを判断できます。タカミ・ファームのサイトが品種カードと一覧表を組み合わせているのは、この判断を助ける構成だといえます。
味わいの傾向を短い言葉のタグで添えておくことも有効です。酸味が強いのか、皮がむきやすいのか、加工に向くのかといった観点は、文章を読み込まなくても比較できる形にしておくと選びやすくなります。
作り手と産地が見えること
通販では実物を手に取れないため、誰がどこで育てたのかという情報が判断材料になります。産地の名前、畑の写真、栽培に対する考え方、そして作り手の顔が並んでいると、読者は届くものの背景を想像できます。
外観にばらつきのあるご家庭用の区分を用意する場合も、どのような状態のものなのかを言葉と写真で具体的に示しておくと、受け取ったときの印象の差が小さくなります。返品や交換の条件を別ページで明記しておくことも、同じく安心につながります。
まとめ：タカミ・ファームのサイトから学べること
タカミ・ファームの公式サイトは、生成りを基調にオレンジとグリーンを役割ごとに配し、明朝体の見出しで産地の落ち着きを表現したデザインです。ファーストビューで農園の立ち位置と進む先を示し、栽培への姿勢、成り立ち、品種、商品という順に情報を積み上げる構成が、読み手の疑問の順番とよく合っています。
横スクロールのカード、旬を示す一覧表、用途で分かれた商品カードという三つの見せ方は、品種が多く時期の分かれる農産物を扱うサイトにとって具体的な手本になります。濃色へ反転する問い合わせの領域や、分類の効いたフッターまで含めて、装飾に頼らず情報の整理で分かりやすさをつくっている点が一貫しています。
愛媛県愛南町の畑でどのように柑橘が育てられ、どのように届けられているのかは、実際の画面を見るとより深く伝わります。愛媛県産のレモンをはじめ季節の柑橘を通販で探せる公式サイトを見る
