マルサトフルーツ

白と生成りに金を一色だけ
果物の色を主役にした産地直送サイト

マルサトフルーツのWebサイトは、果物そのものの色をいちばんの装飾として扱い、余白と明朝体で贈り物にふさわしい落ち着きをつくり出したオンラインショップです。背景に使う色をあえて絞り込み、金色と濃いチャコールという二色だけを差し色に据えることで、写真の赤や黄緑がそのまま画面の主役として立ち上がってきます。

ここでは産地直送の果物を扱うサイトのデザイン見本として、配色と余白の設計、ファーストビューからの視線誘導、ブランドを語る区画と商品を並べる区画の作り分け、買い物を支えるUIの細部までを順番に読み解いていきます。

果物の色を主役にするための配色と余白の設計

このサイトの配色は、色数を増やして華やかさを出す方向ではなく、背景を静かに整えて写真の色を引き立てる方向でまとめられています。まずは背景の使い分け、差し色の役割、書体の扱いという三つの観点から、その組み立てを見ていきます。

白と生成りを切り替えて区画を分ける背景

基調になっているのは白ですが、ページを下へたどると、ところどころで背景がわずかに黄みを帯びた生成りへ切り替わります。ランキングの並ぶ区画や読み物の区画がその生成りにあたり、色が変わること自体が区切りとして働いています。

枠線や区切り線を足さずに区画を分けられるため、画面には線が増えず、写真の輪郭がいちばん強いエッジとして残ります。りんごの赤、マスカットの黄緑、しぼりたてのジュースの橙が背景に邪魔されないのは、この引き算の結果です。

差し色は真鍮のような金と濃いチャコールの二色だけ

金色は、こだわりを紹介するカードの通し番号、カテゴリーに添えられた丸い矢印ボタン、順位を示す円形のバッジ、英字見出しの下に敷かれた帯といった小さな面に限って使われています。面積が小さいぶん、視線が拾うべき場所を静かに指し示す役目を担っています。

もう一色の濃いチャコールは、こだわりを説明するカードの地色や、商品カードの操作ボタン、ページ最下部の帯に置かれています。金は装飾と格の演出、チャコールは操作と情報という役割分担が最後まで崩れないため、初めて訪れた人でも押せる場所を判別しやすい画面になっています。

明朝体の見出しと英字に日本語を添えた二段ラベル

見出しはいずれも明朝体で、字間を大きく開けた英語の大見出しの下に、小さな日本語のラベルを添える二段構成が全編で繰り返されます。英字の下半分にだけ淡いベージュの帯が重ねられており、蛍光ペンで線を引いたような軽い強調が生まれています。

本文まわりも細い線の書体でそろえられ、行間はゆったりととられています。果物の写真が持つみずみずしい質感と、明朝体の細い縦画の組み合わせが、贈答の場面にも使われる品を扱う店らしい落ち着いたトーンを支えています。

ファーストビューから下へつなぐ視線誘導

最初の一画面では、言葉で説明するよりも写真で伝えることが優先されています。ここでは主役になる写真、常に手の届くヘッダー、その直下に置かれた更新情報という三つの要素が、どのように視線を運んでいるかを確認します。

画面いっぱいの写真と、次の一枚を示す小窓

ファーストビューには、枝についたままのりんごを大きく写した一枚が画面幅いっぱいに置かれています。写真の上に見出しやボタンを重ねていないため、色と背景のぼけ具合だけで、収穫を待つ果実の空気がそのまま伝わってきます。

右下には小さな長方形の画像が重ねられ、次に現れる写真の一部が先に見えるようになっています。中央下には短い横線が並び、何枚で切り替わるのかと現在の位置が把握できます。切り替わりをただ待たせるのではなく、続きがあることを視覚的に知らせている点が丁寧です。

ヘッダーに並ぶ細い線のアイコンと文字ラベル

ヘッダーは白い帯で、左端に円形のロゴマーク、細い縦線をはさんで店の姿勢を短く示す一文が置かれています。右端には、検索、お気に入り、カート、ログイン、メニューの入口が、線画のアイコンと小さな文字ラベルの組み合わせで横に並びます。

アイコンだけで済ませずに日本語のラベルを添えているため、記号の意味を推測する負担がありません。白い背景に黒に近い色のロゴとアイコンという組み合わせは、下にどのような写真が来ても読み取りやすさが保たれる作りです。

ファーストビューの直下に置かれた更新情報の二列

大きな写真のすぐ下には白い帯があり、左右二つの枠に日付と見出しのリンクが並びます。中央は点線の縦罫で区切られ、それぞれの枠には小さな四角い記号を添えたラベルが付いています。

更新情報をページの上のほうに置くことで、動いている店であることが早い段階で伝わります。ただし占める高さは低く抑えられているため、写真から下の区画へ視線が流れるのを妨げていません。

ブランドの理解から商品の閲覧へ進む情報設計

