山本さんちのお米は、岐阜県中津川市蛭川で米づくりを続ける山本ライスセンターが運営する、産地直送のお米のサイトです。画面を開くと山あいの風景写真が大きく広がり、どこで、誰が育てたお米なのかが文章を読む前に伝わってきます。
ここでは農産物を扱うサイトのデザイン見本として、写真の選び方、配色、見出しの組み方、そして商品にたどり着くまでの導線を順番に読み解きます。素材そのものの魅力で選ばれたい業種にとって、参考にできる工夫が多く詰まった構成です。
先に結論をお伝えすると、このサイトの見どころは、産地の空気を写真で伝えながら、買う前に知りたいことを縦一列の流れで解いていく設計にあります。画面を上から順にたどりながら、具体的に見ていきます。
産地の風景を主役に据えたファーストビュー
ファーストビューには、蛭川の山並みと里の風景を写した写真が画面いっぱいに敷かれています。商品写真ではなく風景から入るこの選択が、このサイトの性格をそのまま表しています。ここでは第一印象のつくり方を、文字組みと導線の二つに分けて見ていきます。
明朝体と広い字間でブランド名を印象づける
画面の中央よりやや左に置かれた「山本さんちのお米」は、線の細い明朝体で字間を大きく空けて組まれています。情報量の多い写真の上でも、白い文字が細く伸びることで、うるさくならずに名前だけが静かに立ち上がってきます。
その上には短い罫線で挟んだ小さな文字で産地が示され、名前を見せる前に場所を伝える順番になっています。下には農家直送であることを示す一文が続き、三段の情報が上から下へ無理なく読めるように積まれています。画面の下端には縦の線とスクロールを促す表示があり、この先に続きがあることも伝えています。
最初の画面から商品への入口を用意する
ヘッダーは背景を敷かずに写真へ直接重ねられ、左にロゴ、右寄りにこだわり、山本ライスセンターとは、商品一覧、業者様へ、よくある質問、お知らせという項目が横一列に並びます。右端には封筒のアイコンを添えた緑の丸いボタンが置かれ、問い合わせだけが色と形で区別されています。
ファーストビューの左下には山吹色のボタンが置かれ、最初の画面から商品を見に行けるようになっています。写真を眺めて気持ちが動いた瞬間に、次の一手が手元にある配置です。ファーストビューの下端は白い波形の曲線で切り取られ、次のセクションへ視線がなめらかにつながります。
クリーム色と緑、山吹色でまとめた配色設計
このサイトが使う色はとても少なく、生成りに近いクリーム色を土台に、深い緑と山吹色をアクセントとして重ねる構成です。稲と田んぼ、実った穂という題材から自然に導かれた色づかいで、写真の色とぶつかりません。ここでは背景とボタンの二つの側面から、配色が担っている役割を整理します。
背景色の切り替えでセクションの境目をつくる
セクションごとに、白、淡いクリーム、少し濃いベージュと背景色が入れ替わります。罫線や枠で仕切るのではなく面の色で章立てを示すため、画面が静かなまま話題の切り替わりが分かります。
商品を紹介する場面では、米粒と稲穂を写した明るい写真を背景に敷き、そこへカードを重ねています。背景が単色から写真へ変わることで、ここが主役の売り場であることが視覚的に伝わります。
ボタンの色と形で押せる場所を伝える
ボタンは深い緑と山吹色の二系統に絞られ、どちらも淡い背景の上でよく目立ちます。角丸の長方形に白い文字と矢印を添えた形が繰り返し使われるため、初めて訪れた人でも押せる場所を迷いません。
商品カードの中だけは白い小さな丸ボタンが使われ、暗く落とした写真の上でコントラストを確保しています。同じ役割のものは同じ形に、背景が変わるときは明度を反転させるという判断が、ページ全体で一貫しています。
知る、選ぶ、信じるをつなぐ情報設計
トップページは縦一列の読み物として設計されており、上から順に読むだけで判断の材料がそろいます。選ばれる理由を先に示し、商品を見せ、そのあとでつくり手を紹介する順番は、産地直送という売り方とよく合っています。ここでは中盤の三つのブロックを順に見ていきます。
4つのカードで選ばれる理由を先に示す
ストーリーのセクションでは、稲と作業風景を切り抜いた小さな写真を見出しの左右に添え、続けて4枚のカードが横並びで置かれています。カードの上辺には細い山吹色の線が引かれ、丸いアイコンチップ、太字の見出し、数行の説明という順で情報が積まれています。
- 中間の流通を挟まず、農家から直接届けるという考え方
- 澄んだ水と空気、昼夜の寒暖差に恵まれた蛭川の環境
- 育てた人と管理の仕方が分かる、生産者の見える体制
- 収穫したあとに10〜15℃を保つ温度管理
芽、水滴、握手、温度計といったアイコンが内容を先に伝えるため、文章を読み込む前に全体像がつかめます。4枚をすべて同じ高さ、同じ余白でそろえたことで、どれか一つが強く見えることもありません。カードの下にはこだわりのページへ進むボタンが一つだけ置かれ、もっと知りたい人だけが深く進める形になっています。
品種を2つに絞った商品セクション
商品のセクションでは、コシヒカリとミルキークイーンの2枚のカードが左右に大きく並びます。どちらも暗い階調で撮られた写真の上に白い文字を重ね、小さく産地を示してから品種名、続けて味わいを説明する二行が置かれる構成です。
湯気の立つ茶碗と、ざるにのせたおにぎりという被写体の違いが、そのまま二つの品種の使い分けを想像させます。ミルキークイーンの側には、もちもちとした食感と、冷めてからも感じられる甘みが短く添えられ、お弁当やおにぎりに向くことが伝わります。選択肢を二つに絞ったうえで、その下に商品一覧へ進むボタンを一つだけ置く判断も、迷いを生まない工夫だといえます。
つくり手と土地を見せるセクション
生産者のセクションは、左に明朝体で三行に折り返した見出し、右に木の質感が印象的な施設の写真という左右の対比で組まれています。文字と写真の間に十分な余白が取られており、読む速度がここでゆるやかになります。
本文では、標高700メートルの山あいに田んぼが広がること、朝晩の寒暖差と清らかな水が一粒ずつを育てることが短くまとめられています。会社紹介のページへ進むと、代表の山本 英史様の言葉として、先代から受け継いだ田んぼを守りながら、管理から収穫、乾燥、精米、出荷までを自分たちの手で行っていることが語られています。誰が育てたのかを明示する情報設計は、産地直送を掲げるサイトの信頼づくりとして参考になります。
読み手ごとに入口を分けたセクション設計
ページの後半は、目的の違う訪問者をそれぞれの入口へ振り分ける構成になっています。家庭で食べるために選びたい人、仕入れを検討している人、その前に疑問を解きたい人が、同じ画面から別の道へ進めるようになっています。
更新情報とインスタグラムで日々の様子を見せる
お知らせは、左に日付、その隣に楕円形へ切り抜いたサムネイル、右に見出しと一行の説明という横並びのリストで、細い区切り線が一件ずつを分けています。写真を丸みのある形で抜くことで、ページ全体のやわらかい印象が保たれています。
その下にはインスタグラムの投稿が8枚のグリッドで埋め込まれ、田植えや田んぼでの作業風景が並びます。整えられた写真だけでなく、日々の記録がそのまま見えることが、つくり手の存在をより身近に感じさせます。写真の色みが本編の自然な色調とそろっているため、埋め込みでありながら浮いて見えません。
業者様への案内とよくある質問を左右に並べたタイル
もっと知りたい方へという見出しの下では、画面幅を左右に二分割した写真タイルが並びます。左は飲食店や小売店に向けた案内、右はよくある質問で、それぞれ白いベールを重ねて文字を読みやすくし、細い枠線のボタンを中央に置いています。
背景写真は実った田と水を張った田で、表情の違う二枚を左右に置くことでタイルの区別がついています。よくある質問のページは、商品のこと、注文と支払い、お届け、保管と品質という切り口で整理されており、購入前に浮かぶ疑問へ順番に答える構成です。
締めくくりの帯とフッター
ページの最後は、濃いチャコールグレーの帯で全体が引き締められます。白い明朝体のコピーと、産地から直接届けることを伝える一文が中央に置かれ、その下に商品を見るための丸いボタンと、会員登録へ進む丸いボタンが並びます。
フッターは白地に戻り、稲穂をかたどったロゴとサイト名、その下に短い紹介文、右側に事業者名と所在地、大きな文字の連絡先が置かれています。最下部は深い緑の帯で各ページへのリンクをまとめ、サイトマップやプライバシーポリシー、特定商取引法に基づく表記もここから辿れます。明るい本編、暗い締め、明るいフッターという明度の波が、長い1ページの終わりを分かりやすくしています。
ミルキークイーンを選ぶときに見ておきたい情報
ここからはデザインから少し離れて、このサイトで扱われている品種の話に触れます。銘柄でお米を選ぶ人にとって、どの情報が画面のどこにあるかが分かると、サイトの構成が意図している順番の意味も見えてきます。
品種の個性と精米の選び方
ミルキークイーンは、粘りの強さと、冷めても硬くなりにくい食感で知られる低アミロース米です。このサイトでも、コシヒカリと比べたときのもちもちとした感触や、冷めてから感じられる甘みが商品の説明として書かれています。炊いてから時間を置いて食べる場面が多いご家庭では、選びやすい品種だといえます。
よくある質問のページでは、精米と玄米のどちらでも注文できることが説明されています。仕入れを検討する事業者に向けた案内でも白米と玄米の両方が挙げられており、食べ方や保管の都合に合わせて選べます。用意されている容量は5kg、10kg、30kgと幅があるため、家庭の消費のペースや使い方に合わせて選ぶことができます。
買う前に確かめておきたいこと
お米は保管の仕方で味わいが変わるため、届いたあとの扱いも気になるところです。このサイトでは、収穫したお米を10〜15℃の低温倉庫で一貫して保管していることが繰り返し説明されており、よくある質問には家庭での保管の考え方や、食べきる目安についての回答も置かれています。
飲食店や小売店として仕入れたい場合は、業者様へのページに、少ない量からの取引や定期的な納品の相談ができることが書かれています。栽培できる量には限りがあるという但し書きも添えられており、扱える範囲を先に伝える姿勢が読み取れます。こうした注意書きを隠さずに置くことも、信頼を積み上げる情報設計の一部です。
まとめ｜産地の空気を伝えるサイトデザインの見本として
山本さんちのお米は、風景写真と明朝体の見出し、そしてクリーム色を土台にした静かな配色で、産地の空気をそのまま画面へ持ち込んだサイトです。装飾を足すのではなく、写真と余白と色数の少なさで世界観をつくる方法は、素材の魅力で選ばれたい業種のサイトに広く応用できます。
情報設計の面でも、選ばれる理由、商品、つくり手、疑問への回答という順番で並べ、各セクションの終わりにボタンを一つずつ置くことで、どこまで読んだ人でも次の行動へ移れるようになっています。産地直送という売り方を、デザインと導線の両面から支えている点が参考になります。
岐阜県中津川市蛭川の田んぼで育てられたお米を農家から直接届ける仕組みや、品種ごとの違いは、実際の画面で確かめるとより深く伝わります。ミルキークイーンを10kgの新米で味わいたい方は、山本さんちのお米の公式サイトをご覧ください。