ページの並び順は、店の考え方を知ってもらってから商品を見せるという流れで組まれています。ここでは、こだわりを語る区画、楽しみ方を見せる区画、商品を並べる区画という三つのまとまりを順に見ていきます。

写真とカードを重ねたジグザグ配置のこだわり紹介

店のこだわりは、大きな写真と濃いチャコールのカードを少しずつ重ねながら、左右交互に配置する形で三つ紹介されています。カードの中身は、金色の通し番号、白い明朝体の見出し、短い説明文という三段構成でそろえられています。

カードの背後には、細い縦線を並べたストライプのパネルが敷かれています。写真とカードだけでは寂しくなりがちな余白へ、色を足さずに質感だけを加える工夫で、スクロールの途中で視線が休む場所にもなっています。

語られているのは、産地や市場へ自ら足を運び、その時々で状態の良いものを選ぶという姿勢、生産者と直接やり取りして背景ごと届けるという考え方、そして贈り物向けの品から見た目が整わない品まで、それぞれに合った形で扱うという方針です。左右交互のレイアウトによって、三つが同じ重みで並んでいることも伝わります。

金色の帯とサムネイルで見せる楽しみ方の区画

楽しみ方を紹介する区画では、ページの中で唯一、背景全体が真鍮のような金色で塗られています。その上に白いパネルが重ねられ、大きな写真、左右に置かれた送りボタン、四枚並んだサムネイル、見出しと短い説明文が縦に積まれています。

背景色を変えたことで、商品を並べる区画とブランドを語る区画の切り替わりがはっきりします。金色が見えるのは白いパネルの周囲だけなので、色は強いのに写真の主役性は損なわれていません。

そのまま食べる、贈り物として渡す、ジュースとして味わう、季節ごとの詰め合わせで移り変わりを感じるという楽しみ方が、写真を差し替えながら順に示されます。商品の説明より先に、届いた後の時間を見せる順番は、贈答の場面まで想像させる構成です。

カテゴリーと二枚のバナーで用意された次の一手

商品の区画に続いて、取り扱いの分類が写真付きのカードで示されます。それぞれの右側には金色の丸い矢印ボタンが添えられ、押せる場所であることが一目で分かります。分類が絞り込まれているため、迷う前に一覧へ進める作りです。

その下には、店を知るための入口と買い方を確かめるための入口が、横長のバナー二枚として左右に並びます。写真の上へ薄い膜を重ね、細い枠線で縁取り、英字と日本語の二段見出しを中央に置く形で、ページ上部の見出しと同じ様式が保たれています。

買い物と問い合わせを支えるUIの細部

ページの後半は、読み物の枠、疑問を解消する仕組み、回遊のための出口という順に続きます。細かな部品の作りにも、これまでと同じ静かなトーンが通っています。

読み物の枠と、点線で区切ったよくある質問

読み物の区画には、見出しと一覧を収める枠が用意され、記事が並ぶ場所として確保されています。背景が生成りに切り替わっているため、商品の区画とは性格の違う情報だと視覚的に区別できます。

よくある質問は、点線で区切られた行に「Q.」の記号と質問文を置き、右端にプラス記号を添えたアコーディオン形式です。届くまでの流れ、贈り物としての包み方、配送の指定、傷みがあったときの連絡、家庭用と贈答用の違いといった、注文の前に気になる点が並びます。

風景写真とロゴで締めるフッターの二層構造

フッターの手前には、ページ上部へ戻るための矢印付きリンクが淡い帯として置かれています。その下には、雪をいただいた山並みと新緑を写した横長の写真が画面幅いっぱいに広がり、産地の空気で締めくくる構成になっています。

写真の下は白地に円形のロゴを中央へ据え、主要ページへのテキストリンクが二段に並びます。さらに一段淡いグレーの帯へ、問い合わせや規約にあたるリンクが縦線区切りで置かれ、その下にSNSのアイコンが中央にそろえられています。最下部は濃いチャコールの細い帯で、著作権の表記だけが静かに載っています。

産地直送の果物を扱うサイトで参考にしたい見せ方

果物を産地から直接届けるサイトは、品種の名前や贈り方といった具体的な言葉で探されることが多く、写真と分類の見せ方が印象を大きく左右します。マルサトフルーツのサイトは、その要点を派手な装飾ではなく構成そのもので解いている点が参考になります。

たとえばシャインマスカットやナガノパープル、巨峰、クイーンルージュといった品種名に産地直送を掛け合わせて探す人もいれば、長野の果物の詰め合わせという贈り物目線で探す人もいます。探し方が具体的であるほど、写真の粒立ちや箱に詰めた状態、産地の景色といった手がかりが判断材料になります。

このサイトでは、収穫の場面をファーストビュー、詰めた状態を楽しみ方の区画、産地の景色をフッターの写真という形で、その手がかりをページの三か所へ配置しています。さらに、取り扱いが絞られているときほど、同じカードを並べ替えて役割を分ける手法が効きます。新着と順位という二つの切り口を用意すれば、同じ商品でも別の入口として示せるからです。